
/
RSS Feed
Links
- Estela’s Website
- Estela on Mastodon
- Estela on Twitter
- Largest Contentful Paint:
- performance.now() Conference
- Article: First Contentful Paint ignores opacity: 0 in some situations
- Talk: Core Web Vitals and SEO: Myths and Truths
- Web Vitals Changelogs
Video
Transcript
- Tanner
- Do I do it in Spanish? ¡Hola a todos y bienvenidos a Catching Up With Web Performance. How’s that? Did I do it?
- Estela
- Sounds good, sounds good.
- Tanner
- I mean, okay. Hello, everybody, and welcome to Catching Up With Web Performance, a podcast about stories of people in web performance. Today my special guest is Estela Franco. Estela, how’s it going?
- Estela
- Hello! I’m doing well. How are you?
- Tanner
- I’m doing great. I wish I had blue hair now. Meh, dumb jokes, gotta start with them. But yeah, I’m just excited to have you on because you’re our first guest with an SEO background.
- Estela
- Correct.
- Tanner
- Very exciting, because the episode we just did, we got to chat with Karolina from Calibre. One of the things we talked about was, you know, performance, if we want this thing to grow, it needs to get outside of just developers. It can’t just be an engineering thing. Knowing that we’ve got somebody like you—“Hey, I’ve lived on another side of the world, I have a different perspective, something to learn.” Like, I’m so excited to hear your story.
- Tanner
- Can you take me back? Like, let’s just jump right into this. Do you have a first web performance memory? Like, how did you get into this web performance thing?
- Estela
- Okay, so we need to go back until 2011, more or less, when I started my SEO career. At that time, you know, page speed was a topic that needs to be covered and needs to be understand by the different SEO people, because in fact page speed is a ranking factor for desktop devices since 2010.
- Tanner
- That’s right!
- Estela
- So it’s been a long time, yeah.
- Estela
- But in practice it was an issue when you have a really, really, really slow page. Because we didn’t have any kind of, you know, thresholds and metrics to measure, so we were looking at, at that time, it was like the DOM size and Document Content Loaded Time and this kind of stuff, right? But I discovered the topic. But not only for that ranking factor, but also because of crawling, because SEO people are really obsessed about crawling. We want Googlebot to crawl all of our pages as most as possible. So, you know, there is a correlation. The faster your website is, Googlebot will crawl more pages from your site. So that’s something that we can even monitor through the, now it’s Google Search Console, at that time was Google Webmaster Tools. So that was something that we were worried about. But from my side, it was something kinda hard to get things done from the engineering side. So it’s a different story.
- Tanner
- Interesting.
- Estela
- Yeah, it’s a different story. And at that time, my first experience with web performance, my first memory, was discovering about those topics. The DOM size and how to use responsive images, or even how to optimize images, and how to check the browser request. Try to identify a news request was kind of hard at the time because, you know, SEO tends to be part of the marketing team, depending on the company. I’ve been also working on several companies as SEO in the technical side, in the dev team. But in general, it’s something that I needed to discover by myself at that time. So StackOverflow was also something to check, and different… check in at Google and try to find the answer to your question. At that time we didn’t have so much good documentation as we have nowadays. So it was an interesting journey. But I love trying to figure out things, so I enjoyed the journey, to be honest.
- Tanner
- Yeah. I’m so curious. Can you tell me about one of those times that you know what you want out of the site and you can’t, like what were one of the, some of the things that you wanted engineers to do that you couldn’t get to happen?
- Estela
- For instance, try to reduce the amount of code that we were using. Because maybe we are using, you know, we were loading all the code needed to load any single page of the website but not all the web pages need the same amount of code, right? So try to ask these kind of things and you get the response, like, “Oh no, it’s not an issue because our users have good connections and good devices, so it’s not an issue at all.”
- Tanner
- It’s fine!
- Estela
- It’s yeah, that’s true. True story.
- Tanner
- And the engineers say this back to you. Like you as the SEO, “Hey, this is too slow.”
- Estela
- Maybe it wasn’t the best engineering team, but that was a common answer that I got by that time. But to be fair, I also worked in another company where web performance was a topic since the beginning. And I received monthly emails with New Relic data about, you know, app monitoring. So we got lots and lots of metrics and monthly alerts—sorry, weekly alerts if something went wrong. So it depends on the product, on the team. So I’ve lived the two sides. So engineers really worried about that, but also engineers not worried a lot, at all because, you know, our users have good connections and good devices.
- Tanner
- Do you have a sense of what they were worried about maybe?
- Estela
- Kind of hard…
- Tanner
- We don’t know. We can only speculate.
- Estela
- I don’t know, maybe, you know, finishing their sprints with no issues.
- Tanner
- Yep. Oh, for sure. The pressure of getting stuff done.
- Estela
- Yes, and I was asking for some modifications up to their different topics to cover.
- Tanner
- Listen, I’m busy, I’m doing something else right now, Estela, I can’t worry about…
- Estela
- Yeah, and everything is fine. Everything is fine. You don’t have an issue.
- Tanner
- Oh, man. But then you have a different experience. What are these two companies? What are these two experiences you had? Because it sounds like early on, when you were first trying to get this stuff done, you were first trying to improve page speed, you couldn’t get it, but then you went to a different company. Can you compare those two? Or what was that like?
- Estela
- I think that the main difference was that in the first company I was part of the marketing team and in the second company, even I was also an SEO, I was part of the dev team. So I think it’s a different approach, because you are part of the team, so you are involved in the different technical decisions and also the different road maps and you are part of the group. So I think that maybe that was something that, you know, I’m thinking of these right now… But I think that’s the main difference at that time, being part of the dev team and not being part of it.
- Tanner
- Do you remember joining that company?
- Estela
- Yes.
- Tanner
- Do you remember what that was like?
- Estela
- It was, uh…
- Tanner
- Did it feel that different?
- Estela
- Yes, because, you know, I started working with the sprints and having even my different SEO tickets were reflected in a ticket kind of Jira tool. And it was a different approach, because when I was working in the marketing side I was like I have my list on Trello or something like that, so you don’t have that kind of commitment with the rest of the team that you will achieve this and this and this during your sprint. So I think that changed my mindset. And I think that helped me a lot in my career, going through that process. You know, it’s an agile kind of work. But I wasn’t, I never experienced that before. So it was interesting. And also being in different discussions with dev teams, and I learned a lot. I was able to even touch a repository and make a, you know, kind of pull request with the different system. But yeah, it was nice to feel more technical, let’s say.
- Tanner
- Right, and you can actually make the changes that you’re hoping for instead of begging for them to happen.
- Estela
- Yes, some of them. Some of them. I have limitations, but at least I was more, yeah. For several things, I was able to do it from my side by myself, so that was great. And after that I also worked in another company, also in the dev team, and at that time I even was making several frontend things. I created components and, because I like that. I know that was, let’s say that wasn’t part of my scope, but you know. I’m part of the dev team, so the dev team has a commitment for this sprint and we need to achieve this and I am able to make several frontend things, so why not? And the team admit me to do that, so that helped me also a lot, a lot, a lot. And that, I think that’s why I’m here right now, you know? Because that kind of help, to involve me, to help me to be more involved in the dev sprints and in the different code reviews, I learned a lot that time.
- Tanner
- Yeah. Can you actually, I’m trying to put together a timeline in my head, seeing all the calendar dates. So you started around 2011–2012, SEO, part of the marketing team. At some point you joined a different company and become part of the dev team. Around when was that?
- Estela
- Oh, it was like a couple of years after that. 2013, 2014, more or less.
- Tanner
- Okay, so we do a couple years of the marketing team.
- Estela
- This was my first, yeah, my first experience in a dev team.
- Tanner
- I’m gonna go pull up your LinkedIn.
- Estela
- I don’t have care today so you will check that better than me.
- Tanner
- Let’s see here… 2011, Enconexo?
- Estela
- Enconexo, yeah, that was all marketing stuff. But I discovered SEO at that company, because I was like, I was making everything in that little agency for other clients. So I was creating PPC campaigns and also writing stuff for clients’ blogs and also discovering SEO to write good stuff for Google, you know. Because if I write some kind of blog I want to get traffic from Google, so I discovered SEO by that time.
- Tanner
- Yeah. How did you decide what things to write about? Like how do you know what things Google wants to see or not?
- Estela
- Oh no, it was more depending on what the client wants me to write. Because, for instance, I was also writing for a GPS company. So if they launch a new GPS, they want me to write stuff for their new launch. So, you know, try to identify what the users are looking for, that kind of stuff, of product and try to make sure that I use the proper words in the title and also in the different subtitles and these kind of things. You know, a basic label, because we are talking about 11 years ago now.
- Tanner
- We’re digging back in the past. But then let’s fast forward a little bit then. So there’s Atrapalo?
- Estela
- Atrapalo, yeah, that’s the company where I joined the dev team.
- Tanner
- That was the dev team, Atrapalo.
- Estela
- Yeah. Yeah, I was part of the dev team, and I learned a lot with so many talented people. And I even get in contact with people from that team and…
- Tanner
- Oh, really?
- Estela
- Yeah, yeah, yeah.
- Tanner
- That’s fantastic.
- Estela
- Good times, good times. Yeah.
- Tanner
- And then after that, there’s La Vanguardia.
- Estela
- Yeah, that’s a complete different topic because that was only SEO for news, it’s for Google News, because it’s a news media, La Vanguardia. But also web performance was a topic there because the algorithm for Google News is different than for Google Search, and the performance was a topic that was really important.
- Tanner
- How so?
- Estela
- Every time that we had any issue with maybe some ad that maybe it was taking too much to load and that was generating kind of that the loading time never ends, we had many issues to be indexed in Google News.
- Tanner
- Gotcha.
- Estela
- So that was something that we were having a look always to make sure that everything is kind of controlled because it was critical.
- Tanner
- And a page would take so long to load that Google couldn’t even crawl it or index it.
- Estela
- Yeah. So, you know, if you have a very important news that you need to be number one in Google News to get traffic and, for whatever reason, you have a huge banner with an advertisement that is not loading properly, that could mess everything up. And you wouldn’t index it at all. So that was a topic…
- Tanner
- How do you deal with that when that happens? Do you like raise a red flag? Alert! Alarm!
- Estela
- Yes, alert, yeah. You need to talk to the people managing the advertisements and make sure that, “Okay, remove that advertisement because it’s not working at all.”
- Tanner
- Yeah.
- Estela
- It was complicated because you’re battling in real time with other news media websites, so it’s complicated. But yeah, then you detect that, “Okay, this is not loaded. It’s still trying to load the page because of this piece of advertisement.” And then you identify the issue. The first time was the hardest one because it’s like, “Oh, something is broken.”
- Tanner
- Yeah, do you remember the first time?
- Estela
- Yes. I don’t remember exactly the news that I was trying to rank, but I remember the crisis at the office. Like, “Okay, why it’s not working? Why?” Yeah, because the page isn’t indexed at all, so something is not working. And then, I don’t remember who, but then it’s like, “Oh, what’s happening here?” And it’s, you know, it’s a never-ending loading process because of the banner.
- Tanner
- Were you the one to figure that out or did somebody else on your team?
- Estela
- No, something else, someone on my team.
- Tanner
- Yeah.
- Estela
- I’m sorry, I’m not too smart.
- Estela
- Please.
- Estela
- I’m not the smartest one.
- Tanner
- Well, no, I think these are the parts of the story that I love to hear, though. Because the people around us, right? We learn so many things from them. And knowing that there was somebody on your team, there was this moment where, “No way! That was it?” And that sparks a whole new world, a whole new line of questions for you to go down.
- Estela
- Yeah, totally. So since then, every time that we had some indexing issues, you know, we checked the loading time and make sure that everything is loaded to ensure that…
- Tanner
- Was it that?
- Estela
- Yeah, completely. So it was a bad experience, but at least helped us a lot to avoid this issue in the future.
- Tanner
- Do you have, do any other situations like that come to mind as you’re going through your career? Where this like, something happened and, “Woah, I had no idea.” And then you’ve carried that with you.
- Estela
- I think this is the biggest one because it was like a couple of hours trying to index a news and, you know, indexing in Google News is like this because it has…
- Tanner
- It should be instant.
- Estela
- Yeah, it’s almost instant because it has, Google crawls a different sitemap just for news. So it’s kind of instant. So it’s like, “It’s not working. It’s not working. What’s happening?” So we suffered. Yeah, we suffered a lot. I’m remembering that and it was a critical situation, to be honest.
- Tanner
- Oh my god.
- Estela
- But now I know. And people hearing us will know that, for indexing in Google News, you need to make sure that your loading page, your page is loading properly.
- Tanner
- Yeah. It’s so crazy how these things kind of repeat and come back. Because you mentioned that some time, like 2010–2011, Google starts making page speed a ranking factor in desktop, or at least introduces the idea. And then as an SEO, crawl rate, frequency of crawls is really important in order to get pages indexed. And we knew that if we make pages faster they can crawl more often or crawl more pages. But then it escalates to a point where, “Oh my god.” If it’s that slow, that it literally can’t crawl it, blah! But it’s just funny how these like, we keep building over the years and learning all this new stuff.
- Estela
- Yeah. In fact, going back to the ranking factor, I remember in 2018 when Google announced that page speed was also a ranking factor for mobile devices, so 8 years after the desktop one.
- Tanner
- And this isn’t even Core Web Vitals, this is just…
- Estela
- No, no, no. This is before Core Web Vitals, right. But again, we didn’t have any kind of metric and threshold to monitor. Because, as I said before, the critical issue is when the page is really slow, as the example with the news, right, because it never ends loading at all. But in 2018, I think it was in 2018 also that PageSpeed Insights updated their stuff and then they were providing some CrUX data at that time, the First Contentful Paint and DOMContentLoaded.
- Tanner
- Yep.
- Estela
- So at least, maybe we don’t know exactly what’s the ranking factor, but at least PageSpeed Insights is showing kind of metrics to look at. And, you know, information about your users are struggling a lot with web performance, with page speed, and so at least we have kind of hints to also to prove to different teams involved in web performance that maybe we are not as good as expected.
- Tanner
- Right. It feels like a black box trying to know what’s happening with real users. When, you mentioned New Relic, when were you using New Relic? Is that at one of these companies before 2018?
- Estela
- Yes.
- Tanner
- Or was that later?
- Estela
- No, it was old times.
- Tanner
- Yeah, yeah.
- Estela
- But yeah, because now New Relic and all the different tools that we have in the market, they are providing a lot of data, frontend data, let’s say, for the loading process. And we now have many, many metrics, many new metrics, during those last years. And in fact, in 2020 when Google announced the Core Web Vitals, I think that was the biggest announcement related to web performance from the SEO perspective, because now we have metrics and thresholds to monitor. And we are focusing on real users, not in lab data, because so far we were more focused on Lighthouse and these kind of, also PageSpeed Insights, which is running Lighthouse behind the scenes. So now it’s like we need to look at the real user’s experience instead of just what we are serving to Lighthouse or even Googlebot. Because okay, maybe we are really fast to serve pages to Googlebot and we will index our pages, but maybe if our users are struggling a lot with low-end devices and low connections, so we do need to know what our users are experiencing. So I think Core Web Vitals was the big chance here.
- Estela
- And that also helped us a lot, to the different teams, to make sure that everyone was involved. Because from the SEO side it’s easier to justify that we need to improve our web performance, because if not our rankings may suffer some kind of degradation. But even the dev teams can also push in that direction, because if they are really worried about web performance now, it’s something that may impact business, right? So I think this is the best scenario to make sure that all the different involved teams are aligned, and we are, you know, in the same direction. Because we want to ensure that we provide a good user experience to our real users, not Googlebot.
- Tanner
- Yeah, that’s such a great point. With all the different, it almost feels like competing camps, not necessarily warring with each other, but definitely with different interests in mind.
- Estela
- Yes.
- Tanner
- And if you can have something unifying them.
- Estela
- Yes, and depending on the teams, maybe it’s been harder or easier. In my case, when the Core Web Vitals announcement was made, I was working in a company as part of the dev team. So it was easier…
- Tanner
- Did you ever go back to the marketing team after that, or has it always been SEO as dev since?
- Estela
- During La Vanguardia, I was part of the audience team. It’s not even marketing team because we were building audiences. So it was a mix up team, let’s say, because we were in contact with marketing team but also with the journalists that need to write content, but also with the media team to ensure that the different advertisements work properly, and also with the dev team if we need to improve something. So it was a different, it’s been my… I think it’s been my experience that’s been more different from the others. Because, I guess it’s because of the industry, the news industry is kind of different itself.
- Estela
- But yeah, when Core Web Vitals was announced I was in a energy company as part of the dev team. And that team was the team that was helping me to be more technical and to implement my changes by myself, and also make code reviews with them and more programming. So I’ve been more technical and I even coursed two bootcamps, in fact, a JavaScript bootcamp and also a React bootcamp, being part of this company. Because I love that, I love to know how things are built.
- Estela
- So you know, from the SEO side, the frontend side, I think it’s a closer one. Because from the SEO side you work more directly with frontend teams than backend teams. Sadly, because that’s another topic. I mean, web performance is not only frontend performance, we also need backend teams to be involved on that. And most of the times I think frontend people are more worried about that topic than backend ones.
- Tanner
- Yeah, I mean it almost, at least with Core Web Vitals, like, it’s right there. It’s frontend. It’s in your face.
- Estela
- But not…
- Tanner
- This is stuff that, like, my backend’s not gonna screw up my CLS… well, maybe.
- Estela
- But even that, the Time To First Byte. I mean, if your Time To First Byte is like, for instance, 2.5 seconds, your LCP will never be below 2.5 seconds, right? Even if your page loads instantly.
- Tanner
- Yeah.
- Estela
- So backend time is also something that…
- Tanner
- It’s important.
- Estela
- We need more help, yeah, we need more help from backend teams.
- Tanner
- It’s just so interesting to hear all the different team, like the organizations of teams and people from your… Like, it almost feels like SEO is like a floating target in different companies. And then, depending on where you land, you may be closer or farther away from the engineering teams. And even then, there’s the engineering teams, you’re probably closer to the frontend devs than the backend devs. And if there’s, like… Trying to navigate those waters sounds complicated.
- Estela
- Yes, but you know, I love challenges. So I’ve been having fun on the journey. And learning a lot, I think that’s something that I enjoy a lot. Because, you know, I’ve been learning the different web performance topic, or even frontend topics, by learning by doing, in fact. So I’m enjoying the journey a lot. And I’ve worked with many, many different people with different backgrounds also. So I think it’s been really good for me to have this kind of mixed background.
- Tanner
- It strikes me as interesting, though, like you’ve had this technical side, it seems like, from the beginning. Is this accurate?
- Estela
- Yes. In fact, 22 years ago, many time ago, yeah, I started studying telecommunications engineering. So I learned to program with C at that time, not even C++ or C#, just C.
- Tanner
- Okay, so you’ve been sandbagging me this entire time. You learned C 22 years ago!
- Estela
- But you know, it wasn’t useful at all to manage websites.
- Tanner
- Okay, fair.
- Estela
- But at least, yeah, I had this kind of programming mindset. Even in school, I learned to program at school with QBasic, it was the programming language, just to learn how to paint something in the screen and just make, you know, just… Not for fun, but to understand how to iterate something or how to locate something in the screen and how to, you know, programming itself, to make an algorithm. So I had this kind of background in my…
- Tanner
- It was there. There was a seed planted.
- Estela
- It was there, yeah. That’s the proper way to say that. And when I discovered SEO, I think that seed bloomed. And I discovered, “Okay, that’s the thing that I like because it’s more technical.” So it’s related to marketing, because at that time I was working more on marketing stuff. But then okay, the SEO and the technical SEO especially, was something that, you know, I feel something special with that. And then 12 years after that, I’m here.
- Tanner
- Right. So let’s fast forward a little bit, because now your title is not SEO…
- Estela
- No.
- Tanner
- …is that correct?
- Estela
- No.
- Tanner
- No. What is your title now? Who is Estela Franco?
- Estela
- Okay. I’m the Web Performance Specialist at Schneider Electric.
- Tanner
- Well fantastic. How did that happen? Because we’re going SEO, SEO, SEO, technical SEO, and then all the sudden—bam!—you are a web performance specialist. Like, when and how did this happen?
- Estela
- In fact, it’s quite recent because I joined Schneider Electric 6 months ago now.
- Tanner
- Congrats.
- Estela
- Thank you. I wasn’t expecting this change. I mean, I was really focused on web performance since the Core Web Vitals announcement because, wow, that blowed my mind. And it’s like, wow, I discovered new things of web performance and I was really involved with all these things. So when I had the opportunity, because in fact a recruiter contact me with the opportunity, and I was like, “Oh, this is a joke.” Because it’s like my dream job, you know?
- Tanner
- This isn’t real.
- Estela
- Yeah, this isn’t real, that can’t be true.
- Tanner
- But it was.
- Estela
- It was, it was. So I met the team, I met my manager, and I met a UI engineer in Schneider Electric and everything was like, “Okay, this is my job. This is what I’ve been working the last two years to achieve.” But, you know, I thought that maybe this opportunity could come maybe in some years, not now. But here I am. And I’m really excited. It’s great, because now I’m working in a huge company, because it’s a global, huge company, working with many teams. Because it’s a website that, you know, we are using several technologies, depending on the part of the website, and each part of the website is managed by different teams. So I’m in discussions with several teams with different issues because we are using different technology, so every technology is facing different issues. So it’s kind of complicated, but at the same time it’s really exciting.
- Tanner
- Yeah. But you’ve had experience with tons of different teams, crossed over, navigated. Or is this, does it feel different now too?
- Estela
- But now, I think now it’s different because I’m facing these kind of topics with several teams at the same time. But it’s really exciting and I’m learning a lot. Every single day, I learn new things and I discover new things and I need to investigate different things and talk to different people and so, wow. And I said it before, I love learning, so this is perfect for me.
- Tanner
- Well then, tell me about that. Like, tell me about some of these things you’re learning. I would love to know two things. One, what are some things that you’re learning now that excite you? Two, how do you learn?
- Estela
- Okay.
- Tanner
- Take it away.
- Estela
- So for instance, something that I learned last week. I’m trying to improve, for instance, the LCP for layout where the hero image, which is the LCP element. And I discovered last week that the LCP element is not an, I mean… An element is not an LCP candidate if it’s covering the entire viewport. So if the image is covering…
- Tanner
- Interesting.
- Estela
- Yes, I discovered it last week saw so it’s, maybe everybody know that but I…
- Tanner
- If it covers 100% of the viewport. No, this is news to me too.
- Estela
- Okay, good.
- Tanner
- It needs to be less.
- Estela
- Yeah. It’s not an LCP candidate because, I don’t know, it’s covering everything and it’s not an LCP candidate.
- Tanner
- We’re gonna go find the spec and we’re gonna look this up soon.
- Estela
- Yes! Because, so in my case, my image is not 100% of the viewport because we have, you know, the navbar above all, so it’s the viewport less the number. So if you make sure that your image is covering the entire viewport, in my case, the <h1> will be the LCP candidate and the LCP is a text-based element, which is, it should be faster to render than the image. So you can improve your LCP values just by making sure that the browser will choose another component as the LCP element.
- Tanner
- What a game.
- Estela
- Yes, it’s fascinating. When I discovered that last week, in fact I discovered it in a performance.now() conference last week talking to people there.
- Tanner
- Jealous.
- Estela
- Yeah, all the rock stars, all the web performance rock stars were there. In fact, my voice is kind of bad today because of last week conference, to be honest.
- Tanner
- Oh man. I’m so glad you got to go. That’s fantastic.
- Estela
- Yeah. I also learned a lot there and met many, many rock stars. It was really exciting. But yeah, that’s something that I recently learned. And where I learn… Web.Dev is, you know, a must because they are covering a lot of topics, not only for Chrome but for the website, you know, web performance in all the different browsers. They are not focusing only on Chrome. So that’s also good. But also I keep learning on Twitter from, you know, following different rock stars. And I would say attending to web performance conferences, but in fact last week’s conference was my first time in a web performance conference, so I’m kind of new on that. But yeah, I think that being in contact with other people that are, that know more than you, is the proper way to to keep learning. To make sure that you are not the smartest guy in the room, so you can keep learning from others that know more than you.
- Tanner
- Web.Dev, Twitter, find some rock stars. Are there any rock stars that you might recommend? Or like who’s at the top of Estela’s list? Not to name names, but…
- Estela
- Oh, no, no. I don’t want to give names, I’m sorry. But there are many of them. So you can have a look at my following list on Twitter if you want.
- Tanner
- Done. We’ll put the link in the show notes.
- Estela
- Because I try to follow many folks working on web performance to make sure that, you know, you have… It’s like my feed. To make sure that I can keep learning from them.
- Tanner
- Yeah. This LCP thing is fascinating to me. I’m immediately gonna go try and replicate it after this.
- Estela
- No, I think it’s kinda new. I tried by myself, you know, with overrides on the browser and it works, it works.
- Tanner
- Well, I even had today, an hour and a half ago, somebody came to me asking about CLS. They’re wondering, “Hey, what’s gonna be the layout shift impact of, we’re gonna do an A/B split test and it will inject a little section in the middle of the article, and we’re worried about it popping down when people are reading. How can I measure this? How can I know what the impact might be?” And I went to go show them like, “Hey, here’s how I might use the Performance tab in DevTools, or here’s how you might use the Web Vitals extension.” It wouldn’t fire a layout shift! I have no idea what they were doing. And we haven’t gotten to the, again, this is just an hour and a half ago, but for some reason, this clear layout shift was not being tracked as a layout shift.
- Estela
- Okay, because you are using maybe a CSS rule to smoothly…
- Tanner
- No, it’s literally, I was looking at some of it where it’s just they’ve got a <div> and they go, you know, element.appendChild(div). Boom, just drops it in.
- Estela
- And it’s not measuring as CLS?
- Tanner
- It’s not measuring a layout shift.
- Estela
- Oh.
- Tanner
- If, and again, I’m gonna find it, but these exceptions fascinate me. It’s actually how I got into, like, how I got the performance bug, was because Core Web Vitals came out, we were trying to make some optimizations, they didn’t actually work. In fact, our FCP, I was looking at FCP instead of LCP, but our paint times got worse because of our optimizations. And I went down a whole rabbit hole where I realized, oh, there’s actually a bug in Chrome where it ignored opacity zero. So we had one of those anti-flicker snippets on the page. Hide the page, change it.
- Estela
- And then, okay.
- Tanner
- And eventually they modified FCP to account for that, or I don’t remember if they changed the spec or just the implementation. But those kind of things, those have been some of the biggest surprises for me. And what I’ve found so interesting is how all of the metrics and the ways that we measure things have evolved. And we catch these, there are weird bugs. It’s not always your fault!
- Estela
- Yeah, but in fact, you know, the different metrics may evolve through the time. And that’s something, for instance, that CLS last year they modified how it’s calculated. And I know several cases where they saw an improvement, thanks to this change, on how the metric is calculated. And I know people saying, “Oh, we’ve done a really good job because we’ve improved our CLS,” and it’s like, no, Google changed how it’s calculated. But yeah, okay. Good job.
- Tanner
- And on top of that, seeing tweets about all the browser improvements. Like the Chrome team is working on making Chrome faster. Is your site actually getting faster or is it just the browser’s faster? I saw you did a talk recently, which, “Myths and Truths of…”?
- Estela
- Yes.
- Tanner
- I would love to know more about those myths. Like when you were coming up with these, I’ve experienced, like I have a visceral feeling watching some of this and hearing some of the points and going, “I remember that, I felt that, I didn’t know that was, I thought that was true.” Right? Did you have the same feeling? Like, are those things as you’ve learned over time? I guess what I’m… yeah. Do you know what I’m trying to say?
- Estela
- All the myths in my presentation, I covered several myths about web performance and SEO, and in my experience, I had all of them.
- Tanner
- Yep.
- Estela
- Because, you know, even Google is doing a good job writing documentation about Core Web Vitals and how to improve the user experience. But, you know, Google’s algorithm for search is kind of a black box. So we don’t really know the real impact of Core Web Vitals. We don’t even know if that’s a huge ranking factor or not. We only know what several people from the search team say in different interviews or different YouTube videos that they periodically publish. So I try to gather all the different information from these kind of sources and try to bring some light. And also the Core Web Vitals update, the Page Experience update, which is the name of the search update, is something that already happened for mobile devices last year, and also for desktop devices in February this year. So, so far, if you haven’t suffered any big impact because of Core Web Vitals, maybe, and you are not in the really good bucket for all the metrics, maybe it’s not that crucial.
- Estela
- I mean, we need to improve the Core Web Vitals, but for our users, not only for SEO, which is also something that maybe we can leverage for this improvement, but for users. I’ve also seen several teams prioritizing performance tasks, but for the wrong reasons, but for SEO. And it’s like, okay, it’s good, it’s something, you know, it’s good to improve the performance, but we need to make sure that we are improving for the right reasons, which should be our users, right?
- Estela
- So that’s also that makes me think that, you know, Core Web Vitals is good, but I have kind of mixed feelings. Because it’s like if we don’t have an update, a search update for SEO, involving the Core Web Vitals, I’m not sure if we should have so many teams, so many companies working on web performance. So, you know, mixed feelings. I’m sad because I think that maybe if SEO is not involved in that maybe it would be harder to make things done.
- Tanner
- Yeah… If we didn’t have the, what am I trying to say, the carrot and stick. If we didn’t have the… If we didn’t have the incentive of page ranking tied to Core Web Vitals we might not see as much interest.
- Estela
- Yes, that’s it. At least in my experience, you know, I was also involved in SEO, and I am part of the SEO industry, so I was also aware of what other SEOs were working on, and this Core Web Vitals announcement was something that impact a lot on SEO. So probably it just the Core Web Vitals announcement, and make sure that, you know, we need to work to ensure that our users are getting a good experience in these three facets, through the LCP, the CLS, and the FID. Probably the impact, you know, it could be different. Because now, the SEO people are pushing for Core Web Vitals and are trying to demonstrate and trying to involve business people, because if we don’t achieve this we won’t improve our SEO results. That’s something also I heard many times, that we need to improve Core Web Vitals because this is the only way to get better SEO results. And it’s like, okay, good to improve Core Web Vitals, but what will happen if once you get good Core Web Vitals, you don’t see that boost that you expect?
- Tanner
- Yeah.
- Estela
- It’s kind of hard. It’s kind of hard. Let’s see.
- Tanner
- Yeah, I’m wondering how long will the incentive last? What will happen if we start losing steam, or people lose interest? “Oh, I put all this effort and it really didn’t make a difference. Ah, performance doesn’t matter.”
- Estela
- That’s my main fear. But at least, you know, so far I think it’s been really helpful to help different companies to make things done. And also involve many dev teams, because I know many frontend engineers who weren’t aware of web performance. So I think this is also helpful for them to learn about web performance, and to keep them involved in this process and make sure, for instance, also make sure that your web page is accessible, is something that teams tend to be more worried about. So now web performance is also a topic that we need to ensure that we also provide a good user experience through web performance. So I try to be positive.
- Tanner
- Yeah. I mean, you’ve left us with a lot to think about now. I wish we could keep talking the rest of the day because now, yeah.
- Estela
- I’m sharing this because all these things are also, you know, around in my head, so now it’s also in your head.
- Tanner
- Yeah. I mean, for what it’s worth, what’s been so interesting for me about performance is once I… I feel like there’s… In my own learning, in my own experience, I’ve had kind of a bubble, a mental bubble, that I’m not, this is my first attempt to describe it, so I’m not sure it’s gonna make it out. Like I can feel myself, in my mind, maybe getting tunnel vision, or losing track of all the other things. Like performance was just kind of, I don’t know how to say this… Like performance was just for its own sake. We did performance for performance sake. At least that’s how it shapes in my mind, in a way. And in the past year I’ve seen a breakthrough, where I got on projects and somehow, oh, performance was useful completely outside of Core Web Vitals. Like performance was useful in explaining traffic mixes, performance was useful for explaining why a page might or might not be indexed, performance was useful for explaining why whole segments of our users weren’t converting, or weren’t buying something, or weren’t seeing some experience. They don’t see the experience because X, Y, and Z. You see disproportionately more social traffic because one side of the split is slower than the other and the analytics never fire. It’s been interesting to see performance become more useful outside of Core Web Vitals. I think that’s what I’m trying to say.
- Estela
- Yeah, yeah. In fact, there are many companies also sharing their experiences and their correlations through page experience, user experience, related to web performance, okay, with other business metrics such as user retention or conversions or getting leads and these kind of things. And there is a clear correlation. So it’s something that is really helpful to see other case studies to confirm these kind of things. So I think that’s really useful.
- Tanner
- I think that’s the future then. Sounds like that’s where we’re headed.
- Estela
- It’s the present.
- Tanner
- This is now!
- Estela
- Yes!
- Tanner
- Well then, I hate so much to cut us off now, but we’re coming right up on time. I want to switch over to closing here. How can people keep up with you, Estela? How can they keep track of what things you’re doing?
- Estela
- Well, I think the easiest way is to follow me on Twitter, which is @Guaca, like “guacamole”. Yes, like guacamole but just “guaca”. Long story.
- Estela
- We’ll ask about that next time.
- Estela
- Okay. I think it’s the easiest way because I also have a web page. I will try, I will try to, you know, try to share more content with people is something that I’m… Currently I’m writing my New Year’s resolution for next year, and I want to also share more content through blog posts. My website is EstelaFranco.Com, but currently you won’t see anything. At least it’s fast. It’s quite fast, so that’s good.
- Tanner
- Yeah. Gettin’ that Jamstack.
- Estela
- Yeah, Jamstack. Jamstack, so it’s fast.
- Tanner
- So we’ll see you on Twitter, @Guaca, see you on your website, EstelaFranco.Com, and then maybe we’ll see at some more conferences and meetups around.
- Estela
- Sure! I’ll try, I’ll try.
- Tanner
- Awesome. Well, Estela, it has been such a pleasure. Thank you so much for coming on the show.
- Estela
- My pleasure.
- Tanner
- Until next time.
- Estela
- Thank you so much for having me. Until next time.
- Tanner
- See ya.