SlideShare une entreprise Scribd logo

Better Performance === Greater Accessibility [Inclusive Design 24 2018]

•
•
Aaron Gustafson
Aaron Gustafson

Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.

Technologie
1  sur  146
Télécharger pour lire hors ligne
Better performance
 === greater accessibility Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
/dəˈzīn/
JEFF VEEN “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration— likely because so much bad design
 simply is decoration. Good design isn’t.
 Good design is problem solving.”
/ˈfrikSH(ə)n/
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Hallmarks of Good UX ๏ Streamlined flow ๏ Clear, concise copy ๏ Low cognitive load ๏ Fast performance 5
Poor performance
 is friction
Source: eMarketer
A 1s delay in page
 load can reduce
 conversions by 7% Source: Kissmetrics
For an online shop earning $100k/day, that’s about $2.5m in lost sales Source: Kissmetrics
For Amazon, 1s is worth
 about $1.6b in sales Source: HubSpot
Source: eMarketer
53% abandon
 websites that take
 more than 3s to load Source: Google
By shaving 7s off load, Edmunds increased
 page views by 17%
 & ad revenue by 3% Source: HubSpot
Mozilla reduced page load by 2.2s and saw a 15.4% increase in downloads Source: HubSpot
Performance
 matters
PERFORMANCE AS USER EXPERIENCE @AaronGustafson What we were looking for ๏ Usable pages are delivered in 10kB or less ๏ Pages are accessible via screen readers, the keyboard, etc. ๏ Entries follow the philosophy of progressive enhancement ๏ Users can do what they need to without JavaScript 18
/dôɡˈfo͞odiNG/
Let’s talk (briefly)
 about page load
time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 DNS Lookup  Icons by Mahmure Alp
time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 TCP Handshake Hello 40.77.56.174 Howdy!  Icons by Mahmure Alp
time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 Request Hello 40.77.56.174 Howdy! I’d like /index.html  Icons by Mahmure Alp
time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 Server Processing Hello 40.77.56.174 Howdy! I’d like /index.html  Icons by Mahmure Alp
time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 Response Hello 40.77.56.174 Howdy! I’d like /index.html Ok, here it is.  Icons by Mahmure Alp
 Icons by Mahmure Alp
 Icons by Mahmure Alp Response Load Paint Layout RenderTree CSS DOM CSS & JavaScript can delay rendering or cause these to be run again
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> wait while the browser
 fetches & parses the script
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> wait while the browser
 fetches & parses the CSS
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> kicks off downloading
 the image
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> wait while the browser
 fetches & parses the script
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Steps for better performance 1. Use native features whenever possible 2. Only include assets you actually need 3. Optimize everything 4. Think about when you load assets 5. Consider how you load assets 6. Only load assets when they add value 43
Step 1:
 Use native features
 whenever possible
(they’re effectively free)
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo <header> Header content… </header> not only shorter than
 <div id=“header">, but
 semantic too depending on its location
in the document, could also
provide a landmark
for navigation
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo <input id="n" name="n" required aria-required="true" autocorrect="off"
 autocapitalize="words" placeholder="Sir Tim Berners Lee" autocomplete="name" > modern browsers require
 users to enter content browser can inform
 assistive tech that
 the field is required don’t let the browser
try to correct
someone’s name auto-disappearing suggestion
without JavaScript if the browser already
 knows the user’s name,
 by all means, let it fill it in
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo <input type="email"
 id="e" name="e"
 required aria-required="true"
 autocorrect="off"
 autocapitalize="off"
 autocomplete="email"
 placeholder="you@yourdomain.tld"
 > modern browsers validate
 the email address
 and may supply a
 custom keyboard layout let the browser suggest
 an email address if it has one
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo @media (min-width:600px) {
 .gridded { display: grid; grid-template-columns: 1fr 300px; grid-gap: 20px; }
 } So much better than floats
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo var $radios = document.querySelectorAll( 'input[type=radio]' ); CSS selector-based
 DOM traversal
 without a JS library
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo font-family: Georgia, Times,
 "Times New Roman", serif font-family: "Segoe UI", Frutiger,
 "Frutiger Linotype",
 "Dejavu Sans", "Helvetica Neue",
 Arial, sans-serif; Serif Sans Serif
If you need
 a custom font:
 subset, subset, subset
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Proceed with caution Source: Bran Stein
Step 2:
 Only include assets
 you actually need
Great tools, possibly overkill
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Every tool has a cost Framework Size (Compressed) Bootstrap 2 149 kB Bootstrap 3 103 kB Angular 1.4 51 kB Ember 2.2.0 111 kB Foundation 4 266 kB jQuery 32 kB UI Kit 86 kB React 16 + React DOM 35 kB Vue 2.4.2 20 kB
Chances are, your
 library of choice
 is on a CDN
time Your Device The Web Where can I find cdn.foo.com? It’s at 123.45.67.89  Icons by Mahmure Alp You can optimize this
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Find the server early <link rel="dns-prefetch"
 href="https://cdn.foo.com"> Drop this in the
 head of your pages
time Your Device The Web Where can I find cdn.foo.com? It’s at 123.45.67.89 Hello 123.45.67.89 Howdy!  Icons by Mahmure Alp You can optimize this
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Go for the handshake <link rel="preconnect"
 href="https://cdn.foo.com">
