[MUSIC]

>> [APPLAUSE] >> Hi, everyone.

So.

The topic of performance is something's that super interesting to me

as a designer.

In the past couple of years I found that there's a lot of

technical discussions about how to implement performance.

But what I've found that, from my perspective as a designer, there are so

many things that I could do in my process to impact the performance of a website,

so we just gonna share some of that with you today.

So my name is Yesenia Perez-Cruz.

I am a designer based out of Philadelphia, Pennsylvania and

I'm talking to you guys here because I used to be a reckless designer.

You might know what I'm talking about a designer that only cares about whether or

not her design looks pretty and adding kind of features and

embellishments without considering the consequences.

So a couple years ago I was working on a website for

a music festival and online voting show, and it was all about

creating this community for superfans and capturing the spirit of the south.

So the art direction for the site was hand done, full of weathered textures,

and layered textures and a lot of kind of little elements.

This site also has to encourage voting and social sharing.

So there are lot of social plugins and fan feeds and the type of element and

then there were a lot of required scripts.

So ads and the video stream and social plugins and

the design process kinda went like this.

Where I would present a design and the client would come back and

say this is great but it could use even more texture.

And I would be like okay that sounds great.

And they would say we could really

use a parallax background here to really make it pop.

And I would be like cool that sounds great,

let's add a little movement to the background here.

And once the site launched, we felt like we had created something successful,

there was a lot of fan activity and voting and it was nominated for a webby.

We thought that we had done a great job with this site.

And I didn't even know that I had done anything wrong until a couple

months later when another designer referenced the site in his talk.

And he referenced the heavy slow design.

This was a responsive website and

it takes two minutes to load on my tablet and 5.9MB.

So I wasn't trying to be a jerk.

I didn't set out and say, I'm gonna create something that's gonna be huge.

I wanted to create something that was beautiful and engaging and

I did that, but the other

side of that was that I also created something that was really slow and heavy.

So, you maybe thinking, what are you doing here talking to us about performance.

You just taught us that you design this super heavy slow site.

And fair enough.

The reason I'm here because I'm a designer and

designers tend to get a bad rough when it comes to designing for performance.

You may here these things like, the designer added five carousels again and

even worse I didn't get to see it before the clients are and they loved it and

now we've to figure out how to make this bloated design load quickly.

And but here's the thing I never set out and

said, I'm gonna design a super slow site that's gonna be a pain to code, and

no one will wanna use, and I don't think anybody does that.

What I've found is that slow, heavy sites are a result of poor planning,

poor communication and poor awareness.

Not knowing the consequences of what you're adding to a design.

In the case of the site that I was just talking about, we had a launch date.

There was a date for the show when the site had to go live, and

as timelines and waterfall timelines go, contract negotiations ran long,

which made research and design ran long.

So there wasn't time at the end to optimize for development.

The challenge of design is it's this balancing act.

I'm designing these experiences for my clients, and I have to take

everything that I hear from user interviews and stakeholder interviews and

create Something that's beautiful and functional but sometimes,

fast, functional and light-weight can be kind of contradictory

to creating something that's beautiful, memorable and on-brand.

Especially when client is coming to me and saying,

you know, our new branding has 6 typefaces.

Or we really need a carousel to make the design pop.

So what I've found is that it's really important for

designers to reframe the conversation just as we would when we're considering

good user interface design, good pathways for a user.

And if they ask for a carousel I’ll go to my developers and

ask how many requests is this carousel gonna add?

Or how will perceived performance be impacted if we add a new font?

And what all this does is we’re considering the overall user experience,

not just the visuals.

And sometimes we're gonna have to compromise a little bit of that nuance,

if it means that it's gonna create an overall better user experience.

So if I had to go back in time to this design,

I would think can we remove the parallax background, or simplify some type styles?

If that means that more people are gonna be able to engage with the site.

And also we talked about this waterfall process and

it doesn't really work if we have a set data the site has to launch and

we've run out of time to optimize something for performance.

So we need more nimble cross-disciplinary teams that are working concurrently so

