optimising GENERATE LONDON

YOUR WORKFLOW FOR PERFORMANCE

ANDI SMITH @andismith
andismith.com DIRECTOR OF WEB DEVELOPMENT

AT AKQA

techinsight.io

that’s me!

USE A TASK RUNNER Image Credit: https://www.flickr.com/photos/elsie/8229790

1 AUTOMATE

WORKFLOW 2 REDUCE REPETITION 3 REDUCE 
 ERRORS

4 REDUCE 
 PAIN !

Image Credit:
http://www.workcompass.com

GRUNT or GULP

GRUNT or GULP • Configuration based setup • Sequential tasks • Writes to file system • Code based setup • Concurrent tasks • Uses streams (faster)

TASKS TO PERFORMANCE optimise

OPTIMISE 
 SITE PERFORMANCE? why Image Credit: https://www.flickr.com/photos/ssoosay/2948843480

Credit: https://www.youtube.com/watch?v=rpxE2yIyRhI

BUFFER FACE

HOW LONG WILL USERS WAIT? 100ms

1s 
 10 s Source: http://www.nngroup.com/articles/response-times-3-important-limits/ Feels like it is instantly reacting

Feels like the computer is “working” on their request

Users give up

AMAZON EXTRA 100MS WAIT COST 1% IN SALES Source: http://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/

GOOGLE

EXTRA 500MS WAIT FOR SEARCH RESULTS DROPPED 20% TRAFFIC Source: http://glinden.blogspot.co.uk/2006/11/marissa-mayer-at-web-20.html

TESTING

PERFORMANCE Speed Index http://webpagetest.org

TESTING

PAGE SPEED Page Speed Insights https://developers.google.com/speed/ pagespeed/insights/

WHY THE WAIT? LATENCY PAGE SIZE CONNECTION SPEED TOO MANY REQUESTS BLOCKING 
 SCRIPTS

optimising Image Credit:
https://www.flickr.com/photos/noddymini/17368814772

YOUR WEBSITE FOR PERFORMANCE

FIX THE WAIT! LATENCY PAGE SIZE CONNECTION SPEED FEWER REQUESTS NO BLOCKING 
 SCRIPTS SMALLER REDUCE

PAGE SIZE Image Credit: https://www.flickr.com/photos/rockingcars/10083247036/ smaller

Average bytes per page by Content Type for top 1,000,000 web sites Total: 2,169kb Images

1,364kb Stylesheets

69kb Video

202kb Fonts

111kb HTML

56kb Scripts

353kb Other

4kb Source: http://httparchive.org/interesting.php?a=All&l=Aug%2015%202015

SET A PERFORMANCE BUDGET A BASELINE FOR PAGE SIZE AND 
 NUMBER OF REQUESTS More Info: http://timkadlec.com/2013/01/setting-a-performance-budget/

RESPONSIVE

IMAGES npm install grunt- responsive-images npm install gulp-responsive Serve images that fit the size of the users’ device appropriately. Otherwise we’re just sending wasted pixels

Workflow task resizes image Use srcset and picture element

SRCSET VS PICTURE

SIZE/DPI

< img

src

"small.jpg"

srcset

"large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

sizes

"(min-width: 640px) 90vw, 100vw"

alt

"My lovely horse"

USE IMG WITH SRCSET & SIZE S

ART DIRECTION

< picture

< source

media

"(min-width: 640px)"

srcset

"large.jpg 1x, large-hd.jpg 2x"

< source

srcset

"small.jpg 1x, small-hd.jpg 2x"

< img

src

"fallback.jpg"

alt

"My lovely horse"

</ picture

USE PICTURE

RESPONSIVE IMAGES More Info: https://dev.opera.com/articles/responsive-images/ SRCSET PICTURE Resize Yes No Pixel Density (e.g. Retina) Yes No Art Direction Changing No Yes MIME Type (e.g. WebP) No Yes

Source: http://caniuse.com/ SRCSET PICTURE

LACKING BROWSER SUPPORT? https://github.com/scottjehl/picturefill USE A POLYFILL!

COMPRESS IMAGES npm install grunt-contrib-imagemin npm install gulp-imagemin Compress images so they take less time to download

FILE SIZE SAVINGS BEFORE AFTER 273KB 240KB

UNUSED CSS npm install grunt- uncss npm install gulp-uncss No need to include unused CSS on our pages.

MINIFY, UGLIFY Image Credit: https://www.flickr.com/photos/abrinsky/14836518223

MINIFY, UGLIFY & CONCATENATE npm install grunt- usemin npm install gulp-usemin Usemin runs a number of performance helper tasks such as uglify, cssmin and concat enate automatically.

< link

href

"/assets/css/vendors/bootstrap.css"

rel

"stylesheet" />

< link

href

"/assets/css/main.css"

rel

"stylesheet" />

HTML SETUP

< script

src

"/assets/js/vendors/jquery.js"

< /script

< script

src

"/assets/js/vendors/picturefill.js"