time Your Device The Web I’d like /jquery.min.js Ok, here it is.  Icons by Mahmure Alp You can even optimize this
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Grab that resource <link rel="preload"
 href="https://cdn.foo.com/jquery.min.js"
 as="script"> Helps optimize the process
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Download isn’t everything Source: The Filament Group
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Download isn’t everything Framework Method/function operations/s Vanilla JS document.getElementById() 12,137,211 Dojo dojo.byId(); 5,443,343 Prototype $() 2,940,734 Ext JS Ext.get() 997,562 jQuery $() 350,557 YUI YAHOO.util.Dom.get() 326,534 MooTools document.id() 78,802 Source: VanillaJS
100% library free
PERFORMANCE AS USER EXPERIENCE @AaronGustafson We used some hints though <link rel="preconnect"
 href="//10kapart.blob.core.windows.net"> <link rel="preconnect"
 href="//cdnjs.cloudflare.com"> <link rel="preconnect"
 href="//www.google-analytics.com">
Step 3:
 Optimize everything
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Our approach to CSS (Gulp) 1. Write modular CSS in Sass (+ Breakup for MQ management) 2. Compile CSS with a precision of 4 decimal places (gulp-sass) 3. Fallbacks for the last 2 browser versions (gulp-autoprefixer) 4. CSS shorthand declarations if possible (gulp-shorthand) 5. Remove any unused declarations/rule sets (gulp-uncss) 6. Optimize the files (gulp-csso) 7. Minify (gulp-clean-css) 8. Gzip (gulp-zopfli) 9. Brotli (gulp-brotli) 71
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Before
PERFORMANCE AS USER EXPERIENCE @AaronGustafson After everyone else
 8 kB browsers that support
 brotli compression
 2 kB browsers that support
gzip compression
3 kB
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Our approach to JS (Gulp) 1. Write modular JavaScript, grouped as appropriate 2. Combine files based on folder structure (gulp-folders, gulp-concat) 3. Create an wrapping closure to isolate from other JS (gulp-insert) 4. Minify (gulp-uglify) 5. Gzip (gulp-zopfli) 6. Brotli (gulp-brotli) 74
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Results about 8 kB all-up 4 kB 1 kB 2 kB
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Interesting side note indexes last indexes first
We also minified
 & pre-compressed
 our HTML
Step 4:
 Think about when
 you load assets
PERFORMANCE AS USER EXPERIENCE @AaronGustafson We had 10 JS files ๏ Global ‣ main.js - the site’s library ‣ serviceworker.js - The site’s service worker ๏ Browser-specific ‣ html5shiv.js - local copy of the HTML5 Shiv for < IE9 79
PERFORMANCE AS USER EXPERIENCE @AaronGustafson We had 10 JS files ๏ Page-specific ‣ enter.js - Entry form-related code ‣ form-saver.js - Used to save form entries locally until submitted ‣ hero.js - Runs the SVG animation on the homepage ‣ home.js - Handles homepage-specific tasks ‣ project.js - Used on project pages during voting ‣ update.js - Handles the winner update form 80
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Per the common wisdom <script src="/j/main.min.js"></script>
 </body>
 </html>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson No need to run immediately <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js"
 defer
 ></script>
 </body>
 </html> run after the DOM is loaded
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Run whenever you can <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js"
 async
 ></script>
 </body>
 </html> run whenever it becomes
 available, but don’t
 delay page load
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Consider dependencies <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js" async></script>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Consider dependencies <script src="/j/main.min.js" async></script>
 <script src="/j/home.min.js" async></script> what if this calls a function
 in main.min.js?
“race condition”
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Avoid race conditions <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js" async></script>
Why so many
 separate files?
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Connections in HTTP/1.1 Browser Per host Overall IE 9 6 35 IE 10 8 17 IE 11 13 17 Firefox 4+ 6 17 Opera 11+ 6 user defined Chrome 4+ 6 10 Safari 7+ 6 17
time Your Device The Web HTTP/1.1  Icons by Mahmure Alp I’d like /c/main.css I’d like /j/main.min.js I’d like /i/o.svg I’d like /j/home.min.js I’d like /i/edge.svg I’d like /i/aea.svg
HTTP/2 creates
 a single connection and contents stream in
time Your Device The Web HTTP/2  Icons by Mahmure Alp I’d like /c/main.css I’d like /i/o.svg I’d like /i/edge.svg
Source: A List Apart
Source: A List Apart
Step 5:
 Consider how
 you load assets
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Start simple <link rel="stylesheet" href="/c/d.min.css"> <link rel="stylesheet" href="/c/a.min.css"
 media="only screen"> default styles
(all browsers) advanced styles
 (modern browsers)
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Fault tolerance FTW! <link rel="stylesheet" href="/c/d.min.css"> <link rel="stylesheet" href="/c/a.min.css"
 media="only screen"> browsers that don’t grok
 media queries ignore this file
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional scripting <!--[if lt IE 9]> <script src="/j/html5shiv.min.js"></script> <![endif]--> delivers this script
 to <= IE 8
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional scripting <!--[if gt IE 8]><!-->
 <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js" async
 ></script>
 <!--<![endif]-->
 </body>
 </html> hides scripts from <= IE8
