A Page Speed Optimization Case Study

WooCommerce is a WordPress plugin hundreds of thousands of companies use to power their online stores, so we decided to host our marketing training packages on the open source ecommerce platform. As we were building out our product pages, though, we were anxious to make sure our site performance wouldn’t suffer.

You may recall from our primer on technical SEO that website speed is an important factor in search engine optimization, and mobile page speed is one of Google’s ranking factors.

If your site takes more than four seconds to load, you can lose up to 40% of your users.

That’s bad enough for your SEO content, but even worse for your WooCommerce store — losing traffic is one thing, but losing sales is another.

If your site takes more than 3 seconds to load, that's bad for UX, #SEO and, in the case of #ecommerce, sales. Click To Tweet

So when I pushed the product pages live, ran some speed tests on GTmetrix and saw they were taking more than seven seconds to load, I put on my page speed optimization hat.

The "before" picture: GTMetrix shows our product page taking 7.7 seconds to load, prior to optimization
The “before” picture: 7.7 seconds to load? Yikes!

My Goal: Get WooCommerce Page Load Time Under 3 Seconds by EOD

Now, we were doing a lot of things right — after all, PageSpeed Insights gave us an A:

  • Our WordPress theme is optimized for speed and SEO (shout-out to StudioPress and the Genesis Framework!)
  • I didn’t bloat our shop with too many WooCommerce extensions
  • All local resources leverage browser caching
  • We minify, compress and combine our CSS and JavaScript files
  • Our time to first byte (TTFB) is low due to great hosting from SiteGround

The YSlow score told a different story, though, so I looked a bit closer at the performance report and considered the following areas for improvement:

  • Make fewer HTTP requests: The Rise & Convert page, for example, had 10 external JavaScript scripts and four CSS files
  • Add expires headers: You can’t control expires headers on third-party files, so between Google, Gravatar and PayPal, the page had seven static components without far-future expiration dates
  • Minify JavaScript and CSS: PayPal apparently doesn’t minify their scripts
  • Reduce DNS lookups: The components of the page were split over 16 different domains, including including four just for Vimeo and two for PayPal

Now that I knew what was causing the slowdown, I could make a plan to tackle it.

Reduce DNS Lookup recommendation from GTmetrix speed testing tool
That’s way too many DNS lookups.

The Solution: Eliminate Unneeded DNS Lookups and External Scripts

By laser-focusing on reducing DNS lookups, I could kill several birds with one stone, since each of those domains was also associated with scripts, style sheets and other external files, i.e., HTTP requests. It would also knock out some of those static components without expires headers.

Reducing PayPal DNS lookups was easy — I simply removed the buttons from the product pages themselves, so now you only see them when you’re on the Cart/Checkout pages. I also disabled Gravatar on product reviews.

Vimeo (and its four different DNS lookups) would be trickier — but I found a simple solution, courtesy of the WP Speed Guru himself, Alexei Kutsko.


Digital Marketing Training Packages


The Fastest, Easiest Way to Serve Videos on WordPress

Before I get into speeding up third-party (e.g., YouTube, Vimeo, etc.) embeds, here’s why I opted to use Vimeo to serve videos on contentfac.com in the first place:

Hosting video locally on your site — that is, uploading it to your site and using a video player to display it — is a big burden on your server. If you’re using shared hosting without premium CDN streaming services, you’re better off embedding YouTube or Vimeo links and letting them handle the work. I chose Vimeo because it doesn’t show ads before your video begins (I also prefer the look and feel of the player).

WP Speed Guru suggests replacing the video embeds with an image that opens the actual video link in a lightbox. I use Shortcodes Ultimate for lightbox functionality, and I added an empty anchor link to the lightbox shortcode to change the cursor to a pointer on hover.

It was the best of both worlds — the video looked the way I wanted it to on the page, but changing it to a lightbox eliminated all four of the Vimeo DNS lookups. Here’s what the result looked like:

The SEO 101 Online Video Training Series Intro Video

The Result: A 6-Second Improvement in WooCommerce Load Time

Now, the product pages load in under two seconds on desktop, and three seconds on 3G mobile.

GTMetrix Report: 99 on PageSpeed, 92 on YSlow, and a fully loaded time of 1.7 seconds on desktop
Now, the product page loads in 1.7 seconds on desktop — much better.
Mobile speed results from the Think With Google speed testing tool: 3 second load times, better than top performers in the Internet/Telecom industry
The 3-second load time on 3G puts us ahead of top performers in the Internet/Telecom industry.

To recap, here’s how I got the 7.7-second WooCommerce product page to load in 1.7 seconds on desktop (3 seconds on mobile 3G):

  • Removed PayPal buttons on the product page
  • Disabled Gravatar in reviews
  • Replaced the Vimeo embed with a lightbox

Need to Speed Up Your WooCommerce Shop?

If your PageSpeed and YSlow scores are getting you down, they’re probably dragging your organic traffic, keyword rankings and conversions down, too. Contact TCF to learn more about our technical SEO services, including website speed and performance tune-ups.

You could also purchase our Rise & Convert and learn the ins and outs of technical SEO and performance optimization yourself!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want to know more about our pricing, services, training programs and strategy?

Our generic proposal has it all, and you can get it for FREE right now! Enter your name and email below.
When you request a copy of our generic proposal you'll be subscribed to our newsletter filled with tons of great digital marketing tips and advice. Don't worry — if you don't absolutely love it, you can unsubscribe with one click!  

Close this message.

close-link


Where should we send
your free podcast pitching tracking spreadsheet?

By signing up to receive our keyword research template, you'll also be signed up for TCF's newsletter featuring tips to gain more ROI from digital marketing. Don't worry — if you don't love it, you can unsubscribe with one click.
close-link

Want to level up your digital marketing skills – and influence?

Join 1,000+ people in our private Facebook group for skill building and strategy sharing!
close-link