Optimising your website for the future

A presentation at TECH.insight Venice in May 2016 in Venice, Metropolitan City of Venice, Italy by Andrew Smith

Slide 1

optimising TECH.INSIGHT VENICE

YOUR WEBSITE FOR THE FUTURE

Slide 2

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

Slide 3

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

Slide 4

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

Slide 5

1992 First image uploaded

Slide 6

1994 First banner ad hotwired.com

Slide 7

1995 JavaScript invented

Slide 8

1996 CSS 1 specification complete Basic adoption

Slide 9

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

Slide 10

2007 iPhone Launched

Slide 11

2010 Major support for HTML5 video, canvas in browsers

Slide 12

2010 @font-face

Slide 13

2010 BackboneJS,   KnockoutJS,   AngularJS

Slide 14

2010 Responsive   Web Design

Slide 15

2016 Our web pages are doing a lot of things!

Slide 16

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

BUFFER FACE

Slide 17

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

Slide 18

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/

Slide 19

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

Slide 20

GOOGLE

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

Slide 21

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

Slide 22

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

YOUR WEBSITE FOR

Slide 23

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

Slide 24

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

Slide 25

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  

Slide 26

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

Slide 27

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

Slide 28

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.

Slide 29

< link

href

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

rel

"stylesheet" />

< link

href

"/assets/css/main.css"

rel

"stylesheet" />

HTML SETUP

Slide 30

< 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

Slide 31

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

Slide 32

grunt.registerTask( 'usemin' ,

[ 'useminPrepare' ,

'concat' ,

'cssmin' ,

'uglify' ,

'usemin' ,

'htmlmin' ]); TASK ORDER

Slide 33

BLOCKING SCRIPTS

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

Slide 34

LATENCY CDN SOME DOMAIN SHARDING CONCATENATION reduce

Slide 35

CONNECTION SPEED CACHE

Slide 36

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

Slide 37

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

Slide 38

HEAVILY CACHE JAVASCRIPT,   CSS AND IMAGES

Slide 39

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

Slide 40

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

Don’tOPTIMISINGAT GO-LIVE!

Slide 41

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.

Slide 42

SETUP ALERTS IN ANALYTICS Intelligence events in Google Analytics

Slide 43

WATCH YOUR   IMAGE   SIZES!

Slide 44

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

Slide 45

PERFORMANCE RADAR

Slide 46

HTTP/2

Slide 47

1 CONNECTION CAN DOWNLOAD MULTIPLE RESOURCES

IN PARALLEL

Slide 48

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

Slide 49

HEADER COMPRESSION

Slide 50

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

Slide 51

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

Slide 52

WHEN CAN I USE HTTP/2 ?

Slide 53

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

Slide 54

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

YOUR HTTP/2 WEBSITE FOR PERFORMANCE

Slide 55

SMALLER REQUESTS AVOID CONCATENATION DON’T INLINE RESOURCES

Slide 56

http://www.http2demo.io/

Slide 57

REDUCE LATENCY RE-EVALUATE CDN REDUCE DOMAIN SHARDING

Slide 58

STILL IMPORTANT SMALLER PAGE SIZE NO BLOCKING SCRIPTS

Slide 59

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

Slide 60

Slide 61

SERVICE WORKER CACHING

Slide 62

SERVICE WORKERS ARE SCRIPTS THAT RUN IN THE BACKGROUND

OF OUR WEB PAGE/APP

Slide 63

INCREASE ONLINE PERFORMANCE BY REDUCING NETWORK REQUESTS

FROM CACHING ASSETS

Slide 64

PROVIDE OFFLINE FUNCTIONALITY OR A CUSTOM OFFLINE

FALLBACK EXPERIENCE.

Slide 65

Network Web Page

Slide 66

Network Web Page Service Worker

Slide 67

Slide 68

Slide 69

if ( 'serviceWorker'

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

Slide 70

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

Slide 71

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

caches.match(event.request)

.then(

function (response) {

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

Slide 72

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

Slide 73

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

Slide 74

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.