Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Common web performance recommendations

822 views

Published on

A summary of some of the most common web performance recommendations, based on NCC Group Web Performance Health Checks, 2014-15.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Common web performance recommendations

  1. 1. The most common optimisation recommendations Based on NCC Group Web Performance Health Checks 2014–5 #NCCWP
  2. 2. Ten most common recommendations…
  3. 3. Images are big 65% of page weight Based on 10,000 pages from the HTTP Archive 15 April 2015
  4. 4. Wrong format For example, PNG for a photograph Photo: Yoel Ben-Avraham www.flickr.com/photos/epublicist/
  5. 5. Metadata Normally, it’s excess baggage Photo: Ippei Ogiwara www.flickr.com/photos/iogi/
  6. 6. Not enough compression Photo: Brian Teutsch www.flickr.com/photos/brianteutsch/
  7. 7. Lossy compression Photo: marcovdz www.flickr.com/photos/marcovdz/ It’s possible to go too far…
  8. 8. Education You can’t blame people for uploading big images if they don’t know it’s a problem Photo: Kevin Dooley www.flickr.com/photos/pagedooley/
  9. 9. Will new formats make the problem go away? Photo: Stefano Bertolo www.flickr.com/photos/stefanobe/
  10. 10. Will new formats make the problem go away? WebP: Chrome, Opera, Android Browser JPEG XR: IE9+ BPG: http://bellard.org/bpg/ Photo: Stefano Bertolo www.flickr.com/photos/stefanobe/
  11. 11. Will new formats make the problem go away? WebP: Chrome, Opera, Android Browser JPEG XR: IE9+ BPG: http://bellard.org/bpg/ http://people.mozilla.org/~josh/lossy_compressed_image_study_july_2014/ Photo: Stefano Bertolo www.flickr.com/photos/stefanobe/
  12. 12. Combine CSS files and JS files Cuts number of HTTP requests Photo: Royce Bair www.flickr.com/photos/ironrodart/
  13. 13. Combine CSS files and JS files But this won’t matter in the world of HTTP/2 Photo: Peter Roome www.flickr.com/photos/roome/
  14. 14. Minify text files CSS is render blocking… …so the sooner your CSS loads, the sooner the page can start to render
  15. 15. Minify text files It all adds up… Photo: judy_and_ed www.flickr.com/photos/65924740@N00/
  16. 16. JavaScript blocks DOM construction by default… Photo: John Haslam www.flickr.com/photos/foxypar4/ Don’t let JavaScript get in the way
  17. 17. Don’t let JavaScript get in the way JavaScript blocks DOM construction by default… …so load it as late as possible (ideally, just before it’s used) Photo: John Haslam www.flickr.com/photos/foxypar4/
  18. 18. Don’t let JavaScript get in the way Or use the async attribute where possible: <script src="myscript.js" async></script>
  19. 19. Don’t let JavaScript get in the way JavaScript will no longer block DOM construction Photo: Martin Brigden www.flickr.com/photos/noddymini/
  20. 20. Don’t let JavaScript get in the way JavaScript will no longer block DOM construction Neither will it wait for the CSSOM Photo: Martin Brigden www.flickr.com/photos/noddymini/
  21. 21. Don’t let JavaScript get in the way …so don’t use async for JS that interacts with the DOM/CSSOM Image: Stefano Brivio www.flickr.com/photos/buggolo/
  22. 22. Remove unused CSS Photo: steve_w www.flickr.com/photos/steve_way/
  23. 23. Remove unused CSS Is it really unused? Remove unused CSS Photo: Willi Heidelbach www.flickr.com/photos/wilhei/
  24. 24. Remove unused CSS Won’t subsequent pages be slower if the CSS isn’t cached?
  25. 25. Remove unused CSS Won’t subsequent pages be slower if the CSS isn’t cached? <link rel="prefetch" href="style.css">
  26. 26. Far-future caching for static objects Photo: nabeki2009 www.flickr.com/photos/44377224@N08/
  27. 27. Review impact of third parties Photo: Reuben Stanton www.flickr.com/photos/absent/
  28. 28. Review impact of third parties Easier said than done Photo: Reuben Stanton www.flickr.com/photos/absent/
  29. 29. Specify image dimensions Photo: Michael Rosenstein www.flickr.com/photos/michaelcr/
  30. 30. Cookie-free domain for static objects Photo: USFWS - Pacific Region www.flickr.com/photos/usfwspacific/
  31. 31. Cookie-free domain for static objects Reduce upstream traffic Photo: USFWS - Pacific Region www.flickr.com/photos/usfwspacific/
  32. 32. Compress text files Gzipping typically reduces transmitted file size by 60–70% Photo: frankieleon www.flickr.com/photos/armydre2008/
  33. 33. Thank you! If you have been affected by any of the issues in this presentation, visit: community.nccgroup-webperf.com #NCCWP
  34. 34. Europe Manchester - Head Office Amsterdam Cheltenham Copenhagen Edinburgh Glasgow Leatherhead London Milton Keynes Munich Zurich North America Atlanta Austin Chicago New York San Francisco Seattle Sunnyvale Australia Sydney

×