How I improved my WordPress website download time 10x
Google’s research showed that the likelihood of a bounce increased by 32% when a page load time went from one to three seconds, and by 90% when the page load time went from one to five seconds. If a site takes up to 10 seconds to load, then the likelihood of a bounce increases by 123%.
Not only do users hate slow websites, Google and Facebook ads cost more for slow websites. My Avada WordPress website had a Total Blocking Time of 2000 milliseconds (two seconds until the user can click something) and a Largest Contentful Paint (until the webpage is fully loaded) more than ten seconds. Most of my visitors bounced in less than a minute.
Now my website downloads more than 10x faster:
Several tools measure your download speeds and suggest ways to improve your website. GTmetrix is good but I don’t use it because it’s free only for measuring desktop download speeds, which most websites pass. Mobile download is the hard part and Google is pushing for “mobile first” because most web use is now on mobile devices.
Google has several free tools. PageSpeed Insights is a website and is included in the free WordPress plugin Site Kit by Google.
Site Kit is a suite of six tools. PageSpeed Insights is for download speeds. Search Console is helpful for SEO and search ads. Analytics shows you data about visits to your website. Tag Manager enables you to track conversions.
I removed two Site Kit modules because they were slowing down my downloads. AdSense is for display ads and Optimize is for A/B testing. I’m not doing either of these now.
Chrome Dev Tools has two free tools. In Chrome, open a New Incognito Window, load your website, and open the Dev Tools. (right click > Inspect or option-command-j on a Macintosh). The first tool is Lighthouse, which is in the top menu bar on the right end. Click that and then click Generate Report. This gives you a lot of information not only about Performance (download speed) but also Accessibility, Best Practices, and SEO.
The other Chrome Dev Tool is code coverage. Open the Console and in the in Console menu bar click on Coverage, then click the reload button and wait to see the results. This shows you the files that downloaded to build your website.
Another tool you’ll need is Adobe Photoshop or a similar photo editor to optimize your graphics.
Cacheing Will Drive You Up The Wall
Downloads speeds are inconsistent due to cacheing and lag times. You’ll make a change and the download time decreases, then make another change and download time increases. But the change in speed may be due to change you made three or four changes ago.
The purpose of cacheing is to improve download speed. But clearing your caches will start fresh but then your download speed slows as the caches are rebuilt.
I use WP Engine as my hosting service. They have a single button for clearing all caches.
Plus there’s variance in download times. You can measure performance and see download times double or drop in half, for no reason.
Step 1: Trim Your Website
First, cut redundant or unnecessary material from your website, as well as redundant material. :-) This will improve your user experience as well as your download speeds.
My landing page has Amazon-style reviews for the product. I cut these from the mobile version as loading the reviews took almost half the download time.
Step 2: Optimize Graphics
I inspected every image on my landing page. Most were between 20KB and 40KB but one picture was 2MB!
Consider replacing a image with an icon.
Check that all your images are the right size. Lighthouse will tell you if any images are too small.
Finally there’s file formats. I’m not an expert in this but what I know is that photographs vs. solid colors (such as logos) should have different file formats. Twenty years ago it was JPEG for photos and GIF for solid colors. I tried using GIFs for my logo and other solid color images and the sizes were really small, 6KB or 8KB, but sometimes the image would appear and sometimes it wouldn’t. PNG is the modern file format for solid colors. The files are bigger but they look great and always appear.
I’m still using JPEGs for photos. I’ve heard that .webp is better but Photoshop doesn’t do this and Safari doesn’t support it so I don’t use it.
If your images are in the 20KB to 40KB range you’re done. Don’t waste your time trying to get them down to 10KB. Your total download will be 2 or 3 MB so five or ten images will be only less than 10% of your download.
I don’t have videos on my landing page.
You could skip this step and install the Smush plugin. This plugin optimizes images for you. I tried the plugin and it didn’t improve download speed because I’d optimized the images myself.
Step 3: Code Coverage
Open Chrome Dev Tools and run the Coverage. You’ll see the files downloaded for your website in order of size. Red means unused code, blue is code is use.
I spotted a download from doubleclick.com for Google Surveys. I’d installed this useless widget ten years ago. Looking in my Insert Headers and Footers plugin I saw the line of code for the surveys and deleted this.
The biggest file is Fusion CSS style sheet, i.e., the Avada theme. This is more than a megabyte. We’ll work on this later.
Next I saw lots of files downloaded from Google and gstatic.com. These were most of the download bandwidth for my website. These files were downloaded by the Site Kit plugin. Two Site Kits modules, AdSense and Optimize, weren’t hooked up because I’m not doing display ads or A/B testing. But disconnected didn’t mean these modules weren’t adding massive files to my website. I removed these modules from Site Kit and download times improved 10x. This was the biggest improvement I made.
Step 4: Avada’s New Performance Wizard
Avada 7.4 has a new Performance Wizard to reduce the download size of the theme.
The wizard walks you through several steps. At each step you can click a button that tells you what the wizard recommends for your website.
- Avada features. If you’re not using Mega Menus, Google Maps, etc., this will cut out useless CSS downloads.
- Icons. Removes unused icon sets.
- Fonts/Typography. The wizard recommends that you use five or fewer fonts. It’ll help you find fonts that you don’t need to use. It also sets how fonts are downloaded.
- Avada Elements. If you don’t use Breadcrumbs, Counter Circles, etc., the wizard will eliminate these.
Step 5: Eliminate Render-Blocking Resources
Now you’ve done everything you can to make your download smaller. The rest of the tools are magic, i.e., they change how your website downloads without changing its contents.
If Lighthouse gives you this error message it’ll recommend installing the Autoptimize plugin or a similar plugin. I found that this helped somewhat but didn’t make a big difference, and I still the “eliminate render-blocking resources” suggestion after installing Autoptimize. I ended up using the NitroPack plugin, which is incompatible with Autoptimize so I removed Autoptimize.
Step 6: Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages is an HTML framework to make mobile webpages download faster. Several AMP plugins are available for WordPress. I tried the official AMP plugin and got weird results. Sometimes the download times were super fast (20ms), but the main menu disappeared. More on this below.
Step 7: Progressive Web App (PWA)
A PWA makes a website perform more like a native app. Avada has a PWA plugin and its Performance Wizard can configure the plugin. I saw a small improvement in performance.
Step 8: NitroPack Plugin
My Google Tag Manager guy in Bangladesh recommended the NitroPack plugin. This combines in one plugin image optimization, lazy loading, the Amazon CDN, etc. It cut my download times by a third. I’d tried various plugins with the same features but didn’t see much improvement. I don’t know why one plugin makes a big improvement when another plugin that does the same thing doesn’t show a result. Every website is different, try different plugins and see what works for you.
With NitroPack my main menu disappeared until the mouse crossed the menu. The AMP plugin did something similar. I went to the NitroPack and found an article telling me that with the WP Engine hosting service I needed a cache exclude based on the following cookie: nitropack-nocache. I contacted WP Engine, they installed this in a few minutes.
This fixed the main menu problem in Chrome but not Firefox or Safari. I adjusted the NitroPack settings for less speed (there are four speed levels) and the menu problem seems to be fixed.
Step 9: Content Delivery Network (CDN)
While I was chatting with the WP Engine support person, he suggested that I switch on WP Engine’s CDN feature. A Content Delivery Network mirrors your files on servers around the world so your download times are faster.
WP Engine offers CDN service free. NitroPack also includes CDN service. I have both switched on.
Step 10: Accessibility, Best Practices, SEO.
Lighthouse has four measurements that presumably contribute to your search placement and ad costs:
- Best Practices
Lighthouse gives you recommendations to improve all three.
My accessibility problems were low contrast in some parts of my landing page. Lighthouse shows you pictures of these areas. I changed the font and background colors to fix these. Plus some images didn’t have Alt tags. Getting accessibility to 100% was easy.
The “Best Practices” problem was a link in the plugin WP Customer Reviews in which target=”_blank” didn’t have `rel=”noopener”` or `rel=”noreferrer”`. This wasn’t a security issue, it was Lighthouse being picky. I sent an email to the plugin developer and within ten minutes he’d sent out an update that fixed the issue.
“SEO” was 100% because I’d used the Yoast plugin to put in titles and metadescriptions for every page of my website.
Every website is different. Download speeds vary from run to run. Cacheing can make weird results. Menus and images can disappear if your download to too optimized. Everything in this blog post is free and most steps are easy so try different things and see what works for you.