In his Driving mobile success by optimizing landing pages presentation at Google Conversions 2017 in Dublin Ireland, Martin Wagner talked about the journey he went through optimizing the bucher.de site for performance over the past two years. Here's my notes from his talk:
- Most people believe good pagespeed score results in a good loading time and if you improve the score once, that's enough. The reality is quite different.
- When the bucher.de site moved to a responsive Web site, pagespeed scores initially went up (that's good) but load times went down. After fixing a few issues, however, the average page load was improved over the old desktop site.
- On the separate mobile site, however, performance problems with third party libraries and images were an issue. Mobile was the last platform that was moved to the responsive Web site.
- After launch, the responsive mobile Web experience page download doubled because more functionality was added so page load savings had to be found elsewhere. One quick win was Javascript and CSS refactoring that to reduced 130kb in one day.
- Performance budgets were very helpful to define a load time on a specific network in order to set the right size targets for the site's components.
- DOM elements (fly-outs and product sliders) that weren't needed on mobile were removed until until they were needed. This resulted in 800 and 900 less DOM elements. This improved loading performance by a full second on mobile. Image lazy loading techniques like this are quite useful but saving asset sizes affects only the first hit.
- By enabling compression, making use of browser cache, optimizing images, and prioritizing visible content pagespeed scores increased.
- Prioritizing visible content (the first area of your website the customer sees without scrolling) with inline CSS and JS took the longest to implement but made a big impact.
- In previous version of Web site, the page started to render at 4 seconds. With prioritizing above the fold content, content loads at 2 seconds and completes .5 seconds earlier. This resulted in a 4% conversion increase for mobile visitors.
- A process for managing images can help resize and optimize them automatically. This takes a long time manually.
- Performance improvements are an ongoing process. You can't just increase your page speed score and assume you are done. Keep tracking/watching your efforts. google provides a useful API for this.
- Likely you have a lot of low-hanging fruit, start with those first.