Users like fast web apps. They want pages that load quickly and function smoothly. If there are broken animations or lags in scrolling, users are likely to leave your site. As a developer, there are many things you can do to improve the user experience. This article focuses on four CSS tricks you can use to speed up your page rendering.

1. Content-visibility

In general, most Web applications have complex UI elements that extend beyond what the user sees in the browser view. In this case, we can use content-visibility to skip rendering of off-screen content. If you have a lot of off-screen content, this will greatly reduce page rendering time.

This feature is one of the most recent additions and one of the most significant to improving rendering performance. Although content-visibility accepts several values, we can use content-visibility on elements: auto; To get an immediate performance boost.

Let’s consider the following page, which contains cards with many different pieces of information. While about a dozen cards fit on the screen, there are about 375 cards in the list. As you can see, the browser took 1037ms to render the page.

Next, you can add Content-visibility to all cards.

In this example, after adding Content-Visibility to the page, rendering time drops to 150ms, which is a more than 6-fold performance improvement.

As you can see, content visibility is quite powerful and useful for improving page rendering times. Based on what we’ve discussed so far, you must be using it as a silver bullet for page rendering.

The content – the visibility of the restrictions

However, there are several areas where content visibility is poor. I would like to emphasize two points for your reference.

  • This feature is still experimental. As of now, Firefox (PC and Android versions), Internet Explorer (I don’t think they have plans to add this feature to Internet Explorer), and Safari (Mac and iOS) don’t support content visibility.
  • Problems related to scrollbar behavior. Because the initial render height of the elements is 0px, they come onto the screen every time you scroll down. The actual content is rendered and the height of the element is updated accordingly. This causes the scrollbar to behave in an unexpected way.

To fix the scroll bar problem, you can use another CSS property called contain-intrinsic-size. It specifies the natural size of an element, so the element will be rendered at a given height instead of 0px.

.element{
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}
Copy the code

However, while experimenting, I noticed that even with conta-intrinsic-size, if we have a large number of elements and content-visibility is set to Auto, you still have smaller scrollbar issues.

So my advice is to plan out your layout, break it down into parts, and then use content visibility on those parts to get better scrollbar behavior.

2. Will change attribute

Animations on browsers are nothing new. Typically, these animations are rendered periodically along with other elements. However, browsers can now use gpus to optimize some of these animation operations.

With will-change CSS properties, we can indicate that the element will modify specific properties, allowing the browser to make the necessary optimizations beforehand.

What happens next is that the browser creates a separate layer for this element. It then delegates rendering of that element to the GPU along with other optimizations. This will make the animation smoother as GPU acceleration takes over the rendering of the animation.

Consider the following CSS classes:

// In stylesheet
.animating-element {
  will-change: opacity;
}

// In HTML
<div class="animating-elememt">
  Animating Child elements
</div>
Copy the code

When rendered in the browser, it recognizes the will-change property and optimizes future changes related to opacity.

Based on the performance benchmarks Maximillian Laumeister did, we can see that he achieved a render speed of over 120FPS with this single line change, compared to the initial render speed of around 50FPS.

When is it not will-change

While will-change is intended to improve performance, it can also degrade the performance of Web applications if you abuse it.

  • ** Use will-change to indicate that the element will change in the future. ** Therefore, if you try to use will-change and animation at the same time, it will not give you optimization. Therefore, it is recommended to use will-change on the parent element and animation on the child element.

    .my-class{
  will-change: opacity;
}
.child-class{
  transition: opacity 1s ease-in-out;
}
Copy the code

  • Do not use non-animated elements. When you use will-change on an element, the browser tries to optimize it by moving the element to a new layer and handing the conversion over to the GPU. If you don’t have anything to convert, you can waste resources.

One final note is that it is recommended to remove the element’s will-change after all animations are completed.

3. Reduce render blocking time

Today, many Web applications must satisfy multiple forms of demand, including PCS, tablets, and mobile phones. To achieve this responsive nature, we had to write new styles based on the media size. When it comes to page rendering, it cannot start the rendering phase until the CSS object model (CSSOM) is ready. Depending on your Web application, you may have a large style sheet to accommodate all device form factors.

However, suppose we split it into multiple stylesheets based on form factors. In this case, we can just have the main CSS file block the critical path and download it at high priority, while the other stylesheets download it at low priority.

<link rel="stylesheet" href="styles.css">
Copy the code

After breaking it down into multiple stylesheets:

<! -- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />
<! -- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="ex.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
Copy the code

As you can see, shredding stylesheets by style factors reduces rendering blocking time.

4. Avoid @import containing multiple stylesheets

With @import, we can include a stylesheet in another stylesheet. When working on a large project, using @import makes the code much more concise.

The key fact about @import is that it is a blocking call because it has to fetch the file through a network request, parse the file, and include it in the stylesheet. If we nested @import in the stylesheet, it would hinder rendering performance.

# style.css
@import url("windows.css");
# windows.css
@import url("componenets.css");
Copy the code

Compared to @import, we can achieve the same functionality with multiple links, but the performance is much better because it allows us to load the stylesheet in parallel.

conclusion

In addition to the four areas we’ve discussed in this article, there are a few other ways you can use CSS to improve the performance of your web pages. One of CSS’s most recent features, Content-Visibility, looks so promising in years to come, as it brings a multifold performance boost to page rendering.

Best of all, we don’t need to write a single JavaScript statement to get all the performance.

I believe you can combine some of the above features to build better performing Web applications for end users. Hope you found this article useful, and if you know of any CSS tricks that can improve the performance of Web applications, please mention them in the comments below. Thank you.

Original text: blog. Zhangbing. Site / 2020/12/28 /…