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." - The Content Factory
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: 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.
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.
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 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.
Now, the product page loads in 1.7 seconds on desktop — much better.
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!
Ty for this wonderfull guidelines. Currently classy things is hosted on woo commerce website we are facing the TTFB problem & FCP issue as this is the main concer when we run our ads as because this are key factors to increase customer satisfaction.