Let's talk about web performance Great Performance is Great User Experience

In this talk, we will learn why we should care about web performance, the importance of having great performing websites for both excellent User Experience (UX) and Accessibility reasons, how to measure performance using Lighthouse, and the best practices to follow to ensure our websites and web apps performance is excellent.

Transcript

1. Let's talk about web performance Great Performance is Great User Experience by <Maina Wycliffe />
2. Angular #GDE, Software Engineer, Trainer, & Typescript-meister Author: All Things Typescript Newsletter (allthingstypescript.dev) About Me Maina Wycliffe
3. Great Performance is Great User Experience <Introduction>
4. Food for thought? Budget vs Premium Devices
5. Performance - Food for thought? - iPhone 14 - Fast processor - 12GB RAM - WiFi 6 - Stable, Fast - 5G / Fast 4g Connection - Lives in the City - Probable Occupation: Engineer/Lawyer James Premium Device
6. - Samsung A03 - Budget Phone - Slow processor - Community WiFi (or WiFi) - 3G or Lower Connection - Lives in rural areas Performance - Food for thought? Johns Budget Device
7. Putting yourself in the shoes of the user <Empathy>
8. <Factors/> Influencing Performance for Websites
9. Device Capability - Low cost smartphone - Low end processors and not enough RAM
10. “Your iPhone is not the real world!”
11. Internet Connectivity - Poor connectivity - 5G vs 4G vs 3G - Poor network coverage
13. Majority of the people do not have access to the good internet
14. Server Speed/Location - Hosting infrastructure speed - How long does it take for the server to respond? - Distance to fetch resources from the user location
15. <Impact/> of Poor Performance
16. Data Bundles Usage - Expensive - Saving data, saves money
17. Battery Life Impact - Negative impact on battery life
18. Poor User Experience ◆ Takes longer to load and view content ◆ Takes longer to do something on website ◆ Users become frustrated - loss of business
19. <Measuring/> Performance
20. Tools - Lighthouse - Open-source, automated tool for improving the quality of web pages - Also measures accessibility, PWA, SEO and more - uses only lab data to measure performance - PageSpeed Insights - Website: pagespeed.web.dev - Uses both real-world data (from the Chrome User Experience report) and lab data - Performance only
21. Tools - Sentry - Tracks application performance, measures metrics like throughput & latency - Logs and Error collections/Reporting - Puppeteer - Headless browser that you can automate performance checks - Run your performance checks on CI - Used for E2E Testing
22. Key Metrics - First Contentful Paint (FCP) Time it takes for pages content to be loaded Images, HTML, Text Content etc - First Meaningful Paint (FMP) When is the primary content of a page visible to the user? - First Input Delay (FID) Time it takes for website to respond to input
23. Tools perf.rocks/tools - All Performance tools at the same place
24. <Optimization/> Performance Optimization
25. General Optimizations - Setup caching and proper caching policies - Re-Engagement/Repeat Users - Use CDN for Static Content - Serve content closer to the user - Helps with caching - Edge Computing - Edge Functions closer to users
26. Image Optimization - Serve images in the correct sizes - Serve compressed images - Use CDN for Images - Cloudflare Images - Imigix - Cloudinary
27. Javascript Optimizations - Remove unnecessary Javascript - Download impact - Parsing and Execution Impact - Split to smaller files - Use the right tools for the right jobs - SPA vs MPAs
28. CSS Optimization - Break-up CSS to Multiple Files - Reduce render blocking CSS Content - No unnecessary styles - Use fallback font - Use GPU for animations
29. Questions?
31. </Thank You󰚢> by <Maina Wycliffe/> mainawycliffe.dev | @mwycliffe_dev