And the content is usually static, so we don’t need to account for any dynamic content being loaded that can affect our metrics. Blog pages tend to be long, so there is often some content below the fold that can benefit from delayed rendering. So, to leverage the power of content-visibility and measure the benefits as accurately as possible, I’ve put together a demo blog.Ī blog is a good test case for this because it has text, images, and various other HTML elements. Sure, it all sounds good in theory, but let’s dig deeper. Measuring the power of content-visibility So, postponing rendering these elements reduces the initial rendering time so a user can see the content faster. This makes sense because the user will not initially see the elements that stay outside of their screen, meaning that these elements are unnecessary during the initial page load. content-visibility has an auto option that detects whether an element is within the viewport of the user and skips the rendering for the elements that haven’t yet enter the viewport yet. If the browser didn’t render some of the elements within the page, scrolling would be a nightmare because it wouldn’t be possible to calculate the page height correctly. Rendering all the elements at once allows the browser to calculate the dimensions of a page correctly while keeping the page layout and the scrollbar consistent throughout the page. Users can see the elements that fit into their viewport and view the other elements within the page by scrolling. By default, browsers render all the elements within the DOM tree that can be viewed by the user. The key capability of content-visibility is that it allows us to postpone the rendering of HTML elements we choose. How content-visibility improves rendering performance In this blog post, we’ll learn about content-visibility, how it helps with rendering performance, and how it compares to display and visibility properties. However, content-visibility operates differently than those do. It is somewhat similar to display and visibility properties that already exist. Essentially, this property changes the visibility of an element and manages its render state.
Influencing browser rendering processes is now even easier to do, thanks to the new CSS content-visibility property.
Using CSS content-visibility to boost your rendering performanceĭevelopers don’t typically prioritize rendering performance when they aim to improve and optimize their websites.Īfter all, there are other optimizations such as improving server response times, reducing file sizes, and prioritizing the file loads that provide immediate visible improvement. I build scalable, maintainable, performant frontends and backends.
#Content visibility software
Ozan Tunca Follow I'm a senior software engineer working mainly with JavaScript (read: TypeScript).
0 kommentar(er)
