diff options
Diffstat (limited to 'doc/development/fe_guide/performance.md')
| -rw-r--r-- | doc/development/fe_guide/performance.md | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md index dd3945ae324..e7f347554d7 100644 --- a/doc/development/fe_guide/performance.md +++ b/doc/development/fe_guide/performance.md @@ -255,18 +255,18 @@ We support two types of prefetching for the chunks: - The [`prefetch` link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/prefetch) is used to prefetch a chunk for the future navigation -- The [`preload` link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preloadh) - is used to prefetch a chunk that is crucial for the current navigation but is not +- The [`preload` link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) + is used to prefetch a chunk that is crucial for the current navigation but is not discovered until later in the rendering process -Both `prefetch` and `preload` links bring the loading performance benefit to the pages. Both are +Both `prefetch` and `preload` links bring the loading performance benefit to the pages. Both are fetched asynchronously, but contrary to [deferring the loading](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) of the assets which is used for other JavaScript resources in the product by default, `prefetch` and -`preload` neither parse nor execute the fetched script unless explicitly imported in any JavaScript -module. This allows to cache the fetched resources without blocking the execution of the +`preload` neither parse nor execute the fetched script unless explicitly imported in any JavaScript +module. This allows to cache the fetched resources without blocking the execution of the remaining page resources. -To prefetch a JavaScript chunk in a HAML view, `:prefetch_asset_tags` with the combination of +To prefetch a JavaScript chunk in a HAML view, `:prefetch_asset_tags` with the combination of the `webpack_preload_asset_tag` helper is provided: ```javascript @@ -280,8 +280,8 @@ This snippet will add a new `<link rel="preload">` element into the resulting HT <link rel="preload" href="/assets/webpack/monaco.chunk.js" as="script" type="text/javascript"> ``` -By default, `webpack_preload_asset_tag` will `preload` the chunk. You don't need to worry about -`as` and `type` attributes for preloading the JavaScript chunks. However, when a chunk is not +By default, `webpack_preload_asset_tag` will `preload` the chunk. You don't need to worry about +`as` and `type` attributes for preloading the JavaScript chunks. However, when a chunk is not critical, for the current navigation, one has to explicitly request `prefetch`: ```javascript @@ -454,5 +454,5 @@ General tips: - [WebPage Test](https://www.webpagetest.org) for testing site loading time and size. - [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) grades web pages and provides feedback to improve the page. -- [Profiling with Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/) +- [Profiling with Chrome DevTools](https://developer.chrome.com/docs/devtools/) - [Browser Diet](https://browserdiet.com/) is a community-built guide that catalogues practical tips for improving web page performance. |