The most common optimisationrecommendationsBased on NCC Group Web Performance Health Checks 2014–5
#NCCWP
Ten most common recommendations…
Images are big
65% of page weight
Based on 10,000 pagesfrom the HTTP Archive
15 April 2015
Wrong format
For example, PNG for a photograph
Photo: Yoel Ben-Avraham www.flickr.com/photos/epublicist/
Metadata
Normally, it’s excess baggage
Photo: Ippei Ogiwara www.flickr.com/photos/iogi/
Not enough compression
Photo: Brian Teutsch www.flickr.com/photos/brianteutsch/
Lossy compression
Photo: marcovdz www.flickr.com/photos/marcovdz/
It’s possible to go too far…
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/
Will new formats make the problem go away?
Photo: Stefano Bertolo www.flickr.com/photos/stefanobe/
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/
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/
Combine CSS files and JS files
Cuts number of HTTP requests
Photo: Royce Bair www.flickr.com/photos/ironrodart/
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/
Minify text files
CSS is render blocking…
…so the sooner your CSS loads,the sooner the page can start to render
Minify text files
It all adds up…
Photo: judy_and_ed www.flickr.com/photos/65924740@N00/
JavaScript blocks DOM construction by default…
Photo: John Haslam www.flickr.com/photos/foxypar4/
Don’t let JavaScript get in the way
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/
Don’t let JavaScript get in the way
Or use the async attribute where possible:
<script src="myscript.js" async></script>
Don’t let JavaScript get in the way
JavaScript will no longer block DOM construction
Photo: Martin Brigden www.flickr.com/photos/noddymini/
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/
Don’t let JavaScript get in the way
…so don’t use async forJS that interacts with
the DOM/CSSOM
Image: Stefano Brivio www.flickr.com/photos/buggolo/
Remove unused CSS
Photo: steve_w www.flickr.com/photos/steve_way/
Remove unused CSS
Is it really unused?
Remove unused CSS
Photo: Willi Heidelbach www.flickr.com/photos/wilhei/
Remove unused CSS
Won’t subsequent pages be slower if the CSS isn’t cached?
Remove unused CSS
Won’t subsequent pages be slower if the CSS isn’t cached?
<link rel="prefetch" href="style.css">
Far-future caching for static objects
Photo: nabeki2009 www.flickr.com/photos/44377224@N08/
Review impact of third parties
Photo: Reuben Stanton www.flickr.com/photos/absent/
Review impact of third parties
Easier said than done
Photo: Reuben Stanton www.flickr.com/photos/absent/
Specify image dimensions
Photo: Michael Rosenstein www.flickr.com/photos/michaelcr/
Cookie-free domain for static objects
Photo: USFWS - Pacific Region www.flickr.com/photos/usfwspacific/
Cookie-free domain for static objects
Reduce upstream traffic
Photo: USFWS - Pacific Region www.flickr.com/photos/usfwspacific/
Compress text files
Gzipping typically reduces transmitted file size by 60–70%
Photo: frankieleon www.flickr.com/photos/armydre2008/
Thank you!
If you have been affected by any of the issues in this presentation, visit:
community.nccgroup-webperf.com
#NCCWP
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