Web Performance Optmisation - faster websites (on hold) 🇵🇱 🇬🇧 3 days

What will I learn?

• Find bottlenecks at page load time and at runtime
• Optimise HTML, CSS, JS, images and fonts
• Measure the impact of different optimisations
• Use tools like DevTools and WebPageTest effectively
• Automate repeatable optimisations

Why should I care?

• Earn more money from your websites
• Convert more users, faster services lead to better UX and SEO ranks
• Save your own money by using fewer server resources
• Save your users money and respect their mobile plan and battery
• Respect your users time
• Be proud of your work

What's the class format?

Hands-on workshops. Tens of exercises showing almost every single aspect of WPO.

In the beginning you get a very slow loading website and we speed it up step by step.

Next, we improve scroll based animations so that they render smoothly on older devices.

Once we get to know the classical optimisations we learn newer technique related to HTTP/2, Service Workers and modern Single Page App frameworks.

Finally we audit of one of the publically available websites.

Is this website fast?

Agenda

Introduction

• Performance golden rule
• Theory of Constraints
• Load time optimisations
• Runtime optimisations
• Perceived performance

Network optimisations

• Bandwidth vs latency
• HTTP cache (Cache-Control, ETag, caching strategies)
• Resource hints (preload, prefetch)
• Service Workers - implementing caching strategy
• HTTP/2 - impact on performance optimisations
• 14kB rule
• Compression (gzip, brotli)
• CDN

Rendering pipeline

• Critical Rendering Path
• DOM
• CSSOM
• Render Tree
• Layout
• Paint

CSS loading

• Render blocking
• Minification (cssnano, csso)
• head section
• shorthand notation
• shallow selectors
• unused CSS
• finding duplication
• mobile first as optimisation technique
• @import vs link
• critical CSS (above the fold)

JS loading

• Parser blocking
• SPOF (Single Point of Failure)
• Minification
• Joining (bundlers)
• defer vs async
• defer vs scripts at the end
• lighter libraries
• Vanilla JS

Single Page Apps

• Client Side Render vs Server Side Render
• Modern JS frameworks loading time
• JS parsing time
• Transpilation cost (babel, babel-preset-env)
• Code splitting
• Render optimisations (Virtual DOM)
• Memoization
• Microbenchmarking (benchmark.js)
• dev mode vs production mode
• HTML streaming vs JSON streaming
• App shell

Font loading

• optimal font selection
• font conversion (ttf2eot, ttf2woff, ttf2woff2)
• optimal cascade with @font-face
• Font subsetting (fontmin)
• Flash of Unstyled Text vs Flash of Invisible Text
• Non-blocking font loading (font-display, Font Loading API)

Image loading

• Raster vs vector
• images in HTML vs images in CSS
• img@srcset
• picture
• JPEG optimisations (imagemin)
• WebP (imagemin-webp)
• Lazy loading (blazy, IntersectionObserver)
• Sprites (svg-sprite)

Runtime optimisations (scroll, animations)

• 60fps
• Jank and slow frame analysis
• Forced synchronous layout/Layout thrashing
• requestAnimationFrame
• Paint flashing
• animations in a separate layer
• CSS animations vs JS animations
• Web Workers

Metrics

• Time to First Byte
• First Paint
• DOM Content Loaded
• First Meaningful Paint
• First Contentful Paint
• Largest Contentful Paint
• First CPU Idle
• Time to Interactive
• Load Time
• Speed Index
• Custom metrics
• Performance budget
• waterfall and flame chart analysis
• Timing APIs (Navigation, Resource, Paint, User Timing)

Tools

• Chrome DevTools (Network, Performance, Audits, Rendering)
• npm and Parcel
• Rule based tools (PageSpeed Insights, Lighthouse)
• Advanced synthetic testing with WebPageTest
• Continuous Web Performance Testing with webpagetest-api