Written by Harry Roberts on CSS Wizardry.
I’m working with a shopper in the mean time who, sadly, has a blocking third
occasion stylesheet that’s wanted to efficiently render one in all their website’s key
pages. Till we are able to design a extra long-term resolution (and that’s assuming we are able to
in any respect) that may asynchronously load the file, I needed to work out a solution to
minimise its impression.
This can be a common <hyperlink rel="stylesheet"> that’s, essentially, outlined within the
<head>. Which means that from a cold-cache, if a consumer have been to land on this web page
for the primary time, they’re completely going to take a efficiency hit—there’s
simply no means 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} consumer will go to in a session. In reality, it’s extremely doubtless that
they’ll go to a number of different forms of web page earlier than they encounter this one. This
implies that we are able to make the most of the truth that customers will more than likely go to
a special web page earlier than this one, and pay the community overhead up-front utilizing
prefetch. We would not have the ability to load the file asynchronously, however till
then, let’s a minimum of try and load it from HTTP cache quite than from the
community.
Outlined as:
The prefetch hyperlink relation sort is used to determine a useful resource that could be
required by the following navigation, and that the consumer agent SHOULD fetch, such
that the consumer agent can ship a sooner 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 could be very tersely be sure 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 Essential
Path. This implies we by no means get slower than the baseline, however hopefully will stand
to get a lot sooner just by paying off our community overhead early:
<hyperlink rel="<?php echo $web page == 'residence' ? 'stylesheet' : 'prefetch'; ?>"
href="https://third-party.com/file.css" />
Now, the identical line of HTML can cowl each eventualities with out the necessity for extra
intricate workflows. This snippet can stay unchanged within the <head> of each
template.
With this straightforward addition, I can both take the hit of a fully-blocking,
cross-origin useful resource once I really want 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.
