speed-icon

WordPress Speed Optimization in 2018

Improving Conversion, Retention, SEO, & UX

By Shane Griffiths
Published February 25, 2018

Overview

WordPress has a reputation for being heavy & slow, but it doesn’t have to be. Learn best practices for speeding up your WordPress site and why speed matters for SEO. All those pretty images and fancy plugins don’t matter if visitors bounce before your site loads. Every 1-second delay in load time means 7% fewer conversions. Speeding up your WordPress website will improve your conversion rate and decreases bounce rate. Google is pushing speed more than ever, as it’s one of the biggest factors affecting Mobile User Experience. Find out how to speed up your site without sacrificing User Experience.

%

of the internet runs on WordPress

Introduction

If you’re reading this, there’s a good chance that you own or manage at least one WordPress website. After all WordPress runs 28.9% 29.7% of the internet. This isn’t really suprising though.

Benefits of WordPress

Compared to other CMS(s), it’s really easy for marketers, bloggers, and even small business owners to get started quickly and achieve their vision. Being open source and so popular, WordPress offers over 54,000 free plugins and thousands of free themes. With such massive network of features so readily available, it’s a no-brainer why so WordPress is the platform of choice for 2018. While this sounds great in theory, there is a hidden cost.

Unintended results

WordPress websites are notorious for bad hosting environments. We find many WordPress sites are hosted on $7.99/month and under plans which just aren’t built to compete in 2018. Hosting really is a ‘get what you pay for’ service. When used improperly all those free themes and plugins often lead to sloppily designed sites with poor UX. This combination ultimately results in a slow site that nobody wants to visit (Google included).

%

of users leave after 3 seconds

Why speed matters

There’s no point in spending money on marketing and advertising if 40% of them leave before your site even loads. Based on that logic, you’ll make a higher return by speeding up your site then you will in the stock market. Having a fast site has a lot of benefits that are all connected.

Benefits of a fast WordPress site

  • Decrease bounce rate – if your site loads fast people won’t leave before it loads
  • Improve repeat visits – if your site loads fast, people want to come back
  • Improve conversion – fast sites make people interact more, buy more, and convert more
  • Improve SEO – all of these factors are used by Google to improve rankings
  • Improve AdWords campaigns – fast sites improve landing page experience and increase your Quality Score
  • Improve User Experience –  everybody likes a fast site

You don’t have to settle

At this point, you’re convinced that speed matters, but you’re probably wondering what you’ll have to give up to make your site fast. While we recognize that speed is important, it has to be balanced with the content, design, and features of your website. By following simple best practices, you truly can have it all.

Content

Design

Features

Speed

How to test your WordPress site speed

There are dozens of speed tests available, so which one do you use? We’re going to look at 3 of the most popular tests: Google, Pingdom, and GTmetrix.

Google logo

Google Mobile

testmysite.withgoogle.com

  • Not accurate
  • Not detailed
  • No features
Pingdom logo

Pingdom

tools.pingdom.com 

  • Accurate
  • Detailed
  • Good features
GTmetrix logo

GTmetrix

gtmetrix.com

  • Accurate
  • Very detailed
  • Advanced features
Google Mobile Speed Test example

Google Mobile speed test

Google’s speed test loads your website from a 3G connection, which is significantly slower than the LTE connections that are available to over 90% of Americans. Aside from that, their test doesn’t give you detailed information or actionable insights. At the bottom of their report is a link that promotes AMP. While this would speed up your site, the consequences of AMP far outweigh the benefits. This test was clearly created to promote Google’s own agenda.

Pingdom Speed Test example

Pingdom speed test

This is a great speed test that we recommend for most users. It shows accurate results that are easy to understand, and it comes with some great features. The key areas to look at here are your load time, page size, and the number of requests. Decreasing your load time is your goal, while smaller page sizes and fewer requests help you get there.

Pingdom lets you choose your test location too. You want to choose the location that’s closest to the users of your website. After running your test, Pingdom identifies which scripts and stylesheets to optimize and how much space you’ll save by doing so. It also gives you a checklist of best practices and tips on how to improve your load time. Other features we like are the waterfall chart, breakdown of requests by content type and domain, and request states.

GTmetrix Speed Test example

GTmetrix speed test

This is the most advanced speed test that we’re going to cover. Aside from being accurate and giving all the basic info, it provides a lot of advanced features that help us analyze and speed up WordPress websites. Keep in mind that you have to know how to read this test in order to use it accurately.

