How I improved my WordPress website download time 10x

Chrome Dev Tools Lighthouse scores for my website.

Tools

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.

Site Kit by Google.
Code coverage in Chrome Dev Tools.

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.

WP Engine makes clearing caches easy.

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.

Step 2: Optimize Graphics

I inspected every image on my landing page. Most were between 20KB and 40KB but one picture was 2MB!

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.

Step 4: Avada’s New Performance Wizard

Avada 7.4 has a new Performance Wizard to reduce the download size of the theme.

Avada Performance Wizard
  1. Icons. Removes unused icon sets.
  2. 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.
  3. Avada Elements. If you don’t use Breadcrumbs, Counter Circles, etc., the wizard will eliminate these.
  4. Optimize Images and Videos, JavaScript, and CSS. This includes image lazy loading (images below the fold aren’t loaded until the user scrolls down) and other performance settings.

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.

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.

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’s CDN control panel.

Step 10: Accessibility, Best Practices, SEO.

Lighthouse has four measurements that presumably contribute to your search placement and ad costs:

  • Accessibility
  • Best Practices
  • SEO

Conclusion

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thomas David Kehoe

Thomas David Kehoe

727 Followers

I make technology for speech clinics to treat stuttering and other disorders. I like backpacking with my dog, competitive running, and Russian jokes.