full throttle websites

FULL THROTTLE WEBSITES

Andrew Dixon@aandrewdixon

Why should I care about page load speed?

Human Perception

• Up 100ms

feels instant

• 300 – 1000ms tiny bit

sluggish

• > 1 seconds slow

• 10 seconds+ give up

Where the web started

1 HTTP request 2.4Kb

Where we are today…

170 HTTP requests 2.7Mb

The evolution of websites

How to find your sites speed…

YSlow

PageSpeed

Browser Tools

Time to fix it…

Images• Sprite images• Optimise images

For NodeJS:• ImageMin• gulp-imagemin• grunt-contrib-imagemin

JavaScript and CSS• Use a task runner to reduce:

– Optimise images– Combine JS– Combine CSS– Minify JS– Minify CSS– Removed unused CSS

UnCSS

• NodeJS tool

• Grunt and Gulp version available

• Easy to use with static sites

• Works with dynamic sites

Static / Generated Sites

• Removes the application server overhead

• More scope for web server optimisations

• Easier to distribute and host via a CDN

Application Level Caching• Evaluate site / application• Cache data• Only get data again once stale• ACF & Lucee – CachePut, CacheGet and

CacheIDExists / CacheKeyExists

Web Server Optimisations• Enable compression• Add expiry headers• Turn off unused modules• Turn on Keep-Alive• Check max clients, spare threads, etc…

PageSpeed Module

Using a CDN

• Don’t want to / can’t use a CDN• Use for assets like JS, CSS and images

– e.g. http://assets.examples.com• Reduces HTTP request overhead

Distributed DNS• Improves DNS lookup speed• Improves regional performance• Geo-routing local nodes• AWS Route 53• CloudFlare

Integrate Speed with CI• To spot regressions• Webpagetest CLI• PageSpeed Insights CLI• Phantomas CLI

You wouldn’t want to download a whale…