[{"data":1,"prerenderedAt":1006},["ShallowReactive",2],{"content:\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages":3,"surroundings:\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages":997},{"id":4,"title":5,"body":6,"description":977,"extension":978,"meta":979,"navigation":991,"path":992,"seo":993,"stem":995,"__hash__":996},"content\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages\u002Findex.md","Using content-visibility: auto on Long Pages",{"type":7,"value":8,"toc":959},"minimark",[9,14,29,36,131,136,165,169,175,181,187,197,201,206,209,213,329,333,339,343,350,483,487,490,494,509,641,645,651,747,751,754,758,784,788,797,803,813,819,823,835,844,853,862,871,880,889,898,910,919,923,945,950,953,956],[10,11,13],"h1",{"id":12},"how-to-use-content-visibility-auto-on-long-pages","How to Use content-visibility: auto on Long Pages",[15,16,17,18,23,24,28],"p",{},"This guide is part of ",[19,20,22],"a",{"href":21},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002F","CSS Containment & content-visibility",", within ",[19,25,27],{"href":26},"\u002Frendering-css-performance\u002F","Rendering & CSS Performance",". Long pages — articles with many sections, documentation, product listings with hundreds of items, comment threads, social feeds — make the browser lay out and paint everything on load, even though users see only the first screen or two. On mid-range phones, that initial rendering can take hundreds of milliseconds, delaying LCP and blocking early interactions.",[15,30,31,35],{},[32,33,34],"code",{},"content-visibility: auto"," lets the browser skip rendering for sections that are offscreen. Applied to the right elements with sensible placeholder sizes, it is one of the highest-return CSS changes available: often a single rule that cuts initial rendering time by more than half. Applied carelessly, it causes scrollbar jumps, anchor links landing in the wrong place, and no gain at all for content near the fold.",[15,37,38],{},[39,40,46,47,46,54,46,58,46,61,46,70,46,76,46,83,46,91,46,96,46,100,46,106,46,110,46,114,46,121,46,125,46],"svg",{"viewBox":41,"width":42,"role":43,"ariaLabel":44,"style":45},"0 0 760 189","100%","img","Bar chart comparing style, layout and paint time on load for a long listing page with and without content-visibility auto.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[48,49],"rect",{"className":50,"x":52,"y":52,"width":42,"height":42,"fill":53},[51],"svg-canvas","0","#ffffff",[55,56,57],"title",{},"Initial rendering time on a 300-item product listing",[59,60,44],"desc",{},[48,62],{"x":63,"y":63,"width":64,"height":65,"rx":66,"fill":67,"stroke":68,"style":69},"1","758","187","10","none","currentColor","stroke-opacity:0.18",[71,72,57],"text",{"x":73,"y":74,"fill":68,"style":75},"28.0","34.0","font-size:16px;font-weight:700",[71,77,82],{"x":78,"y":79,"fill":68,"style":80,"textAnchor":81},"181.2","70.0","font-size:13px","end","Without content-visibility",[48,84],{"x":85,"y":86,"width":87,"height":88,"rx":89,"fill":67,"stroke":68,"style":90},"193.2","56.0","474.8","19","3","fill-opacity:0.7;stroke-opacity:0.35",[71,92,95],{"x":93,"y":79,"fill":68,"style":94},"674.0","font-size:12px;font-weight:600","540ms",[71,97,99],{"x":78,"y":98,"fill":68,"style":80,"textAnchor":81},"101.0","auto on every card",[48,101],{"x":85,"y":102,"width":103,"height":88,"rx":89,"fill":104,"stroke":104,"style":105},"87.0","184.6","#0466c8","fill-opacity:0.55;stroke-opacity:0.9",[71,107,109],{"x":108,"y":98,"fill":68,"style":94},"383.9","210ms",[71,111,113],{"x":78,"y":112,"fill":68,"style":80,"textAnchor":81},"132.0","auto on groups of 12 cards",[48,115],{"x":85,"y":116,"width":117,"height":88,"rx":89,"fill":118,"stroke":119,"style":120},"118.0","105.5","#ffc300","#b8860b","fill-opacity:0.7;stroke-opacity:0.9",[71,122,124],{"x":123,"y":112,"fill":68,"style":94},"304.7","120ms",[71,126,130],{"x":73,"y":127,"fill":128,"style":129},"167.0","#51617a","font-size:12.5px","Grouping reduces per-element bookkeeping while still skipping offscreen work.",[132,133,135],"h2",{"id":134},"rapid-diagnosis","Rapid Diagnosis",[137,138,139,147,153,159],"ul",{},[140,141,142,146],"li",{},[143,144,145],"strong",{},"Profile load"," with 4x CPU throttling; note the Layout and Recalculate Style durations and node counts.",[140,148,149,152],{},[143,150,151],{},"Measure page length"," in viewport heights; pages over 5–10 screens are good candidates.",[140,154,155,158],{},[143,156,157],{},"Identify natural section boundaries",": article sections, list groups, cards, comment threads.",[140,160,161,164],{},[143,162,163],{},"Check for scripts measuring offscreen content",", which would force rendering.",[132,166,168],{"id":167},"root-cause-analysis","Root Cause Analysis",[15,170,171,174],{},[143,172,173],{},"1. Rendering scales with content, not with what is visible."," The browser lays out the whole document.",[15,176,177,180],{},[143,178,179],{},"2. Long pages on slow CPUs."," Phones spend several times longer than laptops on the same layout.",[15,182,183,186],{},[143,184,185],{},"3. No natural skip mechanism."," Without containment, browsers must render everything to know positions and sizes.",[15,188,189,192,193,196],{},[143,190,191],{},"4. Overly fine granularity."," Applying ",[32,194,195],{},"content-visibility"," to thousands of tiny elements adds bookkeeping overhead.",[132,198,200],{"id":199},"step-by-step-resolution","Step-by-Step Resolution",[202,203,205],"h3",{"id":204},"_1-choose-the-boundary-elements","1. Choose the boundary elements",[15,207,208],{},"Pick elements that are large enough to matter (several hundred pixels tall) and numerous: article sections, groups of cards, comment threads. For lists, group items into chunks (for example 10–20 cards per group) rather than applying the property to each card.",[202,210,212],{"id":211},"_2-apply-the-property-below-the-fold-only","2. Apply the property below the fold only",[214,215,220],"pre",{"className":216,"code":217,"language":218,"meta":219,"style":219},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F* Skip rendering for sections after the first two. *\u002F\n.article > section:nth-of-type(n + 3),\n.product-grid > .group:nth-of-type(n + 2) {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 900px;\n}\n\u002F* trade-off: :nth-of-type thresholds are approximate; on very tall screens the\n   third section may already be visible, which costs a little extra work only. *\u002F\n","css","",[32,221,222,231,259,278,293,311,317,323],{"__ignoreMap":219},[223,224,227],"span",{"class":225,"line":226},"line",1,[223,228,230],{"class":229},"sjfSM","\u002F* Skip rendering for sections after the first two. *\u002F\n",[223,232,234,238,242,246,249,253,256],{"class":225,"line":233},2,[223,235,237],{"class":236},"sPXB4",".article",[223,239,241],{"class":240},"sPARh"," >",[223,243,245],{"class":244},"sZBmE"," section",[223,247,248],{"class":236},":nth-of-type",[223,250,252],{"class":251},"saISM","(",[223,254,255],{"class":236},"n + 3",[223,257,258],{"class":251},"),\n",[223,260,262,265,267,270,272,275],{"class":225,"line":261},3,[223,263,264],{"class":236},".product-grid",[223,266,241],{"class":240},[223,268,269],{"class":236}," .group:nth-of-type",[223,271,252],{"class":251},[223,273,274],{"class":236},"n + 2",[223,276,277],{"class":251},") {\n",[223,279,281,284,287,290],{"class":225,"line":280},4,[223,282,283],{"class":236},"  content-visibility",[223,285,286],{"class":251},": ",[223,288,289],{"class":236},"auto",[223,291,292],{"class":251},";\n",[223,294,296,299,301,303,306,309],{"class":225,"line":295},5,[223,297,298],{"class":236},"  contain-intrinsic-size",[223,300,286],{"class":251},[223,302,289],{"class":236},[223,304,305],{"class":236}," 900",[223,307,308],{"class":240},"px",[223,310,292],{"class":251},[223,312,314],{"class":225,"line":313},6,[223,315,316],{"class":251},"}\n",[223,318,320],{"class":225,"line":319},7,[223,321,322],{"class":229},"\u002F* trade-off: :nth-of-type thresholds are approximate; on very tall screens the\n",[223,324,326],{"class":225,"line":325},8,[223,327,328],{"class":229},"   third section may already be visible, which costs a little extra work only. *\u002F\n",[202,330,332],{"id":331},"_3-provide-realistic-intrinsic-sizes","3. Provide realistic intrinsic sizes",[15,334,335,336,338],{},"Estimate typical section height per template. With ",[32,337,289],{},", the browser uses the estimate until the section has rendered once, then remembers its real size.",[202,340,342],{"id":341},"_4-remove-scripts-that-measure-skipped-content","4. Remove scripts that measure skipped content",[15,344,345,346,349],{},"Replace scroll-position calculations that read every section's geometry with ",[32,347,348],{},"IntersectionObserver",", which works with skipped content without forcing it to render.",[15,351,352],{},[39,353,46,356,46,359,46,362,46,364,46,367,46,369,46,378,46,383,46,390,46,397,46,402,46,406,46,410,46,414,46,418,46,422,46,427,46,432,46,436,46,440,46,443,46,448,46,453,46,457,46,461,46,465,46,469,46,473,46,477,46],{"viewBox":354,"width":42,"role":43,"ariaLabel":355,"style":45},"0 0 760 200","Timeline comparing layout work on load for a long article with and without content-visibility auto.",[48,357],{"className":358,"x":52,"y":52,"width":42,"height":42,"fill":53},[51],[55,360,361],{},"Load rendering on a long article (mid-range phone)",[59,363,355],{},[48,365],{"x":63,"y":63,"width":64,"height":366,"rx":66,"fill":67,"stroke":68,"style":69},"198",[71,368,361],{"x":73,"y":74,"fill":68,"style":75},[225,370],{"x1":371,"y1":372,"x2":371,"y2":373,"stroke":119,"strokeWidth":374,"strokeDashArray":375,"style":377},"390.9","72.0","156.0","1.5",[376,376],"4","stroke-opacity:0.9",[71,379,382],{"x":73,"y":380,"fill":68,"style":381},"96.0","font-size:12.5px;font-weight:700","Without",[48,384],{"x":385,"y":386,"width":387,"height":388,"rx":89,"fill":68,"stroke":68,"style":389},"255.5","78.0","61.3","26.0","fill-opacity:0.06;stroke-opacity:0.4",[71,391,396],{"x":392,"y":393,"fill":68,"style":394,"textAnchor":395},"286.2","95.5","font-size:11.5px","middle","style",[48,398],{"x":399,"y":386,"width":400,"height":388,"rx":89,"fill":67,"stroke":68,"style":401},"318.3","249.8","stroke-opacity:0.35",[71,403,405],{"x":404,"y":393,"fill":68,"style":394,"textAnchor":395},"443.3","layout of all sections",[48,407],{"x":408,"y":386,"width":409,"height":388,"rx":89,"fill":68,"stroke":68,"style":389},"569.7","50.9",[71,411,413],{"x":412,"y":393,"fill":68,"style":394,"textAnchor":395},"595.1","paint",[71,415,417],{"x":73,"y":416,"fill":68,"style":381},"134.0","With auto",[48,419],{"x":385,"y":420,"width":421,"height":388,"rx":89,"fill":68,"stroke":68,"style":389},"116.0","29.9",[71,423,396],{"x":424,"y":425,"fill":68,"style":426,"textAnchor":395},"270.5","133.5","font-size:10.5px",[48,428],{"x":429,"y":420,"width":430,"height":388,"rx":89,"fill":118,"stroke":119,"style":431},"286.9","56.1","fill-opacity:0.24;stroke-opacity:0.9",[71,433,435],{"x":434,"y":425,"fill":68,"style":394,"textAnchor":395},"315.0","layout",[48,437],{"x":438,"y":420,"width":439,"height":388,"rx":89,"fill":118,"stroke":119,"style":431},"344.5","45.6",[71,441,413],{"x":442,"y":425,"fill":68,"style":394,"textAnchor":395},"367.3",[225,444],{"x1":445,"y1":373,"x2":446,"y2":373,"stroke":68,"style":447},"97.7","726.0","stroke-opacity:0.4",[71,449,452],{"x":450,"y":451,"fill":128,"style":394,"textAnchor":395},"108.4","173.0","0ms",[71,454,456],{"x":455,"y":451,"fill":128,"style":394,"textAnchor":395},"202.4","200ms",[71,458,460],{"x":459,"y":451,"fill":128,"style":394,"textAnchor":395},"307.1","400ms",[71,462,464],{"x":463,"y":451,"fill":128,"style":394,"textAnchor":395},"411.8","600ms",[71,466,468],{"x":467,"y":451,"fill":128,"style":394,"textAnchor":395},"516.6","800ms",[71,470,472],{"x":471,"y":451,"fill":128,"style":394,"textAnchor":395},"621.3","1000ms",[71,474,476],{"x":475,"y":451,"fill":128,"style":394,"textAnchor":395},"712.3","1200ms",[71,478,482],{"x":371,"y":479,"fill":480,"style":481,"textAnchor":395},"68.0","#8a6608","font-size:12px;font-weight:700","first paint",[132,484,486],{"id":485},"verification","Verification",[15,488,489],{},"Re-profile load and compare Layout and Recalculate Style times. Scroll slowly and quickly through the page and check that content appears without blank flashes and the scrollbar does not jump noticeably. Use find-in-page for text deep in the page and follow anchor links to late sections. Confirm CLS did not increase in the lab and the field.",[132,491,493],{"id":492},"worked-example-a-long-form-publisher","Worked Example: A Long-Form Publisher",[15,495,496,497,500,501,504,505,508],{},"A long-form publisher's feature articles averaged 9,000 words with embedded images and pull quotes, rendering about 6,500 elements. On a mid-range Android device, initial layout took 480ms and LCP p75 was 2.9s. The team wrapped each H2 section in a ",[32,498,499],{},"section"," element and applied ",[32,502,503],{},"content-visibility: auto; contain-intrinsic-size: auto 1400px"," from the third section onwards. Initial layout dropped to 110ms, LCP p75 to 2.4s, and TBT by 300ms. Anchor links from the table of contents initially landed a few hundred pixels off; adding ",[32,506,507],{},"scroll-margin-top"," and generating intrinsic size estimates from word count per section in the build fixed them.",[15,510,511],{},[39,512,46,515,46,518,46,521,46,523,46,540,46,543,46,545,46,550,46,555,46,558,46,562,46,569,46,575,46,579,46,584,46,587,46,591,46,594,46,597,46,600,46,603,46,606,46,609,46,612,46,616,46,618,46,621,46,624,46,627,46,631,46,634,46,637,46],{"viewBox":513,"width":42,"role":43,"ariaLabel":514,"style":45},"0 0 760 325","Decision sequence for whether to apply content-visibility auto to a given element.",[48,516],{"className":517,"x":52,"y":52,"width":42,"height":42,"fill":53},[51],[55,519,520],{},"Should this element get content-visibility auto?",[59,522,514],{},[524,525,526],"defs",{},[527,528,535],"marker",{"id":529,"viewBox":530,"refX":531,"refY":532,"markerWidth":533,"markerHeight":533,"orient":534},"fada927723","0 0 10 10","9","5","7","auto-start-reverse",[536,537],"path",{"d":538,"fill":68,"style":539},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[48,541],{"x":63,"y":63,"width":64,"height":542,"rx":66,"fill":67,"stroke":68,"style":69},"323",[71,544,520],{"x":73,"y":74,"fill":68,"style":75},[48,546],{"x":73,"y":86,"width":547,"height":548,"rx":549,"fill":68,"stroke":68,"style":389},"320.0","35.0","6",[71,551,554],{"x":552,"y":386,"fill":68,"style":553,"textAnchor":395},"188.0","font-size:13px;font-weight:700","Is it visible in the first one or two screens?",[48,556],{"x":557,"y":86,"width":547,"height":548,"rx":549,"fill":67,"stroke":68,"style":401},"412.0",[71,559,561],{"x":560,"y":386,"fill":68,"style":129,"textAnchor":395},"572.0","No — leave it rendered",[225,563],{"x1":564,"y1":565,"x2":566,"y2":565,"stroke":68,"strokeWidth":374,"style":567,"markerEnd":568},"348.0","73.5","410.0","stroke-opacity:0.6","url(#fada927723)",[71,570,574],{"x":571,"y":572,"fill":104,"style":573,"textAnchor":395},"380.0","66.5","font-size:11.5px;font-weight:700","yes",[225,576],{"x1":552,"y1":577,"x2":552,"y2":578,"stroke":68,"strokeWidth":374,"style":567,"markerEnd":568},"91.0","125.0",[71,580,583],{"x":581,"y":582,"fill":128,"style":573},"196.0","113.0","no",[48,585],{"x":73,"y":586,"width":547,"height":548,"rx":549,"fill":68,"stroke":68,"style":389},"127.0",[71,588,590],{"x":552,"y":589,"fill":68,"style":553,"textAnchor":395},"149.0","Is it small (under ~200px) and numerous?",[48,592],{"x":557,"y":586,"width":547,"height":548,"rx":549,"fill":104,"stroke":104,"style":593},"fill-opacity:0.14;stroke-opacity:0.9",[71,595,596],{"x":560,"y":589,"fill":68,"style":129,"textAnchor":395},"Group several into one wrapper first",[225,598],{"x1":564,"y1":599,"x2":566,"y2":599,"stroke":68,"strokeWidth":374,"style":567,"markerEnd":568},"144.5",[71,601,574],{"x":571,"y":602,"fill":104,"style":573,"textAnchor":395},"137.5",[225,604],{"x1":552,"y1":605,"x2":552,"y2":581,"stroke":68,"strokeWidth":374,"style":567,"markerEnd":568},"162.0",[71,607,583],{"x":581,"y":608,"fill":128,"style":573},"184.0",[48,610],{"x":73,"y":611,"width":547,"height":548,"rx":549,"fill":68,"stroke":68,"style":389},"198.0",[71,613,615],{"x":552,"y":614,"fill":68,"style":553,"textAnchor":395},"220.0","Do scripts measure it on load?",[48,617],{"x":557,"y":611,"width":547,"height":548,"rx":549,"fill":104,"stroke":104,"style":593},[71,619,620],{"x":560,"y":614,"fill":68,"style":129,"textAnchor":395},"Replace with IntersectionObserver first",[225,622],{"x1":564,"y1":623,"x2":566,"y2":623,"stroke":68,"strokeWidth":374,"style":567,"markerEnd":568},"215.5",[71,625,574],{"x":571,"y":626,"fill":104,"style":573,"textAnchor":395},"208.5",[225,628],{"x1":552,"y1":629,"x2":552,"y2":630,"stroke":68,"strokeWidth":374,"style":567,"markerEnd":568},"233.0","267.0",[71,632,583],{"x":581,"y":633,"fill":128,"style":573},"255.0",[48,635],{"x":73,"y":636,"width":547,"height":74,"rx":549,"fill":118,"stroke":119,"style":431},"269.0",[71,638,640],{"x":552,"y":639,"fill":68,"style":129,"textAnchor":395},"290.5","Apply content-visibility auto with an auto intrinsic size",[132,642,644],{"id":643},"grouping-items-in-long-lists","Grouping Items in Long Lists",[15,646,647,648,650],{},"For lists of many small items (cards, rows, comments), applying ",[32,649,195],{}," to every item works but creates per-item overhead, and each item's placeholder size must be accurate. Grouping items into chunks gives most of the benefit with fewer, larger boundaries. A server-rendered grid can emit groups of 12 or 24 items in wrapper elements; a client-rendered list can group items in the component. Groups also suit infinite scroll well: each appended page of results becomes a group that the browser can skip once it scrolls out of view.",[214,652,656],{"className":653,"code":654,"language":655,"meta":219,"style":219},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Cdiv class=\"product-grid\">\n  \u003Cdiv class=\"group\">\u003C!-- cards 1-12 -->\u003C\u002Fdiv>\n  \u003Cdiv class=\"group\">\u003C!-- cards 13-24 -->\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C!-- trade-off: wrapper elements change grid structure; use display: contents\n     only if you accept that it disables the group's own box (and containment). -->\n","html",[32,657,658,679,706,729,737,742],{"__ignoreMap":219},[223,659,660,663,666,669,672,676],{"class":225,"line":226},[223,661,662],{"class":251},"\u003C",[223,664,665],{"class":244},"div",[223,667,668],{"class":236}," class",[223,670,671],{"class":251},"=",[223,673,675],{"class":674},"sZ8jY","\"product-grid\"",[223,677,678],{"class":251},">\n",[223,680,681,684,686,688,690,693,696,699,702,704],{"class":225,"line":233},[223,682,683],{"class":251},"  \u003C",[223,685,665],{"class":244},[223,687,668],{"class":236},[223,689,671],{"class":251},[223,691,692],{"class":674},"\"group\"",[223,694,695],{"class":251},">",[223,697,698],{"class":229},"\u003C!-- cards 1-12 -->",[223,700,701],{"class":251},"\u003C\u002F",[223,703,665],{"class":244},[223,705,678],{"class":251},[223,707,708,710,712,714,716,718,720,723,725,727],{"class":225,"line":261},[223,709,683],{"class":251},[223,711,665],{"class":244},[223,713,668],{"class":236},[223,715,671],{"class":251},[223,717,692],{"class":674},[223,719,695],{"class":251},[223,721,722],{"class":229},"\u003C!-- cards 13-24 -->",[223,724,701],{"class":251},[223,726,665],{"class":244},[223,728,678],{"class":251},[223,730,731,733,735],{"class":225,"line":280},[223,732,701],{"class":251},[223,734,665],{"class":244},[223,736,678],{"class":251},[223,738,739],{"class":225,"line":295},[223,740,741],{"class":229},"\u003C!-- trade-off: wrapper elements change grid structure; use display: contents\n",[223,743,744],{"class":225,"line":313},[223,745,746],{"class":229},"     only if you accept that it disables the group's own box (and containment). -->\n",[132,748,750],{"id":749},"combining-with-server-rendering","Combining with Server Rendering",[15,752,753],{},"Server-rendered long pages benefit most, because the full HTML arrives at once and would otherwise all be laid out on load. Emit section wrappers in the server template, so no client-side work is needed to apply the property.",[132,755,757],{"id":756},"common-mistakes","Common Mistakes",[137,759,760,766,772,778],{},[140,761,762,765],{},[143,763,764],{},"Applying it to the first screen."," Adds work at the moment that matters most.",[140,767,768,771],{},[143,769,770],{},"Forgetting contain-intrinsic-size."," Skipped sections collapse, the page becomes short, and the scrollbar jumps.",[140,773,774,777],{},[143,775,776],{},"Using it on tiny elements."," Bookkeeping overhead outweighs the savings.",[140,779,780,783],{},[143,781,782],{},"Measuring skipped content in JavaScript."," Forces rendering of everything you meant to skip.",[132,785,787],{"id":786},"edge-cases","Edge Cases",[15,789,790,793,794,796],{},[143,791,792],{},"Anchor navigation."," Browsers render the target section, but intrinsic size estimates for sections above it can shift the final position; ",[32,795,289],{}," sizes and realistic estimates minimise this.",[15,798,799,802],{},[143,800,801],{},"Printing."," Skipped content is rendered for printing; no special handling needed.",[15,804,805,808,809,812],{},[143,806,807],{},"Images in skipped sections."," Images in skipped content are not loaded until the section renders, which acts as lazy loading; keep ",[32,810,811],{},"loading=\"lazy\""," anyway for older browsers.",[15,814,815,818],{},[143,816,817],{},"Hash-change navigation in SPAs."," Scroll restoration may land slightly off on first visit before real sizes are remembered.",[132,820,822],{"id":821},"faq","FAQ",[824,825,828,832],"details",{"className":826},[827],"faq-item",[829,830,831],"summary",{},"How much faster will my page be?",[15,833,834],{},"It depends on how much content is offscreen. Long pages often see 50–80% reductions in initial rendering time; short pages see little or none.",[824,836,838,841],{"className":837},[827],[829,839,840],{},"Does content-visibility affect SEO?",[15,842,843],{},"No. The content stays in the DOM and is accessible to crawlers.",[824,845,847,850],{"className":846},[827],[829,848,849],{},"Should I use content-visibility on every list item?",[15,851,852],{},"Usually better to group items. Per-item use works but has more overhead and needs accurate sizes for each item.",[824,854,856,859],{"className":855},[827],[829,857,858],{},"Does it work with infinite scroll?",[15,860,861],{},"Yes. Apply it to each appended page or group, so groups scrolled past are skipped. For very long sessions, combine with virtualization to cap DOM size.",[824,863,865,868],{"className":864},[827],[829,866,867],{},"What happens when the user scrolls quickly?",[15,869,870],{},"The browser renders sections as they approach the viewport. On very fast scrolls on slow devices, a brief blank area may appear; a reasonable intrinsic size keeps the layout stable while it renders.",[824,872,874,877],{"className":873},[827],[829,875,876],{},"Does content-visibility reduce memory use?",[15,878,879],{},"Slightly, for rendering data structures, but the DOM is unchanged. Use virtualization if memory is the concern.",[824,881,883,886],{"className":882},[827],[829,884,885],{},"Can I use content-visibility on table rows?",[15,887,888],{},"Table layout depends on all rows, which limits the benefit; support for containment on table parts is also restricted. Group rows in separate tables or use a grid layout for very long tabular data.",[824,890,892,895],{"className":891},[827],[829,893,894],{},"Does content-visibility work in all browsers?",[15,896,897],{},"Current versions of Chromium-based browsers, Firefox and Safari support it. Older browsers ignore the property and render everything, which is the same as not using it, so it is safe as a progressive enhancement.",[824,899,901,904],{"className":900},[827],[829,902,903],{},"Should I combine it with lazy-loading images?",[15,905,906,907,909],{},"Yes. Keep ",[32,908,811],{}," on images in skipped sections; it covers browsers without content-visibility support and makes the intent explicit.",[824,911,913,916],{"className":912},[827],[829,914,915],{},"Does it change how the page prints?",[15,917,918],{},"No. Browsers render skipped content when printing, so printed output includes every section.",[132,920,922],{"id":921},"related","Related",[137,924,925,932,939],{},[140,926,927,931],{},[19,928,930],{"href":929},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps\u002F","contain-intrinsic-size to stop scrollbar jumps"," — getting placeholder sizes right.",[140,933,934,938],{},[19,935,937],{"href":936},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Fvirtualizing-long-lists-in-react\u002F","Virtualizing long lists in React"," — when the DOM itself must shrink.",[140,940,941,944],{},[19,942,943],{"href":21},"CSS containment & content-visibility"," — the topic overview.",[946,947,949],"script",{"type":948},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Use content-visibility: auto on Long Pages\",\n  \"description\": \"A step-by-step guide to applying content-visibility: auto to long pages, measuring the gains, and avoiding the common pitfalls.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Choose the boundary elements\",\n      \"text\": \"Pick elements that are large enough to matter (several hundred pixels tall) and numerous: article sections, groups of cards, comment threads.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Apply the property below the fold only\",\n      \"text\": \"Apply the property below the fold only\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Provide realistic intrinsic sizes\",\n      \"text\": \"Estimate typical section height per template.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Remove scripts that measure skipped content\",\n      \"text\": \"Replace scroll-position calculations that read every section's geometry with IntersectionObserver, which works with skipped content without forcing it to render.\"\n    }\n  ]\n}\n",[946,951,952],{"type":948},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Use content-visibility: auto on Long Pages\",\n  \"description\": \"A step-by-step guide to applying content-visibility: auto to long pages, measuring the gains, and avoiding the common pitfalls.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages\u002F\"\n  }\n}\n",[946,954,955],{"type":948},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Rendering & CSS Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"CSS Containment & content-visibility\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Using content-visibility: auto on Long Pages\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages\u002F\"\n    }\n  ]\n}\n",[396,957,958],{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}",{"title":219,"searchDepth":233,"depth":233,"links":960},[961,962,963,969,970,971,972,973,974,975,976],{"id":134,"depth":233,"text":135},{"id":167,"depth":233,"text":168},{"id":199,"depth":233,"text":200,"children":964},[965,966,967,968],{"id":204,"depth":261,"text":205},{"id":211,"depth":261,"text":212},{"id":331,"depth":261,"text":332},{"id":341,"depth":261,"text":342},{"id":485,"depth":233,"text":486},{"id":492,"depth":233,"text":493},{"id":643,"depth":233,"text":644},{"id":749,"depth":233,"text":750},{"id":756,"depth":233,"text":757},{"id":786,"depth":233,"text":787},{"id":821,"depth":233,"text":822},{"id":921,"depth":233,"text":922},"A step-by-step guide to applying content-visibility: auto to long pages, measuring the gains, and avoiding the common pitfalls.","md",{"slug":980,"type":981,"breadcrumb":982,"datePublished":990,"dateModified":990},"using-content-visibility-auto-on-long-pages","article",[983,986,987,988],{"name":984,"url":985},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":989},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages\u002F","2026-10-06",true,"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages",{"title":5,"description":994},"Apply content-visibility: auto to long articles, feeds and docs to skip offscreen rendering. Choose boundaries and sizes, and verify the gains in DevTools.","rendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages\u002Findex","CHe-OMVFrKx6V-RRFobbpSous3wy_G1Q5kcZfkOdHBg",[998,1002],{"title":999,"path":1000,"stem":1001,"children":-1},"Isolating Widgets with CSS contain","\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fisolating-widgets-with-css-contain","rendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fisolating-widgets-with-css-contain\u002Findex",{"title":1003,"path":1004,"stem":1005,"children":-1},"DOM Size & List Virtualization","\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization","rendering-css-performance\u002Fdom-size-and-list-virtualization\u002Findex",1791308069638]