Preload Assets

In WordPress, it can be a bit of a free-for-all with all the JavaScript (JS) and stylesheets (CSS) loaded on any given page. Then, throw fonts and images into the mix, with recommendations from various places that you should load those as quickly as possible (preloaded), and you may be left wondering, "How in the world can I do that?!"

Short version, we mostly recommend using this for fonts, so you can skip to that section if you are in a hurry!

JS & CSS

Let's work backwards a bit, as JS should not usually be preloaded. In fact, it is usually recommended to defer that, so that JS is the last thing loaded on the page and not "render blocking". Then, we have our CSS, or styling for the page. These are already preloaded by SWIS if you enable the Optimize CSS Loading option.

When you have that enabled, you'll also want to make sure you generate Critical CSS, which is also built into SWIS. This ensures that you really don't need to preload CSS, since the most important style rules are inlined right into the page HTML/code. But, just to be safe, SWIS preloads theme and page builder CSS anyway.

Images

We recommend you don't preload images, except perhaps your company logo, if that is used at (or near) the top of your page. The biggest consideration with this, is to make sure the image is properly scaled. That is, make sure the image being loaded isn't too large for the space where it is being loaded. Otherwise, you're wasting a bunch of time and bandwidth loading those extra pixels.

So, here are two things to watch out for if you want to preload an image or two on your site:

1. Is the image improperly scaled? You can use the Resize Detection in EWWW Image Optimizer to check this out, and be sure to check it on mobile as well.
2. Is the image using responsive markup? That is, does it have just a 'src' attribute, or does it also have srcset+sizes attributes. Especially if the image is a larger one, like a "hero" image, you'll want to use responsive markup, or EWWW IO's auto-scaling, and should not attempt to preload the image.

If an image passes both tests, i.e. it is small enough to not need responsive markup, and properly scaled, then it can be preloaded. If an image uses responsive markup and is properly scaling on desktop and mobile, then you can skip it from lazy loading in EWWW IO to be sure it loads as quickly as possible. For anything else, be sure to enable Auto Scaling so the image is the proper size and loads more quickly than an oversize image would.

Fonts

These are the main reason we added Preload Assets to SWIS, but why would you need to preload fonts? If you've enabled Optimize CSS Loading and generated Critical CSS, your page should render almost instantly. However, if you use external fonts, you may end up with unstyled text, or no text at all, until the fonts load in. This results in layout shifts and just doesn't look very nice for your visitors.

So, the first thing to do is to find out which fonts are actually being used on your page. You might think you could just copy all the font URLs from your CSS and be all set, right? Unfortunately, many fonts, like Google Fonts, use subsetting, to make the font files smaller. We'll not delve into that here, but it means your CSS might include 15-20 font files, and you're only using 2.

Fortunately, your browser has a way to find out which files are actually used by using the DevTools. You can access the DevTools by right-clicking anywhere on your page, and choosing Inspect.

Once you have the DevTools open, look for the Network tab/section. At first, it will be empty, so you'll need to refresh your page so the DevTools can record all the assets that are being loaded on your page.

From there, we can filter by the various asset types, like CSS, JS, Fonts, etc. We'll click on Fonts to see the font files that are needed to render our page properly.

Now, no one wants to hand type those in, so right click on one, and you'll see an option to Copy URL. Paste the URL for each font into the Preload Assets setting in SWIS, and that's it!

Well, almost... One last thing to watch out for are icon fonts. One reason we don't automatically try to detect used fonts, is the icon fonts, like Font Awesome or IcoMoon. Typically, these do not need to be preloaded, plus they tend to be larger in size and will slow down your page if you preload them.

On many sites, you can often save time and bandwidth for your users by getting rid of icon fonts and using SVG icons instead. Even better, you can inline an SVG to avoid an external HTTP request. We use both of these strategies to speed up the icons we use on ewww.io.