Loading the stylesheets with style (continued)

Last time we spoke about deferring Javascript and how it impacts loading times. Today, we are going to speak about that in regard to CSS and images.

Browsers can be lazy if you want them to

The first thing you can do with images, is to lazy load them. No, I am not talking about a flurry of Javascript here, Browser have this implemented natively these days. The key word loading can do this for images and iframes, but Firefox only supports it on images. iframes are difficult to work with anyway and have IMHO no place on the web these days.

What it means is, that the browser will only load the image, if the user scrolls them into view. This is good. It speeds up your initial loading time, makes your site faster interactive and saves potentially bandwidth and therefore money. Yes, I am saying this a lot, but nothing is more frustrating to a user than wasting a lot of traffic on the first load.

Browser support is limited to newer browsers, but I just stopped caring about older browsers. You should too. Some special brand browsers do not support it either, but tough tomatoes, it does not hurt to have the attribute nonetheless.

Example:

<img alt="an image" src="/images/blog.webp" loading="lazy">

Preloading is not only for Games

Preloading is another one of these HTML tags that may not be widely known. It makes the browser load the images, before it continues. The most important part is to declare them before the rendering engine kicks in. A browser will scan for preload tags before it starts rendering, which we want to use, because our CSS will then not block the rendering process. Let’s see how this whole process works.

<link rel="preload" href="/css/syntax.css" as="style" media="screen">

This will make the browser download the file before it starts rendering, which in turn will increase the white page time a bit, but will render your website a lot faster. The media keyword ensures that the stylesheet is only loaded when it is actually needed. There is no need to load a printing stylesheet when nobody prints anything, right? However, this is not enough. As I said, this is just preload, you will still need to use the stylesheet.

<link rel="stylesheet" href="/css/syntax.css" media="screen">

With both lines in place, the stylesheet is preloaded and used when rendering kicks off. I tend to group resources into preloading blocks and them use them directly after.

You can do ths with images, fonts, videos, audio, you name it. You can even preload fetch requests:

<link rel="preload" href="http://example.com/example.json" as="fetch" type="application/json">

This will appear as 2 networking requests, but the server actually only receives one. The good folks over at Mozilla compiled a list of resources you can preload .

There is a caveat though: When you preload a resource, the browser wants you to use it soon™. This means, you shouldn’t preload a resource you are not going to use on at least the same page. PageSpeed Insight will even nag you when it is not used in the first view of the page. The optimal way to go about this is to combine preload, lazy loading and prefetch.

prefetch is another keyword that you can utilize to fetch resources that may be needed later. The browser will download it and place it in the cache, ready to use later. Please use this with caution, as it increases the initial page load. This also only happens during a browser’s idle time! This is an important thing to know. It will not block rendering, but also has a very low priority. Here is the example:

<link rel="prefetch" href="/images/config.webp">

Using CDN

When using CDN, you can speed up fetching resources by utilizing another relatively new feature: preconnect.

There are 2 versions of this, one called dns-prefetch and one called preconnect. The difference is as simple as important:

• dns-prefetch only resolves the DNS to an IP
• preconnect does the above and performs the TCP and TLS handshakes.

If you have the choice, I would use preconnect over dns-prefetch any time, as handshakes do take some time.

A preconnect statement could look like this:

<link rel="dns-prefetch" href="https://fonts.gstatic.com/" crossorigin="anonymous">

With all these tools shown during this 3 part series on your hand and having them placed strategically sound, you can speed up the initial load of your web page quite a bit. Utilizing them is a quick thing to do, but has great benefits.

Thanks for reading, and as always, please send comments and suggestions to contact@tuxstash.de.