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