(no need to test!)
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional imagery
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional images @media (min-width: 36.375em) { .presented-by [href*=microsoft]::before { background-image: url(/i/c/edge.png); background-image: url(/i/c/edge.svg),
 none;
 … } }
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional images @media (min-width: 36.375em) { .presented-by [href*=microsoft]::before { background-image: url(/i/c/edge.png); background-image: url(/i/c/edge.svg),
 none;
 … } }
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional images @media (min-width: 36.375em) { .presented-by [href*=microsoft]::before { background-image: url(/i/c/edge.png); background-image: url(/i/c/edge.svg),
 none;
 … } } browsers that support
multiple backgrounds
also support SVG
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional animation
PERFORMANCE AS USER EXPERIENCE @AaronGustafson How do we get there? JS? No No imageLoad Yes <> SVG support? Yes SVG Ajax request SVG
 Yank out script & add to document No picture Save the markup for
 next page load NoYes Verify browser width condition
Step 6:
 Only load assets when they add value
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Evaluate images case-by-case ๏ Does the image reiterate information found in the surrounding text? ๏ Is the image necessary to understand the surrounding content? ๏ Does the image contain text? ๏ Is the image a graph, chart, or table? ๏ Could the content of the image be presented in a different format that would not require an image? ๏ Is the image purely presentational? 111
PERFORMANCE AS USER EXPERIENCE @AaronGustafson 53% of the average web page Source: Internet Archive
PERFORMANCE AS USER EXPERIENCE @AaronGustafson And they don’t always fit
Source: The Outline
If you can avoid
 using an image, do it
If you need an image, choose the best format
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Quick format recap ๏ GIF ‣ for images with large swaths of solid colors ‣ Binary transparency ๏ JPG ‣ For photographs and images with gradations of color ‣ Can be compressed (introduces artifacts) 117
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Quick format recap ๏ PNG (8-Bit) ‣ Alternative to GIF ‣ Can support alpha transparency (with the right creation software) ๏ PNG (24-bit) ‣ Alternative to JPG ‣ Usually larger than JPGs ‣ Supports alpha tranparency 118
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Quick format recap ๏ WebP ‣ Newer format, not universally supported ‣ Smaller than JPGs and 24-bit PNGs ‣ Support alpha transparency ‣ and so much more… 119
Sometimes images
 are “nice to have”
