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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Angular #GDE, Software Engineer, Trainer, & Typescript-meister Author: All Things Typescript Newsletter (allthingstypescript.dev) About Me Maina Wycliffe

Slide 3

Slide 3 text

Great Performance is Great User Experience

Slide 4

Slide 4 text

Food for thought? Budget vs Premium Devices

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

- 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

Slide 7

Slide 7 text

Putting yourself in the shoes of the user

Slide 8

Slide 8 text

Influencing Performance for Websites

Slide 9

Slide 9 text

Device Capability - Low cost smartphone - Low end processors and not enough RAM

Slide 10

Slide 10 text

“Your iPhone is not the real world!”

Slide 11

Slide 11 text

Internet Connectivity - Poor connectivity - 5G vs 4G vs 3G - Poor network coverage

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Majority of the people do not have access to the good internet

Slide 14

Slide 14 text

Server Speed/Location - Hosting infrastructure speed - How long does it take for the server to respond? - Distance to fetch resources from the user location

Slide 15

Slide 15 text

of Poor Performance

Slide 16

Slide 16 text

Data Bundles Usage - Expensive - Saving data, saves money

Slide 17

Slide 17 text

Battery Life Impact - Negative impact on battery life

Slide 18

Slide 18 text

Poor User Experience ◆ Takes longer to load and view content ◆ Takes longer to do something on website ◆ Users become frustrated - loss of business

Slide 19

Slide 19 text

Performance

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Tools perf.rocks/tools - All Performance tools at the same place

Slide 24

Slide 24 text

Performance Optimization

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Image Optimization - Serve images in the correct sizes - Serve compressed images - Use CDN for Images - Cloudflare Images - Imigix - Cloudinary

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

CSS Optimization - Break-up CSS to Multiple Files - Reduce render blocking CSS Content - No unnecessary styles - Use fallback font - Use GPU for animations