A presentation at Generate London 2015 in in London, UK by Andrew Smith
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/
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
"small.jpg"
"large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
"(min-width: 640px) 90vw, 100vw"
"My lovely horse"
USE IMG WITH SRCSET & SIZE S
ART DIRECTION
< picture
< source
"(min-width: 640px)"
"large.jpg 1x, large-hd.jpg 2x"
< source
"small.jpg 1x, small-hd.jpg 2x"
< img
"fallback.jpg"
"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
"/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' ,
'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
<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
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
A recent number of talks have shown front end developers the importance of creating high performance web sites. But how do you go from the theory of reducing requests and shrinking file sizes to actually executing this on your clients’ projects?
This talk will take a look at some of the performance techniques that have been recommended by browser evangelists over the past couple of years and show how they can be achieved using the automated task runners Grunt and Gulp.
For each technique we'll recap why it is important to our page load before diving in to the Grunt and Gulp tasks that can help us to achieve this, as well as taking a look at the code used to configure each task to build the optimal website.
for free. You
can too.