that’s 29 kB of images
PERFORMANCE AS USER EXPERIENCE @AaronGustafson How it works <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 > <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li> image path no alt necessary prepend to
 this list item
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync var $watcher = document.createElement('div'), re = /['"]/g; $watcher.setAttribute( 'id', 'getActiveMQ-watcher' ); $watcher.style.display = 'none'; document.body.appendChild( $watcher ); window.getActiveMQ = function() { return window.getComputedStyle( $watcher, null ) .getPropertyValue( 'font-family' ) .replace( re, '' ); };
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync #getActiveMQ-watcher { font-family: global; } @media (min-width: 15em) { #getActiveMQ-watcher { font-family: tiny; } } @media (min-width: 20em) { #getActiveMQ-watcher { font-family: small; } } @media (min-width: 30em) { #getActiveMQ-watcher { font-family: medium; } } @media (min-width: 40em) { #getActiveMQ-watcher { font-family: large; } } @media (min-width: 48.75em) { #getActiveMQ-watcher { font-family: larger; } } @media (min-width: 60em) { #getActiveMQ-watcher { font-family: full; } }
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync var $watcher = document.createElement('div'), re = /['"]/g; $watcher.setAttribute( 'id', 'getActiveMQ-watcher' ); $watcher.style.display = 'none'; document.body.appendChild( $watcher ); window.getActiveMQ = function() { return window.getComputedStyle( $watcher, null ) .getPropertyValue( 'font-family' ) .replace( re, '' ); };
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync var MQ = getActiveMQ(); if ( MQ == 'larger' || MQ == 'full' ) { lazyLoadImages(); }
PERFORMANCE AS USER EXPERIENCE @AaronGustafson How it works <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 > <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Result! <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 data-imaged="true"
 >
 <img src="/i/j/r.jpg" alt="">
 <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li>
Oh wait… optimize everything
Source: 38 kB JPG
B&W: 35 kB JPG (-7%)
Crop & Resize: 12 kB JPG (-68%)
Blur & optimize: 9 kB JPG (-76%)
blurred everything
 but their faces
WebP: 4 kB (-89%)JPG: 9 kB (-76%)
!
 Not every browser
 supports WebP
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Indicating alternate formats <picture> <source type="image/webp" srcset="my.webp">
 <img src="my.jpg" alt="Alt text goes here"> </picture> first choice if
WebP is supported fallback image
 if it isn’t
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Indicating alternate formats <picture> <source type="image/svg+xml"
 srcset="my.svg"> <source type="image/webp" srcset="my.webp">
 <img src="my.jpg" alt="Alt text goes here"> </picture>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Indicating alternate formats <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 data-imaged="true"
 >
 <picture>
 <source type="image/webp"
 srcset="/i/j/r.webp">
 <img src="/i/j/r.jpg" alt="">
 </picture> <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li>
PERFORMANCE AS USER EXPERIENCE @AaronGustafson Steps for better performance 1. Use native features whenever possible 2. Only include assets you actually need 3. Optimize everything 4. Think about when you load assets 5. Consider how you load assets 6. Only load assets when they add value 146
Every choice we
 make affects our
 users’ experiences
Let’s spend our time to
 save it for our users
Speedy performance
 increases accessibility
 for everyone
Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

Recommandé

Using Wordpress 2009 04 29
Using Wordpress 2009 04 29Using Wordpress 2009 04 29
Using Wordpress 2009 04 29Matthew Baya
 
How to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-BooksHow to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-Booksbisg
 
The website business! agr 399
The website business! agr 399The website business! agr 399
The website business! agr 399summerdaze
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
SEO is a Hoax
SEO is a HoaxSEO is a Hoax
SEO is a HoaxBrice McBeth
 
Design Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster WebsitesDesign Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster WebsitesJonathan Klein
 
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Aaron Gustafson
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy DesignRich Quick
 

Recommandé

Using Wordpress 2009 04 29
Using Wordpress 2009 04 29Using Wordpress 2009 04 29
Using Wordpress 2009 04 29Matthew Baya
 
How to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-BooksHow to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-Booksbisg
 
The website business! agr 399
The website business! agr 399The website business! agr 399
The website business! agr 399summerdaze
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
SEO is a Hoax
SEO is a HoaxSEO is a Hoax
SEO is a HoaxBrice McBeth
 
Design Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster WebsitesDesign Camp Boston - Designing Faster Websites
Design Camp Boston - Designing Faster WebsitesJonathan Klein
 
Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Aaron Gustafson
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy DesignRich Quick
 
SEO Is A Hoax
SEO Is A HoaxSEO Is A Hoax
SEO Is A HoaxBrice McBeth
 
Meetup acessability-seo
Meetup acessability-seoMeetup acessability-seo
Meetup acessability-seoblankiscoloroble
 
BD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningBD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningPeter McLachlan
 
Getting started-with-seo-web-gnomes
Getting started-with-seo-web-gnomesGetting started-with-seo-web-gnomes
Getting started-with-seo-web-gnomestechgreen solution
 
10 Website Landing Page Must-Have Elements
10 Website Landing Page Must-Have Elements10 Website Landing Page Must-Have Elements
10 Website Landing Page Must-Have ElementsKaren Cioffi-Ventrice
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaEmily Karungi
 
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016Peter Mead
 
OMG! Your Website Is Ugly
OMG! Your Website Is UglyOMG! Your Website Is Ugly
OMG! Your Website Is UglyThe URL Dr.
 
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks
 
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...Best Practices for Drupal Search Engine Optimization and Driving Site Convers...
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...Bryan House
 
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Aaron Gustafson
 
To tryin stay as better.pt.1.blu.http
To tryin stay as better.pt.1.blu.httpTo tryin stay as better.pt.1.blu.http
To tryin stay as better.pt.1.blu.httpmuradwysingermc51
 
Internet Marketing Explained - Internet Marketing Academy Australia
Internet Marketing Explained - Internet Marketing Academy AustraliaInternet Marketing Explained - Internet Marketing Academy Australia
Internet Marketing Explained - Internet Marketing Academy AustraliaLucio Ribeiro
 
Internet Marketing Strategy With Chris Jaeger
Internet Marketing Strategy With Chris JaegerInternet Marketing Strategy With Chris Jaeger
Internet Marketing Strategy With Chris JaegerChris Jaeger
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Modelling Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUxModelling Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUxHaribabu Nandyal Padmanaban
 
Responsive Responsive Design
Responsive Responsive DesignResponsive Responsive Design
Responsive Responsive DesignTim Kadlec
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsdayFrancesco Fullone
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012Bastian Grimm
 

Contenu connexe

Tendances

BD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningBD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningPeter McLachlan
 
Getting started-with-seo-web-gnomes
Getting started-with-seo-web-gnomesGetting started-with-seo-web-gnomes
Getting started-with-seo-web-gnomestechgreen solution
 
10 Website Landing Page Must-Have Elements
10 Website Landing Page Must-Have Elements10 Website Landing Page Must-Have Elements
10 Website Landing Page Must-Have ElementsKaren Cioffi-Ventrice
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaEmily Karungi
 
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016Peter Mead
 
OMG! Your Website Is Ugly
OMG! Your Website Is UglyOMG! Your Website Is Ugly
OMG! Your Website Is UglyThe URL Dr.
 
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks
 
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...Best Practices for Drupal Search Engine Optimization and Driving Site Convers...
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...Bryan House
 
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Aaron Gustafson
 
To tryin stay as better.pt.1.blu.http
To tryin stay as better.pt.1.blu.httpTo tryin stay as better.pt.1.blu.http
To tryin stay as better.pt.1.blu.httpmuradwysingermc51
 
Internet Marketing Explained - Internet Marketing Academy Australia
Internet Marketing Explained - Internet Marketing Academy AustraliaInternet Marketing Explained - Internet Marketing Academy Australia
Internet Marketing Explained - Internet Marketing Academy AustraliaLucio Ribeiro
 
Internet Marketing Strategy With Chris Jaeger
Internet Marketing Strategy With Chris JaegerInternet Marketing Strategy With Chris Jaeger
Internet Marketing Strategy With Chris JaegerChris Jaeger
 

Tendances (14)

SEO Is A Hoax
SEO Is A HoaxSEO Is A Hoax
SEO Is A Hoax
 
Meetup acessability-seo
Meetup acessability-seoMeetup acessability-seo
Meetup acessability-seo
 
BD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningBD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginning
 
Getting started-with-seo-web-gnomes
Getting started-with-seo-web-gnomesGetting started-with-seo-web-gnomes
Getting started-with-seo-web-gnomes
 
10 Website Landing Page Must-Have Elements
10 Website Landing Page Must-Have Elements10 Website Landing Page Must-Have Elements
10 Website Landing Page Must-Have Elements
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukama
 
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016
Paid Traffic with WordPress PPC Hacks - by Peter Mead for BigDigital 2016
 
OMG! Your Website Is Ugly
OMG! Your Website Is UglyOMG! Your Website Is Ugly
OMG! Your Website Is Ugly
 
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...
 
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...Best Practices for Drupal Search Engine Optimization and Driving Site Convers...
Best Practices for Drupal Search Engine Optimization and Driving Site Convers...
 
Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]Beyond Responsive Workshop [Beyond Tellerrand 2014]
Beyond Responsive Workshop [Beyond Tellerrand 2014]
 
To tryin stay as better.pt.1.blu.http
To tryin stay as better.pt.1.blu.httpTo tryin stay as better.pt.1.blu.http
To tryin stay as better.pt.1.blu.http
 
Internet Marketing Explained - Internet Marketing Academy Australia
Internet Marketing Explained - Internet Marketing Academy AustraliaInternet Marketing Explained - Internet Marketing Academy Australia
Internet Marketing Explained - Internet Marketing Academy Australia
 
Internet Marketing Strategy With Chris Jaeger
Internet Marketing Strategy With Chris JaegerInternet Marketing Strategy With Chris Jaeger
Internet Marketing Strategy With Chris Jaeger
 

Similaire à Better Performance === Greater Accessibility [Inclusive Design 24 2018]

Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Responsive Responsive Design
Responsive Responsive DesignResponsive Responsive Design
Responsive Responsive DesignTim Kadlec
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012Bastian Grimm
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...John McCaffrey
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuningJohn McCaffrey
 
Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Katie Sylor-Miller
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)Eran Zinman
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performancedapulse
 
