Written by Harry Roberts on CSS Wizardry.
I’m working with a consumer for the time being who, sadly, has a blocking third
get together stylesheet that’s wanted to efficiently render one in all their web site’s key
pages. Till we will design a extra long-term resolution (and that’s assuming we will
in any respect) that may asynchronously load the file, I needed to work out a technique to
minimise its affect.
It is a common <hyperlink rel="stylesheet"> that’s, essentially, outlined within the
<head>. Which means that from a cold-cache, if a person had been to land on this web page
for the primary time, they’re completely going to take a efficiency hit—there’s
simply no manner round it. The file must make it throughout the community efficiently
earlier than the web page may even start to render.
The factor is, though it is a key web page, it’s not essentially the primary or
solely web page {that a} person will go to in a session. Actually, it’s extremely possible that
they’ll go to just a few different sorts of web page earlier than they encounter this one. This
signifies that we will reap the benefits of the truth that customers will almost definitely go to
a special web page earlier than this one, and pay the community overhead up-front utilizing
prefetch. We’d not be capable to load the file asynchronously, however till
then, let’s not less than try and load it from HTTP cache slightly than from the
community.
Outlined as:
The prefetch hyperlink relation sort is used to determine a useful resource that may be
required by the subsequent navigation, and that the person agent SHOULD fetch, such
that the person agent can ship a quicker response as soon as the useful resource is
requested sooner or later.
…that is precisely what prefetch is designed for. So nothing groundbreaking
right here. However what I needed to do may be very tersely be certain that on pages that do
require the file, we get a Highest precedence CSS request, and on pages that do
not want it, we get a Lowest precedence request fully off of the Crucial
Path. This implies we by no means get slower than the baseline, however hopefully will stand
to get a lot quicker just by paying off our community overhead early:
<hyperlink rel="<?php echo $web page == 'dwelling' ? 'stylesheet' : 'prefetch'; ?>"
href="https://third-party.com/file.css" />
Now, the identical line of HTML can cowl each situations with out the necessity for extra
intricate workflows. This snippet can stay unchanged within the <head> of each
template.
With this easy addition, I can both take the hit of a fully-blocking,
cross-origin useful resource after I actually need to, or I can lazily load the file and
have it sat ready in HTTP cache to be used when it in the end will get referred to as up.
