Arturo Silva - Catching Up With Web Performance

Catching Up With Web Performance

Arturo Silva

00:00 / 36:21

Video

Transcript

Tanner: Hello, everybody, and welcome to Catching Up With Web Performance, a podcast about stories of people in web performance. Today my special guest is Arturo Silva. Art, man, how’s it going?
Art: Hi there.
Tanner: It’s been too long.
Art: I had to stand up for this conversation, getting into it.
Tanner: Me too. Yeah, it’s so much better standing.
Art: Power move. Power stretching. Yeah, thanks for having me. Good to catch up, slash talk about web performance.
Tanner: Ha, “catch up.” I see what you did there. That’s funny.
Art: Oh, I didn’t even realize that.
Tanner: Yes! Oh, man. But let’s go ahead and dive right in. The whole podcast is about stories, so I want to know yours. How did you get into web performance? Maybe what’s your first web performance memory?
Art: I think my first memory of it was when I worked at Lowe’s. Like, it was my first job at Lowe’s. I think we were thinking about how, you know, the project was replatforming the website using Node, CSS, best practice, all that stuff. I think at that time we were mostly considering the byte size, like what we were sending over to the browser, and that was about it. Like how much CSS were we delivering, how much JavaScript we were delivering, and yeah.
Tanner: When was that? Because Lowe’s, byte size…
Art: That was um… 2002. Not 2002, sorry, 2012!
Tanner: 2002!
Art: No, it was in the nineties, man. It was all about bytes back then. No, it was 2012. Yeah.
Tanner: 2012, great year. End of the world. So as the world is ending, Lowe’s is thinking about replatforming.
Art: Their entire site.
Tanner: The whole thing.
Art: The whole thing. It was like a 2 to 3 year project that kept being pushed back every, like, six months.
Tanner: Oh my god.
Art: The entire thing. I don’t know how they convinced business to do that. But I was so low on the totem pole, so I don’t really know.
Tanner: Yeah. So I guess what was that like? Like you heard just whisperings of, “Hey, we’re gonna redesign the whole site.” What, I don’t know, what did you hear? What was it like there?
Art: It had already started when I, before I joined the team. So what I mostly heard about was like, “Oh, it’s exciting. We’re gonna learn this new tech called Node.js.” New to us, I guess. New to, maybe not new to the industry at the time.
Tanner: You mentioned byte size then. Is that part of the conversation too? Like were you being told in some of your tasks, “As we’re doing this thing, we need to keep byte size down, keep byte size down.” Or is that, I don’t know…
Art: It was more like after the fact. It was more about optimizing what we were using. Like, you know, making sure we’re using the same function everywhere, we’re not duplicating stuff. We’re gonna use the style guide, you know, what they called “design systems” at the time. So not like baking your own stuff for the sprint. It was just like, “Oh, just use what’s already there.”
Tanner: So a lot of avoiding duplication. We’ve got this big massive site, we want to keep from just bloating it with tons of the same thing over and over, so let’s reuse as much as we can.
Art: Yeah, yeah, yeah.
Tanner: Were you there to see the end of this? Like, were you there to see the completion of…
Art: No. I mean, I saw, I think we went live with a couple of the experiences, like the product list page, the product detail page, I think the home page. I saw most of it. I didn’t see the end of it, which was the cart and checkout, which was like the most laborious part of the whole process because that’s like the moneymaker. You don’t want to like, fudge that up, you know. So I left before that.
Tanner: Did you get to work on any of the moneymaker stuff?
Art: Yeah. So funny enough, we knew we wanted to replatform the site, and we knew we were going to launch the home page, product category pages, like all that stuff before the cart and checkout went out on a new system. So we like, the higher-ups decided, “Let’s reskin it. Let’s keep the backend the same, the frontend the same, but just like use CSS to make it the same as the rest of the new system.”
Art: So performance was not part of the conversation at all with that. It was just like important rules everywhere, trying to figure out how to navigate JSPs, like, “Oh, can we add a class here into the JSP file?” You know, the Java Server Page. “Or can we just find a current selector and overwrite it?” So yeah, performance was not at all, it was the slowest because it was importing its own CSS from the old system, importing our new CSS, and now this new JavaScript that was going to enable certain interactions to happen. So yeah, they figured, I guess, maybe they figured, “By the time they’re down the funnel all the way, they could care less about performance.” The user, I mean.
Tanner: I guess in some ways, you know, the tradeoff kind of works if you have this massive thing, going with a partial rollout. I mean, at least instead of doing, “Alright guys, we redesigned the site, cut everything over right now.” Let’s take it one piece at a time. It’ll suck for performance for a bit, maybe not too bad, hopefully not too bad, but it’ll help, it’ll keep us a little more sane rolling out the new design. Maybe?
Art: Yeah, a bit more sane. Actually, this conversation reminds me. Like, mobile was a thing back then. I mean as it is now but like, it was starting to become a thing. Like business knew that it was, you know, the traffic was leaning towards mobile, people wanting to buy things online, buy things on their phone. So that was a consideration too. So there was some more effort on there to make sure the cart and checkout was more up-to-date to handle that. But the same thing as on desktop: use what we already have, don’t rebuild stuff just for this use case.
Tanner: And then worry about mobile. Do you remember, with the mobile stuff, did that ever come up? It sounds like it came up kind of in passing. Like, “Oh by the way, make sure this looks good on a phone.” Is that how it went or is it different?
Art: So it was actually considered part of the architecture up front when we were doing it. I think I just brought it in the conversation because I just forgot about that, cause it’s been like a decade.
Tanner: We’re going back!
Art: Yeah, we’re going all the way back.
Tanner: Well, in 2012 too, this is like… didn’t Bootstrap and stuff come out in 2012? Like that’s when…
Art: Yep, Bootstrap.
Tanner: Was Responsive Web Design 2011?
Art: 2011 was Responsive Web Design, yeah. That’s what got me a job in the industry, was I was able to make that happen for customers.
Tanner: Wait, really?
Art: Yeah. Lowe’s found my portfolio, like, “Wait, this guy can do media queries? And he can make a site look really nice on mobile and desktop? Let’s hire him.”
Tanner: That’s great. By the way, I pulled up my timeline now. May 2010… May 2010 was Responsive Web Design. Which, interestingly enough, was also the same month that Steve Souders posted his Web Performance Optimization, coining that as a thing.
Art: Nice.
Tanner: 2012… So let’s, I don’t know about fast forward, but let’s move along then. Because we get here, we’re at Lowe’s, we’re working on this massive redesign. Performance is a concern because mobile is a thing, we have like Mobilegeddon happening in the background. And then, you know, you see most of the project through, you get to help out on a lot of different pieces of this progressive rollout. Then what happens?
Art: Uh, I quit.
Tanner: Ha!
Art: Yeah, as you imagine a project that takes years to accomplish, you know, your developers get burnt out and they get tired of it and just want to try something else out.
Tanner: Is that what happened? So it was more of like a burnout thing that, “Hey, this is too much. I need to move on, I need to find some more…”
Art: Complete burnout. Complete burnout from it all, yeah.
Tanner: Wow. So how’d you recover? And what’d you do next?
Art: How’d I recover? So I quit, found a job that was a bit more relaxing, I guess. Like less demanding. Like Lowe’s being, you know, at the time, still is, like millions of hits every day on the website, I’m sure. So found a new company called Red Ventures. I think you’ve heard of it, right?
Tanner: Oh, that sounds familiar. I feel like maybe we worked together there. That’s interesting.
Art: Yeah. So that place, completely different than Lowe’s. And I’m not even sure, when I joined, they were thinking about web performance at the level that Lowe’s was. It was more about, you know, slicing, dicing, getting people to call in to the call center. I think mobile was a concern, I think a year? Or six months to seven months into when I joined, I think they started making it like a top-down, like, “Mobile should be a thing. Our websites are slow on mobile, we should think about improving that.”
Tanner: Yeah. Do you remember what some of your projects were when you joined Red Ventures?
Art: Just in general or…?
Tanner: Yeah, I guess I’m looking too for some of these differences you’re talking about, because we go from a site with millions of hits to, I don’t know, I assume something a lot smaller, and then not as much concern around mobile performance but then kind of we’re going to work into it.
Art: Yeah. Yeah, so when I joined, I joined a team supporting—I don’t even know why, I didn’t sign an NDA, I think, so I can just talk about this. Yeah, so RV at the time was set up to help other businesses bring in customers and make sales. So there were websites that we built to support that, and they were very much like one-off landing page websites.
Tanner: Marketing optimization stuff.
Art: Yeah, marketing optimization stuff, yeah. I think I did that for a while and then I’m not sure what happened, but I think I started getting, I got pulled into like a… what do they call it there at RV where, like, a Tiger Team or a Tiger Club or…?
Tanner: Yes, Tiger Teams! Tiger Clubs, we should call them that. Come join this Tiger Club.
Art: Let’s talk about tigers. So I got pulled into the one for mobile, making our current websites, our landing page stuff, faster. And that was an exciting adventure to go on.
Tanner: Yeah? Tell me more.
Art: Because it was bucking up against how everyone did everything, how everyone did frontend at Red Ventures.
Tanner: How’s that?
Art: And I was supposedly the guy who was supposed to convince them to change what they were doing based off what I learned at Lowe’s.
Tanner: You’re there to singlehandedly change the world.
Art: Singlehandedly change the world, I wasn’t saying that but sure.
Tanner: Well, I mean, was it like that? Or I don’t know…
Art: It did feel like that. It did feel like… We were using, for compiling our frontend assets, like our JavaScript, CSS images, and stuff, we were using Gulp. And I’m not sure what the bundler was they were using at the time, but they weren’t using Webpack, or they weren’t using Webpack to its full potential. Like where you could break it into multiple files, do chunk loading, all that stuff. And that was the barrier, was trying to convince them to change that, to use Webpack or leverage more of Webpack’s features for stuff.
Tanner: And we’re not even talking about, you know, “Oh, reduce your CSS.” We’re not talking about, I don’t know, “Optimize the priority order of things on the page.” Like we’re just talking about tooling.
Art: Yeah, it was more just tooling. Like meet them where they are and not try to bring them all the way. Let’s just refactor everything about frontend development here. Let’s just find a couple of landing pages for certain businesses that we can pull off and test out a faster cart funnel experience with Webpack and stuff.
Tanner: Yeah. So how’d that go?
Art: I think it went well. We didn’t, I don’t think they, I don’t remember them rolling out Webpack or what I thought they should do. But I think, for one, the outcome of that was let’s move or figure out a different way to do cart and checkout experiences for RV.
Tanner: Do you recall, were there any, I don’t know, interesting or surprising things that you remember from that?
Art: I think one of the most surprising things about it was it was more of a business decision than an engineering decision to do the project. And it was up to them to move forward with, you know, changing to a new infrastructure, or new technology choice, or to deliver faster web pages.
Tanner: Does it feel like… I don’t have a bird’s eye view of the entire engineering world, but I feel like with engineers being the closest ones to the code, they would be the ones responsible, or you would expect them maybe to optimize things. But here it’s flipped. It’s like, “No guys, actually we recognize that this is important and we need to do something different. So engineers, do something different. Make this thing work better.”
Art: To a point. Don’t spend too much time on it. Because it’s an investment having engineers replatform stuff. So, I mean at least that’s how I was told and talked about it at Red Ventures. It was like, “What can you do in two weeks to optimize a website for us?” Or, “What can you do in four weeks to optimize a website for us?” Or, “What can you do in two days?”
Tanner: Yeah. Man, those constraints are really interesting.
Art: Constraints led to hacks. Constraints led to breaking stuff on production.
Tanner: No!
Art: And yeah, it was fun. It was fun, though. It was in contrast to Lowe’s, which is an enterprise company where, you know, now we’re going to deployments and stuff, but at Red Ventures we did, I’m not sure if you were there at the time, but like you did it yourself. You went to production yourself.
Tanner: Right. Was this the RVLP, where you would open your terminal and hit the deploy script manually?
Art: Yeah, deploy script. I complained about it a lot. I was like, “I can take down the website, all the websites right now.” Like, I could just do that, like delete all the code, just take it all down.
Tanner: I think we’ve finally gotten away from that. I don’t know if there may be like one or two sites still running on it. But man, the glory days, right?
Art: RVLP.
Tanner: Rest in peace.
Art: But yeah, after that, I think after that effort… Oh gosh, RV is a blur because everything changed, like the org changes every three months, six months, as you know.
Tanner: Yup.
Art: I had like 10 or 12 different managers there. I don’t remember all the teams I was on.
Tanner: Very different from the Lowe’s enterprise structure.
Art: Yeah, at Lowe’s where things are planned out six to, you know, two years in advance. And RV was like, “Let’s just change everything tomorrow. Okay, cool. Adapt.”
Tanner: Yeah, we keep passing around that Friends GIF, the “Pivot! Pivot!” Where they’re carrying the couch down the stairs. It’s like, “Yeah, that’s what it feels like.” But it’s a fun ride.
Art: Yeah, yeah. I think there was like a lull period after RVLP and all that effort of optimizing our websites and stuff, for me at least. I think after that it was mostly just, you know, continuing on like a different business, helping them with frontend stuff, still using RVLP. I think there was at one point one project or… wait, Bankrate. Bankrate happened.
Tanner: Bankrate happened!
Art: Bankrate, yeah. RV acquired Bankrate, as you know. Massive technology company—not technology company, but like massive technology, new technology. They didn’t have RVLP because that was our tech.
Tanner: Well and too they had a lot more robust best practices. I remember some of their engineers coming in, visiting. I think, like, William Seward gave a talk on observability, you know, how to actually keep your site up and running and know what’s going on. I was like, “Woah, who are these guys? This is great!”
Art: Yeah, they had it figureed out, for sure.
Tanner: Speaking of talks, I think that’s actually one of my early memories of you. I remember you giving a workshop on Lighthouse. Do you remember that?
Art: Uh, sure.
Tanner: Part of the blur.
Art: The blur. Um, yeah, yeah, Lighthouse. So yeah, I think after that mobile project at RV, I got, like, real tickled by, not tickled, but like, fascinated by web performance. Like it was one of my hyper focuses there. I think I started talking more about Lighthouse with people. I did workshop apparently. That happened. Yeah, as a way to, like, measure your site against best practices by, you know, Google. But still something that we didn’t have before that was a baseline of like what to expect and what not to expect.
Tanner: Do you remember, did you use anything before Lighthouse?
Art: I think Webpack, I think there was one plugin or, that had like the ability to set baselines, like, “Hey, don’t go over this certain amount of bytes for your file sizes.” But beyond that, it was mostly tooling, like optimizing your stylesheets. CSSNANO, I think was… was that there by the time? Yeah.
Tanner: I don’t know. We’re gonna have to fact check after this.
Art: Fact check. That’s the part of podcasts I love.
Tanner: We can’t afford fact checkers here. I mean, I think that’s really interesting to me, this evolution of how we thought about performance. Because yeah, I remember too, it was just basically all I knew was file size. Like make sure that you keep your file size low and send as few bytes over the wire as you can. And Lighthouse was kind of this gateway drug into other ideas, like into notions of best practice, or like, “Hey, here’s some accessibility things to watch out for.” And performance was baked in there.
Art: Yeah.
Tanner: So what happens next? Art becomes a Lighthouse aficionado, starts optimizing all the websites he can get his hands on. I don’t know.
Art: I think when, I’m sure when I gave that talk I was on the the Authentication team, so I was building a SPA…
Tanner: A SPA…
Art: A SPA, yeah, yeah. I was building a spa like you can go jump in the water, you know, nice and toasty. Single Page Applications, for those who don’t know the term. And I think that was built with Vue, Vue.js. Vue was very popular at RV at the time.
Art: You know, I think we went through a renaissance, like “jQuery’s bad” and “Don’t use jQuery.” It’s like, well, looking back jQuery was pretty great. It had a limited set of functions and features for, and it was the byte size was what they were concerned about a lot over there, because it was delivered over the wire on CDN.
Art: But yeah, we were building a Vue.js application to build out authenticated experience that would show people their credit card, how well they’re doing with their credit cards, like, you know what credit cards do. Um, how well they’re like… It’d be similar to web performance, like you want to know how well you’re doing with your credit cards and, you know, your credit score. Yeah, there we go, I got there.
Tanner: There it is.
Art: After that, I think… shit. The memories of that have clearly been repressed.
Tanner: We’ve moved on. I mean, well then let’s fast forward then, because let’s kick into gear here. What now are you doing? Where’d you go after Red Ventures?
Art: This very small company called The Washington Post, a small newspaper.
Tanner: Maybe you’ve heard of it.
Art: So yeah, I’m here now. And yeah, what would you like to know?
Tanner: Everything. Tell me all the things. I mean, it’s interesting here, you start at Lowe’s, massive website, millions of hits. Then you go to Red Ventures, which is a lot more scrappy, a lot of marketing websites, different stuff, less traffic, developing some, I guess we’ll say developing performance best practices. But then you jump back into the world of massive high traffic websites with Washington Post. Does it feel like you have some similarities to the Lowe’s world or is this a whole new world at Washington Post?
Art: It’s a whole new world, a different industry. I think Lowe’s and RV were, not really the same scale of a company, but where Lowe’s was very much focused on getting people into a funnel, delivering on that and like, you know, “Hey, I want something, you give me money for it,” and that kind of thing. Like clearly a transactional experience at Lowe’s and RV, there as well. And at The Post it’s, you know, of course some of that is getting subscribers into The Post to have like, you know, experience all, everything we do here at The Post. But it’s more about making sure the journalists have what they need, and making sure we deliver the best news to our readers, rather than trying to like… What I’m trying to say is we move fast, we don’t break things, but we move fast and do that.
Tanner: And bringing up that notion of transactions, like switching gears from transactional to… What would another word, is there a word you can use to capture this other thing that’s not transactional? Like what?
Art: I mean, it’s still transactional but it’s like not as much.
Tanner: Yeah, the primary focus is not on getting transactions but on providing news, providing information.
Art: Yeah.
Tanner: And then you mentioned too, supporting journalists. Tell me more about that. Is it a different mindset? What’s different about you supporting journalists at The Post as opposed to your previous businesses?
Art: My previous companies, the stakeholders involved in any project were the business, designers, and of course the engineers and like, you know, of course our users as well. But here at The Post, it’s the business, the marketing division, you know, how can we deliver on, keep our revenue up, and stuff like that. All of it before, but also the journalists and the designers that build out these awesome experiences for our readers, like our interactive pieces.
Art: So like, everyone’s in that conversation now, and it’s more like how do we navigate, how do we help them? Because they’re not technologists like we are. They aren’t, you know, they don’t have BAs, like they don’t have degrees in business and marketing and stuff like that. They’re just trying to tell a story, to tell the truth, or whatever we’re trying to do here.
Art: It’s more about like, it’s some of the hackiness that happened at RV but it’s more hackiness in the spirit of, “This hack is going to be here for a bit longer because we just need to tell the story,” and the story constraints that we need to just bust out of the design system to make something happen, make something really cool.
Tanner: Tell me about one of these hacks. Do you have one that comes to mind?
Art: No, I’m not telling you. I guess more of the hacks, it’s like in general it’s making CSS overrides for, you know, custom colors, or maybe customizing our carousel component to make it work in a different context, or just making one-offs because, yeah, to make it happen.
Tanner: Yeah. Design systems and one-offs. That sounds like an interesting tightrope to walk, difficult balancing act.
Art: It is, yeah. For sure.
Tanner: So then tell me about, how does performance enter the conversation here? Like with your stakeholder meetings, when you’re talking about, “Alright, here’s the new piece, or here’s the new interactive experience we’re going to roll out.” Are you guys talking about, “This has to work, this has to maintain 120 frames per second on a mobile phone.” Or like is that what’s, what are the conversations like? Or how do you guys think about performance at The Post?
Art: I think for my team, or at least the department that I’m in, it’s very different than Lowe’s and RV, the organizational structure. So I’m on two teams, one team is the design system team and the other one is platform engineering. We try to do what we can to control what we can. Like we can’t control how fast or how slow a interactive piece is on the website, but we can control how fast our articles and our homepage experience is. So we do have good, like, we have metrics in place. We have observability, like we mentioned before with Bankrate. And yeah, we try to keep it that. Like, “Hey, something’s clearly wrong. We’ve introduced new bytes or our CLS is different for this.”
Art: So I think, yeah, I think… sorry, I’m not sure what I’m talking about right now. Podcast conversations. But yeah, I mean, when I joined we were going at, when I joined The Post, we were going through a replatforming.
Tanner: Another replatforming?
Art: Another replatforming.
Tanner: You left one replatform to join another.
Art: But this is more limited in scope. It was replatforming our homepage and article experiences to use this neat framework called Next.js, from the great company at Vercel.
Tanner: Nice.
Art: Plug them! But yeah, so it was going through that. And at the time we were concerned about search performance, how will we perform on the SERP. The SERP is a term that, is that RV? I forgot the actual, is it like search…?
Tanner: Search Experience Ranking Performance, maybe? I don’t know. [Fact Check: “SERP” stands for “Search Engine Results Page”]
Art: Yeah, yeah there we go.
Tanner: Acronyms. It sounds right, we’re gonna run with it.
Art: Yeah because that’s important for The Post too, is we want to make sure that we’re up there on the first page, we’re up there where Google talks about news and brings in different organizations in there—publications, I mean. So that was very important, because we didn’t want to lose our rank when we went through this platforming effort. And at the time, speeding up from Lighthouse, Google was like, “Oh, we have this new thing called Core Web Vitals,” which I’m sure you know way more about than I do right now.
Tanner: Maybe. Don’t get ahead of yourself.
Art: Yeah, so that was something we were talking about, and making sure that we were having a stable experience for our customers. Like at the time, I’ll try to be polite, it was a very janky experience. All the things were moving around a lot. Like that, that’s something that we, I was very much frustrated by at Red Ventures. It was like there’d be a fly-in modal, there’d be a popup, there’d be numbers coming, like phone numbers coming in here and there. Nothing was stable. It felt like, you know, this felt like… yeah, it felt like what it was. It didn’t feel good.
Tanner: I’m being harassed on my website.
Art: I’m being like, “Hey, hey, hey, hey, hey!”
Tanner: Yeah, give me a minute. Let me just read this for a second, please.
Art: No, now, now! Call this number now!
Tanner: CLS is like the ultimate “back off” metric. Just give me a second.
Art: Yeah, basically. So that’s something we were, we’ve been concerned about for a lot, for a long time, is making sure that we build our website with that in mind. And that’s become baked into the identity of developers. Like the developers are thinking about it, the designers are thinking about it, the business is thinking about it. Everyone’s thinking about it.
Tanner: About layout shifts?
Art: About layout shifts, yeah. Layout shifts and all the other vitals that are part of that.
Tanner: Yeah. Tell me more about that. Because did you…? Let’s get our timeline here. You join The Post and—is this right around the time, this is 2020?
Art: This is February 2020. Something happened around that time, yeah.
Tanner: Yeah. Oh, yeah! This little thing called COVID.
Art: Yeah.
Tanner: Man. But then, coincidentally, also this is the year when Core Web Vitals is beginning to take effect, right? Because I think they announced it in 20—was that, am I right? They announced it in 2019?
Art: I think, yeah. And they were throwing up deadlines.
Art: They gave us a year lead time.
Art: Like, “Hey, get your shit together by this day.” And then they were like, “Nah, we won’t… Okay, we’ll push it back again. And then we’ll push it back one more time,” I think.
Tanner: Alright, I’m gonna have to go back and check on my timelines here because I’m not sure if I’m getting these dates right, but…
Art: I’m terrible at dates, so I’m no help here.
Tanner: 2020, what a year. My God. But I’m interested in these… It’s so interesting that CLS, like, layout shifts are top of mind for you guys. That when somebody reads our articles, we want to make sure they have a good experience, we want to make sure we’re not bouncing them around, like they can get through and they can experience this story. Like I want to tell you a story, let me get out of the way.
Art: Yeah, you want a reliable narrator. You want a reliable storyteller. You want somebody you can depend on. And if you can do that by having minimal layout shifts, a very fast experience, fast download of the website to the browser, that’s a good way to get a subscriber out of them, you know? To get them to keep going back.
Tanner: So what are some of the things you’ve learned then, I guess, about layout shifts? Or can you give me some examples of shifts that you’ve fixed or ways that you’ve avoided shifts in whatever experiences you’ve worked on?
Art: I think what I have focused on here and other places is trying to make the decision about CSS or JavaScript on the server, or at build time, before the customer even would visit the website. So like making sure that there’s a good fallback experience. Like if they make a decision on the frontend, making sure the dimensions don’t shift, that kind of stuff.
Tanner: I’m debating how technical to get here.
Art: Please, let’s get into it.
Tanner: Tell me more. Like what decision is being made on the server? What fallbacks are you setting? Like I hear that and go, “Okay, so you made a picture frame where an ad can go,” or something.
Art: Yeah. Okay cool, that’s good. You’re a good actual interviewer. As I try to figure out what particular experience I’m trying to bring up. So our ads… We have ads on The Post, like any other business in the publication world. So we try to, with our ad department, try to make good assumptions about how wide or how tall an ad will be placed. You know, make sure the ad container is something figured out beforehand. Like, “Okay, we’re gonna drop a 100 by 300 ad here all the time. Always.” Like that’s a contract we come up with ourselves and with them. “Okay, that’s gonna be what ad’s gonna be placed here. And if we don’t have that, we’ll tell you. And hey, can you talk with our partners?” You know, can we just figure it out.
Tanner: And this is, we’re not even talking about servers here. This is like business-level decisions, that in our contract we’re stipulating this is the size of the ad and these are the ads that we will serve people.
Art: Yeah. Yeah, because that was, when I came in, it was most of the layout shifts were happening from ads being just placed and, “Oh, okay, it’s gonna grow this high, it’s gonna grow this way. We’re gonna figure it out on the client.” And you’re gonna start reading something and the ad drops, like, “Oh, now it’s further down the page.”
Art: So it’s more about business making those contracts with our ad partners to make sure that, “Okay, ad will always be these dimensions no matter what.” Or if it isn’t, that was something else we figured out. Like sometimes it needs to be larger.
Tanner: Like a one-off change?
Art: Or sometimes, yeah, or a one-off change. Or like, “Okay, we need to take the hit on web vitals for this particular partner because, you know, we need to make money.” Like it’s a business. So at the time, I think that was 2020, and we were talking with Google here and there, just checking in, like how we were doing. Because they wanted to make sure that we succeed so they can succeed and stuff like that.
Tanner: Talking to Google like you would get on the phone and contact…
Art: Like, “Hey, Google!” It was a meeting with our engineers, business, and with their equivalent on the other side. Like I guess for them to help us figure out what web vitals was and all the ins and outs of it. Because it was, at least at the time, it was secret sauce. It was trying to figure out where they were, how they were thinking about it. You know, what is a layout shift? And how can we, like, how much can we push that metric and still, like, not push the metric? You know?
Tanner: Right.
Art: So I think some of the conversations, one of the convos we had with them was like, “Hey, can we animate a layout shift?”
Tanner: That’s a great question.
Art: And they were like, “Yeah, you can do this, you can do that.” I was like, “Okay, cool.” So we did that with some of the ads, like they’ll grow and shrink according to our animations we put on it.
Tanner: In these conversations you learn that, “Well, layout shifts in general, bad if they’re janky, but if I animate, that’s okay.” Are there any other things that you discovered? Or maybe some, I don’t know, a point of contention, like something you had to sort out in these web vitals conversations?
Art: Besides that, I think one of the things we had to resolve was our comments feature on articles. By nature here at The Post, like we do everything static, we try to do everything statically rendered to the website. And we don’t make any decisions like on the user on the server. We do it all on the client-side. You know, that just saves costs. And at the scale of The Post you don’t wanna, like, have everyone login and all that stuff. So yeah, our comments feature, it’s all rendered client-side, and we were doing an upgrade to that system. We needed to figure out, “Okay, we don’t want to hurt the web vital gods. We don’t want to make them upset.”
Tanner: Do not displease them.
Art: We don’t want to displease them.
Art: So we we had to figure out, okay, with business and design a compromise had to happen. Like okay, well, we need fixed dimensions for these comments and we have no idea how many comments are going to be loaded up as featured or whatever it is. So we had an idea, we’re going to have like a thousand pixels high comments module on the articles, and it’s just going to be a longer page since that’s what it is. And we needed to navigate how do they, how do the users experience that? Do they, like what’s after that? Like once the module comes in do we, you know, I can go more technical but the idea was like it’s going to be a really tall box and we need to have, it’s going to be a less than okay experience but it works for both, for all parties involved.
Tanner: Yeah. Well, I was just going to say with all this talk of performance, like, how do you think about performance in general?
Art: I think it’s shifted. Like from ten years ago it wasn’t really part of the delivery of a website. It was something that was after the fact. I think now it’s becoming more of, you know, more of the… You know when you build a house? You know, they have certain requirements from the state and the federal level? I assume, I don’t know how all that…
Tanner: Yeah, I mean I’ve never built a house.
Art: I’m not sure why I brought this metaphor up.
Tanner: Hey, houses are a good metaphor.
Art: When you buy a house, you know, you have someone come by and do a report of like, you know, find all the the bad things wrong with it.
Tanner: Yeah, that general inspector.
Art: General inspector. Before the general inspector, like when they actually sign off on the house. You know, the house is stable and the house won’t fall down. And it’s a contract, right? With a builder and all that stuff. I think now, how I think about it, that’s part of it. Like it’s part of the contract. Like I expect a fast website, I expect all this stuff on site performance to be part of the conversation early on, rather than them being like, “Let’s optimize after the fact.”
Tanner: Yeah, it’s…
Art: And it’s something that we have to monitor continually.
Art: It’s not the wild, wild west anymore.
Art: It’s not the wild west anymore. I mean it’s, there’s less, there’s more… Some of it’s kind of wild but it’s more like, “Let’s monitor every week. Let’s monitor every release.” And let’s make sure that we don’t go too wild off, you know, into the wild.
Tanner: Well, monitoring. Tell me about that. Like, how do you guys monitor things? What are you doing?
Art: Yeah. So we observe on the website through a couple of different things. One of the tools we use is Catchpoint.
Tanner: Hey Catchpoint!
Art: Shoutout. This is a vendor podcast. We’re sponsored by all the vendors here.
Tanner: Catchpoint. Vercel.
Art: Yeah. So we use Catchpoint at scale. We have a bunch of different monitors in there that just, you know, visit a website, see how well we’re doing. We also have a bunch of other tools like Datadog that has RUM as well in there. And we have this other tool called Calibre that runs on every release. So we have a couple tests in there that just runs our deployments, makes sure that we’re not going overboard and stuff like that. And we also have baseline metrics in our Next.js build that reports on a PR. So it gets a nice report like, “Oh, the bundle is this size, this page is this size, the CSS is this size.”
Tanner: Man. You guys have the whole suite. You’ve covered the whole thing. We’re testing pull requests, we’re testing bundle sizes, we’re testing, we’re monitoring real users and what they’re seeing.
Art: Yeah, we’re even going down into the component library in the design system. Like we’re making sure that the bundle size don’t creep up. Because at scale everyone’s using the design system, so we need to make sure that we’re accountable to that.
Tanner: Yeah. I’ve had this question a couple of times come up but I’m, I don’t know… How reflective do you get? Do you ever look back and go, “Man, I wish I knew this ten years ago.”
Art: I think I wish I knew more about bundling. I wish bundling was more of the conversation early on in my career. Cause that’s like, you figure that out the rest comes easy. Like once you figure out bundling and how your code’s bundled up now, especially now. Like ten years ago, jQuery, you didn’t have to really consider it too much. But yeah, I wish I had known more about that, I think. Yeah.
Art: Now I’m getting like, now I’m thinking like regrets and like… I wish the web didn’t move away from jQuery maybe.
Tanner: Oh, here we go! Tell me more!
Art: Hot takes! With Art.
Tanner: A whole new segment.
Tanner: I think we’re now, it’s like fashion, the web sometimes. Like it’s become fashionable now to have smaller bundle sizes and use more of the platform, like just HTML, CSS. So that’s what I think about now.
Tanner: Astro! No JavaScript by default. Yeah.
Art: Yeah, Astro! Yeah, I’ve been hyping that up on Twitter lately.
Tanner: Yeah.
Art: Yeah. Astro’s great because it just gets back to what it was ten years ago, which is just like HTML, CSS, and that’s it. You don’t think about the rest of it.
Tanner: But we need JavaScript, Art. We need it!
Art: No we don’t. We really don’t.
Tanner: Hot takes, part two!
Art: We need the platform to do more stuff, I think. I think it’s coming up more and more and more, but like the Open UI effort and, you know, trying to bake in more of what JavaScript and React was trying to do at the time, was make the internet more interactive by using this platforms.
Art: But if it just had that. If we had a good accordion primitive in the web, if we had a good modal primitive in the web, like ten years ago, I wonder how the landscape would look now. Like would React be on top? Would it be web components, you know?
Tanner: That’s a good question.
Art: That’s what I’m thinking about lately, is like how can we ship less JavaScript in newer projects?
Tanner: Do you have any predictions for what will be next? For the web and web performance over the next… Where will Art be in ten years from now?
Art: I don’t know. Ten years from now, I think we’ll have more frameworks like Astro out there. I think we’ll have more projects like that.
Tanner: Well hey, I want to keep up with you over the next ten years. So for other people who are interested now, Arturo Silva, where do we find you? How do we tag along, see the next chapter of your story?
Art: You can check me out on Twitter, @artfromclt. Yeah, that’s where you can find out more about me, what I’m doing. I don’t tweet a lot, but I like a lot of stuff, so you can check that out.
Tanner: Well hey, it’s been great talking. I’m gonna be keeping an eye on The Washington Post, will be watching for my layout shifts.
Art: Yeah, at me on Twitter. Tell me about it.
Tanner: Deal.
Art: Fix it or not. We’ll fix it.
Tanner: We’ll fix everything. Well, thanks so much for coming on again, and until next time!
Art: Alright. See you, Tanner.

Recent Posts

Recent Comments

Archives

Categories

Links

Video

Transcript

Leave a Reply Cancel reply