full throttle websites
TRANSCRIPT
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…