< / script

< script

src

"/assets/js/main.js"

< /script

HTML SETUP

usemin: {

html: '/*.html', css: PATHS.DEST + PATHS.CSS + '/.css', js: PATHS.DEST + PATHS.JS + '**/.js' } , useminPrepare: { html: 'src/index.html' , options: { root: 'src'

} } EXAMPLE SETUP

grunt.registerTask( 'usemin' ,

[ 'useminPrepare' ,

'concat' ,

'cssmin' ,

'uglify' ,

'filerev' ,

'usemin' ,

'htmlmin' ]); TASK ORDER

COMPRESS FILES npm install grunt-contrib-compress npm install gulp-gzip GZIP our HTML, CSS, JavaScript.

LAZY LOADING

REQUESTS fewer

SPRITE IMAGES npm install grunt-spritesmith npm install gulp.spritesmith Combine smaller images in to one sprite file, and generate CSS for the sprite

CRITICAL CSS npm install grunt- penthouse npm install gulp-critical-css Inline critical CSS for above-the-fold content in to the first 14kb.

BLOCKING SCRIPTS

LATENCY CDN SOME DOMAIN SHARDING CONCATENATION reduce

CONNECTION SPEED CACHE

CACHE FILES npm install grunt- filerev npm install gulp-filerev Use filerev to set your workflow to assign file revision numbers

main.css FILEREV SETS A FILENAME 
 BASED ON THE FILE CONTENTS main.a1b2c3.css

HEAVILY CACHE JAVASCRIPT, 
 CSS AND IMAGES

CHANGES TO THE FILE WILL 
 CREATE A NEW FILENAME main.css main.d4e5f6.css

SUMMARY OF TASKS • Smaller Page Size 
 Responsive Images, Image Optimisation, Unused CSS, Minify and Uglify • Fewer Requests 
 Concatenate, Sprite Images, Critical CSS • Connection Speed 
 Cache Files

Image Credit: https://www.flickr.com/photos/ecodallaluna/3987049662 GO LIVE After

MEASURE PERFORMANCE npm install grunt- perfbudget 
 npm install grunt-pagespeed https://github.com/addyosmani/psi-gulp-sample 
 http://bit.ly/1iGsRXP Measure SpeedIndex and Google PageSpeed to check performance.

SETUP ALERTS IN ANALYTICS Intelligence events in Google Analytics

WATCH YOUR 
 IMAGE 
 SIZES!

Image Credit: https://www.flickr.com/photos/jaguarcarsmena/13979908838

https://www.flickr.com/photos/paul_appleyard/11009129905

to BEWARE OF CMS AUTHORS

IMAGE OPTIMISATION IN YOUR CMS

CONCLUSION Design with a performance budget Use a workflow to save you pain Optimise your images, CSS and JavaScript Educate the people who are going to be maintaining the site!

CHALLENGER APPROACHING Image Credit: https://www.flickr.com/photos/134832191@N08/19984768723

HTTP/2

1 CONNECTION CAN DOWNLOAD MULTIPLE RESOURCES

IN PARALLEL

BINARY RATHER THAN TEXTUAL LOWER PARSE OVERHEAD SIMPLER, SO LESS ERROR PRONE

HEADER COMPRESSION

Source: http://chimera.labs.oreilly.com/books/1230000000545/ch12.html#HTTP2_HEADER_COMPRESSION :method GET :scheme https :host andismith.com … … 2 :method GET … … … Request Headers Lookup Table 2 … Encoded Header

ALLOWS SERVERS TO 
 PUSH RESPONSES TO CLIENT E.G. SEND CSS BEFORE REQUESTED

WHEN CAN I USE HTTP/2 ?

Source: http://caniuse.com/#search=http2

HTTP/2 ADOPTION • Support from most major server software by end of 2015 • nginx alpha now available • Apache 2.4.12 supported via patching, in next release • IIS for Windows 10

optimising Image Credit:
https://www.flickr.com/photos/noddymini/17368814772

YOUR HTTP/2 WEBSITE FOR PERFORMANCE

SMALLER REQUESTS AVOID CONCATENATION DON’T INLINE RESOURCES

WITH HTTP/2, LOAD RESOURCES ON DEMAND

http://www.http2demo.io/

REDUCE LATENCY RE-EVALUATE CDN REDUCE DOMAIN SHARDING

STILL IMPORTANT SMALLER PAGE SIZE NO BLOCKING SCRIPTS

HTTP/1.X HTTP/2.X Responsive Images Yes Yes Image Min Yes Yes Spriting Yes No Inline CSS Yes No CSS Minification Yes Yes CSS Concatenation Yes No JavaScript Minification Yes Yes JavaScript Concatenation Yes No HTML Minification Yes Yes

MORE ON HTTP/2 https://http2.github.io/

https://www.mnot.net/blog/2014/01/30/ http2_expectations

THANKS! @andismith
andismith.com Image Credit: https://www.flickr.com/photos/eurosporttuning/19261694863