Whatever happened to Progressive Enhancement?
Whatever happened to Progressive Enhancement?Whatever happened to Progressive Enhancement?
Whatever happened to Progressive Enhancement?Cole Henley
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićMeetMagentoNY2014
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best PracticesHolger Bartel
 
Clean separation
Clean separationClean separation
Clean separationatorreno
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering PathRaphael Amorim
 

Similaire à Better Performance === Greater Accessibility [Inclusive Design 24 2018] (20)

Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Modelling Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUxModelling Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
Responsive Responsive Design
Responsive Responsive DesignResponsive Responsive Design
Responsive Responsive Design
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 
Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performance
 
Whatever happened to Progressive Enhancement?
Whatever happened to Progressive Enhancement?Whatever happened to Progressive Enhancement?
Whatever happened to Progressive Enhancement?
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
Clean separation
Clean separationClean separation
Clean separation
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
Microformats
MicroformatsMicroformats
Microformats
 

Plus de Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]Aaron Gustafson
 
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Aaron Gustafson
 
Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Aaron Gustafson
 
The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]Aaron Gustafson
 

Plus de Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]Progressive Web Apps and the Windows Ecosystem [Build 2017]
Progressive Web Apps and the Windows Ecosystem [Build 2017]
 
Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]Writing for Engagement [TechReady 22]
Writing for Engagement [TechReady 22]
 
Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]Designing the Conversation [SmashingConf 2016]
Designing the Conversation [SmashingConf 2016]
 
The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]The Features of Highly Effective Forms [SmashingConf NYC 2016]
The Features of Highly Effective Forms [SmashingConf NYC 2016]
 

Dernier

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 

Dernier (20)

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 

