Aaron Gustafson bring a lot of experience to the table when he speaks, and today he spoke about performance and its affect on the user experience of a site. He spent more time showing us how to correct it than persuading us that performance is an issue… because we’ve all been on the internet, so we know it’s an issue.
The presentation is based on the An Event Apart 10k Apart contest in 2016. It’s worth checking out the site to get some context for some of the topics in the notes.
Now it’s time for @AaronGustafson on Performance as User Experience
First, a frame of reference: there will be code. There will be technical stuff and maybe some acronyms. Ultimately this talk is about design#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
“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” – Jeff Veen#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Our job is to reduce fiction to help users do what they came to do with as little pain and annoyance as possible. Streamlined flow, clear concise copy, low cognitive load, fast performance #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
It once took >30 minutes to download a page from Apple over hotel wifi.
Poor performance is friction.
Speed is the 2nd most important attribute of a website, right behind easy navigation, ahead of reliability.
They’d rather it be fast than work all the time. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
At Amazon 1s in time is worth about $1.6 billion. Reducing page load time increases the bottom line directly #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
In 2011 AEA asked people to build responsive sites in 10kB of space. The contest was skewing people toward JS apps.
In 2016 they looked for usable, accessible, progressive enhancement-enabled pages, and without javascript. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
The contest site decided to follow the same rules. So here’s a quick overview of how page load works.
1. You enter an address, and a request is made to find out where the site is. (DNS lookup.) It might be cached somewhere for you.
2. You get the address back. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
3. The browser greets the server
4. The server answers
5. The browser makes the request for the page
6. The server sends back the files. This could take a while if there was heavy work to do on the server. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Now that the page has arrived, the browser has to work.
– Assemble the DOM
– Parse the CSS
– Build a render tree
– Layout
– Paint
And now it’s fully loaded..CSS and JS can cause pages to rerender or significantly slow or rerun parts of this. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
If there’s a JS in the head, we wait until that loads. If there’s CSS, we download that and wait for that. If there are images, we add them to an image-loading queue. If there’s another script, grab that and block. Then finally parse everything.#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Use native features whenever possible!
Only include assets you actually need
Optimize everything you can think to optimize
Think about when and how you load assets
Only load assets when they have value #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Native browser features are effectively free.
<Header> is shorter than <div id=“header”> and it provides accessibility. And it’s free.
Aria roles are free. Placeholder attributes are free. Autocorrect settings are free. Autocomplete is free. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Input types that automatically pick up things like validation (such as email addresses) are all free.
Similarly, modern approaches to layout are far more code-efficient Like grid.
Modern javascript can allow you to drop libraries like jQuery #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Use system fonts whenever you can. Provide font stacks that are pretty good and the fallbacks are close. System fonts are effectively free because the system doesn’t need to download it. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
If you do download a custom font, use subsets (but proceed with caution)#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Every tool has a cost. You don’t need every library that’s invented for Javascript. You can end up with 3.5 MB of Javascript.
Chances are your library of choice is on a CDN, which can speed things up a little bit (hopefully)#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
CDNs can cause overhead in the network connection realm. The more CDN shards you have, the more connection overhead you have. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Going 100% library free (except for an SVG modernizr lookup) made a much smaller js file.#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Optimizing CSS:
Gulp is one of many tools that can help optimize CSS.
Write modular CSS in SASS (+ Breakup for MQ management)
Compile cSS wth a precision of 4 decimal places
Inject fallbacks for last 2 browser versions
CSS shorthand properties whenever possible#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Remove unused CSS
Optimize the files
Minify the CSS
GZip the CSS
Turn it into Brotli as wellEnd result: 40+ files become 5 files (plus compressed ones) that can be delivered. 2k/3k/8k depending on what your browser could handle for compression#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Doing something similar for JS led to 2k/4K/8k. Precompressing gave the server one less thing to do.
Aside: there’s lots of ways to configure build tools. Use an underscore to move something to the beginning of the alpha list and omega to send it to the end #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
You can also minify and precompress HTML. #AEADC
4. Think about *when* you load assets.
Per the common wisdom, put scripts at the bottom of the page. If you don’t need it immediately (no DOM manipulations that cause a repaint) tell the browser to “defer” the JS.#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Be careful – if one script relies on another script, you could get into a race condition, and that’s bad. Set async and defer on files other than the main JS file. Otherwise, errors! #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Why do you have so many files in the first place? Because there’s a limit of how many connections you can have per host. Spread them across 3 servers and they can load faster. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
HTTP/2 allows connections to stream in so you can get many things in at once – no longer a waterfall of resources loading one after another.
HTTP/2 can be a *lot* fasterhttps://t.co/cK1E2SaI5J#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
5. Consider *how* you load your assets
Start simple.
Load the minimum file, then load the advanced file (with layout and media queries etc.) with a media query of “only screen”.
That stopped older browsers that don’t understand media queries from loading it at all #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Because if someone’s on IE8 they probably *need* a more performant experience on their old computer, and even if it’s not the ideal experience, it gives them some experience #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Conditional scripting / conditional comments – they’re no longer supported from IE 10 up, so these only affect IE 9 and lower. Great for handling old browsers. Selectively deliver javascript shims to older browsers #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Can use the same thing in reverse to keep older browsers from getting certain assets.
<!— [ if got IE 8]><!—>
Stuff that IE 9 and up can run and nobody else can
<!—<![endif]—>#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Conditional imagery! Use media queries to bring in background images on screens over a certain size. Supply a PNG, and *then* supply the SVG with multiple backgrounds, so that the SVG will load to those browsers that understand it. (More detail in the slides.) #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
@AaronGustafson‘s workflow If JS or small screen, don’t load image
If it’s a larger screen, test for SVG support.
If no SVG, load a picture element
If there is SVG, make an AJAX request for the SVG, yank out script and add it to the document
Save markup for the next view#aeadc— Anne Gibson (@perpendicularme) July 31, 2018
Only add assets when they actually add value to a page. Images can be very useful to draw attention. They become less useful when valueis low.
Does the image reiterate information?
Is it necessary for understanding?
Does it contain text?
Can it be presented differently?#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
Images make up 53% of the average webpage and they don’t always play nicely with our responsive and mobile layouts.
*Not every article needs a picture.*#AEADC— Anne Gibson (@perpendicularme) July 31, 2018
if you do need to use an image, choose the best format for it. @Una has a fantastic talk about image formats you should try to find. #AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Some images *are* nice to have. But the baseline experience might not need them.
[We have entered into code world]
You can get CSS and Javascript in sync with some code and styles. #AEADC— Anne Gibson (@perpendicularme) July 31, 2018
You can blur everything except users’ faces (lightly) to make images smaller. #AEADC With that and some optimization you can take out as much as 76% of the size of the file
— Anne Gibson (@perpendicularme) July 31, 2018
Use native features as much as possible.
Only include assets you need.
Optimize everything.
Think about how and when you load assets.
Only load assets that actually add value.Every choice we make affects our users’ experience#AEADC
— Anne Gibson (@perpendicularme) July 31, 2018
Make every resource fight for its place on our site. There are trade-offs between design and performance.
Spend *our* time to save *our users’* time.
Speedy performance is a great user experience.
— Anne Gibson (@perpendicularme) July 31, 2018