CDS 2020: New CSS properties for performance
There are two new CSS properties that may help with the layout shift core vitals issue. The `content-visibility` property allows us to tell the browser when to render an element. The “magic” value here is auto, which tells the browser not to render an element until it’s visible in the viewport. This makes page loads significantly faster, the browser doesn't need to render above-the-fold content initially. The `content-visibility` property works hand in hand with the `contain-intrinsic-size` property to prevent potential issues with Cumulative Layout Shift. Because the browser isn’t rendering the element fully on load, there may be some shift when it renders the element. In order to minimize shifts happening on the page, we can use the `contain-intrinsic-size` property to specify dimensions for the element even without the content being rendered. I work a lot with Youtube iframe embeds wrapped around a div with class `video`. If you have many of these on the page it may cause layout shifts. One way to minimize the CLS for these videos may be to use these new attributes in addition to other attributes. ```css .video { /* other attributes go here */ content-visibility: auto; /* set height to 560px x 315px */ contain-intrinsic-size: 560px 315px; } ``` ## Improving performance with `content-visibility` Depending on the layout of your site, you may want to study where in your layout you want to use some of these new attributes on their own to improve your site's rendering. Take the following layout, which may look familiar if you've worked in WordPress before, it's modeled after a WordPress site's blog index page: ```html
Site Title
introductory content
post title
Post content
post title
Post content
post title
Post content