Better Performance === Greater Accessibility [Inclusive Design 24 2018]

  • 1. Better performance
 === greater accessibility Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  • 3. JEFF VEEN “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration— likely because so much bad design
 simply is decoration. Good design isn’t.
 Good design is problem solving.”
  • 5. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Hallmarks of Good UX ๏ Streamlined flow ๏ Clear, concise copy ๏ Low cognitive load ๏ Fast performance 5
  • 6.
  • 9. A 1s delay in page
 load can reduce
 conversions by 7% Source: Kissmetrics
  • 10. For an online shop earning $100k/day, that’s about $2.5m in lost sales Source: Kissmetrics
  • 11. For Amazon, 1s is worth
 about $1.6b in sales Source: HubSpot
  • 13. 53% abandon
 websites that take
 more than 3s to load Source: Google
  • 14. By shaving 7s off load, Edmunds increased
 page views by 17%
 & ad revenue by 3% Source: HubSpot
  • 15. Mozilla reduced page load by 2.2s and saw a 15.4% increase in downloads Source: HubSpot
  • 17.
  • 18. PERFORMANCE AS USER EXPERIENCE @AaronGustafson What we were looking for ๏ Usable pages are delivered in 10kB or less ๏ Pages are accessible via screen readers, the keyboard, etc. ๏ Entries follow the philosophy of progressive enhancement ๏ Users can do what they need to without JavaScript 18
  • 21. time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 DNS Lookup  Icons by Mahmure Alp
  • 22. time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 TCP Handshake Hello 40.77.56.174 Howdy!  Icons by Mahmure Alp
  • 23. time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 Request Hello 40.77.56.174 Howdy! I’d like /index.html  Icons by Mahmure Alp
  • 24. time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 Server Processing Hello 40.77.56.174 Howdy! I’d like /index.html  Icons by Mahmure Alp
  • 25. time Your Device The Web Where can I find a-k-apart.com? It’s at 40.77.56.174 Response Hello 40.77.56.174 Howdy! I’d like /index.html Ok, here it is.  Icons by Mahmure Alp
  • 27.  Icons by Mahmure Alp Response Load Paint Layout RenderTree CSS DOM CSS & JavaScript can delay rendering or cause these to be run again
  • 28. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 29. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 30. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 31. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 32. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 33. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> wait while the browser
 fetches & parses the script
  • 34. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 35. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> wait while the browser
 fetches & parses the CSS
  • 36. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 37. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 38. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 39. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 40. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 41. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> kicks off downloading
 the image
  • 42. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 43. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html> wait while the browser
 fetches & parses the script
  • 44. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 45. PERFORMANCE AS USER EXPERIENCE @AaronGustafson DOM Parsing <html> <head> <title>Silly example</title> <script src="head.js"></script> <link rel="stylesheet" href="main.css"> <style>h2 { font-weight: bold; }</style> <script>console.log('hi');</script> </head> <body> <img src="my.png" alt=""> <script src="body.js"></script> </body> </html>
  • 46. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Steps for better performance 1. Use native features whenever possible 2. Only include assets you actually need 3. Optimize everything 4. Think about when you load assets 5. Consider how you load assets 6. Only load assets when they add value 43
  • 47. Step 1:
 Use native features
 whenever possible
  • 49. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo <header> Header content… </header> not only shorter than
 <div id=“header">, but
 semantic too depending on its location
in the document, could also
provide a landmark
for navigation
  • 50. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo <input id="n" name="n" required aria-required="true" autocorrect="off"
 autocapitalize="words" placeholder="Sir Tim Berners Lee" autocomplete="name" > modern browsers require
 users to enter content browser can inform
 assistive tech that
 the field is required don’t let the browser
try to correct
someone’s name auto-disappearing suggestion
without JavaScript if the browser already
 knows the user’s name,
 by all means, let it fill it in
  • 51. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo <input type="email"
 id="e" name="e"
 required aria-required="true"
 autocorrect="off"
 autocapitalize="off"
 autocomplete="email"
 placeholder="you@yourdomain.tld"
 > modern browsers validate
 the email address
 and may supply a
 custom keyboard layout let the browser suggest
 an email address if it has one
  • 52. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo @media (min-width:600px) {
 .gridded { display: grid; grid-template-columns: 1fr 300px; grid-gap: 20px; }
 } So much better than floats
  • 53. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo var $radios = document.querySelectorAll( 'input[type=radio]' ); CSS selector-based
 DOM traversal
 without a JS library
  • 54. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Por exemplo font-family: Georgia, Times,
 "Times New Roman", serif font-family: "Segoe UI", Frutiger,
 "Frutiger Linotype",
 "Dejavu Sans", "Helvetica Neue",
 Arial, sans-serif; Serif Sans Serif
  • 55.
  • 56. If you need
 a custom font:
 subset, subset, subset
  • 57. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Proceed with caution Source: Bran Stein
  • 58. Step 2:
 Only include assets
 you actually need
  • 60. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Every tool has a cost Framework Size (Compressed) Bootstrap 2 149 kB Bootstrap 3 103 kB Angular 1.4 51 kB Ember 2.2.0 111 kB Foundation 4 266 kB jQuery 32 kB UI Kit 86 kB React 16 + React DOM 35 kB Vue 2.4.2 20 kB
  • 61. Chances are, your
 library of choice
 is on a CDN
  • 62. time Your Device The Web Where can I find cdn.foo.com? It’s at 123.45.67.89  Icons by Mahmure Alp You can optimize this
  • 63. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Find the server early <link rel="dns-prefetch"
 href="https://cdn.foo.com"> Drop this in the
 head of your pages
  • 64. time Your Device The Web Where can I find cdn.foo.com? It’s at 123.45.67.89 Hello 123.45.67.89 Howdy!  Icons by Mahmure Alp You can optimize this
  • 65. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Go for the handshake <link rel="preconnect"
 href="https://cdn.foo.com">
  • 66. time Your Device The Web I’d like /jquery.min.js Ok, here it is.  Icons by Mahmure Alp You can even optimize this
  • 67. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Grab that resource <link rel="preload"
 href="https://cdn.foo.com/jquery.min.js"
 as="script"> Helps optimize the process
  • 68. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Download isn’t everything Source: The Filament Group
  • 69. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Download isn’t everything Framework Method/function operations/s Vanilla JS document.getElementById() 12,137,211 Dojo dojo.byId(); 5,443,343 Prototype $() 2,940,734 Ext JS Ext.get() 997,562 jQuery $() 350,557 YUI YAHOO.util.Dom.get() 326,534 MooTools document.id() 78,802 Source: VanillaJS
  • 71. PERFORMANCE AS USER EXPERIENCE @AaronGustafson We used some hints though <link rel="preconnect"
 href="//10kapart.blob.core.windows.net"> <link rel="preconnect"
 href="//cdnjs.cloudflare.com"> <link rel="preconnect"
 href="//www.google-analytics.com">
  • 73. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Our approach to CSS (Gulp) 1. Write modular CSS in Sass (+ Breakup for MQ management) 2. Compile CSS with a precision of 4 decimal places (gulp-sass) 3. Fallbacks for the last 2 browser versions (gulp-autoprefixer) 4. CSS shorthand declarations if possible (gulp-shorthand) 5. Remove any unused declarations/rule sets (gulp-uncss) 6. Optimize the files (gulp-csso) 7. Minify (gulp-clean-css) 8. Gzip (gulp-zopfli) 9. Brotli (gulp-brotli) 71
  • 74. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Before
  • 75. PERFORMANCE AS USER EXPERIENCE @AaronGustafson After everyone else
 8 kB browsers that support
 brotli compression
 2 kB browsers that support
