Make your site blazing fast: Part 1

Make your site blazing fast: Part 1

Trevan Hetzel's Layout avatar

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

Performance can be broken down into two main categories: front-end and back-end. I consider back-end to be anything related to the server and how data is populated on a page (your PHP code in your theme is the “back-end”). The front-end consists of all your assets (CSS, JavaScript, images, etc.) and markup. Everything a web browser reads and interprets is the “front-end”. The reason I’m making this distinction in terms of performance is because it’s good to know what you’re optimizing and, even more importantly, where you need to optimize the most.

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.

blazing

Front-end performance

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.

CSS

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. I use Grunt, which is a JavaScript task runner that executes commands for you while developing. There’s a plugin for Grunt called grunt-contrib-sass that simply compiles all your Sass files down into one (if you’re using Sass partials, that is), minifies it and compresses it. Throw in the grunt-contrib-watch plugin on top of that and it will run the Sass task whenever you save a file. Easy! 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 <head> and then the full stylesheet is loaded asynchronously using JavaScript. I only really use this technique when I’m absolutely trying to get a site to load (or perceive to load) under a second, but 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.

JavaScript

The golden rule(s) of optimizing JavaScript is simple: serve as few JavaScript files as possible and minify and concatenate. Third-party WordPress plugins can be detrimental by bloating your document with unminified blocking JavaScript files, so it’s important to be mindful when choosing plugins. Ideally, you’d concatenate ALL JavaScript files into one and then minify the heck out of it. For times when it’s not possible to concatenate all your files into one, there are HTML attributes called “async” and “defer” that can be used to load JavaScript files asynchronously or once the rest of the page is loaded.

The most common place nowadays to reference JavaScript is at the bottom of your document, right before the closing tag. However, there are more advanced techniques to load JavaScript. Again, the Filament Group has done tons of research on this and has several open source projects that you can use if you’re aiming for a super fast page load time (I’m in no way affiliated with Filament Group, by the way; I just think their stuff is awesome). 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.

imagessssss

Images

Images are often the biggest files on a page, responsible for the largest delay in page load time. The good thing about images though is that, unlike CSS and JavaScript, most browsers load them asynchronously. That at least helps with the perceived performance of a page, but you still want to make sure that A) you’re serving as few images as possible and B) those images are compressed as much as possible.

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.

Fonts

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.

That’s a wrap for front-end optimization! Now learn how to make your WordPress site blazing fast, with a focus on the back-end performance..

Comments ( 1 )

  1. Carlos Mendoza

    April 14, 2015

    What do you do when you want to optimized images that you already have on your website? For a long time the only option was smush.it for Wordpress but know Yahoo don't want to invest any more time or money on that. What other options are to optimized images on Wordpress?

    • karl

      April 14, 2015

      2 WP plugins can help with image optimization. Use Imsanity if you need to resize - that is, change the pixel dimensions - of images already uploaded.
      And EWWW Image Optimizer is a good replacement for smush.it to compress and optimize images.

    • James Bundey

      April 14, 2015

      Hi Carlos,

      There's a couple I'd recommend trying. The free option is EWWW Image Optimizer - https://wordpress.org/plugins/ewww-image-optimizer/

      Alternatively, the paid - and my preferred option - is Kraken.io - https://wordpress.org/plugins/kraken-image-optimizer/

      You'll need a subscription and an API key for it to work on your site, but its compression performance is really good.

    • Richard Lewis

      April 15, 2015

      Hi Carlos, you can use Ewww Image Optimizer, available in the WP repo. https://wordpress.org/plugins/ewww-image-optimizer/

    • Nicholas Petersen

      April 15, 2015

      It's not ideal, but one tick I usually do if I want to globally compress all my images is sync my remote uploads folder to my local version, run the compression on the local, and then re-upload. Would love to know if there is a better method, but this way I have complete control and get maximum savings on my uploaded images.

      • Trevan Hetzel

        April 15, 2015

        There's one way to do it! I would imagine that compressing and reuploading whenever an image is uploaded wouldn't be too sustainable on client sites or sites that upload a ton of images regularly (like us).

        In the past, I've tried having people size and compress their images before uploading. Turns out, it works fine if you're displaying the original file in your theme, but when WP crops out different sizes for featured images and thumbnails, it doesn't keep that level of compression. I kind of wish that was built in to WP itself, but compression is such a server side task that it would probably never be stable in all hosting environments.

    • Trevan Hetzel

      April 15, 2015

      Like everyone else is saying, plugins like Ewww are pretty good for compressing images. I typically using TinyPNG for images that are core to a theme, so don't rely on a plugin there. But for compressing images upon upload (and ones that you've already uploaded), those compression plugins are pretty much your only hope. TinyPNG actually has a new WP plugin that seems to work very well https://wordpress.org/plugins/tiny-compress-images/.

      We are actually working on a feature that will compress images on the server when they're uploaded, so no plugin will be required (that feature makes me very very happy).

Join the discussion