Make Your Site Blazing Fast: Part 1
It’s no secret: today’s web users have the need for speed. With internet and cellular connections getting faster and faster, users expect sites to load quickly, and it’s a developer’s job to do what they can to serve those pages quickly. So how do you make your site blazing fast?
Here’s what you should be doing specifically when building with WordPress.
First Thing’s First: Test Your Site’s Speed
To test the speed of your site, a good combination of tools is WebPagetest and Google PageSpeed Insights. WebPagetest gives us a good idea of the actual time (in seconds) that a site takes to load, giving you some good metrics to know whether it’s the back-end or front-end causing a site to load slowly. PageSpeed Insights is best for looking at how your site is rendered by the browser and what you can improve on the front-end.
Keep in mind that this article is focused on totally customized WordPress sites. If you’re running speed tests on a site using a bulky theme and multiple third-party plugins (plugins can slow down both the front and back end), start by getting to a blank slate and slowly activating plugins one by one to find the ones that are slowing things down.
The golden rule of performance, according to Fastly’s chief performance officer Steve Souders, is that 80-90% of a page’s total load time consists of the front-end (the 80/20 rule). The back-end’s 10-20% is crucially important, but even if you’re using the fastest host money can buy, your site still won’t live up to its full potential without optimizing the front-end to make sure users perceive that it’s loading quickly.
Perception is important when it comes to front-end optimization. A user won’t care how long, in terms of seconds, a site takes to load. All they really care about is how quickly they can interact with it and see content or perform actions without a delay.
This is not to say you shouldn’t be worried about the actual load time (you should), but by following the techniques below, you can make sure your site is at a usable state as quickly as possible, followed quickly with a complete page load of all the assets.
The most important thing to do with your CSS before it’s delivered to the browser is simply to compress it and remove unused selectors. Getting a good development workflow down when developing themes makes this process trivial, especially if you’re using a pre-processor like Sass.
Don’t lose sleep if you’re not using the latest and greatest CSS methodology, but try to follow some sort of standard while authoring CSS as to avoid duplication and huge file sizes.
Once your stylesheet is ready to go, the easiest (and by far, the standard) way to load it is to just reference it in the
<head>;. That way, the browser loads and parses it before the rest of the DOM is loaded. However, there’s a new technique where “critical” styles are inlined in the
This technique is useful when you absolutely need to get a site to load (or perceive to load) under a second, and it’s a great thing to look at and see if it can fit into your workflow. The Filament Group has a great extensive article on using this technique.
The best approach seems to be to load scripts dynamically by inlining a small function in the
<head>; that then appends script tags without blocking the rest of the page. For more information, check out the loadJS script.
Compression tools are necessary for squeezing out as much excess as possible on images. ImageOptim is a great Mac app that does this well, along with OptiPNG and jpegtran for use with task runners like Grunt.
Web fonts are super common these days. Google Web Fonts is a great tool, but you might see a performance hit by referencing them in the
<head>. The performance hit is small, but this is an article about making sites blazing fast, so everything counts!
For best performance using web fonts, Web Font Loader, co-developed by Google and Typekit, is another great choice. It’s an open source script that both manages the loading of your fonts from third parties like Google Web Fonts and allows them to load asynchronously (getting tired of that word yet?).
As expected, there’s some configuration needed to get Web Font Loader integrated into your project, so check out the project on GitHub for details on how to get it set up.
Keep Optimizing for the Fastest Site Possible!
These tips will be useful for making the front end of your site blazing fast. For some tips on making your site’s back end equally as speedy, check out this article!