we can get ahead of possible performance issues.

Because good performance is good design, and it's really important for

designers to be championing performance in their work.

So performance, from a technical perspective it's

how quickly your websites load on your user's screens.

But it's also how quickly you can deliver your sites and

your services to your audience.

And that's crucial because your audience wants that content fast.

There's been a lot of studies and key studies about expectations of a user.

We hear things like, online shoppers expected pages to load on two seconds or

fewer and then at three seconds, the large share abandon the site.

Even worse, they will go and

visit a competitor if its faster by 250 milliseconds.

That's not that much time.

And if we don't respect our users' time and bandwidth,

we're gonna lose them, and this is really crucial because we're

thinking about expanding our services and our content to global markets,

and global network speeds vary greatly so we really need to consider

a performance as something that would really considering for our users.

So from my perspective,

performance is impacted by a lot of things that I have decisions on.

Things like images, or custom web fonts, interactions, stylesheets.

Some things that are a little bit out of my control like

third-party scripts that end up being kind of requirements for the site.

So I'm just gonna get into how I design for performance and

how I've done it for a couple of clients in the past year.

So really I'm gonna keep saying this but

thinking about performance from the very beginning of a project is crucial, and

that means that you're talking about it throughout the entire project.

But, you can't just be thinking about it, you need to actually set a game plan and

be able to stick to it.

So, establishing a performance budget help you stick to

the goal that you have in mind.

And then also communicate and document.

So this means that I am constantly talking to the developers on my team.

I'm constantly talking to my clients about a request that's come in and

how that's gonna slow down a site.

So the first step is making performance a project goal.

So if we go back to this kind of generic

process where we have a bunch of steps that are following each other and

we don't think about optimizing development until we get to development,

then we're going to get our sad angry developer that's going to be

handed a design and think, how am I going to optimize this huge design?

I think Tim Cadlek said this really well.

We can't set a budget or performance goal if we already have a mock-up that

contains three carousels and a full-screen high resolution background image.

That's no good at that point.

And we really need to consider that performance is a design feature, not just

a technical concern, and we need to structure our projects with that in mind.

So what that means is that we are thinking about performance from the very beginning.

We're including performance in our project documents, so

statements of work communication briefs and throughout the entire process.

But something that I've found a bit challenging

is convincing a client on why they should care about performance.

So, something that's been really helpful is sharing case studies.

It's really exciting that a lot of companies have been talking openly about

their experiments with performance and how that's impacted their business.

And I think that's huge because usually a client is

redesigning because they have a goal in mind.

They have a business goal in mind.

They may want to make more money.

They may want to get more users on board and speed and

having a fast site is gonna help them do that.

So there's a lot of great case studies out there.

Amazon, they observed a 1% decrease in revenue for

ever 100ms that were added to page load.

For someone like Amazon, that's a ton of money lost by slowing down their

site's slightly, and then on the flip side, for every one second of page

load times that Walmart decreased, there's a 2% increase in conversions.

So these kind of statistics are great to share if

you're trying to get people on board with performance.

Kyle Rush, who is a developer who worked on the Obama campaign,

he talked about how improving performance improved donations to the site.

So we made the new platform 60% faster and

that resulted in a 14% increase in donation conversions.

So these kind of metrics are huge and they're really compelling,

I think, when you're trying to convince clients to care about performance.

Something that I do with my company is to create a UX assessment,

User Experience Assessment.

And what that does is identifies the strengths and

weaknesses of the current User Experience.

It'll look at things like, disability, the navigation, information architecture,

what's the work flow like, can users complete their tasks?

In a kinda queer way, is the brands coming across.

And we've included performance in this UX assessment, and I think that's subtle,

but it's really important because it's important to not think about performance

as something additional, or something that's separate from the user experience.

It's really part of the entire user experience and

if you are analyzing and talking about the user experience from a cohesive manner and

include performance there, I think it helps drive the point home that this is

all about one user experience.

So, great.

You've established performance as your goal but

