From 53cdd3c5072c795df3ec4149c7bf67468311c654 Mon Sep 17 00:00:00 2001 From: Sia Karamalegos Date: Sun, 11 Jul 2021 19:51:37 -0500 Subject: [PATCH 01/10] Add render blocking post --- .../critical_render_path_sia_karamalegos.svg | 1 + src/img/posts/script_tag_attributes.svg | 1 + src/posts/render-blocking-resources.md | 232 ++++++++++++++++++ 3 files changed, 234 insertions(+) create mode 100644 src/img/critical_render_path_sia_karamalegos.svg create mode 100644 src/img/posts/script_tag_attributes.svg create mode 100644 src/posts/render-blocking-resources.md diff --git a/src/img/critical_render_path_sia_karamalegos.svg b/src/img/critical_render_path_sia_karamalegos.svg new file mode 100644 index 0000000..eb753be --- /dev/null +++ b/src/img/critical_render_path_sia_karamalegos.svg @@ -0,0 +1 @@ + diff --git a/src/img/posts/script_tag_attributes.svg b/src/img/posts/script_tag_attributes.svg new file mode 100644 index 0000000..411bd0c --- /dev/null +++ b/src/img/posts/script_tag_attributes.svg @@ -0,0 +1 @@ +<script>Scripting:HTML Parser:<script defer>Scripting:HTML Parser:<script async>Scripting:HTML Parser:<script type="module">Scripting:HTML Parser:<script type="module" async>Scripting:HTML Parser:parserfetchexecutionruntime → diff --git a/src/posts/render-blocking-resources.md b/src/posts/render-blocking-resources.md new file mode 100644 index 0000000..96c5c45 --- /dev/null +++ b/src/posts/render-blocking-resources.md @@ -0,0 +1,232 @@ +--- +title: "How to Eliminate Render-Blocking Resources: a Deep Dive" +description: Is Lighthouse telling you to eliminate render-blocking resources? Learn what this means, why it's important, and how to fix it in your HTML, CSS, and JavaScript. +shortDescription: Is Lighthouse telling you to eliminate render-blocking resources? Learn what it means and how to fix it. +date: 2021-07-13 +tags: ['WebPerf', 'JavaScript'] +layout: layouts/post.njk +# tweetId: '1326601057179406338' +isSelect: true +featuredImage: buffalo-blocking-road-tim-wilson_mpq4nt.jpg +--- + +
+ Large buffalo blocking the roadway +
Don't let render-blocking resources block you on the road to good performance. Photo by Tim Wilson on Unsplash
+
+ +You might be here because Lighthouse told you to "eliminate render-blocking resources". Render-blocking resources are a common hurdle to rendering your page faster. They impact your Web Vitals which now impact your SEO. Slow render times also frustrate your users and can cause them to abandon your page. + +I worked with one client to reduce their render-blocking resources and improved their site loading speed. We went from 13% to 80% of page visits experiencing First Contentful Paint (FCP) in less than 1.8 seconds. We're not done yet! + + + +Understanding render-blocking resources will enable you to fix this common web performance issue. In this post, you will learn: + +- What render-blocking resources are +- Why they are important to performance +- How to test and measure your website +- How to fix this issue + +Before we continue, we need to take a step back and understand what the critical rendering path is. + +## What is the critical rendering path? + +We write HTML, CSS, and JavaScript in files and then deliver those files to the browser. The browser converts those files into the page you see through the **critical rendering path**. The steps are: + +1. Download the **HTML** +2. Read the HTML, and concurrently: + - Construct the **Document Object Model** (DOM) + - Notice a `` tag for a stylesheet and download the **CSS** +3. Read the CSS and construct the **CSS Object Model** (CSSOM) +4. Combine the DOM and the CSSOM into a **render tree** +5. Using the render tree, compute the **layout** (size and position of each element) +6. **Paint**, or render, the pixels on the page + +
+ Steps of the critical render path visualized in a diagram +
The critical render path
+
+ +We want this process to go as fast as possible. Can you guess what makes it go slower? + +{% include 'newsletter-aside.njk' %} + +## What are render-blocking resources? + +Render-blocking resources are files that "press pause" on the critical rendering path. They interrupt one or more of the steps. + +HTML is technically render blocking because you need it to create the DOM. Without the HTML we would not even have a page to render. + +However, HTML is not usually the cause of our problems... + +**CSS is render blocking**. The browser needs it before it can create the CSSOM, which blocks all later steps. As soon as the browser encounters a stylesheet `` or `<script>Scripting:HTML Parser:<script defer>Scripting:HTML Parser:<script async>Scripting:HTML Parser:<script type="module">Scripting:HTML Parser:<script type="module" async>Scripting:HTML Parser:parserfetchexecutionruntime → + +- **no attributes**: The HTML parser is blocked during script download and execution. +- **defer**: The HTML parser is not blocked. The browser downloads scripts as it identifies them. It only executes the scripts once it finishes creating the DOM. +- **async**: The HTML parser is blocked during script execution. The browser downloads scripts as it identifies them. After download, the scripts block the HTML parser until execution finishes. +- **module**: Behaves like defer but can manage ES6 module imports. + +Choose wisely. In most cases you will want either `defer` or `async` to optimize the critical rendering path. If you have an inline script which must run synchronously, test moving it above your styles in your HTML. + +## Conclusion + +Render-blocking resources can kick off a cascade of performance issues. Those performance issues result in unhappy users who abandon your page faster. + +Lighthouse and the Coverage tool can help you identify this issue and evaluate what your best options are. We learned to: + +- reduce our CSS and JavaScript bytes, +- lazy-load non-critical CSS and JavaScript, and +- use the `defer`, `async`, or `module` attribute on our scripts. + +I'd love to hear what worked for you! [Tweet at me](https://mobile.twitter.com/TheGreenGreek) with your replies. + +Fixing web performance issues can be overwhelming. If you need more help, I'm available for performance consulting projects. [Contact me](/contact) today! From 98c4c0bb4a6c179f18ba98a9cefa78be7133434f Mon Sep 17 00:00:00 2001 From: Sia Karamalegos Date: Mon, 12 Jul 2021 12:18:28 -0500 Subject: [PATCH 02/10] Update and add more diagrams --- src/css/index.css | 8 ++--- src/img/critical_render_path_CSS_JS.svg | 1 + ...tical_render_path_CSS_JS_karamalegos_2.svg | 1 + .../critical_render_path_JS_karamalegos.svg | 1 + .../critical_render_path_sia_karamalegos.svg | 2 +- src/posts/render-blocking-resources.md | 31 +++++++++++++------ 6 files changed, 30 insertions(+), 14 deletions(-) create mode 100644 src/img/critical_render_path_CSS_JS.svg create mode 100644 src/img/critical_render_path_CSS_JS_karamalegos_2.svg create mode 100644 src/img/critical_render_path_JS_karamalegos.svg diff --git a/src/css/index.css b/src/css/index.css index 769ea6f..78a319b 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -95,7 +95,7 @@ html, body { color: var(--grey-80); display: grid; font-family: var(--font-body); - grid-template-rows: 1fr auto; + grid-template-rows: auto 1fr auto; line-height: 1.5; margin: 0; min-height: 100%; @@ -411,9 +411,10 @@ pre { nav { background-color: rgba(252,252,253,0.95); font-family: var(--font-display); - position: fixed; + /* position: fixed; */ width: 100%; - z-index: 2;} + /* z-index: 2; */ +} nav .content { align-items: center; display: flex; @@ -560,7 +561,6 @@ a.direct-link:focus, /* Footer */ footer { - grid-row: 2; padding: 16px 16px 0; text-align: center; width: 100%;} diff --git a/src/img/critical_render_path_CSS_JS.svg b/src/img/critical_render_path_CSS_JS.svg new file mode 100644 index 0000000..41deb9a --- /dev/null +++ b/src/img/critical_render_path_CSS_JS.svg @@ -0,0 +1 @@ + diff --git a/src/img/critical_render_path_CSS_JS_karamalegos_2.svg b/src/img/critical_render_path_CSS_JS_karamalegos_2.svg new file mode 100644 index 0000000..bc6bf43 --- /dev/null +++ b/src/img/critical_render_path_CSS_JS_karamalegos_2.svg @@ -0,0 +1 @@ + diff --git a/src/img/critical_render_path_JS_karamalegos.svg b/src/img/critical_render_path_JS_karamalegos.svg new file mode 100644 index 0000000..e9f9948 --- /dev/null +++ b/src/img/critical_render_path_JS_karamalegos.svg @@ -0,0 +1 @@ + diff --git a/src/img/critical_render_path_sia_karamalegos.svg b/src/img/critical_render_path_sia_karamalegos.svg index eb753be..7e9007d 100644 --- a/src/img/critical_render_path_sia_karamalegos.svg +++ b/src/img/critical_render_path_sia_karamalegos.svg @@ -1 +1 @@ - + diff --git a/src/posts/render-blocking-resources.md b/src/posts/render-blocking-resources.md index 96c5c45..c6f07d8 100644 --- a/src/posts/render-blocking-resources.md +++ b/src/posts/render-blocking-resources.md @@ -47,11 +47,11 @@ We write HTML, CSS, and JavaScript in files and then deliver those files to the 5. Using the render tree, compute the **layout** (size and position of each element) 6. **Paint**, or render, the pixels on the page -
+
Steps of the critical render path visualized in a diagram -
The critical render path
+
The critical render path (link)
We want this process to go as fast as possible. Can you guess what makes it go slower? @@ -66,14 +66,27 @@ HTML is technically render blocking because you need it to create the DOM. Witho However, HTML is not usually the cause of our problems... -**CSS is render blocking**. The browser needs it before it can create the CSSOM, which blocks all later steps. As soon as the browser encounters a stylesheet `` or `<script>Scripting:HTML Parser:<script defer>Scripting:HTML Parser:<script async>Scripting:HTML Parser:<script type="module">Scripting:HTML Parser:<script type="module" async>Scripting:HTML Parser:parserfetchexecutionruntime → +<script>Scripting:HTML Parser:<script defer>Scripting:HTML Parser:<script async>Scripting:HTML Parser:<script type="module">Scripting:HTML Parser:<script type="module" async>Scripting:HTML Parser:parserfetchexecutionruntime → - **no attributes**: The HTML parser is blocked during script download and execution. - **defer**: The HTML parser is not blocked. The browser downloads scripts as it identifies them. It only executes the scripts once it finishes creating the DOM. From 11f4a5a18490c8f098e7ed9ec5ed916aaad7921b Mon Sep 17 00:00:00 2001 From: Sia Karamalegos Date: Mon, 12 Jul 2021 13:03:43 -0500 Subject: [PATCH 03/10] Barry edits --- src/posts/render-blocking-resources.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/posts/render-blocking-resources.md b/src/posts/render-blocking-resources.md index c6f07d8..46f8d73 100644 --- a/src/posts/render-blocking-resources.md +++ b/src/posts/render-blocking-resources.md @@ -23,7 +23,7 @@ You might be here because Lighthouse told you to "eliminate render-blocking reso I worked with one client to reduce their render-blocking resources and improved their site loading speed. We went from 13% to 80% of page visits experiencing First Contentful Paint (FCP) in less than 1.8 seconds. We're not done yet! - + Understanding render-blocking resources will enable you to fix this common web performance issue. In this post, you will learn: @@ -88,11 +88,11 @@ Additionally, if CSS has already begun download, the script will stop running to CSS blocks script execution, and JavaScript blocks construction of the DOM! Sounds like a giant mess, right? Stay tuned to learn how we can clean it up! - + ## Why is it so important to eliminate render-blocking resources? -Render-blocking resources trigger a cascade of failures for web performance. First paint gets slowed down which causes Largest Contentful Paint (LCP) to be slower. LCP is one of the Core Web Vitals which are now [used to calculate your search engine rankings](https://developers.google.com/search/docs/advanced/experience/page-experience). +Render-blocking can resources trigger a cascade of failures for web performance. First paint gets slowed down which causes Largest Contentful Paint (LCP) to be slower. LCP is one of the Core Web Vitals which are now [used to calculate your search engine rankings](https://developers.google.com/search/docs/advanced/experience/page-experience). SEO is important for discovery of your website. Performance is critical for keeping a visitor on your page. Page abandonment increases significantly if the page doesn't load within 3 seconds. Many companies have seen significant increases in conversions after improving performance. @@ -107,7 +107,9 @@ SEO is important for discovery of your website. Performance is critical for keep If you failed this metric in Lighthouse, then you've already discovered one way to test for this. If you're new to Lighthouse, then check out the official [Lighthouse](https://developers.google.com/web/tools/lighthouse) page to get started. -Candidates for render-blocking resources include both scripts and styles: +We all have render-blocking resources on our sites (all the CSS!). The problem comes in when it significantly impacts our performance. When this occurs, Lighthouse flags it, and we should do something about it. + +Lighthouse candidates for render-blocking resources include both scripts and styles: - `