WordPress Speed Optimization in 2018Improving Conversion, Retention, SEO, & UX
By Shane Griffiths & Trenton Erker
Published February 28th, 2018
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
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.
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.
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 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
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
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
|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).
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:
|Speed Focus||HiDPI Focus|
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.
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 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.
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.
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 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. You can sign up yourself and get a plan for $30/m, or go through us and get a site with a CDN ($50/m value) for $25/m.
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.
What are WordPress scripts?
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
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.
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.
We suggest using these free WordPress plugins to optimize your scripts:
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 [email protected] for any technical questions or [email protected] for any strategy questions. We look forward to exceeding your expectations!