In the early days of the internet, websites were primarily used to show text based information. Slowly, our connection speeds have improved and users have been able to download high-resolution images and videos fairly quickly. Now websites do a lot more than just provide necessary information in the form of text. Websites are becoming more complicated, with CSS and JavaScript frameworks, plugins galore and more. With all of this in play, loading all the necessary files for all of this can take some time.
A faster website can result in a better user experience, which can make a huge difference in a website's success. What can developers do to start making performance improvements? One thing that developers can do which helps greatly is to inline critical CSS and load non-critical CSS asynchronously. In this article, we'll cover these points one-by-one and help you improve your website's performance.
What is Critical CSS?
The critical CSS in your project is the CSS that's used to style the above-the-fold content of your website. Above-the-fold content is what users see on your website first, which can include navigation and other elements. So it's very important to properly style and render this part of the website as quickly as possible.
One thing that I would like to mention here is that your visitors probably use a myriad of devices with different viewports to visit your website. So, above-the-fold content is not going to be of much help by itself. To solve this issue, you should also consider any CSS related to the basic layout and typography to be critical as well.
Modern web development practices often recommend that you inline your critical CSS. It would be placed into your web page like so:
[code language="html"]
<!doctype html>
<html>
<head>
<title>An Optimized Web Page</title>
<style type="text/css"> (Your minified critical CSS would be here) </style>
</head>
<body>
(Your markup)
</body>
</html>
[/code]
Why is Inlining Necessary?
If you head over to Google PageSpeed Insights and analyze one of your web pages, you might see warnings about optimizing your CSS delivery by inlining critical CSS and loading render-blocking stylesheets asynchronously.
Browsers won't render the above-the-fold content of your web pages unless they have loaded all of your CSS files. This can be a big deal when a lot of files need to be loaded.
Not all of your users will have a fast internet connection and waiting for the libraries, CSS and JavaScript to load before they can actually access the content they came for can be very frustrating. Even users with fast internet can loose connectivity in certain situations, like when they are passing through a tunnel. At this point, they would still be able to access the main content if your website has inlined critical CSS and doesn't load other files before showing main content.
The image below illustrates the difference between a regular and an optimized web page. As you can see, the optimized version will allow users to access the content about 0.5 seconds earlier. The improvements will be more pronounced when there are a lot of extra libraries that need to be loaded.
Continue reading %How and Why You Should Inline Your Critical CSS%
by Asha Laxmi via SitePoint
No comments:
Post a Comment