Fully loaded time, for example, is different than the standard load time that Pingdom uses. Fully loaded time helps us understand how a website loads, not how fast it loads. If you want to use GTmetrix, we suggest creating a free account so you can get access to the Page Load Timings tool and see the difference between Onload and Fully Loaded (onload is what matters for users). Another thing to keep in mind is that PageSpeed Score and YSlow Score are pretty arbitrary grades and we don’t suggest using them in you’re serious about speed.

3 basic best practices for speeding up WordPress

Now we’ll get into best practices for speeding up your site. Learning and following these will make your future web projects load faster from the beginning. Let’s begin with images, videos, and plugins – the basic building blocks of almost every WordPress website. Optimize your images, avoid using videos on the homepage, and remove heavy or unnecessary plugins. 

Optimizing images for WordPress

If you only have a little bit of time or money to spend on your site, start with images. Most sites see the biggest speed improvements in this area. Consider these 5 areas when optimizing your images for WordPress:

  • File Type
  • Aspect Ratio
  • Size (dimensions)
  • Size (file size)
  • Type of compression
jpg png gif
Comparison of Image File Types for the Web
Size small large large
Quality good excellent poor
Features Size: Quality Ratio Supports Transparency Supports Animation
When to Use Most images Small images with transparency (logos) Sparingly, when animation is necessary

Choosing Image File Types for the web

Three types of images are commonly used on the internet: JPG, PNG, and GIF. It’s safe to say that 99% of your images will probably be JPG files. Compared to other file types JPGs have a great size to quality ratio, which is ideal when saving images for the web.

PNG files are great for logos and other images that require transparency. Their excellent image quality makes them a favorite for photographers, but they are beyond overkill on the web. Since PNGs don’t compress well and take up a lot of space, only use them when you need small images with transparency.

GIFs should be used as sparingly as possible. They have poor image quality and take up a lot of space. Only use GIFs when your images require animation and have small dimensions (<500px).

Wordpress image aspect ratios examples 16:9, 4:3, 1:1, 2:1

Choosing image aspect ratios for WordPress

Using standard aspect ratios for your images doesn’t really impact speed, but it has a lot of other benefits. Standard sized images will scale well on smaller devices, which is critical if your image contains text. Also, standard image sizes will make your page layouts uniform and look cleaner. These sizes are also common in many applications, so often they can be reused in social media and marketing campaigns. Here are some popular aspect ratios:

  • 16:9
  • 4:3
  • 3:4
  • 1:1
  • 1:2
Speed Focus HiDPI Focus
Suggested Responsive Image Sizes for HiDPI & Speed Focus on Divi
Full Column 1080px 1920px
1/2 Column 510px 1200px
1/3 Column 320px 800px
1/4 Column 250px 600px

Resizing images for responsive WordPress websites

tldr: think about the design of your page and where your image will go before you size and upload it. If it’s going to be a full page image, you want to upload it at large size. If it’s only going to take up a ½ column on desktop, you want to shrink that down before uploading it to save a lot of space. Same goes for ⅓ and ¼ column images.

Quick disclaimer – this image guide mostly pertains to the Divi theme. Every WordPress theme handles images differently, but this guide will help you understand the concepts so you can apply them to your situation.

Another factor to consider is a ¼ column image on a desktop usually becomes a full column on mobile. Mobile devices often use HiDPI screens. This means that an image that’s sized for a ¼ column on desktop will look blurry on a modern mobile device. One way to combat this is to use a large image, to begin with, which will size down and look incredible on a HiDPI or Retina screen.

With these things in mind, you have 2 choices. You can opt for a speed focus or a HiDPI focus. I’d suggest considering the users of your site when making your decision. If it’s a luxury or upscale audience, you want the images to look as crisp as possible. If your audience really doesn’t care and just wants to consume your content or convert quickly, opt for a speed focus.

Compressing images for the web

Previously we reduced the file size of images by resizing the dimensions to fit the screen. Now we’re going to reduce the size even further through compression. Compressing images for the web permanently changes them, taking away colors, details, and other information. Make sure you save your original images somewhere in case you need a higher quality copy for printing.

File Size
JPG File Sizes at Different Compression Intervals (Photoshop Save for Web)
100% Quality 325kb
80% Quality 152kb
60% Quality 92kb
40% Quality 54kb
The chart above shows the difference in quality and file size for a sample JPG image that’s 1200px by 675px. At 100% quality, this image is 325kb. I was able to compress it down to 54kb (40% quality) without losing too many noticeable details. That’s just 17% of the original file size! I suggest choosing 40-60% quality for most images.

