Sleek, Swift, and Sustainable: Optimizations every web developer should consider

Stop throwing hardware at performance problems. This case study reveals how to build a lightning-fast site on a minimal budget.

#1about 3 minutes

The challenge of building fast websites for poor connections

Poor internet connectivity, like on a train, highlights the need for web performance beyond just adding more bandwidth or hardware.

#2about 4 minutes

Rebuilding a voting advice app for speed and accessibility

A dated and slow voting advice application was rebuilt from scratch with a focus on performance, accessibility, and a minimalist design.

#3about 1 minute

The three core principles of web optimization

Performance is gained by reducing three key factors: server computation, response size, and the number of network round trips.

#4about 4 minutes

Reducing server load with build steps and caching

Use a build process and implement caching at every layer, from database materialized views to browser caching with ETags and content hashes.

#5about 4 minutes

Shrinking asset size with modern formats and analysis

Reduce payload size by using modern compressed formats like WebP, responsive images with the picture tag, and analyzing JavaScript bundles for unnecessary code.

#6about 2 minutes

Leveraging server configuration and modern protocols

Configure your web server for optimal compression and enable HTTP/2 to benefit from features like header compression and server push.

#7about 3 minutes

Eliminating requests by inlining resources

Reduce network round trips by inlining critical CSS, using inline SVGs for icons, and relying on system fonts to avoid font file requests.

#8about 4 minutes

Using server-side pre-rendering for perceived speed

Server-side pre-rendering delivers a fast initial HTML page for a quick First Contentful Paint, improving perceived performance over standard client-side rendering.

#9about 2 minutes