Sign in

How to improve page rendering speed with CSS only?

When users visit a Web site (page) or application, they always want it to load quickly and function smoothly. If it is too slow, users are likely to lose patience and leave your Web site or application. As a developer, providing faster access to their applications and providing a good user experience are essential basic skills, and web developers can also do a lot of things to improve user experience during development. So let’s talk to you today, what are the techniques in CSS that can help us improve the rendering speed of Web pages.

content-visibility

Generally speaking, most web applications have complex UI elements, and some content will be outside the visible area of ​​the device (the content exceeds the visible area of ​​the user’s browser). For example, the red area in the figure below is on the screen of the mobile device Outside the visible area:

In this case, we can use CSS content-visibility to skip the off-screen content rendering. In other words, if you have a lot of off-screen content, this will greatly reduce page rendering time.

This function is a new feature of CSS and belongs to W3C’s CSS Containment Module Level 2 module. It is also one of the features that have the greatest impact on improving rendering performance. content-visibilityAcceptable visible, autoand hiddenthree property values, but we can use an element content-visibility:autodirectly to the page rendering performance.

Suppose we have a page like the following, the entire page has a list of cards, about 100 cards, and the visible area of ​​the screen can display 4 cards. As shown in the figure below, rendering this page browser takes approximately 1037ms:

We can add content-visibility to all cards:

.card {
content-visibility: auto;
}

After all the cards havecontent-visibilitystyled, the rendering time of the page is reduced to 150msalmost six times the rendering performance:

As you can see, it content-visibilityis very powerful and very useful to improve page rendering. In other words, with CSS content-visibilityproperties, it becomes easier to influence the rendering process of the browser. In essence, this attribute changes the visibility of an element and manage their rendering state.

content-visibilityIt's a bit similar to CSS displayand visibilityproperties, however, content-visibilityis different from these properties.

content-visibilityThe key capability is that it allows us to postpone the rendering of the selected HTML element.

content-visibilityExtended reading of attributes:

I am Duke, currently work as Full-stack developer in Impact North. I am interested in ReactJS, Python etc. My sologan is “keep hungry keep foolish”.