then you have to figure out how to stick to it, and a performance budget

is something that I initially heard about from Clear Left in the UK, and

it's a really great, tangible way to start talking about performance.

When I mentioned in the beginning that I was just adding elements and images and

textures to my design and fonts without really knowing the consequences.

This is what a performance budget can help you avoid.

You know, you have a predefined budget and

it's a tangible way to talk about what can and can't be included in a site.

And early on in the project.

So again you're looking at everything as if it has consequence.

If I want to add an additional typeface I may need to remove an element.

If I wanted to add that parallax background what would be my

trade off in order to still have a speedy site?

It's really not that different from budgeting money.

So, if you have means or another way to budget your money

that you have a target metric that you don't want to go over for that month.

And then you have a bunch of others smaller metrics and

you're trying to find the balance.

So, if I spend too much on my groceries for

a month I maybe back to my old routine In order to stay within my budget.

So similarly if I have my overall performance budget and I have CSS and

images and JavaScript, right and I get a request to add a huge carousel or

big images and that drives my budget over then I have to think about,

okay, what can I either optimize or move to get me back on track.

And that might be simplifying styles or optimizing the images more or

removing a type face in order to stick within the budget.

So there's a couple different ways that you can define a performance budget.

If you have an existing site,

looking at your current pages is a really good place to start.

So, what's preventing my site from loading faster on slower networks?

And using that as a baseline indicator is a really good way to know,

what can I work on to make my site faster.

So webpagetest.org

is the best way to start analyzing your site metrics.

There is been a lot of time on it.

Usually when I'm at the beginning of the project and

I'm trying to you know give clients a view into how they're doing.

So it'll tell you things like the speed index and how long it took for

the first byte to load and how heavy it is.

Google PageSpeed Insights gives you more kind of tangible

things that you could do to optimize your site.

So if you're just trying to optimize something that you currently

have that's a good place to look.

And then you can look to competitors.

If you're working with a client that has competitors in their space,

performance is a great advantage and it can give them an edge.

So taking a look at how they're doing compared to their competitors

is a really good way to start figuring out where to start.

So again web page test has this visual comparison and

you can export it as a filmstrip in a video and it's fantastic.

I mean you can see your competitor's site and your site and

you can see how you stack up.

I think that these kind of visuals can be very powerful when you're trying to

start conversations about performance.

You can export that visual comparison tool as a video as well, so

you can actually see how this is loading for someone.

And then there's a bunch of different kinda charts that track other

metrics which are interesting,

but the film strip in the video view are really If interesting for

someone that may not be a developer or may not have that super technical background.

And then, look to your users.

The reason that we're creating these sites and the reason that we care about

performance is because we want our users to get to our content quickly.

So, how are they gonna be using the site, what’s necessary for their experience?

Do they have certain

users that primarily work in environments that have slower bandwidth?

So you can look to Google Analytics to reveal some of that.

If you know that your audience is primarily in another country,

OpenSignal has some helpful charts to take a look at what the network

speeds are there.

So there's a couple different ways that you can structure a performance budget.

There is one that's user experience based.

So our pages should take no more than ten seconds to load over a sub 3G connection.

And again, this is all about our users.

And then there's a browser experience, so our pages should weigh no more than 400

kilobytes and make no more than 15 requests.

I think initially when people were talking about performance budgets they primarily

were talking about wait list budgets and then there been a shift to discussing

more about perceived performance about how users going to be using our site.

But you can use both.

And I think the combination is helpful for a designer.

So, Dean Mole wrote an article about he uses his performance budget and

he had some really interesting math about how he took a user experience budget and

translated it into a kind of weight based budget.

So he had this rough equation,

and basically what he was saying is if I want my start render to start in

roughly two seconds Have a kilobyte wait that I need to hit.

And then use that to make some rough calculations so you can start dividing

up the different pieces of your design into kind of little waits.

The reason that It's helpful as a designer to think about things about weights

because we work with things that have a weight to them.

Web fonts, they have a weight.

Images have a changeable weight.

