• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Increase Web Application Performance Using content-visibility

CSS · August 31, 2020

The web continues to advance forward and like a few other convenient CSS properties such as native image lazy loading, Google have once against shipped a new feature which I am hopeful will make it into other browsers shortly called content-visibility which is part of the CSS Containment Specification.

The crux of this new property is you can tell the browser to ignore rendering of certain elements that are off-screen. Traditionally, when you load a webpage, it will draw it from top to bottom (regardless of what is visible and what isn’t), this is why virtualisation techniques are popular (especially for long grids).

As you can see in the handy reference image provided by Google, the browser will only draw the first few elements and then ignore the rest until it’s used. Rendering time is significantly reduced and therefore, increases your first paint as well as load time by a huge factor.

A good use-case for content visibility is a feed. Think of a site like Pinterest or application like Instagram which shows a few images above-the-fold, but a bunch more below-the-fold. Why should the browser rendering everything, especially if the user doesn’t scroll beyond what is visible? (maybe they click the first item they see).

Perhaps one of the coolest and most exciting features of this property besides speeding up initial render of your applications astronomically is being able to use it for hidden elements. Think of it as display: none; on steroids by being able to specify content-visibility: hidden which will hide the element and preserve its rendering state, if there are any changes that need to happen, they’ll only happen if the element is visible.

You’re probably excited, you want to rush out and make your websites and applications faster for your users; here is the kicker — This feature is only launched in Chromium 85, with Firefox prototyping the property but not committing to its implementation. This means Chromium-based browsers (Google Chrome, Microsoft Edge and Opera) will have support.

When you see such useful and exciting features being shipped in Chromium, it makes you thankful that Chrome is the dominant browser with 65% of market share in July 2020 because it means you can use this feature today with great effect. Understandably, Mozilla has fewer resources than Google, so implementing new features like these into Firefox takes a little longer and requires more assessment before proceeding.

The future of the web is bright.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • Thoughts on the Flipper Zero
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz