Optimising Your Website For the Future

In this talk Andi Smith will be looking at the root causes of website bloat and how web site optimisation is about to change with the rise of HTTP/2, Service Workers and AMP.

Transcript

1. optimising YOUR WEBSITE FOR THE FUTURE TECH.INSIGHT VENICE
2. ANDI SMITH DIRECTOR OF WEB DEVELOPMENT AT AKQA LONDON @andismith andismith.com
3. THE WEB IS GETTING MORE COMPLICATED Credit: https://www.flickr.com/photos/rustybadger/4706889120/
4. 1991 First website on the World Wide Web http://info.cern.ch/hypertext/WWW/TheProject.html
5. 1992 First image uploaded
6. 1994 First banner ad hotwired.com
7. 1995 JavaScript invented
8. 1996 CSS 1 specification complete Basic adoption
9. 2005 First YouTube Video https://www.youtube.com/watch?v=jNQXAC9IVRw
10. 2007 iPhone Launched
11. 2010 Major support for HTML5 video, canvas in browsers
12. 2010 @font-face
13. 2010 BackboneJS,
 KnockoutJS,
 AngularJS
14. 2010 Responsive
 Web Design
15. 2016 Our web pages are doing a lot of things!
16. Credit: https://www.youtube.com/watch?v=rpxE2yIyRhI BUFFER FACE
17. WHY THE WAIT?LATENCY PAGE SIZE CONNECTION SPEED TOO MANY REQUESTS BLOCKING
 SCRIPTS
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/
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/
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
21. FIX THE WAIT! LATENCY PAGE SIZE CONNECTION SPEED FEWER REQUESTS NO BLOCKING
 SCRIPTS SMALLER REDUCE
22. optimising YOUR WEBSITE FOR Image Credit: https://www.flickr.com/photos/noddymini/17368814772 PERFORMANCE now
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
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/
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

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
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
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 concatenate automatically.
29. <!-- 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
30. <!-- 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
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
32. grunt.registerTask('usemin', ['useminPrepare', 'concat', 'cssmin', 'uglify', 'usemin', 'htmlmin']); TASK ORDER
33. BLOCKING SCRIPTS <SCRIPT> AT BOTTOM OF PAGE <SCRIPT ASYNC> <SCRIPT DEFER>* no *IE 10+
34. LATENCY CDN SOME DOMAIN SHARDING CONCATENATION reduce
35. CONNECTION SPEED CACHE
36. CACHE FILES npm install grunt-filerev npm install gulp-filerev Use filerev to set your workflow to assign file revision numbers
37. main.css FILEREV SETS A FILENAME
 BASED ON THE FILE CONTENTS main.a1b2c3.css
38. HEAVILY CACHE JAVASCRIPT,
 CSS AND IMAGES
39. CHANGES TO THE FILE WILL
 CREATE A NEW FILENAME main.css main.d4e5f6.css
40. Don’t OPTIMISING AT GO-LIVE! Image Credit: https://www.flickr.com/photos/noddymini/17368814772
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.
42. SETUP ALERTS IN ANALYTICS Intelligence events in Google Analytics
43. WATCH YOUR
 IMAGE
 SIZES!
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
45. PERFORMANCE RADAR
46. HTTP/2
47. 1 CONNECTION CAN DOWNLOAD MULTIPLE RESOURCES IN PARALLEL
48. BINARY RATHER THAN TEXTUAL LOWER PARSE OVERHEAD SIMPLER, SO LESS ERROR PRONE
49. HEADER COMPRESSION
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
51. ALLOWS SERVERS TO
 PUSH RESPONSES TO CLIENT E.G. SEND CSS BEFORE REQUESTED
52. WHEN CAN I USE HTTP/2?
53. Source: http://caniuse.com/#search=http2
54. optimising YOUR HTTP/2 WEBSITE FOR PERFORMANCE Image Credit: https://www.flickr.com/photos/noddymini/17368814772
55. SMALLER REQUESTS AVOID CONCATENATION DON’T INLINE RESOURCES
56. http://www.http2demo.io/
57. REDUCE LATENCY RE-EVALUATE CDN REDUCE DOMAIN SHARDING
58. STILL IMPORTANT SMALLER PAGE SIZE NO BLOCKING SCRIPTS
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
60. MORE ON HTTP/2 https://http2.github.io/ https://www.mnot.net/blog/2014/01/30/ http2_expectations
61. SERVICE WORKER CACHING
62. SERVICE WORKERS ARE SCRIPTS THAT RUN IN THE BACKGROUND OF OUR WEB PAGE/APP
63. INCREASE ONLINE PERFORMANCE BY REDUCING NETWORK REQUESTS FROM CACHING ASSETS
64. PROVIDE OFFLINE FUNCTIONALITY OR A CUSTOM OFFLINE FALLBACK EXPERIENCE.
65. Network Web Page
66. Network Web Page Service Worker
67. Register Install Activate
68. Register Install Activate Cache files Can intercept
 network traffic
69. 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
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
71. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { return response || event.default(); }) ); }); USING THE CACHE
72. GENERATE A SERVICE WORKER IN GRUNT OR GULP https://github.com/GoogleChrome/sw- precache
73. Source: http://caniuse.com/#feat=serviceworkers
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.
75. MORE ON SERVICE WORKERS https://jakearchibald.github.io/ isserviceworkerready/ https://jakearchibald.com/2014/service- worker-first-draft/
76. ACCELERATED MOBILE PAGES INSTANT ARTICLES vs
77. GOOGLE FACEBOOK vs
78. AMP
79. HTML SUBSET USING A
 COMMON FRAMEWORK simplified
80. DESIGNED TO LOAD ABOVE THE FOLD CONTENT IMMEDIATELY
81. inline STYLES ONLY (UP TO 50KB)
 no USER WRITTEN JAVASCRIPT
82. cached BY GOOGLE
83. eshxfsidhriosdj <html ⚡> IMPLEMENTING AMP <html amp>
84. eshxfsidhriosdj <link rel="canonical" href="original-url.html" /> IMPLEMENTING AMP <link rel="canonical" href="this-page.amp.html" />
85. eshxfsidhriosdj <script async src="https://cdn.ampproject.org/v0.js"></script> IMPLEMENTING AMP
86. LOAD TIMES faster
87. Source: https://www.keycdn.com/blog/accelerated-mobile-pages/
88. IN GOOGLE
 SEARCH RESULTS prioritised
89. ANYONE? m.
90. MORE ON AMP https://ampbyexample.com/ https://www.smashingmagazine.com/ 2016/02/everything-about-google- accelerated-mobile-pages/
91. INSTANT ARTICLES
92. DISPLAY YOUR ARTICLES WITHIN FACEBOOK WITH 1/10TH OF THE LOAD TIMES
93. CREATED WITH SECURE RSS FEED, OR VIA API
94. CAN PUBLISH RSS AUTOMATICALLY OR PUSH TO DRAFT FOR MANUAL APPROVAL
96. MORE ON INSTANT ARTICLES https://instantarticles.fb.com/ https://developers.facebook.com/docs/instant- articles/api
97. optimising YOUR WEBSITE FOR THE FUTURE
98. THE FUTURE IS 2016
99. THE FUTURE IS NOW
100. THANKS! @andismith andismith.com http://bit.ly/1Tn6T6L