Front-End Performance Quick Wins

Transcript

1. FRONT-END PERFORMANCE QUICK WINS Copyright 2015 - James Wilkinson | @jerw
2. Some stats • Average online shopper expects sites to load in 2 sec or less, after 3 sec 40% bounce • Poor performing mobile sites rarely see repeat visitors • Grocery eCommerce traffic is expected to double in the coming years
3. Styles at the top, scripts at the bottom • CSS blocks rendering • Make it the first thing to download • Make sure you only use what you need • Reduce nesting to max 4 deep • Browsers won't render your styles until needed so avoid static assets in css • Browsers download ALL CSS even if not needed Copyright 2015 - James Wilkinson | @jerw
4. • JS blocks rendering • Make it the last thing to download • Reduce complexity so scripts execute faster • Minimize JS rendering functions • async external scripts • eliminate ++, --, +=, -= (50% faster) Styles at the top, scripts at the bottom Copyright 2015 - James Wilkinson | @jerw
5. Minimize requests, minimize parallel files • Using less requests will mean the browser will render faster • Using less static asset domains will help mobile browsers load faster Copyright 2015 - James Wilkinson | @jerw
6. Compress • Enable GZIP • Minify and Concat all JS and CSS • Serve only what is needed Copyright 2015 - James Wilkinson | @jerw
7. Optimize images • JPGs set to a quality of <60 and progressive render the best • Utilize image sprites when possible • Convert as much to inline SVG as possible • Reduce the amount of images, lazy load others • Utilize the responsive image spec Copyright 2015 - James Wilkinson | @jerw
8. Optimize images • Simplify images • Apply blurring to non focal points • Properly crop and serve the right size of image • Make sure cache headers are set so the browser caches the image • Serve from multiple domains to maximize parallel downloads Copyright 2015 - James Wilkinson | @jerw
9. Optimize fonts • Fonts block rendering and cause blinks • Reduce unneeded characters • Reduce amount of font-weights and font-styles • Browser will will make faux weights and styles if not in the webfont causing extra time to render and potential visual distortion while rendering • Use WOFF2 supported everywhere means less files to download Copyright 2015 - James Wilkinson | @jerw
10. Optimize fonts • Don't use html tags that change font-style with custom fonts • b, i, em, u, strong • Override h tags font-styles and font-weights Copyright 2015 - James Wilkinson | @jerw
11. Reduce colours • Reduce the amount of colours your site uses • More colours means more time for the browser to evaluate rendering • Properly nest your colours so you're not repeating yourself Copyright 2015 - James Wilkinson | @jerw
12. Other thoughts • Carousels are evil • They promote loading of too much content • Have horrible UX • Are extremely poor performing • A/B Test the conversion of using a hero image over something less image heavy Copyright 2015 - James Wilkinson | @jerw
13. Tools • http://webpagetest.org • https://parall.ax/blog/view/3072/tutorial-reducing-the-file-size-of- custom-web-fonts • http://stateofwebtype.com • http://www.appelsiini.net/projects/lazyload Copyright 2015 - James Wilkinson | @jerw
14. Questions? Copyright 2015 - James Wilkinson | @jerw
15. JAMES WILKINSON james @jerw .ca Twitter Website Email