These are my notes from Yesenia Perez-Cruz’s talk at An Event Apart in Atlanta, Georgia on February 16, 2015 at 2pm.
How are you going to take something and optimize it so it will load quickly on user’s devices after it’s been designed?
Case Study: A site for MTV for an award show that encourages voting
This was a slow, heavy site.
Hand-created weathered textures
Social Plugins
Videos
Ads
The site launched and they were really excited about it, she didn’t know anything was wrong until another person mentioned the site in their talk as an example of what is wrong with responsive sites today.
She created something that was beautiful and engaging, but also something that was super slow.
She’s a designer, and they are notorious for being
Slow, heavy sites are a result of poor planning, poor communication, and poor awareness… not understanding how the decision you just made is going to impact the user experience.
SIDE NOTE:**** I have personally noticed that this is the problem with a lot of CLIENT decisions, when THEY try to be the designer. I have to continually educate them as to WHY adding another 3 items to the MAIN NAVIGATION is not a good idea and will make the logo stack, or shrink the text so it’s too small to see, plus now we have poor information architecture and are not leading the visitor through a path that is easy but giving them too many options with overlap.
We are trying to overlap these things: Business goals & User needs
Every element has an impact on page-load and user experience.
If a client asks her for a carousel, she talks to her development team and ask ‘how many requests will this carousel add?’ If they want to add a typeface, she needs to ask how the performance will be affected by adding a new font?
Consider the overall user experience. Sometimes you do have to sacrifice a visual element for performance / speed.
Some quick ideas to improve performance: Simplify a background texture, remove carousel, remove parallax background, simplify type faces…
“Good performance is good design.” – Brad Frost
But striking that balance can be challenging.
What impacts performance? The things that make websites beautiful!
- Images
- Custom web fonts
- Interactions
- Stylesheets
Also:
- Ads
- Tracking Scripts
We’re designing for an audience and your audience wants content FAST
An online shopper expects a page to load in 2 seconds or fewer or they will bail!
We need to respect our users’ time or we will lose them. If we want to reach more people in a world that’s growing more mobile we need to consider how to design for performance.
————-
She’s adjusted how she works:
- Think about performance from the beginning
- Establish a performance budget
- Communicate & document (with development team and with clients, document everything in a style guide so that the appearance and performance can be maintained).
1. Make performance a project goal FROM THE BEGINNING
Generic design process: Business dev, Research, Design, Development – and think about performance at the end. BAD!! It’s too late!
If you’ve already agree upon a design that’s going to have a huge carousel, background image, web fonts, etc, waiting until the development phase to optimize isn’t good enough.
We need to look at performance as a design feature, not a technical concern, and we need to think and talk about it in that way.
In order to do this, you want to be armed with Case Studies. The client is redesigning because they have certain goals in mind. Whatever those goals are, find a case study that the client can relate to and share statistics with them.
If they want to increase revenue, Amazon is a good story.
Amazon observed a 1% decrease in revenue for every 100ms added to page load.
Walmart – for every 1 second that page load time decreased, Walmart saw up to a 2% increase in conversions.
At the beginning of a redesign project, identify the strengths and weaknesses of the current experience, and make recommendations on those aspect.
- Usability
- content
- navigation
- information architecture
- performance
- workflow
- brand
2. Create a Performance Budget
This is a tangible way to frame decisions about what can and can’t be included. If you make a decision or addition and you go above your performance budget, you have to make a decision on how to get back down below it.
It’s much easier to have a conversation with a client about a performance issue if you have parameters to work in. It makes it clear that everything you do in the design and build phase has a performance consequence.
Performance gives you a competitive advantage. Look to your competitors, and see how they’re doing, and see how you can do better than them.
Look to your users. Who are the people that will be going to our site and what is necessary for their experience? Look to Google Analytics to see where the majority of your users are coming from
Structuring your performance budget:
– based around the user experience (i.e. our pages should take no more than ten seconds to load over a 3G connection)
– based on browser experience (i.e. our pages should weight no more than 300kb and make no more than 15 requests).
You can use both.
She typically sticks with the browser experience budget.
How to translate them into each other:
one byte = 8 bits, so 3G translates roughly to about 96 kilobytes per second.
Helps you get the weight of things before they’re built.
Introducing the concept of a performance budgets is nice because a budget is a relatable concept.
3. Communicate & Document
Talk about the performance of the site throughout the entire project. Talk to your developers and your clients.
———
Case Study:
Pizza site
Goals – increase sales, increase customer ticket amount
Challenges – new branding was coming somewhere along the project, and the site was going to be image heavy.
Customer Perspective:
Think about performance from a customer perspective.
Defined quality for the project as stability, performance, and reliability.
That’s how they started the conversation with the client about performance.
Business Goals
Higher customer check, increased online ordering, less store calls, decreased call center volume (costing them money). So having a site that is reliable that isn’t going to crash during an order will help accomplish these goals. Once they understood these goals they were able to explain how performance will help meet those goals.
They set the goal of the project to create a beautiful, flexible, lightning-fast experience.
They knew performance was important but they didn’t see it as a marketable feature… but at the same time a competitor came out with a commercial that said “Fast like a cheetah.” So it WAS marketable, and their competitor (whose site was actually slow) was marketing it!
Conclusion: Performance IS a marketable feature! And it is something we should pay a lot of attention to with a site.
Their performance budget was 600kb per page on the desktop site.
However even after they got the client to care about performance, then they ran into the challenges.
CHALLENGES:
BRAND CHANGES
It featured large photography and some seriously un-web friendly type (like every other letter was a different type face).
So she needed to find how to achieve that goal while meeting their
Told them they had 100kb to spend on web fonts, and gave them some options (ex: a web font in 3 weights for body copy and a web font in 1 weight for the heading, or 3 weights for the heading web font and system fonts for the body copy).
So she gave them the options and asked “which of these is a better TRANSLATION of your brand?” so they understood a translation needed to be made. they could not just dump print strategy into the web, they needed to adapt.
UNPLANNED CLIENT REQUESTS
They said they NEEDED a carousel, so they told the client that the carousel would take up 700kb ALONE with images and JS! They told them their options were:
- Don’t add the Carousel
- Lazy load images
- Load video on page on click instead of on load
The client chose options 2 and 3 and to use the carousel sparingly, and we’ll see if they stick to it…
Optimizing Images
Most of the resources on sites are taken up by images…
You have to educate your client or team on how to optimize these assets like ImageOptim.
—-
Case Study : Newspaper site in Puerto Rico
Goals – get rid of separate mobile site which had a 7 minute delay from desktop, move to a fast, responsive site.
Challenges –
Required ads
Image heavy
Slower bandwidths
If they sold all the ad space on a mobile device, ads alone would be 160kb!
So she had to be extra careful with the design – how she chose elements and how she designed.
Strategies:
- Limit web font usage – she explained that she could use web fonts for primary headlines but they had to be extremely limited especially on smaller screens. She relied on things like line-height and white space for readability instead of web fonts.
- Design Modularly – don’t add a style that you don’t need. Be really careful that you’re not adding superfluous styles. Be limited while you design. Create repurposable patterns – this will save page load time as well as design and development time.
- Get designs into code earlier – allowed them to optimize things on a component by component basis, earlier. This prevented the issue of needing to change the design for performance reasons after it’s been signed off on.
- Document components in a pattern library with guidelines on when to use which styles. This was created while the design was happening, not afterwards.
- Test on real devices. You’re not going to know how fast something is going to be until you can test it on a real device on a real network. The sooner you can do this the better.
—–
Big take-aways:
- TALK ABOUT PERFORMANCE FROM THE BEGINNING, INCLUDE PERFORMANCE IN YOUR PROJECT DOCUMENTS
- TALK IN TERMS OF BUSINESS GOALS AND HOW PERFORMANCE CAN HELP MEET THEM
- MAKE A PERFORMANCE BUDGET
- DESIGN MODULARLY IN REPEATABLE BLOCKS
- GET DESIGNS INTO THE BROWSER AS SOON AS POSSIBLE
- TEST ON REAL DEVICES ASAP
- COLLABORATE WITH DEVELOPERS THROUGHOUT THE DESIGN
- EDUCATE – WITH EVERY DECISION YOU MAKE, EDUCATE YOUR CLIENT ON WHY YOU MADE THAT DECISION
- DOCUMENT – CREATE A STYLE GUIDE SO THEY HAVE AN OPTIMIZED BASELINE TO WORK FROM AS THEY MAINTAIN THE SITE
—–
TOOLS
Webpagetest.org – lets you see how a site is doing. They have a visual comparison tool that is really helpful, and a lot of helpful charts it outputs.
Google PageSpeed Insights is also a good tool for quick fixes.
Google Analytics – to see where your users are coming from
OpenSignal.com
Grunt task “Perfbudget” – can be used while building site to measure metrics. Will tell you if you’ve exceeded some of the metrics you’ve set like page weight, image sizes, script weight, and rendering time.
—
FINDING CASE STUDIES
She follows a lot of people that write about design and gets a lot of information from following people on Twitter.
Big organizations like BBC, Amazon, Walmart share that information
Sometimes just searches for Performance + Conversions
—-
@yeseniaa
Hi there! I know this is kind of off topic but I was
wondering which blog platform are you using for this website?
I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at options for another platform.
I would be fantastic if you could point me in the direction of a good platform.
My developer is trying to persuiade me too move to .net
from PHP. I have always disliked the idea because of the expenses.
But he’s trying none the less. I’ve been using Movable-type on various websites
for about a year and am worried about switching to another
platform. I have heard great things about blogengine.net. Is there a
wayy I can transfer all my wordpress content into it?
Any help would be really appreciated!