Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Optimising Your Workflow For Performance
Search
Andi Smith
September 18, 2015
Technology
3
510
Optimising Your Workflow For Performance
GenerateConf 2015
Andi Smith
September 18, 2015
Tweet
Share
More Decks by Andi Smith
See All by Andi Smith
Optimising Your Website For the Future
andismith
1
110
Other Decks in Technology
See All in Technology
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
TLSから見るSREの未来
atpons
2
310
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
本当にわかりやすいAIエージェント入門
segavvy
1
340
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Become a Pro
speakerdeck
PRO
29
5.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Building Flexible Design Systems
yeseniaperezcruz
328
39k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
optimising YOUR WORKFLOW FOR PERFORMANCE GENERATE LONDON
ANDI SMITH @andismith andismith.com DIRECTOR OF WEB DEVELOPMENT AT AKQA
None
techinsight.io
that’s me!
None
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 10s 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/
GOOGLE 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
None
TESTING PAGE SPEED Page Speed Insights https://developers.google.com/speed/ pagespeed/insights/
None
WHY THE WAIT?LATENCY PAGE SIZE CONNECTION SPEED TOO MANY REQUESTS
BLOCKING SCRIPTS
None
optimising YOUR WEBSITE FOR PERFORMANCE Image Credit: https://www.flickr.com/photos/noddymini/17368814772
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 src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 640px)
90vw, 100vw" alt="My lovely horse"> USE IMG WITH SRCSET & SIZES
ART DIRECTION
<picture> <source media="(min-width: 640px)" srcset="large.jpg 1x, large-hd.jpg 2x"> <source srcset="small.jpg
1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt="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 concatenate 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', '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
None
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 YOUR HTTP/2 WEBSITE FOR PERFORMANCE Image Credit: https://www.flickr.com/photos/noddymini/17368814772
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