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