DEV Community

Jeff Posnick for Google Web Dev

Posted on • Originally published at jeffy.info on

Performance auditing an eCommerce site

Alan's weekly eCommerce livestreams

My teammate Alan's been running a weekly livestream on his YouTube channel, focusing on topics of interest to eCommerce websites. He asked me to come on this week and perform a site performance audit.

Since I'm currently homebound due to Coronavirus concerns in NYC, I haven't had the chance to perform any in-person site audits in a while. Going through the process via a livestream was a great opportunity!

The site review

The review process took about 50 minutes (I'd recommend watching at 2x playback speed...) and covered some relevant findings from WebPageTest.org and Lighthouse.

We choose the site, https://threddies.com/, "at random" based on folks who volunteered. I think it ended up being fairly representative of the types of issues a lot of sites encounter.

Lightly edited from the notes I took during the review.

Tools used:

Observations

  • 11 seconds for main content to load — what's loaded beforehand?
  • How many of the widgets/analytics tools can be lazily-loaded (or potentially removed, if appropriate)?
  • HTTP cache expiration best practices.
  • Use the Coverage panel in Chrome Dev Tools to evaluate how much of your JS/CSS in the critical request path is being used
  • Q: Can they get away with loading Google Maps static images instead of Google Maps widget? Answer: yes, they can.
  • Always click on the "Learn More" link in Lighthouse for additional context!
  • Zach Leatherman's guides to loading web fonts are great.

Top comments (1)

Collapse
 
stackedboost profile image
Peter Hallander

Great session — the lazy loading and HTTP cache discussion is spot on. One underrated technique that doesn't get covered much in standard audits: navigation prefetching. Most Lighthouse audits focus on the current page load, but a huge part of perceived eCommerce performance is how fast the next page feels when a user clicks a product or category link.

Prefetching assets on hover (before the click even happens) can make navigation feel instant. For Shopify specifically, I built an app called Prefetch (apps.shopify.com/prefetch) that does this with zero theme code changes — it hooks into hover events and preloads the linked page's critical assets ahead of time.

Disclosure: I'm the developer. But it's a technique worth knowing about for any eCommerce performance audit toolkit.