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

1. The most common optimisation
recommendations
Based on NCC Group Web Performance Health Checks 2014–5
#NCCWP

2. Ten most common recommendations…

3. Images are big
65% of page weight
Based on 10,000 pages
from the HTTP Archive
15 April 2015

4. Wrong format
For example, PNG for a photograph
Photo: Yoel Ben-Avraham www.flickr.com/photos/epublicist/

5. Metadata
Normally, it’s excess baggage
Photo: Ippei Ogiwara www.flickr.com/photos/iogi/

6. Not enough compression
Photo: Brian Teutsch www.flickr.com/photos/brianteutsch/

7. Lossy compression
Photo: marcovdz www.flickr.com/photos/marcovdz/
It’s possible to go too far…

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. Will new formats make the problem go away?
Photo: Stefano Bertolo www.flickr.com/photos/stefanobe/

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. 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. Combine CSS files and JS files
Cuts number of HTTP requests
Photo: Royce Bair www.flickr.com/photos/ironrodart/

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. Minify text files
CSS is render blocking…
…so the sooner your CSS loads,
the sooner the page can start to render

15. Minify text files
It all adds up…
Photo: judy_and_ed www.flickr.com/photos/65924740@N00/

16. JavaScript blocks DOM construction by default…
Photo: John Haslam www.flickr.com/photos/foxypar4/
Don’t let JavaScript get in the way

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. Don’t let JavaScript get in the way
Or use the async attribute where possible:
<script src="myscript.js" async></script>

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. 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. 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. Remove unused CSS
Photo: steve_w www.flickr.com/photos/steve_way/

23. Remove unused CSS
Is it really unused?
Remove unused CSS
Photo: Willi Heidelbach www.flickr.com/photos/wilhei/

24. Remove unused CSS
Won’t subsequent pages be slower if the CSS isn’t
cached?

25. Remove unused CSS
Won’t subsequent pages be slower if the CSS isn’t
cached?
<link rel="prefetch" href="style.css">

26. Far-future caching for static objects
Photo: nabeki2009 www.flickr.com/photos/44377224@N08/

27. Review impact of third parties
Photo: Reuben Stanton www.flickr.com/photos/absent/

28. Review impact of third parties
Easier said than done
Photo: Reuben Stanton www.flickr.com/photos/absent/

29. Specify image dimensions
Photo: Michael Rosenstein www.flickr.com/photos/michaelcr/

30. Cookie-free domain for static objects
Photo: USFWS - Pacific Region www.flickr.com/photos/usfwspacific/

31. Cookie-free domain for static objects
Reduce upstream traffic
Photo: USFWS - Pacific Region www.flickr.com/photos/usfwspacific/

32. Compress text files
Gzipping typically reduces transmitted
file size by 60–70%
Photo: frankieleon www.flickr.com/photos/armydre2008/

33. Thank you!
If you have been affected by any of the issues in this
presentation, visit:
community.nccgroup-webperf.com
#NCCWP

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