[{"data":1,"prerenderedAt":1445},["ShallowReactive",2],{"page:\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Ffont-display-optional-vs-swap":3,"all-docs-nav":901},{"id":4,"title":5,"body":6,"breadcrumb":876,"dateModified":886,"datePublished":886,"description":887,"extension":888,"faq":889,"meta":894,"navigation":895,"path":896,"seo":897,"slug":12,"stem":898,"type":899,"__hash__":900},"content\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Ffont-display-optional-vs-swap\u002Findex.md","font-display: optional vs swap",{"type":7,"value":8,"toc":855},"minimark",[9,13,34,43,48,64,68,74,95,236,252,256,262,278,281,285,290,293,386,390,396,484,487,618,630,634,637,690,696,700,710,714,766,770,784,788,793,796,800,803,807,810,814,817,821],[10,11,5],"h1",{"id":12},"font-display-optional-vs-swap",[14,15,16,17,21,22,25,26,29,30,33],"p",{},"The ",[18,19,20],"code",{},"font-display"," descriptor in ",[18,23,24],{},"@font-face"," decides what the browser shows while a web font downloads and what happens if the download is slow. For static sites the choice is almost always between two values. ",[18,27,28],{},"swap"," shows fallback text at once and switches to the web font whenever it arrives. ",[18,31,32],{},"optional"," gives the font a very short window and, if it misses, keeps the fallback for that page view. The first guarantees brand typography and risks layout shift; the second guarantees stability and sometimes shows the fallback.",[14,35,36,37,42],{},"This guide explains the timeline behind each value, measures both on a real template, and gives a rule for picking per font. It is part of ",[38,39,41],"a",{"href":40},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002F","Font Loading Strategies for Static Sites",".",[44,45,47],"h2",{"id":46},"prerequisites","Prerequisites",[49,50,51,58,61],"ul",{},[52,53,54,55,57],"li",{},"Self-hosted fonts with ",[18,56,24],{}," rules you control.",[52,59,60],{},"A way to test on a slow connection: DevTools throttling or WebPageTest.",[52,62,63],{},"Field data on CLS and LCP, ideally split by first and repeat visits.",[44,65,67],{"id":66},"the-three-periods","The Three Periods",[14,69,70,71,73],{},"Every ",[18,72,20],{}," value is a combination of three periods that start when the browser first needs the font:",[49,75,76,83,89],{},[52,77,78,82],{},[79,80,81],"strong",{},"Block period."," Text using the font is drawn invisibly. If the font arrives, it is used straight away.",[52,84,85,88],{},[79,86,87],{},"Swap period."," Text is drawn in the fallback. If the font arrives, the text is re-rendered in it.",[52,90,91,94],{},[79,92,93],{},"Failure period."," The fallback is used for the rest of the page's life, even if the font arrives later.",[96,97,98,232],"figure",{},[99,100,107,108,107,112,107,116,107,123],"svg",{"viewBox":101,"role":102,"ariaLabelledBy":103,"xmlns":106},"0 0 760 270","img",[104,105],"fdo-tl-title","fdo-tl-desc","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","\n  ",[109,110,111],"title",{"id":104},"Block, swap and failure periods for each font-display value",[113,114,115],"desc",{"id":105},"Timelines from 0 to 3 seconds. block has a 3 second invisible period then infinite swap. swap has a tiny block period of about 0 milliseconds then infinite swap. fallback has 100 milliseconds of block, 3 seconds of swap, then failure. optional has 100 milliseconds of block and then goes straight to failure.",[117,118],"rect",{"x":119,"y":119,"width":120,"height":121,"fill":122},"0","760","270","#ffffff",[124,125,127,128,127,136,127,142,127,150,127,156,127,161,127,165,127,169,127,174,127,178,127,181,127,187,127,190,127,193,127,196,127,202,127,206,127,210,127,215,127,219,127,222,127,226,127,229,107],"g",{"style":126},"font-family:system-ui, sans-serif;font-size:12px","\n    ",[129,130,135],"text",{"x":131,"y":132,"fill":133,"style":134},"380","28","#1f2937","font-size:16px;font-weight:700;text-anchor:middle","What the reader sees while the font loads",[129,137,141],{"x":138,"y":139,"fill":133,"style":140},"71","72","font-weight:700","block",[117,143],{"x":144,"y":145,"width":146,"height":147,"fill":148,"style":149},"110","58","360","20","#556071","fill-opacity:0.55",[117,151],{"x":152,"y":145,"width":153,"height":147,"fill":154,"style":155},"470","250","#166a9e","fill-opacity:0.3",[129,157,28],{"x":158,"y":159,"fill":133,"style":160},"100","112","font-weight:700;text-anchor:end",[117,162],{"x":144,"y":163,"width":164,"height":147,"fill":148,"style":149},"98","4",[117,166],{"x":167,"y":163,"width":168,"height":147,"fill":154,"style":155},"114","606",[129,170,173],{"x":171,"y":172,"fill":133,"style":140},"57","152","fallback",[117,175],{"x":144,"y":176,"width":177,"height":147,"fill":148,"style":149},"138","12",[117,179],{"x":180,"y":176,"width":146,"height":147,"fill":154,"style":155},"122",[117,182],{"x":183,"y":176,"width":184,"height":147,"fill":185,"style":186},"482","238","#d83b41","fill-opacity:0.25",[129,188,32],{"x":158,"y":189,"fill":133,"style":160},"192",[117,191],{"x":144,"y":192,"width":177,"height":147,"fill":148,"style":149},"178",[117,194],{"x":180,"y":192,"width":195,"height":147,"fill":185,"style":186},"598",[197,198],"line",{"x1":144,"y1":199,"x2":200,"y2":199,"stroke":148,"style":201},"210","720","stroke-width:1px",[129,203,119],{"x":144,"y":204,"fill":148,"style":205},"226","font-size:11px",[129,207,209],{"x":152,"y":204,"fill":148,"style":208},"font-size:11px;text-anchor:middle","3 s",[117,211],{"x":212,"y":213,"width":214,"height":177,"fill":148,"style":149},"130","240","14",[129,216,218],{"x":217,"y":153,"fill":133,"style":205},"150","invisible text",[117,220],{"x":221,"y":213,"width":214,"height":177,"fill":154,"style":155},"280",[129,223,225],{"x":224,"y":153,"fill":133,"style":205},"300","fallback, will swap",[117,227],{"x":228,"y":213,"width":214,"height":177,"fill":185,"style":186},"450",[129,230,231],{"x":152,"y":153,"fill":133,"style":205},"fallback, stays for this view",[233,234,235],"figcaption",{},"optional is the only value with no swap period at all, which is why it can never cause a font-swap shift.",[14,237,238,240,241,244,245,247,248,240,250,42],{},[18,239,141],{}," and ",[18,242,243],{},"auto"," hide text for up to three seconds, which delays LCP whenever text is the largest element, so they are rarely the right choice for body text. ",[18,246,173],{}," sits between the two main options. In practice the decision is between ",[18,249,28],{},[18,251,32],{},[44,253,255],{"id":254},"what-swap-costs","What swap Costs",[14,257,258,259,261],{},"With ",[18,260,28],{},", text is visible immediately, so LCP is never held back by the font. The cost is the re-render when the font arrives. If the fallback is a plain system font, paragraphs rewrap and change height, and every element below moves. On a long article the swap can shift the whole viewport.",[14,263,264,265,269,270,274,275,277],{},"Two things reduce that cost. Preloading the font makes it arrive earlier, often before first paint on fast connections, so there is nothing to swap; see ",[38,266,268],{"href":267},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Fpreloading-fonts-without-double-downloads\u002F","Preloading Fonts Without Double Downloads",". A metric-matched fallback makes the swap move nothing even when it does happen; see ",[38,271,273],{"href":272},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Fmetric-matched-fallback-fonts-with-size-adjust\u002F","Metric-Matched Fallback Fonts with size-adjust",". With both in place, ",[18,276,28],{}," shows the brand font almost every time and costs almost no CLS.",[14,279,280],{},"A third, less visible cost is the text re-render itself. When the font swaps, the browser repaints every text node that uses it. A later, larger paint of the same text element can also become a new LCP candidate, so a very late swap on a text-heavy hero can nudge LCP later rather than earlier, even though the reader could already read the text.",[44,282,284],{"id":283},"what-optional-costs","What optional Costs",[14,286,258,287,289],{},[18,288,32],{},", the browser gives the font about 100 milliseconds from when it is first needed. If the file is already in the memory or HTTP cache, or a preload has delivered it, the font is used from the first paint. If not, the page renders in the fallback and stays that way; the download continues in the background and the font is cached for the next page.",[14,291,292],{},"The cost is typographic: on a first visit over a slow connection, readers see the fallback. On a multi-page static site that usually means one page, because the second page view hits the cache. The benefit is that font loading can never shift layout and never delays text.",[96,294,295,383],{},[99,296,107,301,107,304,107,307,107,310],{"viewBox":297,"role":102,"ariaLabelledBy":298,"xmlns":106},"0 0 760 260",[299,300],"fdo-res-title","fdo-res-desc",[109,302,303],{"id":299},"Field results for swap and optional on the same template",[113,305,306],{"id":300},"A comparison table drawn as bars. With swap and a plain fallback, CLS p75 is 0.11 and the web font is shown on 100 percent of views. With swap plus a matched fallback, CLS is 0.02 and the font is shown on 100 percent. With optional plus preload, CLS is 0.00 and the font is shown on 94 percent of first views and 100 percent of later views.",[117,308],{"x":119,"y":119,"width":120,"height":309,"fill":122},"260",[124,311,127,312,127,315,127,320,127,325,127,329,127,333,127,338,127,342,127,349,127,353,127,356,127,360,127,363,127,365,127,369,127,372,127,376,127,379,107],{"style":126},[129,313,314],{"x":131,"y":132,"fill":133,"style":134},"Docs template, four weeks per variant, mobile p75",[129,316,319],{"x":317,"y":318,"fill":133,"style":160},"230","60","variant",[129,321,324],{"x":322,"y":318,"fill":133,"style":323},"330","font-weight:700;text-anchor:middle","CLS",[129,326,328],{"x":327,"y":318,"fill":133,"style":323},"530","web font shown (first view)",[197,330],{"x1":331,"y1":332,"x2":200,"y2":332,"stroke":148,"style":201},"40","70",[129,334,337],{"x":317,"y":335,"fill":133,"style":336},"102","text-anchor:end","swap, plain fallback",[129,339,341],{"x":322,"y":335,"fill":340,"style":323},"#b32b30","0.11",[117,343],{"x":344,"y":345,"width":346,"height":347,"fill":154,"style":348},"420","90","220","16","fill-opacity:0.45",[129,350,352],{"x":351,"y":335,"fill":133},"650","100%",[129,354,355],{"x":317,"y":172,"fill":133,"style":336},"swap, matched fallback",[129,357,359],{"x":322,"y":172,"fill":358,"style":323},"#3f6410","0.02",[117,361],{"x":344,"y":362,"width":346,"height":347,"fill":154,"style":348},"140",[129,364,352],{"x":351,"y":172,"fill":133},[129,366,368],{"x":317,"y":367,"fill":133,"style":336},"202","optional + preload",[129,370,371],{"x":322,"y":367,"fill":358,"style":323},"0.00",[117,373],{"x":344,"y":374,"width":375,"height":347,"fill":154,"style":348},"190","207",[129,377,378],{"x":351,"y":367,"fill":133},"94%",[129,380,382],{"x":131,"y":381,"fill":148,"style":208},"244","LCP p75 was 1.7 s in all three variants; later views showed the font 100% of the time with optional",[233,384,385],{},"With a preload, optional missed the window on 6% of first views; every later view used the web font.",[44,387,389],{"id":388},"choosing-per-font","Choosing Per Font",[14,391,392,393,395],{},"The decision does not have to be site-wide. Apply it per ",[18,394,24],{}," rule according to what the font does:",[397,398,399,415],"table",{},[400,401,402],"thead",{},[403,404,405,409,412],"tr",{},[406,407,408],"th",{},"Font role",[406,410,411],{},"Recommended value",[406,413,414],{},"Why",[416,417,418,435,447,459,471],"tbody",{},[403,419,420,424,432],{},[421,422,423],"td",{},"Body text",[421,425,426,428,429,431],{},[18,427,32],{}," with a preload, or ",[18,430,28],{}," with a matched fallback",[421,433,434],{},"Most text on the page; stability matters most",[403,436,437,440,444],{},[421,438,439],{},"Headings and hero text",[421,441,442,431],{},[18,443,28],{},[421,445,446],{},"Brand-critical, often the LCP element",[403,448,449,452,456],{},[421,450,451],{},"Code blocks",[421,453,454],{},[18,455,32],{},[421,457,458],{},"System monospace fonts are good; shifts in code are distracting",[403,460,461,464,468],{},[421,462,463],{},"Rarely used weights and italics",[421,465,466],{},[18,467,28],{},[421,469,470],{},"Small areas, small shifts, not worth a preload",[403,472,473,476,481],{},[421,474,475],{},"Icon fonts",[421,477,478,480],{},[18,479,141],{},", or replace with inline SVG",[421,482,483],{},"Fallback glyphs are meaningless",[14,485,486],{},"If you are unsure, walk each face through three questions: is it an icon font, is it used for text above the fold on most pages, and can you give it a metric-matched fallback? The answers lead to one value.",[96,488,489,615],{},[99,490,107,495,107,498,107,501,107,504,107,520],{"viewBox":491,"role":102,"ariaLabelledBy":492,"xmlns":106},"0 0 760 290",[493,494],"fdo-dec-title","fdo-dec-desc",[109,496,497],{"id":493},"Choosing a font-display value for one font face",[113,499,500],{"id":494},"A decision flow. If the face is an icon font, use block or replace it with SVG. Otherwise, if it renders above the fold on most pages and has a metric-matched fallback, use swap. If it renders above the fold without a matched fallback, use optional with a preload. If it is not above the fold, use swap without a preload.",[117,502],{"x":119,"y":119,"width":120,"height":503,"fill":122},"290",[505,506,127,507,107],"defs",{},[508,509,516],"marker",{"id":510,"viewBox":511,"refX":512,"refY":513,"markerWidth":514,"markerHeight":514,"orient":515},"fdo-dec-arrow","0 0 10 10","9","5","7","auto-start-reverse",[517,518],"path",{"d":519,"fill":148},"M0,0 L10,5 L0,10 z",[124,521,127,522,127,526,127,533,127,538,127,543,127,547,127,552,127,556,127,559,127,562,127,564,127,568,127,570,127,573,127,577,127,581,127,584,127,586,127,589,127,592,127,596,127,599,127,603,127,605,127,607,127,609,127,612,107],{"style":126},[129,523,525],{"x":131,"y":524,"fill":133,"style":134},"26","One face, three questions",[117,527],{"x":331,"y":528,"width":529,"height":530,"rx":531,"fill":154,"style":532,"stroke":154},"46","200","44","8","fill-opacity:0.1",[129,534,537],{"x":362,"y":535,"fill":133,"style":536},"73","text-anchor:middle","Icon font?",[197,539],{"x1":213,"y1":540,"x2":541,"y2":540,"stroke":148,"style":542},"68","500","stroke-width:1.5px;marker-end:url(#fdo-dec-arrow)",[129,544,546],{"x":545,"y":318,"fill":148,"style":536},"370","yes",[117,548],{"x":549,"y":528,"width":199,"height":530,"rx":531,"fill":550,"style":551,"stroke":550},"510","#6a4c93","fill-opacity:0.12",[129,553,555],{"x":554,"y":535,"fill":550,"style":323},"615","block, or inline SVG",[197,557],{"x1":362,"y1":345,"x2":362,"y2":558,"stroke":148,"style":542},"126",[129,560,561],{"x":217,"y":159,"fill":148},"no",[117,563],{"x":331,"y":212,"width":529,"height":530,"rx":531,"fill":154,"style":532,"stroke":154},[129,565,567],{"x":362,"y":566,"fill":133,"style":536},"157","Above the fold?",[197,569],{"x1":213,"y1":172,"x2":224,"y2":172,"stroke":148,"style":542},[129,571,546],{"x":121,"y":572,"fill":148,"style":536},"144",[117,574],{"x":575,"y":212,"width":576,"height":530,"rx":531,"fill":154,"style":532,"stroke":154},"310","180",[129,578,580],{"x":579,"y":566,"fill":133,"style":536},"400","Matched fallback?",[197,582],{"x1":583,"y1":172,"x2":541,"y2":172,"stroke":148,"style":542},"490",[117,585],{"x":549,"y":212,"width":199,"height":530,"rx":531,"fill":358,"style":551,"stroke":358},[129,587,588],{"x":554,"y":566,"fill":358,"style":323},"yes: swap",[197,590],{"x1":579,"y1":591,"x2":579,"y2":199,"stroke":148,"style":542},"174",[129,593,561],{"x":594,"y":595,"fill":148},"410","196",[117,597],{"x":575,"y":598,"width":594,"height":530,"rx":531,"fill":358,"style":551,"stroke":358},"214",[129,600,368],{"x":601,"y":602,"fill":358,"style":323},"515","241",[197,604],{"x1":362,"y1":591,"x2":362,"y2":199,"stroke":148,"style":542},[129,606,561],{"x":217,"y":595,"fill":148},[117,608],{"x":331,"y":598,"width":529,"height":530,"rx":531,"fill":358,"style":551,"stroke":358},[129,610,611],{"x":362,"y":602,"fill":358,"style":323},"swap, no preload",[129,613,614],{"x":131,"y":221,"fill":148,"style":208},"repeat for each weight and style declared in @font-face",[233,616,617],{},"Most sites end up with one optional face for body text and swap for the rest.",[14,619,620,621,623,624,626,627,629],{},"A useful default for documentation sites is ",[18,622,32],{}," plus a preload for the body regular weight, and ",[18,625,28],{}," with metric-matched fallbacks for everything else. Marketing sites with strong brand typography often prefer ",[18,628,28],{}," everywhere with matched fallbacks.",[44,631,633],{"id":632},"setting-it-in-common-generators","Setting It in Common Generators",[14,635,636],{},"The descriptor lives in your CSS, so the change is the same everywhere, but font helpers sometimes set it for you:",[49,638,639,655,671,680],{},[52,640,641,644,645,648,649,651,652,654],{},[79,642,643],{},"Astro"," with ",[18,646,647],{},"@fontsource"," packages: the imported CSS uses ",[18,650,28],{},". Override by writing your own ",[18,653,24],{}," rules, or by using the variable font package and a small wrapper stylesheet.",[52,656,657,660,661,664,665,668,669,42],{},[79,658,659],{},"Next.js"," ",[18,662,663],{},"next\u002Ffont",": pass ",[18,666,667],{},"display: 'optional'"," in the loader options; the default is ",[18,670,28],{},[52,672,673,676,677,679],{},[79,674,675],{},"Hugo and Eleventy",": edit the ",[18,678,24],{}," rules in your stylesheet directly.",[52,681,682,685,686,689],{},[79,683,684],{},"Google Fonts CSS API",": the ",[18,687,688],{},"&display="," query parameter sets it, but self-hosting is better for performance anyway.",[14,691,692,693,695],{},"After the change, check the built CSS: search the output directory for ",[18,694,20],{}," and confirm every face has the value you intended.",[44,697,699],{"id":698},"measuring-the-effect","Measuring the Effect",[14,701,702,703,706,707,709],{},"Compare variants in the field, not only in the lab. Lighthouse runs on a clean profile and, with its simulated throttling, often misses the font window that real readers hit. Log which font actually rendered with ",[18,704,705],{},"document.fonts.check('16px Inter')"," at the load event, send it with your web-vitals beacon, and split CLS and \"font shown\" by first and repeat views. That split is what shows whether ",[18,708,32],{}," is costing brand typography on the pages that matter.",[44,711,713],{"id":712},"pitfalls-rollback","Pitfalls & Rollback",[49,715,716,722,728,740,751,760],{},[52,717,718,721],{},[79,719,720],{},"optional without a preload."," The font rarely arrives within 100 ms on a first view; many readers will never see it on landing pages.",[52,723,724,727],{},[79,725,726],{},"Assuming optional fixes all font CLS."," It fixes swap shifts, but a late-loading stylesheet that sets fonts can still move text.",[52,729,730,733,734,736,737,739],{},[79,731,732],{},"Mixing values for one family."," A regular weight with ",[18,735,32],{}," and a bold with ",[18,738,28],{}," can mix fonts in a paragraph; keep weights used together consistent.",[52,741,742,745,746,240,748,750],{},[79,743,744],{},"Lighthouse \"ensure text remains visible\" audit."," It passes for both ",[18,747,28],{},[18,749,32],{},"; do not treat it as a CLS check.",[52,752,753,756,757,759],{},[79,754,755],{},"Service workers that precache fonts."," A precached font is always ready within the window, so ",[18,758,32],{}," behaves like instant loading after the first visit — good, but it hides the first-view cost from anyone testing on their own browser.",[52,761,762,765],{},[79,763,764],{},"Rollback:"," change the descriptor back; no other code depends on it.",[44,767,769],{"id":768},"conclusion","Conclusion",[14,771,772,774,775,777,778,780,781,783],{},[18,773,28],{}," always ends with the web font and can shift layout; ",[18,776,32],{}," never shifts and occasionally keeps the fallback for one page view. Pair ",[18,779,28],{}," with metric-matched fallbacks, pair ",[18,782,32],{}," with a preload, and choose per font: stability for body and code text, brand fidelity for headings. Measure in the field, split by first and repeat views, before settling on one.",[44,785,787],{"id":786},"faq","FAQ",[789,790,792],"h3",{"id":791},"what-is-the-difference-between-font-display-optional-and-swap","What is the difference between font-display optional and swap?",[14,794,795],{},"With swap the browser shows fallback text immediately and switches to the web font whenever it arrives, however late. With optional the browser waits about 100 milliseconds; if the font is not ready by then, the page uses the fallback for the rest of that page view and the font is only cached for later.",[789,797,799],{"id":798},"does-font-display-optional-mean-my-font-is-never-shown","Does font-display optional mean my font is never shown?",[14,801,802],{},"No. On a first visit over a slow connection the fallback may be used, but the font still downloads into the cache, so later page views and repeat visits render it immediately. On fast connections with a preload it usually arrives within the window on the first view as well.",[789,804,806],{"id":805},"which-font-display-value-is-best-for-core-web-vitals","Which font-display value is best for Core Web Vitals?",[14,808,809],{},"optional gives zero font-swap layout shift and never delays text, so it is the safest for CLS and LCP. swap is equally fast for LCP but can shift layout unless the fallback is metric-matched. block delays text and hurts LCP.",[789,811,813],{"id":812},"should-icon-fonts-use-optional","Should icon fonts use optional?",[14,815,816],{},"No. An icon font rendered in a fallback shows letters or empty boxes instead of icons. Use block for icon fonts, or better, replace them with inline SVG.",[44,818,820],{"id":819},"related","Related",[49,822,823,831,836,841,848],{},[52,824,825,660,828,830],{},[79,826,827],{},"Parent:",[38,829,41],{"href":40}," — the full font policy.",[52,832,833,835],{},[38,834,268],{"href":267}," — making optional work on first views.",[52,837,838,840],{},[38,839,273],{"href":272}," — making swap shift-free.",[52,842,843,847],{},[38,844,846],{"href":845},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites\u002Feliminating-layout-shift-from-web-fonts\u002F","Eliminating Layout Shift from Web Fonts"," — finding font shifts in field data.",[52,849,850,854],{},[38,851,853],{"href":852},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002F","Largest Contentful Paint Optimization for Static Sites"," — why text visibility matters for LCP.",{"title":856,"searchDepth":857,"depth":857,"links":858},"",2,[859,860,861,862,863,864,865,866,867,868,875],{"id":46,"depth":857,"text":47},{"id":66,"depth":857,"text":67},{"id":254,"depth":857,"text":255},{"id":283,"depth":857,"text":284},{"id":388,"depth":857,"text":389},{"id":632,"depth":857,"text":633},{"id":698,"depth":857,"text":699},{"id":712,"depth":857,"text":713},{"id":768,"depth":857,"text":769},{"id":786,"depth":857,"text":787,"children":869},[870,872,873,874],{"id":791,"depth":871,"text":792},3,{"id":798,"depth":871,"text":799},{"id":805,"depth":871,"text":806},{"id":812,"depth":871,"text":813},{"id":819,"depth":857,"text":820},[877,880,883,884],{"name":878,"item":879},"Home","\u002F",{"name":881,"item":882},"Performance Optimization & Core Web Vitals for SSGs","\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002F",{"name":41,"item":40},{"name":5,"item":885},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Ffont-display-optional-vs-swap\u002F","2026-09-18","font-display swap always shows your web font but can shift layout; optional never shifts but may skip the font. How to choose per font on a static site.","md",[890,891,892,893],{"q":792,"a":795},{"q":799,"a":802},{"q":806,"a":809},{"q":813,"a":816},{},true,"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Ffont-display-optional-vs-swap",{"title":5,"description":887},"performance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Ffont-display-optional-vs-swap\u002Findex","article","YZjdfPVoc6Nh4ZCfMtkQQ2UXgC11yWmKCtdk-SElKRs",[902,905,908,911,914,917,920,923,926,929,932,935,938,941,944,947,950,953,956,959,962,965,968,971,974,977,980,983,986,989,992,995,998,1001,1004,1007,1010,1013,1016,1019,1022,1025,1028,1031,1034,1037,1040,1043,1046,1049,1052,1055,1058,1061,1064,1067,1070,1073,1076,1079,1082,1085,1088,1091,1094,1097,1100,1103,1104,1106,1108,1110,1113,1116,1119,1122,1125,1128,1131,1134,1137,1140,1143,1146,1149,1152,1155,1158,1161,1164,1166,1169,1172,1175,1178,1181,1184,1187,1190,1193,1196,1199,1202,1205,1208,1211,1214,1217,1220,1223,1226,1229,1232,1235,1238,1241,1244,1247,1250,1253,1256,1259,1262,1265,1268,1271,1274,1277,1280,1283,1286,1289,1292,1295,1298,1301,1304,1307,1310,1313,1316,1319,1322,1325,1328,1331,1334,1337,1340,1343,1346,1349,1352,1355,1358,1361,1364,1367,1370,1373,1376,1379,1382,1385,1388,1391,1394,1397,1400,1403,1406,1409,1412,1415,1418,1421,1424,1427,1430,1433,1436,1439,1442],{"path":903,"title":904},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fastro-vs-eleventy-build-times-at-10000-pages","Astro vs Eleventy Build Times at 10,000 Pages",{"path":906,"title":907},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fchoosing-between-astro-and-eleventy-for-large-docs","Astro vs Eleventy for Large Docs (1000+ Pages)",{"path":909,"title":910},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fcontent-collections-vs-eleventy-data-cascade","Content Collections vs the Eleventy Data Cascade",{"path":912,"title":913},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites","Astro vs Eleventy for Documentation Sites",{"path":915,"title":916},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fshortcodes-vs-components-for-docs-authors","Shortcodes vs Components for Docs Authors",{"path":918,"title":919},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fastro-vs-eleventy-for-documentation-sites\u002Fsidebar-navigation-in-astro-and-eleventy","Sidebar Navigation in Astro and Eleventy",{"path":921,"title":922},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fcustomizing-starlight-without-forking-the-theme","Customizing Starlight Without Forking the Theme",{"path":924,"title":925},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fdocusaurus-vs-starlight-for-product-documentation","Docusaurus vs Starlight for Product Documentation",{"path":927,"title":928},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress","Docs Frameworks: Docusaurus, Starlight and VitePress",{"path":930,"title":931},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fmdx-vs-markdoc-for-docs-content","MDX vs Markdoc for Docs Content",{"path":933,"title":934},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fmigrating-from-mkdocs-to-starlight","Migrating from MkDocs to Starlight",{"path":936,"title":937},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fversioned-documentation-with-docusaurus","Versioned Documentation with Docusaurus",{"path":939,"title":940},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fdocs-frameworks-docusaurus-starlight-vitepress\u002Fvitepress-for-library-documentation","VitePress for Library Documentation",{"path":942,"title":943},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fhugo-build-times-for-large-repositories\u002Fhow-to-benchmark-hugo-vs-astro-build-speeds","How to Benchmark Hugo vs Astro Build Speeds",{"path":945,"title":946},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fhugo-build-times-for-large-repositories\u002Fhugo-partialcached-for-faster-builds","Hugo partialCached for Faster Builds",{"path":948,"title":949},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fhugo-build-times-for-large-repositories","Hugo Build Times for Large Repositories",{"path":951,"title":952},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fhugo-build-times-for-large-repositories\u002Fprofiling-hugo-templates-with-template-metrics","Profiling Hugo Templates With Template Metrics",{"path":954,"title":955},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fhugo-build-times-for-large-repositories\u002Freducing-hugo-memory-usage-on-ci-runners","Reducing Hugo Memory Usage on CI Runners",{"path":957,"title":958},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fhugo-build-times-for-large-repositories\u002Fspeeding-up-hugo-builds-with-render-hooks-and-caching","Speeding Up Hugo Builds with Render Hooks & Caching",{"path":960,"title":961},"\u002Fchoosing-the-right-static-site-generator-for-production","Choosing the Right Static Site Generator for Production",{"path":963,"title":964},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fjekyll-plugin-ecosystem\u002Feleventy-vs-jekyll-for-markdown-heavy-blogs","Eleventy vs Jekyll for Markdown-Heavy Blogs",{"path":966,"title":967},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fjekyll-plugin-ecosystem","Jekyll Plugin Ecosystem",{"path":969,"title":970},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fjekyll-plugin-ecosystem\u002Freplacing-jekyll-plugins-when-migrating-to-eleventy","Replacing Jekyll Plugins When Migrating to Eleventy",{"path":972,"title":973},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fjekyll-plugin-ecosystem\u002Frunning-jekyll-on-github-pages-without-plugins","Running Jekyll on GitHub Pages Without Plugins",{"path":975,"title":976},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fjekyll-plugin-ecosystem\u002Fspeeding-up-slow-jekyll-builds","Speeding Up Slow Jekyll Builds",{"path":978,"title":979},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fjekyll-plugin-ecosystem\u002Fupgrading-jekyll-and-ruby-versions-safely","Upgrading Jekyll and Ruby Versions Safely",{"path":981,"title":982},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fconverting-front-matter-at-scale-during-migration","Converting Front Matter at Scale During Migration",{"path":984,"title":985},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators","Migrating Between Static Site Generators",{"path":987,"title":988},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fkeeping-redirects-working-after-an-ssg-migration","Keeping Redirects Working After an SSG Migration",{"path":990,"title":991},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-a-docs-site-from-jekyll-to-hugo","Migrating a Docs Site From Jekyll to Hugo",{"path":993,"title":994},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-from-gatsby-to-astro","Migrating from Gatsby to Astro",{"path":996,"title":997},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-from-hugo-to-astro-without-breaking-urls","Migrating From Hugo to Astro Without Breaking URLs",{"path":999,"title":1000},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fmigrating-wordpress-to-a-static-site-generator","Migrating WordPress to a Static Site Generator",{"path":1002,"title":1003},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fmigrating-between-static-site-generators\u002Fporting-shortcodes-and-includes-between-generators","Porting Shortcodes and Includes Between Generators",{"path":1005,"title":1006},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fhandling-dynamic-routes-in-nextjs-static-export","Handling Dynamic Routes in Next.js Static Export",{"path":1008,"title":1009},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites","Next.js Static Export for Content Sites",{"path":1011,"title":1012},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fmigrating-from-gatsby-to-nextjs-static-export","Migrating from Gatsby to Next.js Static Export",{"path":1014,"title":1015},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fnextjs-app-router-static-export-limitations","Next.js App Router Static Export Limitations",{"path":1017,"title":1018},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Fnextjs-static-export-vs-astro-for-marketing-sites","Next.js Static Export vs Astro for Marketing",{"path":1020,"title":1021},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fnextjs-static-export-for-content-sites\u002Foptimizing-images-in-nextjs-static-export","Optimizing Images in Next.js Static Export",{"path":1023,"title":1024},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites\u002Fadding-pagefind-to-an-astro-site","Adding Pagefind to an Astro Site",{"path":1026,"title":1027},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites\u002Fbuilding-a-lunr-index-at-build-time-in-eleventy","Building a Lunr Index at Build Time in Eleventy",{"path":1029,"title":1030},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites","Search for Static Sites",{"path":1032,"title":1033},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites\u002Findexing-hugo-sites-with-pagefind","Indexing Hugo Sites with Pagefind",{"path":1035,"title":1036},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites\u002Fmultilingual-search-on-static-sites","Multilingual Search on Static Sites",{"path":1038,"title":1039},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites\u002Fpagefind-vs-algolia-docsearch","Pagefind vs Algolia DocSearch",{"path":1041,"title":1042},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fsearch-for-static-sites\u002Fsearch-index-size-budgets-for-large-docs","Search Index Size Budgets for Large Docs",{"path":1044,"title":1045},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fbest-ssg-for-technical-writers-without-coding-experience","Best SSG for Non-Developer Technical Writers",{"path":1047,"title":1048},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fchoosing-an-ssg-for-api-reference-documentation","Choosing an SSG for API Reference Documentation",{"path":1050,"title":1051},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fevaluating-ssg-accessibility-defaults","Evaluating SSG Accessibility Defaults",{"path":1053,"title":1054},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix","SSG Framework Selection Matrix",{"path":1056,"title":1057},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fpicking-an-ssg-for-a-multi-language-documentation-site","Picking an SSG for a Multi-Language Docs Site",{"path":1059,"title":1060},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Fssg-selection-checklist-for-engineering-teams","SSG Selection Checklist for Engineering Teams",{"path":1062,"title":1063},"\u002Fchoosing-the-right-static-site-generator-for-production\u002Fssg-framework-selection-matrix\u002Ftotal-cost-of-ownership-for-static-site-generators","Total Cost of Ownership for Static Site Generators",{"path":1065,"title":1066},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcdn-caching-rules-for-ssgs\u002Fcache-busting-with-content-hashed-filenames","Cache Busting with Content-Hashed Filenames",{"path":1068,"title":1069},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcdn-caching-rules-for-ssgs","CDN Caching Rules for SSGs",{"path":1071,"title":1072},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcdn-caching-rules-for-ssgs\u002Fpurging-the-cdn-cache-after-a-static-deploy","Purging the CDN Cache After a Static Deploy",{"path":1074,"title":1075},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcdn-caching-rules-for-ssgs\u002Fsetting-cache-control-headers-on-cloudflare-pages","Cache-Control Headers on Cloudflare Pages",{"path":1077,"title":1078},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcdn-caching-rules-for-ssgs\u002Fsetting-up-proper-cache-headers-on-netlify","Proper Cache Headers on Netlify for SSGs",{"path":1080,"title":1081},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcdn-caching-rules-for-ssgs\u002Fstale-while-revalidate-for-static-html","Stale-While-Revalidate for Static HTML",{"path":1083,"title":1084},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites\u002Feliminating-layout-shift-from-web-fonts","Eliminating Layout Shift From Web Fonts",{"path":1086,"title":1087},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites\u002Ffixing-cls-from-cookie-banners","Fixing CLS from Cookie Banners",{"path":1089,"title":1090},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites\u002Ffixing-cls-from-late-loading-embeds","Fixing CLS From Late-Loading Embeds",{"path":1092,"title":1093},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites\u002Ffixing-cls-from-sticky-headers-and-anchor-links","Fixing CLS from Sticky Headers and Anchor Links",{"path":1095,"title":1096},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites","Cumulative Layout Shift Fixes for Static Sites",{"path":1098,"title":1099},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites\u002Fmeasuring-cls-in-the-field-with-web-vitals-js","Measuring CLS in the Field With web-vitals.js",{"path":1101,"title":1102},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fcumulative-layout-shift-fixes-for-static-sites\u002Freserving-space-for-images-and-embeds-to-stop-layout-shift","Reserving Space for Images and Embeds",{"path":896,"title":5},{"path":1105,"title":41},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites",{"path":1107,"title":273},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Fmetric-matched-fallback-fonts-with-size-adjust",{"path":1109,"title":268},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Fpreloading-fonts-without-double-downloads",{"path":1111,"title":1112},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Fself-hosting-google-fonts-to-eliminate-layout-shift","Self-Host Google Fonts to Eliminate Layout Shift",{"path":1114,"title":1115},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Ffont-loading-strategies-for-static-sites\u002Fsubsetting-variable-fonts-for-faster-first-render","Subsetting Variable Fonts for Faster First Render",{"path":1117,"title":1118},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fbuilding-an-image-cdn-pipeline-for-static-sites","Building an Image CDN Pipeline for Static Sites",{"path":1120,"title":1121},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fgenerating-open-graph-images-at-build-time","Generating Open Graph Images at Build Time",{"path":1123,"title":1124},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro","Image Optimization Pipelines in Astro",{"path":1126,"title":1127},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Flazy-loading-images-without-hurting-lcp","Lazy-Loading Images Without Hurting LCP",{"path":1129,"title":1130},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Foptimizing-webp-images-in-hugo-without-plugins","Optimizing WebP Images in Hugo Without Plugins",{"path":1132,"title":1133},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fresponsive-images-with-srcset-in-eleventy","Responsive Images with srcset in Eleventy",{"path":1135,"title":1136},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fimage-optimization-pipelines-in-astro\u002Fserving-avif-with-fallbacks-on-static-sites","Serving AVIF With Fallbacks on Static Sites",{"path":1138,"title":1139},"\u002Fperformance-optimization-core-web-vitals-for-ssgs","Core Web Vitals Optimization for SSGs",{"path":1141,"title":1142},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fastro-islands-vs-full-hydration-performance","Astro Islands vs Full Hydration Performance",{"path":1144,"title":1145},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fdeferring-hydration-with-client-visible-in-astro","Deferring Hydration with client:visible in Astro",{"path":1147,"title":1148},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fhow-to-reduce-bundle-size-in-eleventy-builds","How to Reduce Bundle Size in Eleventy Builds",{"path":1150,"title":1151},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering","JavaScript Hydration & Partial Rendering",{"path":1153,"title":1154},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Fmeasuring-inp-on-static-sites-with-real-user-monitoring","Measuring INP on Static Sites with RUM",{"path":1156,"title":1157},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fjavascript-hydration-partial-rendering\u002Freplacing-react-islands-with-web-components","Replacing React Islands with Web Components",{"path":1159,"title":1160},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Feliminating-render-blocking-css-on-static-sites","Eliminating Render-Blocking CSS on Static Sites",{"path":1162,"title":1163},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Ffixing-lcp-on-text-heavy-documentation-pages","Fixing LCP on Text-Heavy Documentation Pages",{"path":1165,"title":853},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites",{"path":1167,"title":1168},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Fmeasuring-lcp-subparts-with-devtools","Measuring LCP Subparts with DevTools",{"path":1170,"title":1171},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Foptimizing-lcp-on-astro-with-priority-hints","Optimizing LCP on Astro with Priority Hints",{"path":1173,"title":1174},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Flargest-contentful-paint-optimization-for-static-sites\u002Freducing-lcp-from-hero-images-on-static-sites","Reducing LCP from Hero Images on Static Sites",{"path":1176,"title":1177},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fcomparing-lab-and-field-data-with-crux","Comparing Lab and Field Data with CrUX",{"path":1179,"title":1180},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci","Performance Budgets and Lighthouse CI",{"path":1182,"title":1183},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Freducing-lighthouse-score-variance-in-ci","Reducing Lighthouse Score Variance in CI",{"path":1185,"title":1186},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Frunning-webpagetest-scripts-against-preview-deploys","Running WebPageTest Scripts Against Preview Deploys",{"path":1188,"title":1189},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fsetting-up-lighthouse-ci-for-a-static-site","Setting Up Lighthouse CI for a Static Site",{"path":1191,"title":1192},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Ftracking-bundle-size-per-pull-request","Tracking Bundle Size per Pull Request",{"path":1194,"title":1195},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fperformance-budgets-and-lighthouse-ci\u002Fwriting-a-performance-budget-that-fails-builds","Writing a Performance Budget That Fails Builds",{"path":1197,"title":1198},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed\u002Fauditing-unused-preloads","Auditing Unused Preloads",{"path":1200,"title":1201},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed","Resource Hints and Navigation Speed",{"path":1203,"title":1204},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed\u002Finstant-navigation-with-speculation-rules","Instant Navigation with Speculation Rules",{"path":1206,"title":1207},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed\u002Fpreconnect-vs-dns-prefetch-on-static-sites","Preconnect vs DNS-Prefetch on Static Sites",{"path":1209,"title":1210},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed\u002Fprefetching-links-in-astro","Prefetching Links in Astro",{"path":1212,"title":1213},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fresource-hints-and-navigation-speed\u002Fview-transitions-on-multi-page-static-sites","View Transitions on Multi-Page Static Sites",{"path":1215,"title":1216},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites\u002Fauditing-third-party-scripts-with-lighthouse","Auditing Third-Party Scripts With Lighthouse",{"path":1218,"title":1219},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites","Third-Party Script Performance on Static Sites",{"path":1221,"title":1222},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites\u002Flazy-loading-youtube-embeds-on-static-sites","Lazy-Loading YouTube Embeds on Static Sites",{"path":1224,"title":1225},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites\u002Floading-google-tag-manager-without-hurting-inp","Loading Google Tag Manager Without Hurting INP",{"path":1227,"title":1228},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites\u002Frunning-third-party-scripts-in-a-web-worker-with-partytown","Running Third-Party Scripts in a Web Worker with Partytown",{"path":1230,"title":1231},"\u002Fperformance-optimization-core-web-vitals-for-ssgs\u002Fthird-party-script-performance-on-static-sites\u002Fself-hosting-analytics-to-cut-third-party-requests","Self-Hosting Analytics to Cut Third-Party Requests",{"path":1233,"title":1234},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcloudflare-pages-edge-caching-setup\u002Fautomating-eleventy-deployments-with-cloudflare-pages","Automating Eleventy Deployments on Cloudflare Pages",{"path":1236,"title":1237},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcloudflare-pages-edge-caching-setup\u002Fconfiguring-redirects-on-cloudflare-pages","Configuring Redirects on Cloudflare Pages",{"path":1239,"title":1240},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcloudflare-pages-edge-caching-setup\u002Fcustom-domains-and-tls-on-cloudflare-pages","Custom Domains and TLS on Cloudflare Pages",{"path":1242,"title":1243},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcloudflare-pages-edge-caching-setup\u002Fdeploying-hugo-to-cloudflare-pages-and-workers","Deploying Hugo to Cloudflare Pages and Workers",{"path":1245,"title":1246},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcloudflare-pages-edge-caching-setup","Cloudflare Pages Edge Caching Setup",{"path":1248,"title":1249},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcloudflare-pages-edge-caching-setup\u002Fmigrating-from-cloudflare-pages-to-workers-static-assets","Migrating from Cloudflare Pages to Workers Static Assets",{"path":1251,"title":1252},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcontent-workflows-for-documentation-teams\u002Fchecking-links-in-pull-requests","Checking Links in Pull Requests",{"path":1254,"title":1255},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcontent-workflows-for-documentation-teams\u002Fdocs-as-code-review-workflow-for-writers","Docs-as-Code Review Workflow for Writers",{"path":1257,"title":1258},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcontent-workflows-for-documentation-teams\u002Feditorial-checks-with-vale-in-ci","Editorial Checks with Vale in CI",{"path":1260,"title":1261},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcontent-workflows-for-documentation-teams","Content Workflows for Documentation Teams",{"path":1263,"title":1264},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcontent-workflows-for-documentation-teams\u002Fscheduling-content-publication-with-cron-triggered-builds","Scheduling Content Publication With Cron-Triggered Builds",{"path":1266,"title":1267},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fcontent-workflows-for-documentation-teams\u002Fwiring-a-headless-cms-to-a-static-build","Wiring a Headless CMS to a Static Build",{"path":1269,"title":1270},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds\u002Fbuilding-astro-sites-with-github-actions","Building Astro Sites with GitHub Actions",{"path":1272,"title":1273},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds\u002Fcaching-node-modules-in-github-actions-for-faster-ssg-builds","Caching node_modules in GitHub Actions",{"path":1275,"title":1276},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds\u002Fdeploying-to-github-pages-with-actions","Deploying to GitHub Pages with Actions",{"path":1278,"title":1279},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds\u002Fdeploying-to-multiple-environments-from-one-workflow","Deploying to Multiple Environments From One Workflow",{"path":1281,"title":1282},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds\u002Fhow-to-set-up-github-actions-for-hugo-deployments","GitHub Actions for Hugo Deployments",{"path":1284,"title":1285},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds","GitHub Actions for Automated SSG Builds",{"path":1287,"title":1288},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fgithub-actions-for-automated-ssg-builds\u002Fmatrix-builds-for-multi-site-monorepos","Matrix Builds for Multi-Site Monorepos",{"path":1290,"title":1291},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fcaching-hugo-builds-in-github-actions","Caching Hugo Builds in GitHub Actions",{"path":1293,"title":1294},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fenabling-incremental-builds-in-eleventy","Enabling Incremental Builds in Eleventy",{"path":1296,"title":1297},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fincremental-builds-in-astro-with-the-content-layer","Incremental Builds in Astro with the Content Layer",{"path":1299,"title":1300},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs","Incremental Builds and Build Caching for SSGs",{"path":1302,"title":1303},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fmeasuring-build-time-regressions-in-ci","Measuring Build-Time Regressions in CI",{"path":1305,"title":1306},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fremote-caching-with-turborepo-for-ssg-monorepos","Remote Caching with Turborepo for SSG Monorepos",{"path":1308,"title":1309},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fincremental-builds-and-build-caching-for-ssgs\u002Fsharing-build-cache-across-ci-runners","Sharing Build Cache Across CI Runners",{"path":1311,"title":1312},"\u002Fproduction-ready-deployment-cicd-workflows","Production-Ready Deployment & CI\u002FCD for SSGs",{"path":1314,"title":1315},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fmonitoring-static-sites-in-production\u002Falerting-on-cache-hit-ratio-drops","Alerting on Cache Hit Ratio Drops",{"path":1317,"title":1318},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fmonitoring-static-sites-in-production\u002Fbuilding-a-core-web-vitals-dashboard-from-rum-data","Building a Core Web Vitals Dashboard from RUM Data",{"path":1320,"title":1321},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fmonitoring-static-sites-in-production\u002Fcrawling-for-broken-links-on-a-schedule","Crawling for Broken Links on a Schedule",{"path":1323,"title":1324},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fmonitoring-static-sites-in-production","Monitoring Static Sites in Production",{"path":1326,"title":1327},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fmonitoring-static-sites-in-production\u002Flogging-404s-at-the-edge","Logging 404s at the Edge",{"path":1329,"title":1330},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fmonitoring-static-sites-in-production\u002Fuptime-and-synthetic-checks-for-static-sites","Uptime and Synthetic Checks for Static Sites",{"path":1332,"title":1333},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fconfiguring-vercel-for-hugo-and-eleventy","Configuring Vercel for Hugo and Eleventy",{"path":1335,"title":1336},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies","Netlify vs Vercel Deployment Strategies",{"path":1338,"title":1339},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fnetlify-build-hooks-for-content-updates","Netlify Build Hooks for Content Updates",{"path":1341,"title":1342},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fnetlify-redirects-and-rewrites-for-static-sites","Netlify Redirects and Rewrites for Static Sites",{"path":1344,"title":1345},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fsetting-up-deploy-previews-on-netlify-for-every-pull-request","Netlify Deploy Previews for Every Pull Request",{"path":1347,"title":1348},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fnetlify-vs-vercel-deployment-strategies\u002Fvercel-isr-vs-static-generation-for-ssgs","Vercel ISR vs Static Generation for SSGs",{"path":1350,"title":1351},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fpreview-environments-for-pull-requests\u002Fautomating-preview-deploy-pipelines-with-github-actions","Automating Preview Deploy Pipelines with GitHub Actions",{"path":1353,"title":1354},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fpreview-environments-for-pull-requests\u002Fcleaning-up-stale-preview-deployments","Cleaning Up Stale Preview Deployments",{"path":1356,"title":1357},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fpreview-environments-for-pull-requests","Preview Environments for Pull Requests",{"path":1359,"title":1360},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fpreview-environments-for-pull-requests\u002Fpassword-protecting-preview-deployments","Password-Protecting Preview Deployments",{"path":1362,"title":1363},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fpreview-environments-for-pull-requests\u002Fpreviewing-headless-cms-drafts","Previewing Headless CMS Drafts",{"path":1365,"title":1366},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fpreview-environments-for-pull-requests\u002Fvisual-regression-testing-on-preview-deploys","Visual Regression Testing on Preview Deploys",{"path":1368,"title":1369},"\u002Fproduction-ready-deployment-cicd-workflows\u002Frollbacks-and-deploy-safety-for-static-sites\u002Fatomic-deploys-vs-incremental-uploads","Atomic Deploys vs Incremental Uploads",{"path":1371,"title":1372},"\u002Fproduction-ready-deployment-cicd-workflows\u002Frollbacks-and-deploy-safety-for-static-sites\u002Fcanary-releases-for-static-sites","Canary Releases for Static Sites",{"path":1374,"title":1375},"\u002Fproduction-ready-deployment-cicd-workflows\u002Frollbacks-and-deploy-safety-for-static-sites\u002Ffeature-flags-on-static-sites","Feature Flags on Static Sites",{"path":1377,"title":1378},"\u002Fproduction-ready-deployment-cicd-workflows\u002Frollbacks-and-deploy-safety-for-static-sites","Rollbacks and Deploy Safety for Static Sites",{"path":1380,"title":1381},"\u002Fproduction-ready-deployment-cicd-workflows\u002Frollbacks-and-deploy-safety-for-static-sites\u002Frolling-back-a-bad-static-deploy-in-under-a-minute","Rolling Back a Bad Static Deploy in Under a Minute",{"path":1383,"title":1384},"\u002Fproduction-ready-deployment-cicd-workflows\u002Frollbacks-and-deploy-safety-for-static-sites\u002Frunning-smoke-tests-against-a-preview-url","Running Smoke Tests Against a Preview URL",{"path":1386,"title":1387},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites\u002Fauditing-npm-dependencies-in-ssg-pipelines","Auditing npm Dependencies in SSG Pipelines",{"path":1389,"title":1390},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites\u002Fenabling-hsts-and-preload-safely","Enabling HSTS and Preload Safely",{"path":1392,"title":1393},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites\u002Fhash-based-csp-for-inline-scripts-in-astro","Hash-Based CSP for Inline Scripts in Astro",{"path":1395,"title":1396},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites","Security Headers and Hardening for Static Sites",{"path":1398,"title":1399},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites\u002Fsecuring-deploy-credentials-with-github-oidc","Securing Deploy Credentials with GitHub OIDC",{"path":1401,"title":1402},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites\u002Fsubresource-integrity-for-third-party-assets","Subresource Integrity for Third-Party Assets",{"path":1404,"title":1405},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fsecurity-headers-for-static-sites\u002Fwriting-a-content-security-policy-for-a-static-site","Writing a Content Security Policy for a Static Site",{"path":1407,"title":1408},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fself-hosting-static-sites\u002Fclean-urls-and-trailing-slashes-on-s3","Clean URLs and Trailing Slashes on S3",{"path":1410,"title":1411},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fself-hosting-static-sites\u002Fcloudfront-functions-for-redirects","CloudFront Functions for Redirects",{"path":1413,"title":1414},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fself-hosting-static-sites\u002Fdeploying-a-static-site-to-s3-and-cloudfront","Deploying a Static Site to S3 and CloudFront",{"path":1416,"title":1417},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fself-hosting-static-sites","Self-Hosting Static Sites on S3, Nginx and Caddy",{"path":1419,"title":1420},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fself-hosting-static-sites\u002Fserving-a-static-site-with-caddy","Serving a Static Site with Caddy",{"path":1422,"title":1423},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fself-hosting-static-sites\u002Fserving-a-static-site-with-nginx","Serving a Static Site with Nginx",{"path":1425,"title":1426},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fself-hosting-static-sites\u002Fzero-downtime-deploys-with-symlink-swaps","Zero-Downtime Deploys with Symlink Swaps",{"path":1428,"title":1429},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fserverless-functions-for-static-sites\u002Fadding-a-contact-form-with-cloudflare-workers","Adding a Contact Form with Cloudflare Workers",{"path":1431,"title":1432},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fserverless-functions-for-static-sites\u002Fhandling-form-submissions-on-a-static-site","Handling Form Submissions on a Static Site",{"path":1434,"title":1435},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fserverless-functions-for-static-sites","Serverless Functions for Static Sites",{"path":1437,"title":1438},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fserverless-functions-for-static-sites\u002Fnetlify-functions-vs-cloudflare-workers","Netlify Functions vs Cloudflare Workers",{"path":1440,"title":1441},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fserverless-functions-for-static-sites\u002Fprotecting-a-static-site-behind-authentication","Protecting a Static Site Behind Authentication",{"path":1443,"title":1444},"\u002Fproduction-ready-deployment-cicd-workflows\u002Fserverless-functions-for-static-sites\u002Fproxying-third-party-apis-from-an-edge-function","Proxying Third-Party APIs from an Edge Function",1789722848063]