Skip to content

Commit

Permalink
Update the "Nonblocking files" section in the docs
Browse files Browse the repository at this point in the history
Added few paragraphs about optimizing FCP times, deferring non-critical JS and CSS, may update in the future again
  • Loading branch information
choutkamartin authored and mdo committed Mar 10, 2021
1 parent 2732a60 commit a245ef4
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion site/content/docs/5.0/customize/optimize.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,18 @@ Whenever possible, be sure to compress all the code you serve to your visitors.

## Nonblocking files

_Help wanted with this section, please consider opening a PR. Thanks!_
While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough.

If you are using a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.

You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes.

This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.

If you want to learn more about this, there are already a lot of great articles about it:

- <https://web.dev/render-blocking-resources/>
- <https://web.dev/defer-non-critical-css/>

## Always use HTTPS

Expand Down

0 comments on commit a245ef4

Please sign in to comment.