diff options
Diffstat (limited to 'site/content/docs/5.0/customize/optimize.md')
| -rw-r--r-- | site/content/docs/5.0/customize/optimize.md | 19 |
1 files changed, 16 insertions, 3 deletions
diff --git a/site/content/docs/5.0/customize/optimize.md b/site/content/docs/5.0/customize/optimize.md index fbf3f6b05..0911667d0 100644 --- a/site/content/docs/5.0/customize/optimize.md +++ b/site/content/docs/5.0/customize/optimize.md @@ -72,8 +72,21 @@ 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. -## Always use https +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. -_Help wanted with this section, please consider opening a PR. Thanks!_ +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 + +Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and [there is no such thing as non-sensitive web traffic](https://https.cio.gov/everything/). The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs. + +Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you'll be sending users [mixed active content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content), leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you're getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections. |