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.
The most common optimisation
recommendations
Based 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 pages
from 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...
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/...
Will new formats make the problem go away?
WebP: Chrome, Opera, Android Browser
JPEG XR: IE9+
BPG: http://bellard.org/bpg/...
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...
Don’t let JavaScript get in the way
JavaScript blocks DOM construction by default…
…so load it as late as possible
(ideall...
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/...
Don’t let JavaScript get in the way
JavaScript will no longer block DOM construction
Neither will it wait for the CSSOM
Ph...
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...
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/usfwspac...
Compress text files
Gzipping typically reduces transmitted
file size by 60–70%
Photo: frankieleon www.flickr.com/photos/ar...
Thank you!
If you have been affected by any of the issues in this
presentation, visit:
community.nccgroup-webperf.com
#NCC...
Europe
Manchester - Head Office
Amsterdam
Cheltenham
Copenhagen
Edinburgh
Glasgow
Leatherhead
London
Milton Keynes
Munich
Z...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Ở đâu Bán Thực Phẩm Chức Năng Giảm Cân Của Mỹ
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Common web performance recommendations

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

871

On Slideshare

0

From embeds

0

Number of embeds

241

Actions

Downloads

13

Shares

0

Comments

0

Likes

0

×