optimising TECH.INSIGHT VENICE

YOUR WEBSITE FOR THE FUTURE

ANDI SMITH DIRECTOR OF WEB DEVELOPMENT AT AKQA LONDON @andismith andismith.com

THE WEB IS GETTING MORE COMPLICATED Credit: https://www.flickr.com/photos/rustybadger/4706889120/

1991 First website on the World Wide Web http://info.cern.ch/hypertext/WWW/TheProject.html

1992 First image uploaded

1994 First banner ad hotwired.com

1995 JavaScript invented

1996 CSS 1 specification complete Basic adoption

2005 First YouTube Video https://www.youtube.com/watch?v=jNQXAC9IVRw

2007 iPhone Launched

2010 Major support for HTML5 video, canvas in browsers

2010 @font-face

2010 BackboneJS, 
 KnockoutJS, 
 AngularJS

2010 Responsive 
 Web Design

2016 Our web pages are doing a lot of things!

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

BUFFER FACE

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

HOW LONG IS TOO LONG TO WAIT? 100ms feels instantaneous. 1s for the state of flow to remain uninterrupted. 10s is when the user loses interest entirely. Source: http://www.nngroup.com/articles/response-times-3-important-limits/

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

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

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

YOUR WEBSITE FOR

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

1,463kb Stylesheets

78kb Video

200kb Fonts

124kb HTML

66kb Scripts

360kb Other

4kb Source: http://httparchive.org/interesting.php?a=All&l=Apr%201%202016

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

SMALLER PAGE SIZE Responsive Images (srcset / picturefill) npm install grunt-responsive-images 
 npm install gulp-responsive 
 Image Optimisation npm install grunt-contrib-imagemin 
 npm install gulp-imagemin 


Unused CSS npm install grunt-uncss 
 npm install gulp-uncss 
 Minification 
 npm install grunt-contrib-cssmin

npm install grunt- contrib-uglify npm install gulp-cssmin 
 npm install gulp- uglify SMALLER PAGE SIZE

FEWER REQUESTS Sprite Images npm install grunt-spritesmith 
 npm install gulp-spritesmith 
 
 Critical CSS

npm install grunt-penthouse 
 npm install gulp-criticalcss 
 Concatenate

npm install grunt- contrib-concat npm install gulp- concat

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.

<!-- build:css /assets/css/main.min.css -->

< link

href

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

rel

"stylesheet" />

< link

href

"/assets/css/main.css"

rel

"stylesheet" />

<!-- endbuild -->

HTML SETUP

<!-- build:js /assets/js/main.min.js -->

< script

src

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

< /script

< script

src

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

< / script

< script

src

"/assets/js/main.js"

< /script

<!-- endbuild -->

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' ,

'usemin' ,

'htmlmin' ]); TASK ORDER

BLOCKING SCRIPTS

<SCRIPT> AT BOTTOM OF PAGE <SCRIPT ASYNC > <SCRIPT DEFER >* no *IE 10+

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

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

Don’tOPTIMISINGAT GO-LIVE!

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: http://pictures.topspeed.com/IMG/crop/200512/2003-ferrari-enzo-40_600x0w.jpg

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

to BEWARE OF CMS AUTHORS

PERFORMANCE RADAR

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

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

YOUR HTTP/2 WEBSITE FOR PERFORMANCE

SMALLER REQUESTS AVOID CONCATENATION DON’T INLINE RESOURCES

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 Minification 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

SERVICE WORKER CACHING

SERVICE WORKERS ARE SCRIPTS THAT RUN IN THE BACKGROUND

OF OUR WEB PAGE/APP

INCREASE ONLINE PERFORMANCE BY REDUCING NETWORK REQUESTS

FROM CACHING ASSETS

PROVIDE OFFLINE FUNCTIONALITY OR A CUSTOM OFFLINE

FALLBACK EXPERIENCE.

Network Web Page

Network Web Page Service Worker

Register Install Activate

Register Install Activate Cache files Can intercept 
 network traffic

if ( 'serviceWorker'

in

navigator ) {

navigator .serviceWorker.register( '/sw.js' )

.then( function () { console.log( 'SW registration success' ); }). catch ( function (error ) { console.log( 'SW failed: ' , error ); }); } REGISTERING A SERVICE WORKER

self.addEventListener( 'install' , function (event) {

event .waitUntil( caches. open ( 'my-cache-v1' ) .then( function (cache) { console.log( 'Opened cache' );

return cache.addAll(urls ); }) ); }); INSTALLING A SERVICE WORKER

self.addEventListener( 'fetch' , function (event) { event.respondWith(

caches.match(event.request)

.then(

function (response) {

return response || event.default(); }) ); }); USING THE CACHE

GENERATE A SERVICE WORKER IN GRUNT OR GULP https://github.com/GoogleChrome/sw- precache

Source: http://caniuse.com/#feat=serviceworkers

ENABLES ADD TO HOMESCREEN ON ANDROID • Manifest.json

• The manifest must have a short_name, a name for display in the banner, • A start URL (e.g. / or index.html) which must be loadable, • At least an 144x144 PNG icon with image/png mime type.

• You have a service worker registered on your site • Your site is served over HTTPS (service worker requires HTTPS for security) • The user has visited your site at least twice, with at least five minutes between visits.

MORE ON SERVICE WORKERS https://jakearchibald.github.io/ isserviceworkerready/

https://jakearchibald.com/2014/service- worker-first-draft/

ACCELERATED MOBILE PAGES INSTANT ARTICLES vs

GOOGLE FACEBOOK vs

AMP

HTML SUBSET USING A 
 COMMON FRAMEWORK simplified

DESIGNED TO LOAD ABOVE THE FOLD CONTENT IMMEDIATELY

inline STYLES ONLY (UP TO 50KB) 
 no USER WRITTEN JAVASCRIPT

cached BY GOOGLE

<html ⚡ > IMPLEMENTING AMP <html amp>

deshxfsidhriosdj

< link

rel

"canonical"

href

"original-url.html" /> IMPLEMENTING AMP < link

rel

"canonical"

href

"this-page.amp.html" />

deshxfsidhriosdj

< script async src

"https://cdn.ampproject.org/v0.js"

</ script

IMPLEMENTING AMP

deshxfsidhriosdj

LOAD TIMES faster

Source: https://www.keycdn.com/blog/accelerated-mobile-pages/

IN GOOGLE 
 SEARCH RESULTS prioritised

ANYONE? m.

MORE ON AMP https://ampbyexample.com/

https://www.smashingmagazine.com/ 2016/02/everything-about-google- accelerated-mobile-pages/

INSTANT ARTICLES

DISPLAY YOUR ARTICLES WITHIN FACEBOOK WITH 1/10TH OF THE LOAD TIMES

CREATED WITH SECURE RSS FEED, OR VIA API

CAN PUBLISH RSS AUTOMATICALLY OR PUSH TO DRAFT FOR MANUAL APPROVAL

MORE ON INSTANT ARTICLES https://instantarticles.fb.com/

https://developers.facebook.com/docs/instant- articles/api

optimising

YOUR WEBSITE FOR THE FUTURE

THE FUTUREIS 2016

THE FUTUREIS NOW

THANKS! @andismith
andismith.com http://bit.ly/1Tn6T6L