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, I recommend using a combination of 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 19 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 those 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 fast. 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. 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.
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
<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. I use Google Web Fonts on nearly every project, but until lately I didn’t realize the performance hit I was taking by just 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, I recommend using the Web Font Loader, co-developed by Google and Typekit. 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.