Google at WordCamp US: Performance IS User Experience
1 like959 views
The document highlights the critical importance of mobile page speed, noting that 53% of users abandon sites taking longer than 3 seconds to load. It discusses performance metrics such as first paint and time to interactive, emphasizing the need for optimizing image sizes and reducing resource requests to improve user experience. Additionally, it addresses the importance of measuring performance through tools like Lighthouse and WebPageTest to enhance website efficiency.
Google at WordCamp US: Performance IS User Experience
- 2. Source: DoubleClick - The need for mobile speed, September 2016 53%of users abandon sites that take longer than 3 seconds to load
- 3. 19 seconds Average mobile web page load on 3G
- 4. 60% of mobile connections world-wide are 2G
- 5. Optimizing Performance How to achieve good performance? Requests Connections HTML Bytes CSS Bytes JS Bytes Critical rendering path IMG Bytes Lo d s at e Animations Best Practices
- 6. Measuring Performance What are the metrics that matter to UX? First Paint First Contentful Paint Is it happening? Is it useful? Is it usable? Is it delightful? First Meaningful Paint Hero element timing Time to Interactive Long Tasks
- 7. How is the performance of the WordPress ecosystem? And… your site?
- 8. HTTP Archive Tracking how the Web is Built 500K URLs Top Alexa Sites Trends. Load times. Download sizes. Performance scores. Interesting stats. Popular scripts. Image formats. Errors. Redirects...
- 9. Load Times Users dislike slowness, and reward speed!
- 10. Visual Speed Index How quickly the contents of a page are visibly populated? Low Bet
- 11. Time to First Interactive When does the primary content of the page becomes usable? Low Bet
- 12. First Meaningful Paint When does the primary content on the page becomes visible? Low Bet
- 13. Page Load Signals How fast does the content on my site load? Low Bet
- 14. Images The Art and Science of Image Optimization
- 15. Image Optimization How many image bytes are wasteful? Low Bet
- 16. Image Optimization How has it changed in the last two years?
- 17. Image Optimization What percent of image bytes are wasteful? Low Bet
- 18. 1 in 5 image bytes are wasteful
- 19. Image Formats What types of images are most popular?
- 20. Responsive Images What is the impact of oversized images on mobile? Low Bet
- 21. Page Weight Slim pages load faster!
- 22. Resource Bytes Loaded How much stuff are we loading? Low Bet
- 23. Number of Requests How many times are we going to the server? Low Bet
- 24. Scripts The less (and less synchronous) Javascript, the better
- 25. Sync vs. Async Scripts Do WordPress site request more render-blocking scripts? Hig s Be r
- 27. HTTPS How secure are the foundations of WordPress sites? Hig s Be r
- 28. A11Y A great experience, for ALL users
- 29. Lighthouse A11Y Scores Are WordPress sites built for accessibility? Hig s Be r
- 30. Tooling Measure (performance) twice, serve your site fast, always!
- 31. We need data and tooling to assess the performance of the WP ecosystem and our own sites Data and Measurement Tools How performant is (your) WordPress?
- 34. Tide Choose plugins and themes based on Quality
- 35. HTTP Archive Tracking how the web is build