gzip compression
3 kB
  • 76. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Our approach to JS (Gulp) 1. Write modular JavaScript, grouped as appropriate 2. Combine files based on folder structure (gulp-folders, gulp-concat) 3. Create an wrapping closure to isolate from other JS (gulp-insert) 4. Minify (gulp-uglify) 5. Gzip (gulp-zopfli) 6. Brotli (gulp-brotli) 74
  • 77. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Results about 8 kB all-up 4 kB 1 kB 2 kB
  • 78. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Interesting side note indexes last indexes first
  • 79. We also minified
 & pre-compressed
 our HTML
  • 80. Step 4:
 Think about when
 you load assets
  • 81. PERFORMANCE AS USER EXPERIENCE @AaronGustafson We had 10 JS files ๏ Global ‣ main.js - the site’s library ‣ serviceworker.js - The site’s service worker ๏ Browser-specific ‣ html5shiv.js - local copy of the HTML5 Shiv for < IE9 79
  • 82. PERFORMANCE AS USER EXPERIENCE @AaronGustafson We had 10 JS files ๏ Page-specific ‣ enter.js - Entry form-related code ‣ form-saver.js - Used to save form entries locally until submitted ‣ hero.js - Runs the SVG animation on the homepage ‣ home.js - Handles homepage-specific tasks ‣ project.js - Used on project pages during voting ‣ update.js - Handles the winner update form 80
  • 83. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Per the common wisdom <script src="/j/main.min.js"></script>
 </body>
 </html>
  • 84. PERFORMANCE AS USER EXPERIENCE @AaronGustafson No need to run immediately <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js"
 defer
 ></script>
 </body>
 </html> run after the DOM is loaded
  • 85. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Run whenever you can <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js"
 async
 ></script>
 </body>
 </html> run whenever it becomes
 available, but don’t
 delay page load
  • 86. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Consider dependencies <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js" async></script>
  • 87. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Consider dependencies <script src="/j/main.min.js" async></script>
 <script src="/j/home.min.js" async></script> what if this calls a function
 in main.min.js?
  • 89. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Avoid race conditions <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js" async></script>
  • 91. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Connections in HTTP/1.1 Browser Per host Overall IE 9 6 35 IE 10 8 17 IE 11 13 17 Firefox 4+ 6 17 Opera 11+ 6 user defined Chrome 4+ 6 10 Safari 7+ 6 17
  • 92. time Your Device The Web HTTP/1.1  Icons by Mahmure Alp I’d like /c/main.css I’d like /j/main.min.js I’d like /i/o.svg I’d like /j/home.min.js I’d like /i/edge.svg I’d like /i/aea.svg
  • 93. HTTP/2 creates
 a single connection and contents stream in
  • 94. time Your Device The Web HTTP/2  Icons by Mahmure Alp I’d like /c/main.css I’d like /i/o.svg I’d like /i/edge.svg
  • 95. Source: A List Apart
  • 96. Source: A List Apart
  • 98. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Start simple <link rel="stylesheet" href="/c/d.min.css"> <link rel="stylesheet" href="/c/a.min.css"
 media="only screen"> default styles
(all browsers) advanced styles
 (modern browsers)
  • 99. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Fault tolerance FTW! <link rel="stylesheet" href="/c/d.min.css"> <link rel="stylesheet" href="/c/a.min.css"
 media="only screen"> browsers that don’t grok
 media queries ignore this file
  • 100. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional scripting <!--[if lt IE 9]> <script src="/j/html5shiv.min.js"></script> <![endif]--> delivers this script
 to <= IE 8
  • 101. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional scripting <!--[if gt IE 8]><!-->
 <script src="/j/main.min.js"></script>
 <script src="/j/home.min.js" async
 ></script>
 <!--<![endif]-->
 </body>
 </html> hides scripts from <= IE8
(no need to test!)
  • 102. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional imagery
  • 103. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional images @media (min-width: 36.375em) { .presented-by [href*=microsoft]::before { background-image: url(/i/c/edge.png); background-image: url(/i/c/edge.svg),
 none;
 … } }
  • 104. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional images @media (min-width: 36.375em) { .presented-by [href*=microsoft]::before { background-image: url(/i/c/edge.png); background-image: url(/i/c/edge.svg),
 none;
 … } }
  • 105. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional images @media (min-width: 36.375em) { .presented-by [href*=microsoft]::before { background-image: url(/i/c/edge.png); background-image: url(/i/c/edge.svg),
 none;
 … } } browsers that support
