Google’s PageSpeed Insights tool is a great way to see what’s slowing down your website. If you’ve ever run a WordPress site through the tool, you know that WordPress tends to rate poorly out of the box. Ever wonder why WordPress is so slow? Here are some common problems you might have with a WordPress website, and more importantly, how to fix them!
Enable Compression
This insight recommends that you compress your files using gzip before sending them to a user’s browser. For most of you using WordPress, this means enabling mod_deflate, as most hosting companies use Apache. I use the snippet below from the HTML5 Boilerplate sample configuration file, as recommended by Google. To add it to your site, open your .htaccess file (located in the same folder as your wp-config file) either by FTP or via your CPanel file manger, and then copy & paste the snippet below after the #End WordPress comment. Keep your .htaccess file open, as you’ll need it for the next fix – Leverage Browser Caching.
Leverage Browser Caching
To prevent visitors from re-downloading content every time they visit your site, you need to enable browser caching by setting an expiration on your content. Here is the snippet that Google recommends:
>This snippet only works on content located on your server, i.e. not files hosted on a third-party site, like Google’s own analytics script, which is ironically flagged by their PageSpeed tool. If you want to cache even your Google analytics script, you could host the script on your own server, but then you won’t get updates automatically. Frankly, you’re not going to see much increase in speed anyway.
Minify CSS & Javascript
Minifying your CSS and Javascript files involves removing all white space – line breaks, tabs, and other spaces. The easiest way to fix this is to use a plugin that creates a separate minified version of your files, while maintaining the originals for editing purposes. I use Autoptimize, which is available from the WordPress plugin repository and takes just a couple clicks to setup. Autoptimize also has the ability to minimize your HTML, but this setting sometimes breaks WordPress themes, so use with caution and test your site after enabling it.
Optimize Images
Optimizing your images involves reducing the file size of your images by reducing the quality and/or compressing the file.
Reduce quality when saving
When you save an image to use on your website, use a compressed format like JPG and avoid using the highest quality setting. For example, in Photoshop set the image quality to about 8, instead of the maximum of 12, which is usually still high enough that you don’t notice a reduction in quality. Many image editing programs also have a “Save for Web” option, which will create a smaller image automatically.
Use an image optimization plugin
There are several image optimization plugins that will compress your images as you upload them to your site. I currently use the free EWWW Image Optimizer, but have also had a good experience with the freemium plugin Smush by WPMU Dev. After you install one of these plugins, run the bulk image optimization feature to optimize the images currently on your site; all future images will be optimized as they are uploaded.
Eliminate render-blocking JavaScript and CSS
This issue is usually caused by three things: jQuery (included in the WordPress core), third-party/plugin scripts, and third-party/plugin style sheets. I personally don’t do anything with this one, since my site paints in just over 1 second and and fully loads in less than 3 seconds. In fact, only three of my files violate this, and two of those are external Google fonts, go figure. Hopefully, one day WordPress will include a variable in their enqueue script to make a script load asynchronously.
If you’re really obsessed with speed and getting that illusive 100 PageSpeed score, there are functions that you can add to your function.php file to load scripts asynchronously and there are also some plugins that will do it for you, though I haven’t tried any, so proceed at your own risk.