So for me, I found that it's a little bit more tangible and

easy to Kind of think about way early on in my design process and

then developers can take over and start thinking more about like,

okay, how can I get this to load in two seconds and afterwards.

So then the other key that I was saying,

you have established performance as a goal.

You set your performance budget, but it's really key to communicate and

document throughout the entire process.

And, from, it goes in kind of two perspectives.

So I am communicating with my developers to make sure that nothing that

I add to the site is gonna make it super slow.

And then I'm also communicating with my clients and making sure that

they know that we're sticking to this goal of having a fast site.

And some of the requests that they're asking for may not work.

So it's really kind of a key and essential to making sure that you have a fast site.

So I'm gonna get into two examples of how I tried to work

performance into the design process for some clients.

The first was for this fast food pizza industry site.

The funny thing about pizza sites is their biggest selling point for

ordering a pizza online is speed and convenience so

you would think that their sites would be lightning fast and super easy to use.

And that's not always the reality.

So for the client that I was working with,

they had some very specific goals that they wanted to reach with the redesign.

They wanted to increase online sales, they wanted to increase the online

customer ticket, but I also knew that I was gonna have some challenges ahead.

I knew that at some point in the process, they were gonna have new branding,and

the site was gonna be very image and interaction heavy.

So, I approach this by establishing performance as a priority

from the very beginning that a client picked off a meeting.

And there was a cool ways how I framed to that discussion so,

at the very beginning of the project we talked about, what are your

customer goals and what you want to provide to your customers with the site.

And they told us, we want to give or

we need to give our customers a quality experience, and quality,

in this case, its stability, its performance and its reliability.

So, from the very beginning, we were saying, you can accomplish and

give your clients exactly what you need to like having a fast site.

And then they, from a business prospective,

they had several goals that they wanted to meet as well.

Again, they wanted to increase online ordering and

decrease call center volume with complaints about the site.

And again, having a site that works well, that's consistent and dependable and

works if you are ordering from the subway stop on the way home is gonna help.

So, you know, we set a performance mission in the communication brief for

the site and said, the goal of this project is to create a beautiful,

flexible, lightning-fast experience.

And they were pretty on board with that.

But they didn't see performance as a marketable feature,

which was interesting because their competitor had just released

this commercial starring country music superstar Blake Shelton,

who is using the site and he kind of is lifting up his phone and

he's like, this is going to be fast like a cheetah.

But, funny enough, when we looked at their sites in visual comparison and

web page tests, they were slower.

So I thought that was interesting that their competitor was actually marketing

performance.

When they still had some work to do.

So in the kick-off meeting I did some a couple of kinda

exercises to walk them through how they were doing compared to their clients.

Some of the home page that weight on an initial load is kinda crazy for

some of these sites and again there still has to be convenient but

they're actually not that fast.

And then, again thinking about the user experience.

Someone is here to order a pizza.

If I'm ordering a medium two topping pizza across you and your competitors,

how much data have I transferred and how many requests have been made?

It could end up being a very expensive pizza with all the data that you

have to transfer to get it and

all of these kind of conversations and test were to say that performance is

something that you can market and can provide value to your customers.

So we set, I feel like we found some consensus.

We set a performance budget roughly, we were feeling good.

The thing is there's always challenges in these projects and

you may have the expectation that you're gonna create something really fast.

And then you're gonna come across some challenges so

in this case we're really excited to create something super fast but we knew we

had this branding that was gonna arrive kind of half way through the project and

then we'd have to work into the new design so when we

got the branding it featured this really high quality photography which is great,

but it also had some very un-webfriendly type.

I don't know if you can tell but every other letter is a different font in their

print pieces which obviously we can't do online, but also having that many.

Typefaces to achieve that effect was gonna really blow our budget.

So, the thing is, I can't go back and say no, no, no,

you need to have a fast site, so you're gonna have Arial for everything.

You need to find a balance here.

So I talked to my developers, and I was like, so

roughly how much should I be spending on fonts for the site?