multiple backgrounds
also support SVG
  • 106. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Conditional animation
  • 107. PERFORMANCE AS USER EXPERIENCE @AaronGustafson How do we get there? JS? No No imageLoad Yes <> SVG support? Yes SVG Ajax request SVG
 Yank out script & add to document No picture Save the markup for
 next page load NoYes Verify browser width condition
  • 108. Step 6:
 Only load assets when they add value
  • 109.
  • 110.
  • 111. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Evaluate images case-by-case ๏ Does the image reiterate information found in the surrounding text? ๏ Is the image necessary to understand the surrounding content? ๏ Does the image contain text? ๏ Is the image a graph, chart, or table? ๏ Could the content of the image be presented in a different format that would not require an image? ๏ Is the image purely presentational? 111
  • 112. PERFORMANCE AS USER EXPERIENCE @AaronGustafson 53% of the average web page Source: Internet Archive
  • 113. PERFORMANCE AS USER EXPERIENCE @AaronGustafson And they don’t always fit
  • 115. If you can avoid
 using an image, do it
  • 116. If you need an image, choose the best format
  • 117. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Quick format recap ๏ GIF ‣ for images with large swaths of solid colors ‣ Binary transparency ๏ JPG ‣ For photographs and images with gradations of color ‣ Can be compressed (introduces artifacts) 117
  • 118. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Quick format recap ๏ PNG (8-Bit) ‣ Alternative to GIF ‣ Can support alpha transparency (with the right creation software) ๏ PNG (24-bit) ‣ Alternative to JPG ‣ Usually larger than JPGs ‣ Supports alpha tranparency 118
  • 119. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Quick format recap ๏ WebP ‣ Newer format, not universally supported ‣ Smaller than JPGs and 24-bit PNGs ‣ Support alpha transparency ‣ and so much more… 119
  • 121. that’s 29 kB of images
  • 122.
  • 123. PERFORMANCE AS USER EXPERIENCE @AaronGustafson How it works <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 > <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li> image path no alt necessary prepend to
 this list item
  • 124. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync var $watcher = document.createElement('div'), re = /['"]/g; $watcher.setAttribute( 'id', 'getActiveMQ-watcher' ); $watcher.style.display = 'none'; document.body.appendChild( $watcher ); window.getActiveMQ = function() { return window.getComputedStyle( $watcher, null ) .getPropertyValue( 'font-family' ) .replace( re, '' ); };
  • 125. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync #getActiveMQ-watcher { font-family: global; } @media (min-width: 15em) { #getActiveMQ-watcher { font-family: tiny; } } @media (min-width: 20em) { #getActiveMQ-watcher { font-family: small; } } @media (min-width: 30em) { #getActiveMQ-watcher { font-family: medium; } } @media (min-width: 40em) { #getActiveMQ-watcher { font-family: large; } } @media (min-width: 48.75em) { #getActiveMQ-watcher { font-family: larger; } } @media (min-width: 60em) { #getActiveMQ-watcher { font-family: full; } }
  • 126. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync var $watcher = document.createElement('div'), re = /['"]/g; $watcher.setAttribute( 'id', 'getActiveMQ-watcher' ); $watcher.style.display = 'none'; document.body.appendChild( $watcher ); window.getActiveMQ = function() { return window.getComputedStyle( $watcher, null ) .getPropertyValue( 'font-family' ) .replace( re, '' ); };
  • 127. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Getting CSS & JS in sync var MQ = getActiveMQ(); if ( MQ == 'larger' || MQ == 'full' ) { lazyLoadImages(); }
  • 128. PERFORMANCE AS USER EXPERIENCE @AaronGustafson How it works <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 > <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li>
  • 129. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Result! <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 data-imaged="true"
 >
 <img src="/i/j/r.jpg" alt="">
 <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li>
  • 131.
  • 133. B&W: 35 kB JPG (-7%)
  • 134. Crop & Resize: 12 kB JPG (-68%)
  • 135. Blur & optimize: 9 kB JPG (-76%)
  • 137. WebP: 4 kB (-89%)JPG: 9 kB (-76%)
  • 139. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Indicating alternate formats <picture> <source type="image/webp" srcset="my.webp">
 <img src="my.jpg" alt="Alt text goes here"> </picture> first choice if
WebP is supported fallback image
 if it isn’t
  • 140. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Indicating alternate formats <picture> <source type="image/svg+xml"
 srcset="my.svg"> <source type="image/webp" srcset="my.webp">
 <img src="my.jpg" alt="Alt text goes here"> </picture>
  • 141. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Indicating alternate formats <li class="gallery__item h-card"
 data-img="/i/j/r.jpg||y"
 data-imaged="true"
 >
 <picture>
 <source type="image/webp"
 srcset="/i/j/r.webp">
 <img src="/i/j/r.jpg" alt="">
 </picture> <a href="https://twitter.com/rachelandrew">
 <b>Rachel Andrew</b>
 </a> </li>
  • 142. PERFORMANCE AS USER EXPERIENCE @AaronGustafson Steps for better performance 1. Use native features whenever possible 2. Only include assets you actually need 3. Optimize everything 4. Think about when you load assets 5. Consider how you load assets 6. Only load assets when they add value 146
  • 143. Every choice we
 make affects our
 users’ experiences
  • 144. Let’s spend our time to
 save it for our users