April 3 @ 10:15am
An Event Apart Seattle 2018
Ultimately what he’s talking about today is design.
In most cases we want to help someone solve a task, so we work to reduce friction between the user accomplishing a task. We want to enable someone to do what they need to do online with as little pain or annoyance as possible.
Some of the great hallmarks of UX are:
- Streamlined flow
- clear, concise copy
- low cognitive load
- faster performance
Now A Story…
Back in March of 2012, Apple unrelieved their iPad 3 (the one with high res retina display). At the time this was announced he was there for a conference and decided to go to apple.com using the hotel wi-fi to check out this new product. It took him 30 minutes to load the iPad page over the hotel wi-fi. The delay wasn’t do to the hotel internet – the culprit was Apple’s developers. They had put retina size images in the markup as the image tags and served that to everyone, even if someone was on a mobile device which at that time was probably an 800px wide screen or so.
This is basically a tax on the users. People were having to ‘pay’ for this high res images that many of them weren’t benefiting from. It created a poor performance = friction.
We should be concerned about performance because poor performance is friction. People want speedy access to websites – it matters.
The Harris Poll found that speed was the 2nd most desired attribute to a website, BEFORE RELIABILITY. People would rather a website be fast than work all the time.
A 1s delay can reduce conversions by 7%. For an online shop that earns $100,000 a day, that’s about $2.5million in lost sales.
A 1s time delay for Amazon cost them $1.6billion in sales.
Slow mobile load times was the greatest source of frustration or mobile users.
Google found 53% of people will abandon websites that take more than 3s to load.
Let’s get positive:
By shaving 7s off load, Edmunds increased page views by 17% and ad revenue by 3%.
Mozilla reduced page load time by 2.2s and sa a 15.4% increase in downloads.
PERFORMANCE MATTERS.
That’s one of the reasons they revisited the 10k Apart contest in 2016.
What they looked 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 (be a layering up experience)
- Users can do what they need to without Javascript
When building the 10k Apart website, they wanted to follow the same rules!
He’s going to discuss some of the performance optimizations they made that are low hanging fruit so we can use these in our own optimizations.
But first let’s talk about PAGE LOAD:
It’s important to note that CSS and JavaScript can delay loading.
DOM Parsing:
This affects layout performance.
Example: Starting at the root element it begins to parse through and then it hits a <script> tag so then it stops and goes to fetch that resource since it can affect that page. Then it says ‘hey, there’s a <css> file here so I need to pause and fetch that file before I proceed.
Then it seem an image so it puts that to the site and keeps loading because it can pull it in later and moves on but then pauses again because it sees another script.
Steps for better performance:
- Use native features whenever possible
- Only include assets you actually need
- Optimize everything
- Thank about WHEN you load assets
- Consider how you load assets
- Only load assets when they actually add value
1. USE NATIVE FEATURES WHENEVER POSSIBLE
Do this whenever you can because they’re basically ‘free.’
Example: Use <header> </header> instead of <div id=“header”></div>
It has meaning to it (and it’s shorter). It’s semantic. Depending on its location in the document, it could also provide a landmark for navigation!
Another Example: For a form to collect someone’s name, just use an <input> field and attributes to do all sorts of cool things that are native! See screenshot: