Performance and user experience
A few weeks ago, we polled our staff and fellows about brand and product values, and two things that surfaced were accessibility and performance. When we thought about it, these things really laddered up into usability: it’s important to us that through different practices, we ensure that the GetCalFresh site provides the best user experience it can.
What we mean when we talk about “performance”
Within the context of the world wide web, “performance” refers to website speed. In her book, Designing for Performance , Lara Hogan says:
“Web performance is user experience… Your site’s experience determines how much your audience trusts your brand, returns to your site, and shares it with others. Page load time and how fast your site feels is a large part of this user experience and should be weighed equally with the aesthetics of your site.”
– Lara Hogan
When we’re working on GetCalFresh.org, it’s not just how quickly the home page loads, but also the responsiveness within the application form. Hogan’s book points out how quickly a user feels delay :
- Less than 100 milliseconds feels instant to a user
- Between 100 and 300 milliseconds is perceptible
- A delay between 300 and 1,000 milliseconds makes the user feel like a machine is working
- If the delay is above 1,000 milliseconds, your user will likely start to mentally context-switch .
1,000 milliseconds = 1 second. ONE SECOND! That is so fast! But when we’re using something on the web, it feels so slow.
One of the reasons GetCalFresh.org loads the application screens so fast is that there’s no JavaScript on those pages currently. That’s big for performance. There are also no images, and we use icons sparingly. We’re using an app called Icomoon that allows us to create our own custom font using only the icons we need, so we’re not loading a huge icon library upfront.
We’re also using system fonts. Using web fonts doesn’t have to be a drain on performance, but we considered effect on performance with some other things. A huge one: many of our users come from mobile, and one of the tenets of this product is being a mobile-designed experience, the only way to apply for CalFresh from a mobile device.
A snapshot: 20% of mobile users are coming from Android devices
Using web fonts across different mobile devices, especially not the most brand new shiny ones, running different versions of the OS, is a delicate game to play. Another consideration: our users who are on pay-as-you-go data plans. For a bunch of reasons, when it came to typography, performance > aesthetics here (and to be honest, I don’t hate the aesthetics of using system fonts anyway. A huge amount of detail has been paid to improving system fonts over the past few years and they look good).
Another hugely helpful thing, on the homepage: optimizing images. For some reason, we were scaling a HUGE png of the CalFresh logo down to a tiny thumbnail on the homepage. Dave Guarino and I quickly made the PNG the right size and:
[4:47 PM]
Just boosted our Google PageSpeed Insight score:
- Mobile: 81 to 84
- Desktop: 88 to 90
I feel like I’m gonna be like a car hobbyist except with tuning our website performance...[4:48 PM]
love it
how did you go about that
DIFFUSE THE KNOWLEDGE[4:49 PM]
took our CalFresh logo from like 1905px width to 228px width (it’s only used on the home screen)
from 300ms load to 120ms
The actual real-time discussion
We’re continuing to improve images. On my to-do list for this week is to figure out how to scale down the main JPEG we use on the homepage.
In this article on Performance Calendar , Ann Robson explains how progressive JPEGs provide a better experience for initial page loading:
“Experimenting locally with a throttled bandwidth, an 80K progressive jpeg beats a 5K baseline jpeg (the same image, downsized) to the page in Firefox on Windows. This should blow your mind. Sure, the progressive jpeg’s first pass is low-resolution, but it contains as much information, or more, as the small image. And if you are zoomed out, perhaps on a mobile device, you will not notice it’s low-res.”
– Ann Robson
Again, crazy! But the main takeaway: there are so many little things that add up to speed. And speed is a perception, as well as a quantifiable thing, and those two things are correlated but aren’t exactly the same. And people think one second is a long time. :)
Thanks to the GetCalFresh team — y’all rock.
I’ll be at the Code for America Summit on November 1–3. Join me and get the skills you need to build 21st century government: https://www.codeforamerica.org/summit
