All of the things that make WordPress a great choice for web design also can work against it for speed.

While you are able to make beautiful websites on WordPress more quickly than ever, you should be mindful that all those plug-ins and fancy effects you use work against you for load times. Users will leave sites that don’t load quickly. Similarly, Google will penalize sites in the search rankings without good load times. This has become important enough that I include these tactics in our complete wordpress website launch checklist.

With that in mind, let’s walk you through a page load optimization that I recently did for a client. This site, for Bridgetown Baseball in Portland, OR, was a blast to build. I have a son who has played club baseball and a daughter who plays club softball so I’m very immersed in both sports’ parent culture.

Diagnosing Site Load Issues

Running Google’s PageSpeed Insights

So my first step is to run Google’s PageSpeed Insights to see how bad we are doing with load times. I’m paying attention to mobile devices first, as they are more susceptible to load times issues due to fluctuations in available bandwidth.

Initial Results: 28. Ouch. On a 100-point scale, with 100 being the best, that’s a very low score. This was without the video with PageSpeed being set for a mobile device.

Improving Site Load Issues

The Obvious Stuff to Fix

If you’ve gone to the site on a desktop you’ll notice that is features a large video loop. Although the video has been heavily compressed, it’s still a whopping 645k. This is not ideal, but was a design choice for this client. Sports is kinetic and it seems strange to have just static imagery. However, the theme I use, Divi, loads a static image when it’s viewed on a mobile device.

Also, in looking at the report it was obvious that I did not properly compress some of the photos that I used. Step 1 involved taking the two largest photos and compressing them for a savings of about 300 KB.

Before You Start Optimizing

It’s important to note that with every step you take in your optimization you pause afterwards and check the functions of your site. Features of many of the plugins below will break effects and cause page rendering issues, so you will be trying to find a balance between something that looks great and loads as fast as possible, especially on mobile.

Let’s get Smushed

After I did my own compressing, I decided to install a Smush plugin to help with some batch image compression. The free version ran more compression on all the images and claimed a total savings of 4.2 MB, or 19%. Let’s run PageSpeed again and see the results.

Results: 29. Ouch again … Images were not a primary culprit, but any improvement without a noticeable drop in quality is better than no improvement.

Let’s get Lazy

One of the best opportunities, according to Google, to correct this site’s rendering is to enable lazy loading, a process that defers image loading until the screen is scrolled to view the images.

Like everything here, you can do this by hand, but I decided to spare myself the technical pieces of this and installed the a3 Lazy Load plugin. Upon activation it appears to just turn on.

When I used this plugin on another site I found that it interfered with some scripts, especially animated sliders. So you will need to tinker with the settings to find a balance between performance and looks.

Let’s re-check the speed.

Results: 44. Getting better!

Unblocking Rendering

The next biggest source of slowdown appears to be coming from CSS and Javascript that is being called from the header file of the site.

I suspected I needed more granular control, so I moved to the Async JavaScript plugin.

Once Installed and activated you have to go to the settings page to enable it. I experimented a little and found that if I hit the “Apply Defer” button, I got the best result. How’d we do?

Results: 48. Just one shy of average.

Desktop Score

When I toggled over the the Desktop tab on PageSpeed Insights, I found a whopping 96, which made me really happy! It appears, however, that Google is ignoring the giant video in their reporting, but I won’t tell them that!

Other Options

Autoptimize

The same developer who built the Async Javascript plugin also has developed Autoptimize, a handy plugin that optimizes CSS, HTML, Google fonts, as well as adding asynchronous javascript. I used it on another site with good results.

Once you install it, you’ll need to try turning on optimization of HTML, Javascript, and CSS separately.

I’ve actually found that using this plugin got better results than the Async Javascript plugin above on more complex sites.

Hummingbird

During this process I tried the Hummingbird plugin. It comes with it’s own tools, including a performance scan. The scan found that the site had a lot going for it already, including compression, gzip, browser caching. The tool that interested me was the Asset Optimization tool, which sounded like it might help fix some of these pesky render-blocking resources. Upon activation, this tool found 28 assets, but warned that I should modify each file individually because of the risk of breaking the theme. So when I clicked on the Asset Optimization again, it gave me a list of files to compress, most of which had already been minimized.

PageSpeed Ninja

I then tried PageSpeed Ninja, which includes a lot of the things that we’ve already done, including eliminating render-blocking JavaScript and CSS. When I enabled it, I chose the Optimal setting. In Divi, with that setting, it trashed the page. So I set it to “Safe” instead. That did nothing that had not already been done with other plugins so I deactivated it and deleted it.

The Last Word

There are other, more technical optimization techniques we can do to aid mobile loading, but I’ll save those optimizations for a client site that is really dependant on blazing mobile load speeds and for a client who would get real impact from the extra speed. These kinds of technical rabbit holes can fill a lot of time and sometimes the effort isn’t worth the prize.

If you have a favorite for optimization, let me know in the comments below. I’d love to hear from you.