One thing to keep in mind – the more complex the image, the less you’ll be able to compress it without losing noticeable detail. Complex images simply take up more space, so consider that when choosing your images.

baseline vs progressive jpg loading

Baseline vs Progressive JPGs

Have you ever loaded a page with images and watched them load from the top to the bottom? That’s called a “baseline” JPG. This is the standard way images are saved by most programs.

Other times you’ll open a page and notice that the image loads all the way at first, but starts off blurry. Within milliseconds that same image gets clearer and clearer, similar to first loading a show on Netflix or a video on YouTube. This is called a “progressive” JPG. I prefer to use progressive JPGs because the perceived load time is faster.

Adobe photoshop save for web progressive
If you’re using Adobe Photoshop to save your images before uploading, you can enable progressive JPGs with a simple checkbox in the “Save for Web” settings. Most online image tools and WordPress plugins don’t support progressive images. This means if you save an image as progressive, upload it to your site and run an image compression plugin, it will most likely convert it to a baseline image again.

Free WordPress image optimization plugins

If you don’t have access to Adobe Photoshop, there’s plenty of free online tools and WordPress plugins to optimize your images. We’ve used dozens of them and highlighted a few of our favorites below:

  • Compress JPEG & PNG images – compress 100 images/month, no size limits
  • WP Smush – compress unlimited images, 1MB size limit, resize too
  • Imsanity  – great for user-generated images, resize images on upload, existing images, set max width/height
  • Regenerate Thumbnails – fixes image thumbnail conflicts with some themes

Optimizing videos for WordPress

While videos are great for user interaction, they add a lot of weight to your pages. Adding a YouTube video to the homepage of our website added 1.5 seconds to the load time, along with 570kb and 16 requests. That more than doubles our load time! We suggest keeping videos off your home page when possible. Users that have loaded your site and engaged with your content are more likely to wait for the video to load.

If you do use videos on your website, upload them to YouTube or Vimeo and embed the code. Video takes up a lot of space and will put a lot of demand on your hosting environment. YouTube/Vimeo have designed their site architecture to serve video as efficiently as possible, so chances are you won’t be able to do it faster than them.

One more best practice – try to avoid video backgrounds. Yes, they look great and can add to your site’s wow factor, but they increase your load time significantly. If you absolutely must use a video background, make sure it’s configured for desktop only. We also suggest loading a still image (usually the first frame in the video) initially so the user can interact with the page while the video loads in the background.

P3 Plugin Audit example

Optimizing plugins for WordPress

One of our favorite features of WordPress is the sheer abundance of available plugins. We can find, configure, and demo a feature in minutes, cutting out expensive and time-consuming development cycles and maintenance plans. The drawback here is many of these free plugins are not designed to be fast. Fortunately, there’s a quick and easy way to identify which WordPress plugins are slowing down your site.

Ironically we’re going to start by installing another plugin! Search the library for the P3 (Plugin Performance Profiler). Scan your site and you’ll get a detailed graph showing how each plugin impacts your site’s load time. If your site was built by a developer, make sure you contact them before touching any plugins :).

First, make a backup, then disable and remove any plugins that you’re not using and aren’t essential to your site. Rescan your site and identify which plugins are slowing your site down. You can usually search the WordPress plugin library and find alternatives that may be faster. Once you’re done, disable and remove P3.

3 intermediate best practices for speeding up WordPress

Now that we’ve tackled the low-hanging fruit, let’s take a look at some more technical optimizations. There isn’t really a one-size-fits-all approach to these strategies, so you’re going to do a lot of experimenting. It’s critical that you make a backup before attempting any of these tactics. We also strongly suggest performing all of these on a staging server. It’s very, very easy to break your site while doing these so you really don’t want to do this on a site with live traffic. Disclaimers aside, now we’ll discuss server caching, lazy loading, and script optimization. 

How WordPress caching works

Caching is a pretty complex topic so I won’t get into all the details, but here’s the overview. You’ve probably heard of caching before. Maybe you’re trying to visit a website and it’s not working, so they advise you to “clear your browser cache”. When you visit a website, your browser will save images and scripts to your computer. This saves a lot of time when you revisit that website because you can load those assets locally instead of having to re-download them each time. Implementing browser caching only saves time for repeat visitors, so we don’t really care about that. We care about server caching.

