A presentation at TECH.insight Venice in in Venice, Metropolitan City of Venice, Italy by Andrew Smith
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/
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.
< link
"/assets/css/vendors/bootstrap.css"
"stylesheet" />
< link
"/assets/css/main.css"
"stylesheet" />
<!-- endbuild -->HTML SETUP
< script
"/assets/js/vendors/jquery.js"
< /script
< script
"/assets/js/vendors/picturefill.js"
< / script
< script
"/assets/js/main.js"
<!-- endbuild -->< /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' ,
'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
deshxfsidhriosdj
< link
"canonical"
"original-url.html" /> IMPLEMENTING AMP < link
"canonical"
"this-page.amp.html" />
deshxfsidhriosdj
"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
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 and AMP.
for free. You
can too.