Preloading allows you to specify resources (such as fonts, images, JavaScript, and CSS) that are needed immediately or quickly during page loading. On every page of your website...Add one at the top of the sectionlink rel='preload'Label.
For example:
When you open a web page, the browser requests the HTML document from the server, parses its contents, and submits a separate request for the referenced resource. As a developer, you know all the resources the page needs and which resources are the most important. You can use this knowledge to request critical resources in advance to speed up the loading process. This article describes how to use theTo achieve this goal.
How preloading works
Preloading is best suited for resources that browsers usually discover later.
In this case, the Pacifico font is passed through the stylesheet@font-faceDefined by rules. The browser loads the font file only after it has finished downloading and parsing the stylesheet.
By preloading a resource, you want the browser to get the resource earlier than you normally find it, because you think it is important to the current page.
In this case, the Pacifico font is preloaded, so the download occurs in parallel with the stylesheet.
The key request chain represents the order in which the browser prioritizes and acquires resources. Lighthouse identifies the assets at the third layer of the chain as those discovered later. You can use the preload key request audit to determine which resources to preload.
You can add to the header of the HTML document withrel="preload"OfTag to preload resources:
The browser caches preloaded resources so that they are available immediately when needed. (it does not execute scripts or apply style sheets. )
After preloading, many websites, including Shopify, Financial Times, and Treebo, have achieved an one-second improvement in user-centric metrics such as Time to Interactive and First Contentful Paint.
Browsers execute things such aspreconnectAndprefetchWait for resource prompts. On the other hand,preloadIt is mandatory for browsers. Modern browsers are already very good at prioritizing resources, which is why they are used cautiouslypreloadAnd preloading only the most critical resources is as important.
loadA console warning in Chrome is triggered approximately 3 seconds after the event.
Supported by all modern browserspreload.
Helps to fix the following two types of warnings:
1. Preload key request
Preloading critical requests is a common warning for Web fonts. Font Awesome is a very common font that you may see.
Preload key requests
two。 Render blocking resources
With preloading, you can also fix render blocking resource warnings because assets are loaded in a non-blocking manner.
Eliminate rendering blocking resources
It can also help reduce maximum content rendering (LCP) time if you are preloading an image.
Preloadable resources
There are many different resources that can be preloaded.
Public resources
-
fontFont file -
script: JavaScript file. -
style: CSS style sheet. -
image: image file (.jpg,.png,.webp).
Other resources
-
audioAudio files -
documentDesigned to be created byOrEmbedded HTML document. -
embedTo embed intoThe resources in the element. -
fetchResources to access through fetch or XHR requests, such as ArrayBuffer or JSON files -
objectTo embed intoThe resources in the element. -
track: WebVTT file. -
worker: an JavaScript network worker or shared worker. -
videoVideo file
Note: at the time of this writing, there is an unresolved bug in Chrome, where preloaded requests are fetched faster than other higher priority resources. Before resolving this issue, notice how preloaded resources "skip the queue" and are requested earlier than it should be.
Preload resources defined in CSS
Until the browser downloads and parses the CSS files, you will not find that the@font-faceThe font or background image defined by the rule. Preloading these resources ensures that you get the CSS files before downloading them.
Preload CSS fil
If you use the key CSS method, the CSS will be divided into two parts. The key CSS required to render the contents of the first screen is inlined in the document'sNon-critical CSS usually uses JavaScript to delay loading. Waiting for JavaScript execution before loading a non-critical CSS can cause delays when the user scrolls, so it is best to use theStart the download faster.
Preload JavaScript fil
Because browsers do not perform preloaded files, preloading helps separate fetch from execution, which improves metrics such as Time to Interactive. Preloading works best if you split the JavaScript package and preload only the key blocks.
How to realize rel=preload
RealizepreloadThe easiest way is in the documentAdd aTag:
ProvideasProperty helps the browser set the priority of the prefetched resource based on its type, set the correct header, and determine whether the resource already exists in the cache. Acceptable values for this property are:script、style、fontAndimageWait.
Check the Chrome Resource Priorities and Scheduling documentation to learn more about how browsers prioritize different types of resources.
Note: omit
asProperty or uses an invalid value, which is equivalent to a XHR request, where the browser does not know what it gets and cannot determine the correct priority. It may also cause some resources, such as scripts, to be fetched twice.
Some types of resources, such as fonts, are loaded in anonymous mode. For these resources, you must set thepreloadOfcrossoriginAttributes:
Note: no settings
crossoriginThe preloaded font of the property will be obtained twice!
In addition,The element also acceptstypeProperty that contains the MIME type of the linked resource. Browser usagetypeProperty to ensure that resources are preloaded only if their file types are supported. If the browser does not support the specified resource type, it ignores the.
Try to improve web page performance by preloading web fonts.
You can use theLinkThe HTTP header preloads any type of resource:
Link: /style.css>;; as="style"
Specify in the HTTP headerpreloadOne of the benefits is that browsers do not need to parse the document to find it, which can provide some small improvements in some cases.
Preload the JavaScript module using webpack
If you use the module baler that creates the application build file, you need to check that it supports the injection of preloaded tags. In webpack 4. 6. 0 or later, it passes through theimport()Support for preloading using magic comments (magic comments) in:
import(_/* webpackPreload: true */_ "CriticalChunk")
If you are using an older version of webpack, use a third-party plug-in, such as preload-webpack-plugin.
Things to keep in mind when preloading
- Do not preload every script, or it will actually cause performance problems, such as increasing the total blocking time (TBT). Preloading should be used only for resources that are immediately needed, so they are loaded in a non-blocking manner. This is commonly used for web fonts, images, CSS, and JS.
- If you are using cache cleanup techniques such as query strings
domain.com/style.css?ver=1.0Don't forget that the browser will see the exact URL. Therefore, you will need to use the query string URL, or you can use handles to dynamically preload. - If you have a URL that CDN overrides your assets, make sure that all resources that you want to preload are rewritten correctly first. If the URL does not match, you may end up loading the resource twice.
- If you preload stylesheets (CSS) or scripts (JS) and you are using plug-ins to combine your CSS/JSS (Autoptimize, WP Rocket, and so on), be sure to exclude your preloaded resources from the connection process. Otherwise, it may be packaged twice and eventually put more code on your site.
Summary
To improve the speed of the web page, preload the browser to find important resources that are later. Preloading all resources can be counterproductive, so use it with cautionpreloadAnd measure its impact in reality.
via https://web.dev