And they told me okay like 100 KB is your font budget.

So I went back to my client and said we set performance as a goal.

You have this much to spend on web fonts.

Here are some options.

You could have three weights of Whitney for

body copy plus one weight of Knockout for headings, and that would be one look.

Option B is 3 weights of Knockout.

That would give us some more of that variation with the headings.

But we can use system fonts for the body copy.

We could use something like CSS Mask-Image for just the headings.

If we want to, again, achieve a similar look to what you have in print

and then we ask them, which is a better translation of your brand?

And I think framing conversations in this way is really key

because even though we want to have a fast site I can't just say,

you can't have this, because if we go back to the beginning,

we're trying to create things that are engaging and are beautiful, but also fast.

So, another talent that came across were

unplanned client or maybe unplanned client requests.

So, when I was just designing the home page,

I knew that if we had a super high quality big carousel at the very top.

That was going to be a big hit to our budget,

but I also knew that they had these specials,

weekly specials, 6 to 10, so there needed to be a carousel of some sort.

I just didn't want it to be one with super large images.

So, I had a static pizza glamor shot at the top, and then a smaller carousel with

the specials, and it was still roughly within the budget.

But the problem is, they came back with feedback, and it was no, no, no,

we need that carousel at the top.

And when I had a conversation with the developers, they were like,

okay that would, with the job description and the images completely blow our budget.

So this happens.

It happens a lot.

I think if you want to stick to a goal you need to just remind them of the goal.

Again educate about what that means, and then find a middle ground.

Find a balance.

So, say something like, hey, remember how, the goal of this project

is to create a beautiful, flexible, lightning-fast experience?

Well, this carries a loan is gonna cost this much in images and JavaScript, so

what can we do to achieve what you want, but also stick within our goal?

So, some options could be don't add the carousel,

lazy-load the images that aren't in the viewport on page load.

There was a video lower down the page,

we could load on click instead of on page load, there's lots of options here.

My point here is that we're having conversations and

I didn't come up with these recommendations on my own.

I talked to the developers on my team to figure out, you know,

what's the best strategy here.

How can we come up with several strategies.

So we're all discussing.

And the key here is that this conversation was happening within the design process,

like at the very beginning of the design process.

So we weren't getting to the end with a super big carousel, and

I wasn't handing it to a developer and then saying, build this huge thing.

And then, the other thing that's inevitable are,

images are A ginormous asset on websites,

you can see they take out a lot of the weight of websites today, it's inevitable.

And if you're designing for a site that's gonna have super large images,

I think education is super important.

So recommending something like image opt-in or

creating a little guide to give to your clients about how they can optimize their

images after the site has been handed off is a really good way to ensure that you

haven't designed something that's fast and flexible.

And then they add a bunch of clunky images and then have a super slow site anyway.

So, on the other side of that,

I recently designed a news site for a newspaper in Costa Rica.

And news sites are interesting because

they are trying to get content to a user very quickly.

But they also are very dense.

They're full of images and ads and different content types and strips.

We've seen what happened with Facebook recently and their instant articles where

you know, they're coming out with this mission that new sites should use Facebook

instant articles because they'll load ten times faster than the standard mobile web.

So there's a problem with news sites and

the way that they can load content and give content to users.

So the goal of this design was to deliver the news quickly,

especially to mobile audiences.

When we started the project the client had a desktop site and

a mobile site, and different teams pushing content to each of the sites.

So there would be a seven-minute lag between

when a mobile user could see an emergency news story.

But again an emergency news story you need to see that instantly.

So it was a responsive site and then we really needed to focus on

these mobile users and getting them the news quickly.

But again, challenges of new sites, especially if they are using outdated ads.

They have required ads that are very heavy, they're image heavy.

We were working again with an audience that was primarily Puerto Rico with their

slower bandwidths speeds.

So, we had to be really kind of conservative with the way that we were

designing this.

Again, so with all the Required Ads

if the sales team sold all the ads that they wanted to in mobile.

Ads alone could be 160 kilobytes on a home page which is huge.

