Preloading

Preloading is a mechanism that allows resources to be loaded by a browser before they are initialized by a user interaction. Depending on the method used, images, CSS files, fonts, scripts, videos, frames or entire websites can be preloaded. The support by the browser is also relevant as there are differences here. Preloading has similarities with concepts such as prefetching, link prefetching and prerendering.

How it works

Preloading mechanisms work according to a simple principle: an instruction in the source code of a website sets the process in motion and refers to a resource that is to be preloaded. Normally, the applications would determine when to load which content and scripts, and integrate them into the document. In preloading, it is the browser that renders a website and becomes aware of a preload hint. This hint can refer to different content, scripts, or swapped files that are then preloaded or executed. The goal is to increase performance. This is achieved on the one hand by preloading itself, and on the other by optimizing the processes in which the time of retrieval is controlled.

Preloading with rel="preload"

Preloading can reduce the loading time of websites and features, thereby improving the user experience. When a user visits a website, certain resources are loaded into the browser's cache using declarative markup. The keyword Preload can be used to preload content that is referenced by the Atrribute link. The keyword creates an external resource link (also called preload link) that declares the resource and specifies its retrieval properties in HTML5. The resources must be declared correctly so that the client knows what they are and how to handle them.

Various examples of a CSS file:

<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="/styles/other.css" as="style">

Alternatively, the file can be called via the HTTP header:

Link: <https://example.com/other/styles.css>; rel=preload; as=style

JavaScript can also be used:

<!-- or, preload stylesheet resource via JavaScript -->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>

Preloading in these forms makes sense, for example, if:

• Different websites need different CSS files or stylesheets.
• Users are likely to visit a website that requires many images or larger files.
• Platforms such as ASP.NET MVC or AJAX are used and the browser should receive a preload hint to preload resources.
• MediaQueries can be used to tailor the content to the user's device.

Preloading Videos with HTML5

Video content can be preloaded as part of HTML5. The tag

<video>

with special parameters are used. Parameters like autoplay, width/ height or controls are also possible. However ,not all browsers support the Video tag in HTML5.

<video id="sampleMovie" src="HTML5Sample.mov" preload></video>

Preloading with JavaScript

Preloading can also be realized with different JavaScript codes, which are usually noted in the header of a website. A JavaScript object is created and an image file is loaded into the empty object. The object can then be used in other places on a website without having to reload it - it is already in the cache and was preloaded by calling the function. However, if users have not activated JavaScript, this variant does not work. An example:

<script type="text/javascript">
var my_image = new Image();
my_image.src = 'beispiel.jpg';
</script>

Event handlers can be used to provide additional functionalities such as the time of the call or the behavior in the event of errors.

Preloading with CSS

Preloading with CSS uses a trick: The image or images are loaded outside the visible area of the display. The preloading of the image can also be initialized by a hover effect. A simple example in CSS and XHTML:

div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}

These markups are written to the CSS file. The following source code is noted at the end of a document.

 <div id="preloaded-images">
   <img src="https://beispiel.de/image-01.png" width="1" height="1" alt="" />
   <img src="https://beispiel.de/image-02.png" width="1" height="1" alt="" />
   <img src="https://beispiel.de/image-03.png" width="1" height="1" alt="" />
</div>

Now the images can be called up in XHTML documents.

Significance for programming

Preloading reduces the loading time of a website by preloading resources. Which method is used depends on several factors - browser support, used markup and the functionality of the website. However, a correct implementation of the respective source code is important, since even small conflicts can lead to disruptions of the user experience. Programmers and web designers should therefore be relatively experienced if they want to use these methods. It might be useful to wait for a valid specification in HTML5 anyway or to test it carefully.

Web Links

• Informationen über Prefetching, Preloading und Prebrowsing
• Preload Working Draft
• HTML video preload Attribute
• Verschiedene Preload Methoden
• Bilder und Websites vorladen