Difference between revisions of "Preloading"
Ralph.ebnet (talk | contribs) (→The difference between preloading and prefetching) |
(→Similar articles) |
||
| (6 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | <seo title="What is | + | <seo title="What is Preloading in Web Development?" metadescription="Preloading is a way for developers to tell browsers to start loading a resource that is going to be needed in the near future. Learn more…" /> |
| − | == | + | == Definition == |
Preloading allows developers to prompt browsers to start loading a resource that will be needed in the near future. It gives web developers more control over how a webpage and the different resources on it are loaded. | Preloading allows developers to prompt browsers to start loading a resource that will be needed in the near future. It gives web developers more control over how a webpage and the different resources on it are loaded. | ||
| Line 49: | Line 49: | ||
Below are some examples of how this resource hint can be used. | Below are some examples of how this resource hint can be used. | ||
| − | + | <pre><link rel="preload" href="example-video.mp4" as="video" type="video/mp4"> | |
| + | <link rel="preload" href="example-video.webm" as="video" type="video/webm"></pre> | ||
| − | In this first example, an important | + | In this first example, an important video file is preloaded. |
| − | + | <pre><link rel="preload" href="style.css" as="style"> | |
| + | <link rel="preload" href="main.js" as="script"></pre> | ||
| + | |||
| + | In this second example, the page’s CSS and JavaScript are preloaded. This helps avoid them blocking the page’s render, potentially improving both the perceived speed and actual page speed. | ||
| − | |||
| − | |||
== The difference between preloading and prefetching == | == The difference between preloading and prefetching == | ||
| − | In addition to preloading a resource, there is also the possibility to prefetch it. The main difference between preloading and prefetching is that when telling the browser to preload something, you are certain that a resource is going to be needed. This gives the resource a high priority. | + | In addition to preloading a resource, there is also the possibility to [[Prefetching|prefetch]] it. The main difference between preloading and prefetching is that when telling the browser to preload something, you are certain that a resource is going to be needed. This gives the resource a high priority. |
When using prefetch, you are essentially telling the browser that the resource is probably (but not definitely) going to be needed. Prefetched resources have a lower priority than resources that are preloaded. | When using prefetch, you are essentially telling the browser that the resource is probably (but not definitely) going to be needed. Prefetched resources have a lower priority than resources that are preloaded. | ||
| Line 81: | Line 83: | ||
== Similar articles == | == Similar articles == | ||
| − | * [[Page | + | * [[Page Speed]] |
* [[HTML5]] | * [[HTML5]] | ||
[[Category:Web Development]] | [[Category:Web Development]] | ||
| + | |||
| + | {| class="wikitable" style="text-align:left" | ||
| + | |- | ||
| + | |'''About the author''' | ||
| + | |- | ||
| + | | [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] The Seobility Wiki team consists of seasoned SEOs, digital marketing professionals, and business experts with combined hands-on experience in SEO, online marketing and web development. All our articles went through a multi-level editorial process to provide you with the best possible quality and truly helpful information. Learn more about <html><a href="https://www.seobility.net/en/wiki/Seobility_Wiki_Team" target="_blank">the people behind the Seobility Wiki</a></html>. | ||
| + | |} | ||
| + | |||
| + | <html><script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "https://schema.org", | ||
| + | "@type": "Article", | ||
| + | "author": { | ||
| + | "@type": "Organization", | ||
| + | "name": "Seobility", | ||
| + | "url": "https://www.seobility.net/" | ||
| + | } | ||
| + | } | ||
| + | </script></html> | ||
Latest revision as of 16:58, 6 December 2023
Contents
Definition
Preloading allows developers to prompt browsers to start loading a resource that will be needed in the near future. It gives web developers more control over how a webpage and the different resources on it are loaded.
For example, preloading can prevent render-blocking resources by loading them early on, improving a page’s user experience by optimizing the page speed.
What is preloading used for?
Preloading improves webpage load time by telling browsers which resources to prioritize. Preloading is typically used for critical resources that slow down a page’s loading speed when they are discovered later than other resources.
Over the past few years, browsers have become better at discovering and loading the required resources more quickly. Therefore, the preload attribute is used less often today, only being used for resources that rely on reloading for page speed optimization.
Why preloading was introduced
Preloading was introduced as an improved version of subresource, which was initially used for loading resources. Subresource didn’t achieve its goal because of various bugs that prevented it from working properly. Preloading emerged to improve on subresourcing and optimize the loading process for specific resources.
Preloading allows the browser to identify the resource type and set a resource priority. It also allows the browser to check whether it follows the correct content security policy, improving the user experience by preventing harmful content from being downloaded automatically.
As of 2016, the support for subresource was removed by most major browsers in favor of preload.
Browser compatibility
Before using resource hints, it’s important to check whether they are supported by (most) major browsers. This ensures that the resource hint is as effective as possible. Below is an overview of the browsers that support the preload resource hint.
- Google Chrome
- Firefox
- Microsoft Edge
- Safari
- Android browser
- Opera
- Samsung internet
Commonly preloaded resources
There are various resources that can be preloaded. Important CSS or Javascript files are commonly preloaded to ensure all important resources are discovered early. However, there are many other uses for this resource hint. Below is an overview of some of the resources that are most commonly preloaded:
- CSS files
- Javascript files
- Documents
- Images
- Video/audio
- Fonts
Preloading examples
Below are some examples of how this resource hint can be used.
<link rel="preload" href="example-video.mp4" as="video" type="video/mp4"> <link rel="preload" href="example-video.webm" as="video" type="video/webm">
In this first example, an important video file is preloaded.
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script">
In this second example, the page’s CSS and JavaScript are preloaded. This helps avoid them blocking the page’s render, potentially improving both the perceived speed and actual page speed.
The difference between preloading and prefetching
In addition to preloading a resource, there is also the possibility to prefetch it. The main difference between preloading and prefetching is that when telling the browser to preload something, you are certain that a resource is going to be needed. This gives the resource a high priority.
When using prefetch, you are essentially telling the browser that the resource is probably (but not definitely) going to be needed. Prefetched resources have a lower priority than resources that are preloaded.
Preloaded resources are typically used on the current page, and prefetched resources are reserved for the next page.
Its importance in SEO and web development
Preloading is a relatively new resource hint that can help web developers and SEO professionals set priorities for certain resources. This can improve the user experience by enhancing the page speed.
Page speed not only impacts the user experience, improving user signals on the site, but it is also an SEO factor. This means that applying the right resource hints can directly impact your site’s performance in the SERPs.
Related links
- https://developers.google.com/web/updates/2016/03/link-rel-preload
- https://wp-rocket.me/blog/font-preloading-best-practices/
- https://web.dev/preload-critical-assets/
- https://www.webpagetest.org/
- https://developers.google.com/speed/pagespeed/insights/
Similar articles
| About the author |
 |