diff options
| author | Martin Choutka <martafiixek@gmail.com> | 2021-03-03 01:57:30 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2021-03-10 19:57:50 +0300 |
| commit | a245ef46e2143851465951b363df403f2e3add19 (patch) | |
| tree | 951f32dad830a989292da03ba0ca1209615df9ac /site/content/docs/5.0 | |
| parent | 2732a60ecdc23578f6f0c0113271fbd047b707a2 (diff) | |
Update the "Nonblocking files" section in the docs
Added few paragraphs about optimizing FCP times, deferring non-critical JS and CSS, may update in the future again
Diffstat (limited to 'site/content/docs/5.0')
| -rw-r--r-- | site/content/docs/5.0/customize/optimize.md | 13 |
1 files changed, 12 insertions, 1 deletions
diff --git a/site/content/docs/5.0/customize/optimize.md b/site/content/docs/5.0/customize/optimize.md index 6763d95c5a..0911667d0c 100644 --- a/site/content/docs/5.0/customize/optimize.md +++ b/site/content/docs/5.0/customize/optimize.md @@ -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 |