So the first thing that was key was being really restricted,

not restricted but having a lot of restraint when I was designing.

And what I mean by that is not adding a style if I didn't really need it.

So I created a pretty limited but well spaced type system that

used web fonts kinda big headlines and to make an impact.

But then relied more on system fonts with generous white space to

kind of stick with the goals.

And then the other key was designing modularly.

So again,

like I said, this means not, don't add a style if you don't really need it.

And it is being very careful about the size that you're adding.

So this is an example of three types of content blocks,

one is just the news block listing regular and then one has,

is live so it has an indicator that it's live and

then the other has a piece of sponsored content.

And I think if I were designing this without thinking about

performance I may have made the live story vastly different,

made more edits to the sponsored story.

But in this case, it was about finding what is our key module here?

What does that look like?

And then how can I very carefully add or remove things to feature

different content types so that I'm not adding a bunch of different styles here.

And the important thing was to

kind of document all these modules as I was designing.

And again, talking to the client about why we're designing in this way?

Something that was key for this site was that, the client was gonna be

taking what we gave them, and continuing working with that in the future.

That's our designing the news template.

So, gonna talking the way the we have this

modular system throughout the entire process, is really important.

And then the other thing that this allowed us to do,

is get designs into code earlier.

So this article from Scott Jehl at Filament Group recently,

he said, more weight doesn't mean more wait, and he's talking about how

you can have a site that's large and asset-heavy as a whole, but we

can still deliver a usable representation of the webpage's content very quickly.

And that's fantastic, but unless you're moving into development pretty

early that's gonna be really challenging to do this in the very beginning.

So, by designing module, modulerly, I was able to work to developers on my team,

talk about how individual kind of meet modules of the site we're gonna behave.

So, we would take key modules like this one that has a tab set and

he would,kind of, build it while I was still in the design process and

we'd talk about, you know, how should this behave, for smaller screens and

how can we optimize this for performance.

We're gonna have conversations about how to load the navigation on small screens.

And the important thing was that we were

making these updates throughout the design process.

So, I wasn't we won't waiting until the very end.

And what happened was that there was some time in the process where we would have to

make small changes to the design in order to make it better for performance.

And it was fine because we were still kind of iterating on the design.

So I could go back to the client and say we saw this tab set that

behaved this way and looked this way, but we've made this small change.

And it was still fine, there was still time to work on this.

And then, another thing that was helpful were my friend developers

were using automated performance testing with something called

Grunt Perfbudget while they were building the site.

And what’s really interesting about this grunt task is it uses the webpage

test API to measure the site against a ton of different metrics like page weight and

image sizes and script weight and rendering time and

it actually, if you’re trying to push something to GitHub it will actually give

you an error back if you’re not meeting your performance budget.

So again it lets us go back and make changes if we need to.

And then the other key here was because we had moved into development

while we were still designing it allowed us to test on real devices.

So you're not gonna be able to know how something is really gonna behave if you're

looking at it through a shrunken view port or an emulator.

So the faster that you can get a real

indicator of what something is gonna load on on different bandwidths and

on different devices, the faster that you can go ahead and make some changes.

And then the great thing about designing modularly is that then you can have

a style guide and again I think really key to performance is this education factor.

And at the end of that project I had a bunch of different components and

modules the developer had optimized for performance.

And we could hand that off to the client, but

when they were building a site, they weren't building new pages to the site.

They weren't going to add modules that hadn't been optimized.

So they could use that as a reference.

And there's a lot of really good style guides and examples of that.

The Yelp style guide is really good.

So don't be reckless [LAUGH] like I was.

Include performance in your project documents,

talk about it from the very beginning and set us a goal.

Get your designs into the browser as soon as possible.

Test on real devices cuz you're not gonna know what that's really like,

unless you’re working on a real device.

Collaborate.

Again, you need to have these conversations early, often, consistently.

And then educate and document, so

that you’re creating something that’s going to be maintainable in the future.

[MUSIC]

>> [APPLAUSE]

[MUSIC]