How does server caching work?

Server caching is what really speeds up your site. When a user visits your site, your server has to run a database query and compile dozens of different scripts together to create a static HTML page and send it to the user. Server caching essentially runs this query, generates the HTML page, and saves that file in a separate place. Now when a user visits your site, your server goes ‘I already created that page, here you go’. Each time your website changes, you should clear your server cache and the page will be regenerated.

Caching for shared hosting

Most WordPress hosting is shared hosting. This usually means you are responsible for setting up the server, installing WordPress, and performing updates. This also means you are responsible for configuring server caching. Since each hosting company has a different envirornment and each site has different requirements, there’s no one-size-fits-all approach to setting up server caching. Again make sure that you have a backup and aren’t doing this on a site with live traffic.

There are dozens of plugins available in the WordPress library for you to try out. Search the internet or contact your host to confirm the plugin is compatible. Setup guides for popular caching plugins are easily available on the internet. A few that we’ve used in the past are:

WPengine banner

Caching for managed WordPress hosting

Managed WordPress hosting basically means your hosting company takes care of everything for you. We switched to managed WordPress hosting with WPengine about a year ago and have never looked back.

They built a proprietary caching system that’s faster than any plugin available. This is installed automatically with no configuration required. Aside from being one of the fastest managed WordPress hosting companies available, they offer complimentary SSL certs, daily backups, automatic WP core updates, available CDN, and the best tech support we’ve ever experienced. WP Engine recently increased their pricing – individual plans start at $35/month.

Lazy Loading images on wordpress

Using Lazy Loading to speed up your site

You experience lazy loading whenever you visit Facebook, Instagram, Twitter, and many news websites. When you visit a page, only the content above the fold loads initially. Additional content loads as you scroll down the screen. It’s a pretty simple concept, but lazy loading can save an incredible amount of time off your page load if you have long pages with a lot of images.

Lazy loading works with almost any element, including images, scripts, videos, and other content. It’s very important that you don’t lazy load any text content though, as it wouldn’t get crawled by Google which would hurt your SEO. Our favorite plugin for lazy loading is BJ Lazy Load.
Optimizing scripts for WordPress

What are WordPress scripts?

Scripts refer to CSS, javascript, and other non-image resources that make your website work. Most WordPress websites have dozens of scripts that load with the theme alone. Each plugin you install typically adds its own scripts too. When a user visits your site, they have to download each and every one of these scripts individually. This creates a lot of separate requests and increases your load time.

Reducing external scripts

There are a few steps we can take to optimize scripts to make your WordPress site load faster. First, we want to reduce external scripts. An external script is loaded from another website, meaning you have to rely on that site’s server to be fast and reliable. Since your server isn’t serving the file, we can’t cache it either. You want to keep these to an absolute minimum. Common external scripts are:

  • Web fonts
  • Web icons
  • Tracking codes
  • Social feeds
  • iframes

Optimizing internal scripts

We also want to reduce internal scripts, but we already did that by disabling heavy and unnecessary plugins. Choosing a fast well-built theme can also reduce scripts. Once those best practices are in place we can optimize internal scripts even farther.

First, we want to defer parsing of javascript. Most WordPress websites use a lot of javascript, which can take a long time for your browser to execute. Best practice involves putting this in the footer of your website so other assets can load first, then your browser can crunch the code.

Next we want to load scripts asynchronously. All this means is don’t load the scripts one at a time… that would take forever. Instead, start loading them in parallel so we can start painting the website elements faster.

Last we can combine and minify scripts. You have to be careful doing this because it’s very easy to break your site. This involves combining multiple CSS files into one large one, then processing it to remove redundancies and reduce size. The same goes for javascript, but with a bit more caution because some scripts need to load entirely before others can begin.

We suggest using these free WordPress plugins to optimize your scripts:

Conclusion

Following this guide can decrease your WordPress load time by several seconds. Your users will be more engaged and Google will reward you for your efforts. If you’re running AdWords campaigns on your website, the cost of speed optimization can be recouped in a matter of days. There’s simply nothing to lose and everything to gain.

If you need assistance with WordPress Speed Optimization on your website, we’re here to help. We also offer discounted WP Engine hosting and maintenance packages, which speed up your site and help you focus on running your business. Email shane@clarity-online.com for any technical questions or trenton@clarity-online.com for any strategy questions. We look forward to exceeding your expectations!