Eliminate Render Blocking
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Blog | 20,680 | 4 years ago | 11 | |||||||
| 没事写写文章，喜欢的话请点star，想订阅点watch，千万别fork！ | ||||||||||
| Awesome Pagespeed Metrics | 597 | 2 years ago | 5 | cc0-1.0 | ||||||
| ⚡Metrics to help understand page speed and user experience | ||||||||||
| Frontend Nanodegree Mobile Portfolio | 328 | a year ago | 41 | JavaScript | ||||||
| Udportfolio | 59 | 7 years ago | 7 | JavaScript | ||||||
| Web Performance | 5 | 9 years ago | ||||||||
| Front End Optimization | 3 | 7 years ago | JavaScript | |||||||
| This repository is for udacity's front end optimization project. | ||||||||||
| Eliminate Render Blocking | 3 | 7 years ago | ||||||||
| ⚡ How to eliminate render-blocking JavaScript and CSS, Dec 2016 | ||||||||||
| Fis | 2 | 6 years ago | 10 | |||||||
| 解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题 | ||||||||||
| Website Optimization | 2 | 9 years ago | JavaScript | |||||||
| Optimized a provided website to achieve 60FPS and achieve grades of 90 and above on Google PageSpeed Insights | ||||||||||
| Website Optimization | 1 | 7 years ago | JavaScript | |||||||
| Udacity Front-End Nanodegree | ||||||||||
⚡ How to eliminate render-blocking JavaScript and CSS
Csaba Palfi, Dec 2016
Most web performance recommendations are simple to put into practice. Minifying assets or optimizing images is a matter of configuring some basic tooling.
Other optimizations assume you have more knowledge of browser internals but can really pay off in terms of user experience. (Especially for mobile users on a slow connection.)
This post is about eliminating render blocking resources and prioritizing above-the-fold content. These practices enable optimized (progressive) rendering of your web pages.
Do you have the problem?
PageSpeed Insights
Do you fail the PageSpeed Insights rule below?
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Hint: use ngrok to run PageSpeed Insights against localhost or a private network.
WebPageTest.org
Is your Speed index, Start Render and Visually Complete times too high? Ideally your Visually Complete time should be less than a second.
(See the Details tab on the results page for the Visually Complete time.)
Chrome Developer Tools
Enable throttling (e.g 2G or 3G) in the Network tab then go to your page. Are you staring at a blank screen for seconds? (Be sure to start from about:blank to really see how long it takes for rendering to start).
You can also look at the screenshots/filmstrip in the Timeline tab.
How CSS resources can block rendering?
It's important to understand the critical steps that need to happen before a single pixel can be painted on the screen. The browser:
- parses your HTML into the DOM tree and your CSS into a CSSOM tree
- these are combined into a render tree that only contains the visible DOM content
- the layout and paint steps depend on the render tree which depends on the CSSOM - nothing can be put on the screen before that's ready
When the browser encounters a link tag for a stylesheet it'll have to go and fetch it as it's needed for building the render tree. Sometimes that CSS file is your bundle containing the styles for your whole page (maybe even the whole website).
Your users could be waiting for the styles for something that's not even on the screen! (i.e. below the fold). For someone on a slow connection that can mean seeing a blank screen for seconds.
Side-note: The main reason why the browser block rendering until it has the styles is to avoid FUOC.
How to fix render blocking CSS?
Inline critical styles
Critical-path styles are the styles that are required to render correctly everything that's above the fold.
You should inline these styles to avoid additional HTTP requests blocking initial rendering. You'll find that there's a collection of tools to help with this.
<head>
...
<style>critical CSS rules here</style>
...
</head>
Some additional tips:
- You should consider figuring out what above-the-fold means for your users based on web analytics.
- Also make sure you don't use
@importstatements in critical CSS as that'll also trigger additional HTTP requests. - Be sure not to inline too much CSS as that'll also slow down your initial render.
- Read some more explanation/tips from Google and Varvy.
Load non-critical CSS asynchronously
Inlining your critical CSS is not enough as the browser will still block rendering as soon as it encounters your non-critical CSS referenced using a link tag.
Luckily there's a new browser feature called Preload (aka rel=preload) that allows us to start fetching our CSS but prevent it from blocking. At the moment it's only supported on Chrome but it can be polyfilled on other browsers.
See recommended usage in the polyfill docs. Your code for this will look something like this:
<head>
...
<link rel="preload" href="/non-critical.css" as="style" onload="this.rel='stylesheet'">
<script>inlcude loadCSS polyfill here</script>
...
</head>
Tip: The linked polyfill is not in any module format but with Webpack you can just use the script-loader to make sure it runs properly.
How about render-blocking JavaScript?
JavaScript can also block rendering. When the browser sees a script tag it'll need to pause building the DOM tree and execute the script. That's one of the reasons why it's generally recommended to have script tags at the bottom of you page. Fortunately it's also much easier to make JavaScript loading asynchronous since the script tag has the async attribute.
You might also want to inline some (small amount of!) JavaScript that's critical for above the fold content (and of course the loadCSS polyfill if you're using rel=preload for styles)
