Product page performance problems

TL;DR

Ruth Mesfun tackles product page latency issues, improving mobile performance by 15%.

Transcript

MARTIN SPLITT: How did that happen? Hello, and welcome to another episode of "SEO Fairy Tales." With me today is Ruth Mesfun. You are a software engineer at Zillow and you love leather crafting. RUTH MESFUN: Yes. MARTIN SPLITT: That's an interesting hobby. And you also play board games. So that's something that I can connect more with. But you have... Read More

Key Insights

• Ruth Mesfun identified high bounce rates on product pages due to latency issues, impacting user retention and SEO performance.
• Using Google Analytics and Lighthouse, Ruth pinpointed that the latency was primarily due to excessive plugins and packages.
• A GIF used as a loading indicator significantly contributed to loading delays; replacing it with an SVG improved performance.
• Images were initially loaded all at once, causing latency; implementing lazy loading reduced the load time effectively.
• A custom Lighthouse script automated performance testing, offering insights into mobile and desktop page load times.
• Webpack bundle analyzer helped identify and remove unnecessary packages, optimizing the page's loading speed.
• Tree shaking and bundle splitting were used to streamline the code, reducing the amount of data loaded unnecessarily.
• The performance optimization process took several months, with notable improvements in user engagement and page load times.

Questions & Answers

Q: What was the main issue causing users to leave the product pages?

The main issue causing users to leave the product pages was latency. The pages were taking too long to load, which discouraged users from staying and completing their purchase. This latency was due to several factors, including excessive plugins, a GIF loading icon, and images not being lazy-loaded.

Q: How did Ruth identify the latency issues on the product pages?

Ruth used Google Analytics to track where users were dropping off the product pages. She then employed a custom Lighthouse script to render the pages multiple times, which helped her identify the specific elements contributing to the latency, such as plugins and images.

Q: What changes did Ruth make to improve page performance?

Ruth made several changes to improve page performance. She replaced a GIF loading icon with an SVG, implemented lazy loading for images, and optimized the code by removing unnecessary plugins and packages. These changes collectively reduced the page load time, improving user retention.

Q: What tool did Ruth use to analyze the size of packages on the page?

Ruth used the Webpack bundle analyzer to examine the size of packages on the page. This tool helped her identify large, unnecessary packages, such as a bar chart plugin that was only used on one page, allowing her to streamline the code and reduce latency.

Q: How did the custom Lighthouse script aid in troubleshooting?

The custom Lighthouse script automated the process of rendering pages multiple times, providing consistent data on page load times. This allowed Ruth to compare performance between the production and development versions of the site, identifying areas for improvement.

Q: What was the impact of the performance improvements on user engagement?

The performance improvements led to a 15% reduction in page load times, which resulted in increased user engagement. Users were more likely to stay on the product pages and complete their purchases, positively impacting the site's overall performance and marketing metrics.

Q: How long did the entire optimization process take?

The entire optimization process took several months. While some fixes, like lazy loading images and replacing the GIF loading icon, were relatively quick, optimizing the code by removing unnecessary plugins and implementing bundle splitting required more time and effort.

Q: Is the custom Lighthouse script available for public use?

As of the discussion in the video, the custom Lighthouse script was not publicly available, as it was an internal tool. However, there was a possibility of it being shared in the future, pending approval from the developer who created it.

Summary & Key Takeaways

• Ruth Mesfun, a software engineer, faced challenges with high bounce rates on product pages. Using Google Analytics and Lighthouse, she identified latency issues caused by excessive plugins and packages. By optimizing these elements, she significantly improved mobile performance.

• To address latency issues, Ruth replaced a GIF loading icon with an SVG and implemented lazy loading for images. These changes, along with code optimization through tree shaking and bundle splitting, led to a 15% improvement in mobile page performance.

• The performance optimization process involved detailed analysis and several months of work. The results were positive, with increased user engagement and satisfaction, demonstrating the importance of addressing technical SEO issues for better page performance.