For example, preload as=“style” will get the highest priority while as=”script” will get a low or medium priority. Preloaded resources using the “as” attribute will have the same resource priority as the type of resource they are requesting. Images start off with a lower priority and after layout is done and they are discovered to be in the viewport, will get a priority boost (but note that images already in flight when layout completes won’t be reprioritized). Images (that are visible and in the viewport) have a higher priority (Net:Medium) than those that are not in the viewport (Net:Lowest), so to some extent Chrome will do it’s best to pseudo-lazy-load those images for you. Async/defer/injected scripts (regardless of where they are in the document) are Net:Lowest.Blocking scripts requested after the first image is fetched are Net:Low.Blocking scripts requested before the first image (an image early in the document) are Net:Medium.Scripts get different priorities based on where they are in the document and whether they are async, defer or blocking: Let’s talk about this table for a moment. Thanks to Paul Irish for updating this table with the DevTools priorities mapping to the Net and Blink priorities. ** “Early” is defined as being requested before any non-preloaded images have been requested (“late” is after). With no “as” they will behave like an XHR. preload as=style will use Highest priority). * Preload using “as” or fetch using “type” use the priority of the type they are requesting. Here’s a break-down ( courtesy of Pat Meenan) showing how different resources are prioritized in Blink as of Chrome 46 and beyond: How does Chrome’s network prioritisation handle preload and prefetch? Instead, it goes up to the memory cache and stays there until it gets used. If the resource is not cacheable, it does not get stored in the HTTP cache. If the resource can be cached (e.g there’s a valid cache-control with valid max-age), it is stored in the HTTP cache and is available for current and future sessions. When a resource is preloaded or prefetched it travels up from the net stack through to the HTTP cache and into the renderer’s memory cache. Both preload and prefetched resources are stored in the HTTP cache. What is the caching behavior for and ?Ĭhrome has four caches: the HTTP cache, memory cache, Service Worker cache & Push cache. If we used preload for this use case, it would be immediately cancelled on Page A’s unload.īetween preload and prefetch, we get solutions for loading critical resources for the current navigation _or_ a future navigation. If Page A initiates a prefetch request for critical resources needed for Page B, the critical resource and navigation requests can be completed in parallel. Prefetch serves a slightly different use case - a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations. Preload is an early fetch instruction to the browser to request a resource needed for a page (key scripts, Web Fonts, hero images). Prefetch resources likely to be used for future navigations across multiple navigation boundaries. Tip: Preload resources you have high-confidence will be used in the current page. Before that, let’s dive into how the network stack actually treats preload vs prefetch. Preload is used in production by large sites for a number of use-cases and you can find more of them later on in the article. Top: without preload, Bottom: with preloadĪnd the Chrome Data Saver team saw time to first contentful paint improvements of 12% on average for pages that could use preload on scripts and CSS stylesheets.Īs for prefetch, it’s widely used and at Google we still use it in Search results pages to prefetch critical resources that can speed up rendering destination pages.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |