full throttle websites

26
FULL THROTTLE WEBSITES Andrew Dixon @aandrewdixon

Upload: andrew-dixon

Post on 12-Feb-2017

445 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Full Throttle Websites

FULL THROTTLE WEBSITES

Andrew Dixon@aandrewdixon

Page 2: Full Throttle Websites

Why should I care about page load speed?

Page 3: Full Throttle Websites

Human Perception

• Up 100ms

feels instant

• 300 – 1000ms tiny bit

sluggish

• > 1 seconds slow

• 10 seconds+ give up

Page 4: Full Throttle Websites

Where the web started

1 HTTP request 2.4Kb

Page 5: Full Throttle Websites

Where we are today…

170 HTTP requests 2.7Mb

Page 6: Full Throttle Websites

The evolution of websites

Page 7: Full Throttle Websites

How to find your sites speed…

Page 8: Full Throttle Websites

YSlow

Page 9: Full Throttle Websites

PageSpeed

Page 10: Full Throttle Websites

Browser Tools

Page 11: Full Throttle Websites
Page 12: Full Throttle Websites
Page 13: Full Throttle Websites

Time to fix it…

Page 14: Full Throttle Websites

Images• Sprite images• Optimise images

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

Page 15: Full Throttle Websites

JavaScript and CSS• Use a task runner to reduce:

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

Page 16: Full Throttle Websites

UnCSS

• NodeJS tool

• Grunt and Gulp version available

• Easy to use with static sites

• Works with dynamic sites

Page 17: Full Throttle Websites
Page 18: Full Throttle Websites

Static / Generated Sites

• Removes the application server overhead

• More scope for web server optimisations

• Easier to distribute and host via a CDN

Page 19: Full Throttle Websites

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

CacheIDExists / CacheKeyExists

Page 20: Full Throttle Websites

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

Page 21: Full Throttle Websites

PageSpeed Module

Page 22: Full Throttle Websites

Using a CDN

Page 23: Full Throttle Websites

• 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

Page 24: Full Throttle Websites

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

Page 25: Full Throttle Websites

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

Page 26: Full Throttle Websites

You wouldn’t want to download a whale…