Full Throttle Websites
•Download as PPTX, PDF•
1 like•564 views
Full Throttle Websites as presented at CFCamp 2015
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Full Throttle Websites
Similar to Full Throttle Websites (20)
Recently uploaded
Recently uploaded (20)
Full Throttle Websites
- 1. FULL THROTTLE WEBSITES Andrew Dixon @aandrewdixon
- 2. Why should I care about page load speed?
- 3. Human Perception • Up 100ms feels instant • 300 – 1000ms tiny bit sluggish • > 1 seconds slow • 10 seconds+ give up
- 4. Where the web started 1 HTTP request 2.4Kb
- 5. Where we are today… 170 HTTP requests 2.7Mb
- 6. The evolution of websites
- 7. How to find your sites speed…
- 8. YSlow
- 9. PageSpeed
- 10. Browser Tools
- 13. Time to fix it…
- 14. Images • Sprite images • Optimise images For NodeJS: • ImageMin • gulp-imagemin • grunt-contrib-imagemin
- 15. JavaScript and CSS • Use a task runner to reduce: – Optimise images – Combine JS – Combine CSS – Minify JS – Minify CSS – Removed unused CSS
- 16. UnCSS • NodeJS tool • Grunt and Gulp version available • Easy to use with static sites • Works with dynamic sites
- 18. Static / Generated Sites • Removes the application server overhead • More scope for web server optimisations • Easier to distribute and host via a CDN
- 19. Application Level Caching • Evaluate site / application • Cache data • Only get data again once stale • ACF & Lucee – CachePut, CacheGet and CacheIDExists / CacheKeyExists
- 20. Web Server Optimisations • Enable compression • Add expiry headers • Turn off unused modules • Turn on Keep-Alive • Check max clients, spare threads, etc…
- 21. PageSpeed Module
- 22. Using a CDN
- 23. • 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
- 24. Distributed DNS • Improves DNS lookup speed • Improves regional performance • Geo-routing local nodes • AWS Route 53 • CloudFlare
- 25. Integrate Speed with CI • To spot regressions • Webpagetest CLI • PageSpeed Insights CLI • Phantomas CLI
- 26. You wouldn’t want to download a whale…
Editor's Notes
- Andrew Dixon Technical director – mso and completely free publishing Professional web and CFML developer over 15 years
- Users leave slow sites quickly and don’t come back Google Ranking Factor “standard” users will probably be on: Lower end devices, cheap laptops and tables Slower connections (you dev machine is local!!)
- Nielsen usability figures >1 second – context shift might consider leaving >10 second – you are never going to see them again… Want to be in the 0 – 1000ms range
- Sir Tim Berners Lee 1990 Basically just text and hyperlinks
- Site like Youtube More application than website
- Started small Began to grow as browsers supported more features Then came frameworks for JavaScript (prototypejs, mootools, jQuery) Then came frameworks for CSS (Bootstrap) Your website is now an obese man!!!
- Various tools available, both free and paid
- Grade pages Overall grade - A to F Individual component grades - A to F Overall performance score 1 to 100 Good for giving you a list of things to address Not updated since Oct 2013
- It’s probably similar to what is used in the Google algorithm Bit light on details Difference between desktop and mobile There is an API you can use for CI
- Network details show requests Each request details Stalled Request sent Waiting Content Download Connection throttling / simulation
- Support by Google Give you waterfall network graph similar to browser tools Both first load and cached load Videos of page rendering Speed Index score Lots of details
- Paid service $149 per month (14 day trial) Add JS snippet to pages Monitors from the users end Lots of detail about requests, including AJAX requests Great for finding bottle necks, e.g. in a particular browser
- * Both web developer and sys admin
- Sprite images for fewer requests Optimise images TinyPNG – API 500 per month free ImageOptim – Opensource Mac tool NodeJS - ImageMin
- Task runner (grunt, gulp, etc…) – combine and minify – single file for each Using already minified JS means when combined with none minified JS does work as well UnCSS – next slide
- NodeJS tool - removes unused CSS from your stylesheets Removes Bootstrap (or other CSS framework) bloat For mso.net it reduces our CSS file from 255kb to 94kb (~63%) Pass it HTML files or URLs For sites with “members” areas you can use PhantomJS to crawl the site Downloads pages and creates temporary HTML file for UnCSS to use.
- Location Ignores – for classes you want to keep no matter what Lots more options
- Everything just spoken about can be applied to static / generated sites Removes the application server overhead, which even when minimal adds time Host on a CDN
- Evaluate site / application to find cacheable data. Cache that data for an appropriate amount of time. Only get the data again once the cache is considered stale. In ACF and Lucee this can be done easily using the CachePut, CacheGet and CacheIDExists / CacheKeyExists functions. In Lucee you can define multiple caches and define them per web context Caching also reduces load on your server(s) and DB
- Enable compression so that “text” (HTML, CSS, JS, XML, etc…) is compressed before sending – can have dramatic effect on page weight Add expiry headers to static content, like CSS, JS and images so that it is cached client site for subsequent requests You will need to have “cache-busters” for when CSS and JS changes are made, something like ?123456 You can use your task runner to update your cache buster values, so it only changes them if there are changes to the CSS or JS Turn off any modules that are not used, this will save memory and generally make the web server perform better. Also good for security. Turn on HTTP keepalive and set a reasonable timeout, 60 seconds. This reduces the connection requests the client has to make to the server and there the HTTP overhead. Check the settings for max clients, spare threads, etc… in your configuration to make sure it is suitable.
- The PageSpeed modules are open-source server modules that optimise your site automatically. Great tool, not a magic bullet and mileage will vary There are tons of “filters” you can switch on and off Comes with a good set of defaults Works better if everything is serviced from the same server, e.g. html, js, css, etc…
- If you have global audience CDN is great Can provide better speed even if you don’t Will provide an optimised delivery content AWS CloudFront – if using other AWS service or even if not – free tier available first year CloudFlare – free plan MaxCDN – No free plan
- If you don’t want to / can’t use a CDN then move all assets like JS, CSS and images to a cookie-less domain. For example assets.example.com This will mean that each request from the browser doesn’t have to include all the cookie data you are storing, which can add a big overhead.
- Improves DNS lookup speeds Improves regional performance Geo-routing to local nodes AWS Route 53 – integrates brilliantly is using other AWS services CloudFlare - free plan available
- Webpagetest CLI – Use it to test performance and get data back from webpagetest for CI PageSpeed Insights CLI – run mobile and desktop performance tests for deployed site with reporting to CI Phatomas CLI PhantomJS based metrics tool load of data about frontend performance creates a webpage in your site root, pretty graphs ~95 different metrics Film strip screenshots of loading state
- You wouldn’t want your users downloading a 5Mb image Think about what you are shipping down the line Always think “how fast can I make this” Particularly consider mobile users