Performance Scenarios

[00:00:01]
>> So we're gonna talk about a couple of scenarios. Here is a super common performance scenario. I think I hear this every time I've talked about performance with any group of people. What do I do when marketing comes to me and says I'm they're gonna put another third party pixel on the page.

[00:00:19]
They have Google Tag Manager, maybe they didn't even ask you and they just like, started slapping a bunch of stuff onto the page. And now it's slow and I can't get them to take it off. Well, how do you convince them? If you care, you're an IT or you're an engineering and you you wanna make the site fast, you're rewarded for keeping the site fast, but you gave control over to marketing and they keep dumping crap onto the page.

[00:00:44]
Well, they don't know necessarily. They're being rewarded by how much data they can harvest from their users or how well they're advertising. And they don't necessarily know that slowing down the page is bad. They don't know that it's actually costing them anything. So how do you convince them of that?

[00:01:05]
Will you need data, you need to have a data based conversation about what's wrong and how you're gonna make it better. And when I say you need data It's not this. You can't take this data to Fred in marketing and have him give a crap about it. He doesn't know what FCP is or why it's important.

[00:01:30]
This is meaningless to them. Seeing that this thing got bad, he doesn't care. Maybe he cares about this. Maybe Fred cares about bounce rates and session times. If they're in digital marketing and they're aware of analytics, maybe they care a lot about these numbers. But not all organizations do, not all organizations are tech savvy like that.

[00:01:54]
But they definitely care about numbers like this. They care about revenue per day, number of checkouts. They care about the things that drive their business. And so how do you tie the data together? Well, you look at the historical, you look at your performance data, you have to have that performance data, but you look at your performance data.

[00:02:17]
You look at their business data and you lay them on top of each other. And over a timeframe you see how does that correlate? Do the performance get worse and worse and worse and the revenue goes down and down and down. You have a justification you can talk about that.

[00:02:34]
You can say these things are correlated together. But maybe they're not. Maybe the page has gotten slower and slower and slower and the business has made more and more and more money, which sometimes happens, right? Sometimes, being slower makes something weirdly more desirable in people's minds. But without data you don't know.

[00:02:55]
And you could be wrong. On the opposite side of the spectrum, there are a lot of developers who becomes zealots about performance or whatever their preferred niches, and we'll make a site fast to all ends, even when it doesn't need to be any faster. Your blog does not need to be the fastest website that has ever been.

[00:03:15]
Because it just at some point just doesn't matter. And you need the data to prove it. You need to be able to say revenue is negatively impacted by performance. And if you can say that business people just throw money at you and say, all right, we got to fix this.

[00:03:29]
We got him we got to make that happen. Let's talk about another common scenario. This is something that I imagine a bunch of people who are watching now and watching online later, are thinking about because it's when a lot of people go looking for training is they're starting something new.

[00:03:46]
They're gonna roll on to a new project or build a new Greenfield application and they are trying to figure out how to do it. And so you're reaching out and you're gonna design the next great web app. You're gonna build a software service and it's gonna be incredible.

[00:04:01]
And you're trying to figure out how to do it. You're putting your plans down and performance obviously needs to be part of that. But how do you need to think about that? How do you judge how much work you should put into this? When you start, you need to think about the business objectives of your app, even as a technical person, like, you should understand why are we building this thing and what is it going to do?

[00:04:31]
Is it going to generate revenue from sales? Like are we selling something? Are we just harvesting data like devilish spiders of the internet to sell to third parties? Are we providing a service to users who are gonna be able to do something like what is the actual objective of this product?

[00:04:54]
Because that's the part that the business is gonna care about. So let's take the example that we're gonna provide a service. We're gonna build a software as a service product that people will log into and pay a subscription to. What are the important metrics that will correlate to that objective?

[00:05:14]
Does LCP correlated? Does the time between the time it takes for something to draw on the page matter to these people will depend on what your services right? If it's a very simple service that is kind of a, $10 a month thing. Well, they won't really wait for LCP.

[00:05:32]
It won't be a thing, like it has to load fast and you cannot really adjust that out. If it's something super valuable like you're interpreting X-ray images or somebody will probably wait 30 seconds, a minute even for all of the stuff to come down. If you're sending a lot of stuff down the wire, maybe the first input delay is important.

[00:05:57]
You wanna make sure that your app feels fluid and responsive. That's okay to throw loading screens up in order to make sure it feels that way. Or maybe you have some custom thing. Some custom metric that you wanna define, like how long between the loading screen and the user performs this action.

[00:06:17]
They've sent their first email, they've tweeted for the first time. Twitter famously tracks a mention of timed tweet, from the time you land on the page to the time your first tweet is sent, how long is that? And they measure it and track it over time. And that's not a weird idea.

[00:06:33]
It's not something that you should be unique to them. Any sufficiently complex software service should have this kind of metrics that correlate for the engagement and success of their users. What are those metrics for your app? You should know those kind of, think about those going into it and how you're gonna measure that overtime.

[00:06:52]
So let's play with this. Let's think about it. Let's use some examples. I'm gonna go back out here to performance budget.io which would be a good place to start. So let's think about what our site's gonna do. Hypothetically, let's say we're gonna build a big data collection and reporting service, something like request metrics that shows performance data across a big data set to people.

[00:07:21]
Well, I want the site to load pretty quick, especially, if you're a performance site, right? If I'm talking about performance, and the site's not performance, it's kind of a bad luck. So there's a little bit of a hidden agenda there. But overall, is probably not the most important thing the user is gonna do in a day.

[00:07:40]
They probably have a lot of things they care about. They're not gonna wait super long to see this data. But maybe they'll wait four seconds, I think, okay, they'll wait four seconds, kind of at the worst case, but most of my users are business users. They're on a fast connection.

[00:08:00]
They're working out of their office or out of a good coffee shop kind of thing. So let's say let's say mobile 3G at the worst. Well what can I do? If I'm doing something really complex, like I'm doing a lot of charting, I'm gonna need some JavaScript, like those visualization libraries are not small.

[00:08:23]
And I probably need a couple of them. And I probably need to like, gather the data and do a little bit of crunching on it. So maybe I need like 250k a JavaScript. I probably don't need a lot of fonts so I'll pick a nice fonts and it'll be fine.

[00:08:41]
I don't need video. I don't really need images, maybe a few. Just to spice it up picture a slot here and there. CSS is probably gonna be a lot of styling data tables and buttons and controls and filters and there's all kinds of like niggly bits that need to responsive down into smaller screen sizes.

[00:09:02]
Lots of complexity there. So I mean, we might have 100k of CSS. And then the HTML is probably not big in terms of the raw HTML, but something we should think about including this is what are all the AJAX requests that are going in. How much data needs to come into the site over time.

[00:09:22]
I can kind of bake that in a little bit here. How much data do I need to pull in to render my page initially. So if I set all of these budgets, here become my performance windows. And so at that mobile 3G I'm at three seconds, which is a little faster than I was even shooting for which is pretty cool.

[00:09:45]
But so at this level here is my budget. And so you can set this going into your project, you know that you have 250k of JavaScript to work with. So when that new hot charting library comes out, and you really wanna use it, but it's 300k, well, now you have a conversation point.

[00:10:05]
Now you're like, well, we're gonna blow our performance budget if we pull this in. We're gonna double it. We'll have to go to 500 with all of our other stuff. And that's a conversation that should be intentional from you.