Here you find the link to the recording of the webinar & slides regarding online SEOnerd Switzerland meetup how to prepare for Google’s page experience update with Rachel Costello.
Google is launching a page experience update to its algorithms in May 2021 which will focus on speed and user experience metrics, so the time to prepare is now.
In this talk, Rachel explains exactly what page experience is and why Google will be introducing it as a ranking signal. She will also go in to detail on Core Web Vitals – a set of user-focused page load metrics that will feed into page experience.
You’ll learn how to optimise your website for page experience and its different factors, which will allow you to benefit from the algorithm update, rather than suffer from it.
Full Webinar recording with Rachel Costello
Meet Rachel Costello
Rachel has spoken at major SEO conferences such as Brighton SEO, is a regular columnist for Search Engine Journal & supports the Women In Tech SEO community whenever possible. Although Rachel enjoys all things technical, she also has a keen interest in the written word, design and user experience.
Twitter @rachellcostello
LinkedIn Rachel Costello
Read Rachel Costello’s slides about page experience
Thank you Rachel Costello for your presentation
? A huge thank you to Rachel Costello, Technical SEO Consultant, Builtvisible. Preparing a presentation and being present at the meetup take a lot of time. The association SEOnerd Switzerland is nothing without speakers willing to share their knowledge. I am happy SEOnerd Switzerland got to welcome Rachel!
About #SEOnerdSwitzerland
SEOnerdSwitzerland is a non-profit association that aims at promoting and sharing knowledge about SEO (Search Engine Optimization). SEOnerd Switzerland organizes events in person and in webinars.
Join the community of SEO enthusiasts.
Follow us on Twitter @SEOnerdSwitz where we share slides, nexts events and articles we enjoyed.
Full transcript of webinar: How to prepare for Google’s page experience update?
Sara: Let’s go, start webinar. Okay, we are live.
Isaline: Hello!
Sara: Hello, everybody!
Isaline: Hi, everybody! We are so happy to welcome you here. So, first things first, let’s check that you can hear us and see us and that everything is fine and comfortable. And you can use the chat and just to tell us if you can hear us right. And… You can also say, “Hello!” in the chat and, you know, say what’s your background or whatever you want to tell us. I mean, it’s always nice to feel like we are talking to other human beings even though it’s a webinar. So…
Sara: Don’t be shy. Read something? Ah, okay!
Isaline: Oh yeah! The first one is from Barcelona. Hello!
Sara: Apparently, we–
Isaline: So, I expect that if you say, “Hello!” it means that you can hear us and everything is fine. And so, we are not going to wait too long before we start. Just a couple of other seconds.
Sara: So, some extra, hello. Ah, okay! It’s coming, okay.
Isaline: Oh, I’m so happy when I see people saying, “Hello! Oh, yes! We are–.” Thank you, folks. We appreciate.
Sara: So, that is fantastic! Apparently, they can hear us and they can see us.
Isaline: So, we have people from Barcelona, from Portugal, from Lausanne, obviously. Oh, and we have Tobias!
Sara: There is Tobias!
Isaline: The last speaker, also here.
Sara: Yehey!
Isaline: Someone from Geneva, of course. So, welcome everybody. We are really happy to have you here. I know that Sara and I have been doing lots of promo and LinkedIn and we sent many messages. So, I know there are some new people here. So, let me briefly introduce you on to our association. And, I have a slide for that, of course. So, screen sharing coming, and presentation coming. There you go! Okay!
So, Sara and I founded SEOnerd Switzerland about a year ago, now. Oh, my god! A year already, still can’t believe it. Because we used to work together and then, we wanted to have a project together because we enjoy each other’s company. And we were like, “Oh, but then, let’s talk about what we like and invite people to talk about SEO, too, so everybody’s happy.” And then we were like, “Okay, so let’s have a meet up so people can, actually, discuss and we can meet.” And, it used to be in a co-working space here in Lausanne and we used to have a drinks and crisps afterwards but this is all over now with Corona virus. So, but the good thing is, we can reach more people and we can have great speakers that we couldn’t have invited in Lausanne, right? So, I mean, all in all it’s not too bad.
So,welcome everybody! Here is, of course, all non-profits, all free. So, if you have any questions and anything, just drop us a message now in the chat or anytime, anywhere on the many channels that you can find us.
Before, we start let me introduce you to other cool events. You know that before I was into SEO so much. I did lots of copywriting and that’s why I still am the host of Content Strategy Lausanne and I’m joining here. I’m promoting the next event. So, Quinn Keast is exceptional. And he has published an open-source tone and voice guide. And he’s going to talk to us about his experience about entering the voice of a company like that everybody writes well in the company’s voice even though people are not copywriters. And also, what is really cool about Quinn is that he’s really into accessibility so you can trust what he says. I mean it’s inclusive and that feels good.
And the next event, I would like to tell you about is- Oh, my god! It’s the 2021 event of SEOnerds because today is our last 2020 event. I know. But, you know, in December, it’s Christmas, it’s crazy so we won’t have time for events.
Sara: We have to prepare.
Isaline: So, we are going to enjoy it today. So, we will start the year with a very important subject, ‘How to Optimize for Time To First Byte?’ If you don’t know yet what is TTBF, that’s a great acronym so go and check it. Many articles about that but the best of course is Roxana. And, you’ll get to ask her anything about that just like today.
So, before we start, we usually have a 30-something presentation. Today, we have Rachel, you can ask your questions either in the in the chat, in the conversation or you can use the Q&A. There’s a Q&A something so just asks your questions and at the end of the talk, Sara will go through the questions and we will ask them live and discuss. And… So, but just ask anything you want.
Sara: Okay, so let me introduce Rachel. Probably, if you’re here you know her. Okay, we all agree about that but let me anyway introduce her. First of all, my guess is then you know what happened last week. So… Google announced then the Core Web Vitals will roll out in May. So… That give us some times to prepare. We have some extra time because I was expecting the beginning of the year. So, champagne! And that gave some times for developer, for SEO to prepare and that is fantastic.
Why we asked Rachel to join? Because, she’s particularly well known and competent in Core Web Vitals. So, thank you Rachel for joining and helping us out. Today, what she will explain is like, what Core Web Vitals are? She will explain how they can influence your website and how to audit your website in a certain sense? So… For those then, want to know more about Rachel, okay? She’s a Technical SEO Consultant at Builtvisible. Okay. Builtvisible, okay. She has spoken to the major SEO conference and she’s a regular Columnist for trusted blogs, or several blogs or voilà. Also, she obviously is well-known for everything that is technical. She also is keen and she has a lot of interest in writing, design and user experience. Okay!
So, now I decided to get personal today. So, I will do something that never happens. I will explain a little bit my relationship with Rachel. So… I met Rachel because she was my Trainer at Brighton SEO, a few years ago. And… Okay, she become my mentor. I applied to the- I get emotional on that. So, I applied to the Women in Tech SEO Program. And… Rachel was my match and she was my mentor.
What Rachel you don’t know, probably, is, what happened when I applied to that program? There was my husband that was making fun of me because he was like, “Give in, Sara. So many requirements. You will never find somebody. Then, I will be your mentor.” And then, I find you. So, I was so happy and I went back to him. Obviously, after that he said nothing. I feel then I was- I feel that in my career I was very lucky because I met Isaline. I met you, and… Both of you, really helped me a lot and gain confidence like in speaking publicly, et cetera, et cetera. So, thank you so much to both of you.
And by the way, Rachel also gave me some great tips like for Blog Analysis and for JavaScript SEO. So, also for that, thank you. Okay! I did it! Then, it’s done. I gave my personal life out, so it’s enough about all this. And so, Rachel please go and speak about the topic of today, then it’s Core Web Vitals.
Rachel: Will do and thank you so much for the kind introduction. And, yeah, I’m very proud of what you’ve done since I first kind of had you on my training course. It looks like you two have built up a really great community already that just keeps growing. So, looking forward to seeing what is to come for this meetup, definitely. So, thank you again for having me. Let me just present my slides. Perfect!
So, obviously today, as Sara mentioned, I’m going to be talking about Google’s upcoming page experience update and within page experience, obviously, Core Web Vitals feeds into that. So, I’m going to be talking a little bit about exactly what that is and how it’s actually going to impact websites.
So, what I’m going to be covering is, yeah, looking at what the page experience update is, what it means for you specifically. A bit of context around why Google has decided to launch this and definitely what it means for all of us. Looking at the launch of Core Web Vitals and the kind of what those are made up of. What they mean. How to measure them. Looking at how to create a page experience audit. So, when the news of the page experience update was first announced back this year in May, I decided, I wanted to make sure our clients were ahead of this change wherever possible. So, I wanted to go and create this audit and put that together to make sure we can analyze these websites. Now, well, we’ve already been running a few already which has been good but I wanted to explain a little bit about how I put that audit together. And, so you can kind of create your own audits as well. I’m also going to be talking about how you can then, yeah, definitely prepare your websites for the page experience update. Some tips there on things you can optimize.
So, getting started then. I always say that you can actually learn a lot by keeping an eye on what tools Google is investing a lot of time in as well as the external comms that are coming out from them. So, I’ve always had a key interest in the user experience side of things, definitely, site speed and performance optimization.
And so, this is an area I was kind of monitoring anyway. So, I provided a little bit of a snapshot of Google’s activity in this area just to give you a top-level overview of what’s been going on. Obviously, this is an extensive. There’s a lot more going on or has been going on kind of along the way but I just wanted to give you a bit of an overview of what’s led us to this moment now with the upcoming page experience update.
So, back in 2010, PageSpeed was first used in desktop rankings. And then, back in 2018, then that was quite a long gap but finally as mobile overtook desktop in terms of traffic share, Google was investing more of their time focusing on mobile traffic. So, the speed update rolled out which impacted mobile rankings.
And then, things since July 2018, just really picked up in pace in terms of what Google was working on around speed and UX. So, you had the Google’s Test My Site Tool was updated. That was, it had a bit of a focus on showing the business impact of site speed. So, it’s clear that Google really trying to show kind of webmasters, SEOs, exactly, the impact they could see from site speed optimization. So, they were clearly trying to push the agenda of optimizing for speed quite clearly and trying to help SEOs get stakeholder buying as well by attributing revenue figures to speed improvements.
And then, you’ve got a Google Search Console rolling out its speed report which is really great to see.
And then, the PageSpeed Insights Tool then started to incorporate Chrome User Experience Report Data. So, this is quite interesting because it wasn’t just showing lab metrics. So, Chrome User Experience Report Data shows how real users are actually experiencing websites in terms of load times. So, this is where Google was really putting a focus on the user experience side of speed rather than just looking at flat metrics that you can kind of get from a test you run yourself. It’s showing you how users are really experiencing pages. So, that was really interesting development there.
And then, in May 2020, busy time for SEO is running around trying to figure out what page experience was and what Core Web Vitals are because both were launched in that same month. So, that’s a bit of a timeline of where we’re at now.
So, I luckily have been looking at speed for a while as a topic. So, it didn’t necessarily surprise me as much that this was coming. I knew they were, Google seem to be working in this area anyway but I’d always recommend just keeping an eye on specifically topics that Google’s focusing on. Not necessarily every little thing, for example, John Mueller comes out with I know, everything he says gets analyzed to death but looking at the topics is normally a good way to go.
So, thinking about what the page experience update actually is. So, the official definition is that it’s a set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information values. So, that basically means, how a page kind of loads? Is it usable on mobile? Is it navigable? Is it just an enjoyable experience to browse that website versus some of the more traditional ranking signals like on-page content, backlinks, page rank and things like that, which are a bit more objective whereas this is a subjective look at how users actually experience the web, which is really interesting?
So, what we know about page experience so far? So, this is definitely very important to Google. So, when they first launched the page experience announcement in the guide, they actually housed that within their Google Search documents on the Google Developers website alongside really key topics like indexing and JavaScript and mobile-friendliness. So, what this says to me is that, when Google’s explaining Google Search to developers, page experience is right up there in terms of what’s important for them to know about along with the likes of indexing which we think is really crucial as well. So, it just shows this is a really important topic going forwards.
As Sara mentioned, yes, the page experience algorithm update is rolling out in 2021. So, as was originally stated in the announcement Google said, “We’re going to give you six months notice before this rolls out so you can prepare.” And we’ve had that, so we’ve got the announcement now and so that gives us six months until May 2021 to get everything resolved. So, an example of why this is such an important thing to actually look at and work on is that, normally, I know when Google updates roll out, there’s a bit of chat on Twitter. One of the Google spokespeople will come out and say, “Look, we make updates to our algorithms all the time. There’s nothing to worry about. This is just how search works.” But actually, when there are things, we have to do to be able to kind of capitalize on any ranking increases, you could see from these changes, Google actually announces that in advance and actually gives these guides on exactly what to do. So, Google wants to give us notice before they make these changes. They’re actually going to impact rankings and page experience is definitely going to do that.
So, an example I’ve included here is thinking about back to mobile first indexing. We were given this guide of exactly what we needed to do and it turned out when mobile first indexing the concept was first announced, was back in 2016. We had a guide of exactly what to do and then it rolled out in 2018. So, that was just to give us enough time to keep up because Google doesn’t want to suddenly launch something and catch us off guard. Rankings are going to go all over the place because we haven’t had time to prepare. So, they want to make sure we have all the information we need to, definitely, make sure our websites are ready and like the rankings aren’t going to shift too much.
So, one thing to note here is that query relevance is still key for ranking. So, all your existing traditional metrics and ranking factors are important, for example, things like, page rank and everything like that. It’s not that page experience is going to become the one true ranking factor that’s going to kind of overcome everything else. But the important thing here is that, it’s going to determine rankings for sets of pages with kind of similar informational value. So, I don’t know if anyone remembers back when Google was talking about HTTPS as a ranking factor that was used more as a tiebreaker between pages that were had similar levels of content, were quite good, were quite relevant to queries but page experience is like that. And that, if you and a competitor’s website, for example, have quite a similar, for example, backlink profile or similar level of content in terms of quality, and keyword targeting, for example, Google will use page experience to decide out of those two sets of pages which is actually, going to be better for users. So, if you’re in tight competition with your competitors, page experience is definitely where you can kind of break that tie and kind of be pushed up in terms of rankings.
So, the different factors that feed into page experience are Core Web Vitals which we touched on a little bit already but I’ll explain those in a little bit more detail as well. But it’s important to bear in mind that Core Web Vitals aren’t everything in page experience. You’ve also got mobile-friendliness, safe browsing, HTTPS and non-intrusive interstitials. And, I’ll explain a little bit more about each of those and how you can optimize for them, later on this talk.
So, thinking about the launch of Core Web Vitals specifically then. So, we saw that these were launched just before the page experience update was announced. Not all too unfamiliar, some of the metrics in there. We were kind of aware of before but a couple of a new one in terms of Cumulative Layout Shift which I’ll explain in a bit more detail and that is a very, that’s such a mouthful. So, I’ll try and keep saying that without tripping over myself. So, to look at the official definition then, we’ve got Web Vitals as being an initiative by Google to provide unified guidance for quality signals that we believe, in Google’s words, are essential to delivering a great user experience on the web.
So, how I try to explain Core Web Vitals is looking at basically, the three most annoying things about websites. This is where we can think, we as users as we’re browsing the web, as we’re kind of trying to load web pages, what are the three things that annoy us most about websites. And I would say, these are probably mine.
So, you’ve got the first one, in terms of ‘loading’. Just the physical pain of watching like a never ending like loading wheel spinning. The page just not populating quick enough. That’s frustrating.
Next, you’ve got ‘interactivity’. So, the page seems like it’s loaded quickly. It’s there, you go to click on things but just nothing’s happening. So, the lack of interactivity, that’s frustrating for users.
And the third aspect here, it’s one that’s probably been monitored a bit less in the SEO industry. It’s a bit of a newer concept but I think very important. So, for example when I’m going through Twitter, sometimes, if I’m typing in the search bar for a particular hashtag, I’ll go to then click on one of the search results but sometimes like other results will dynamically be generated and be added in above of what I was about to click. So, what I’m ending up clicking is something that I don’t want to be. So, it’s basically looking at where the screen shifts around at the last minute, you end up clicking on the wrong thing and having to go back. So, that’s the ‘visual stability’ element of the user experience of page loading.
And so, thinking about these areas, this is basically where Core Web Vitals comes in to try and fix this. So, you’ve got the three separate metrics of Core Web Vitals that try to attack each of these areas and try to resolve those.
So, the reason why Google has chosen these metrics is, it’s actually making user experience a bit more quantifiable. It’s not us kind of asking Google over and over again in using bounce rate as a ranking factor trying to dig into their black box of how they analyze UX. But this is actually a much more quantifiable way for Google to actually look at user experience and try to measure it. This is why Google’s chosen these, the three metrics in particular which I’ll explain in a little bit more detail.
So, yes, we’ve got the three metrics of Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. So, they are basically there to measure the experience for page from the user’s perspective as that page loads not just the objective load times that you get from your lab data in testing tools. And yes, so they’re going to be focusing on these key three areas load performance, interactivity and visual stability. They’re also going to be updating Core Web Vitals annually. So, this was in the announcement documentation that Google sent out around on Core Web Vitals. So, it’s definitely a kind of watch-this-space kind of situation that Google said some of the things they want to start measuring more is things like smoothness of loading, as well as looking a bit, taking a bit of a closer look into privacy as well in terms of where the user’s privacy is being protected online. So, Google’s definitely going to be looking at how they can measure that more accurately. So, Core Web Vitals probably won’t just stop at these three metrics. It’s definitely going to keep evolving as Google wants to understand a bit more and generally in terms of page experience. I think this is definitely an area that Google’s going to keep making a bit more sophisticated as they figure out how to measure all of these different things.
So, here we go these are the three metrics themselves. So, you’ve got Largest Contentful Paint, I’ll just call that LCP. I’ll just use the acronyms from now to save me with all these mouthfuls of words. So, LCP definitely, it measures the time when the largest text block or image on the page is rendered. So, this is kind of looking at previously, you had Largest Meaningful Paint. So, LCP has replaced largest Meaningful Paint in Lighthouse, for example, sorry, First Meaningful Paint in Lighthouse, for example. So, it’s basically looking at when your hero element on the page loads to kind of look at the visual load times of the page.
You’ve got FID next. So, that looks at when it measures the time between when a user first like clicks a button or interacts with your site to then when the browser interacts and responds to that initial user input.
And lastly, we’ve got CLS which measures all the different unexpected layout shifts that occur on a page between when it starts loading and finishes loading. So, it isn’t the timed metric. You get a score there, but it basically looks at how much the above-the-fold content of the site shifted around as the page was loading. It we’ll give you a score there.
So, to put these in context of some of the more traditional metrics, we’re probably more familiar around site speed. So, we can see Largest Contentful Paint and looking at this guide here happens when they like the main image of the page loads so you can see here, are visually ready. That’s where Largest Contentful Paint would come in. First Input Delay is going to happen between the visually ready mark and then time to interactive there. So, it’s measuring that time between when the page is there visually and then when the browser can respond. And then, CLS is looking at the overall view. So, it’s looking at all of these different screenshots, basically and seeing how much the content shifted around as it loaded or if the page loaded and everything stayed where it was meant to which is what CLS definitely wants. It wants a nice static page. It’s not going to move around too much.
So, luckily, we’ve got some benchmarks on what we should be aiming for these metrics. So, you’re aiming for under 2.5 seconds for LCP, under 100 milliseconds which is quite a short amount of time for FID, so that’s one to look out for, and we’re looking for a CLS score of less than 0.1. So if you’re over 0.25, for example, this is going to be a bit of an issue.
But luckily, those are going to be quite easy for us to measure because Google’s done it all for us. So, if you look in Google Search Console, you’ve got some different reports for both desktop and mobile. It’s just they’re in there with all your other enhancement reports in Google Search Console. You can actually see a Core Web Vitals report there for you. So, they actually bucket the different issues there for you. So, you’ve got poor, needs improvement, and good. So, you can for example focus on poor CLS issues on mobile there and start drilling down into pages that are not meeting these requirements.
So, that gives you more of a top-level view of how your pages are trending in terms of Core Web Vitals performance. But I also recommend looking in PageSpeed Insight. So, this is where you can kind of add in a few different template pages. Run that on a page-by-page basis through these templates to get more of them a bit of a granular insight into how those pages are performing. You get the Core Web Vitals report there on the page as well. So, you can see, for example, at the top, the tool shows you whether or not your page passes or fails the Core Web Vitals Assessment. So, in this example this page has failed. So, now the immediacy is there. We know we have specifically six months to fix this before the update rolls out and potentially this could lower overall page experience signals and potentially your competitor could win out in terms of the rankings there.
So, now we know a bit more about what page experience is and what Core Web Vitals are. I wanted to talk you through a bit about how I put together the First Page Experience audits at Builtvisible. So, I didn’t really do an introduction I just jumped into the content.
So, I’m a Technical SEO Consultant at Builtvisible and we are Performance Marketing Agency based in London. And yes, so we have expertise in Technical SEO and Digital PR Content and Data Services. That’s kind of my background at the moment. I am very much client-facing. So, that’s what I’ve been doing for my client is digging a bit deeper into page experience and building out a bit of a process there.
So, the goal of putting together the First Page Experience audit was to future proof one of our client’s websites ahead of this algorithm update by looking at the speed performance and UX of key page templates. So, we’re looking at future proofing in terms of making sure the websites optimized ready to go ahead of the algorithm update. And just generally, keeping a bit of a UX mindset around our optimization strategy because as we can see that’s kind of where Google’s going even more in the future. So, definitely the way to keep up with Google. Not only keep up with but actually kind of future proof is to look at these areas in terms of UX and speed and things like that.
So, this is the overall structure I ended up putting together. So, some of the things to note out here is I added a priority list. So that’s something we do out in our audits is we always have a list of prioritized fixes ranging between low priority to high priority right at the beginning. So, the client knows exactly what needs fixing, and then they can get right to the detail rather than kind of bombarding them with too much explanation. Too many words they can just get in and so that their developers also, can open up the document and see exactly what needs fixing. As this is a relatively new topic, clients and stakeholders might be completely confused by this. So, I have put together some commentary in my audits. I think that’s useful just for setting the scene. You can always summarize some of the things I’ve talked about earlier in this talk in terms of what page experience means, and all of that. It’s useful to include some benchmarking as well. So, this really sets your website against its competitors. You’re showing where you’re falling short and where competitors are actually seeing scores that are better than you. So that’s really useful to set that out from the offset. That really gets buy-in in a way when you can show stakeholders that our key competitor is this much faster than us in terms of a specific site speed metric, and all of that. So that’s always really useful. And then, the rest of the audit, basically is breaking down those. Those key pillars of the page experience signal. So, we’re looking at a section on Core Web Vitals fixes, looking at mobile-friendliness fixes, safe browsing, HTTPS, and interstitials. And then, yeah, list of resources at the end for their developers potentially to get a bit more information if needed.
So, this is something I really want to stress is that, yeah, Core Web Vitals is definitely just one aspect of page experience. And why this is so important to bear in mind is that, you could, for example, run a Core Web Vitals audit and that could be great. You could optimize for the user experience of a page loading. But if you miss out on analyzing your site security issues, for example, or mobile usability, your overall page experience signals are still going to be quite bad. For example, if you have something as serious as malware on your site, Google’s not going to see your page and think, “Oh, there’s really harmful software on here but they’ve got great Core Web Vitals scores. We’re going to bump them up.” That’s just not going to happen. Google’s not going to want to serve dangerous websites to users. So, you have to have this like full rounded approach to page experience optimization. So, that’s really key to bear in mind there.
So, these are the main tools I like to use for page experience auditing. So, you’ve got Google Search Console, obviously. As we’ve looked at already, they show you those useful reports for Core Web Vitals performance. But what Google Search Console, also has is some reports on security issues and mobile usability issues which I’ll talk about in a bit more detail later on.
You’ve also got PageSpeed Insights. Again, this is more of a speed aspect but this is really useful, as I mentioned, for looking at Core Web Vitals scores as well as actually site speed, fixes and implementations. It gives you some really good guidance there.
Next, we’ve got WebPagetest. So, I find this really useful for showing the visual aspect of sites loading. So, you have a really good film strip view in there where you can add in your website, add in your competitors, set them all to be tested and then actually shows you kind of second by second how each of the websites compares in terms of, you can really easily see where LCP scores are low versus competitors because it’ll show you there as a good comparison to stakeholders.
So, Chrome DevTools is a really good one that I use a lot for not only Core Web Vitals auditing but also, I like to use it to look at interstitials as well. I’ll kind of show you how to do that but if you go into the performance tab on Chrome DevTools and select screenshots and run a report there, it’ll actually kind of show you visually how the page is loading as well. It’ll show you all sorts of like page layout issues as well. So, I always recommend digging around in Chrome DevTools. And also, in there you can actually see exactly what the LCP element of your page is as well.
You’ve also got the Mobile-Friendly Test. So, obviously, mobile-friendliness is a key pillar of page experience. This one’s a really good tool to run.
You’ve also got, so we use Screaming Frog as one of our crawlers of choice. So, any website crawler you want to use, really, is really useful for analyzing the HTTPS pillar of page experience. As well as looking at things like insecure content and, yeah, you can also do some interstitial analysis if you use the JavaScript rendering feature of Screaming Frog. And it’ll show you the visual output of rendered pages and you can kind of scan through interstitials that way.
Another tool we use is, URL Profiler. So, this is quite useful for doing these types of checks in bulk. So, for example it can query both the mobile-friendly test API and Google’s safe browsing API at scale. So, if you, for example, look in Google Search Console don’t see any particular issues or the issues are quite vague in, for example, the site security section or like the safe browsing area, you can actually query the API to look at some pages at scale to dig into this and see if the issue is actually bigger than potentially Search Console is telling you that it is.
So, this is where the visual examples come in. So, this is an example that I was mentioning before around using WebPagetest. So, an example here is that, for example, you’ve got, so I would say, for context, I ran this across a couple of different UK weather websites. So, you can see at the top that the Met Office, actually, kind of had quite good visual loading scores especially compared to competitors. But one of the issues kinds of around the four second mark, is that you can see they have a few different warning labels, and tables, and forecast banners that pop in and then push the rest of the content down. So, the original forecast you have is then shifted down on the screen. And so, that’s going to affect your CLS score.
Whereas you have Accuweather, which is the third one in the list, they are much slower in terms of visual loading but what they do well is that when their content eventually does load in, nothing shifts around to accommodate that. It doesn’t move anything else on the page that’s already there. It just loads in a reserved space. So, again, one metric kind of isn’t better than the other is good to have good scores in all of them but this is an example of showing exactly what competitors are doing well that your website could actually benefit from.
So, this is just an example of what we ended up coming up with. So, we ended up selling this as a site speed audit. So, this is something we were planning to do for the client anyway and they’re a bit less familiar with page experience. So, we did a site speed audit and tagged on page experience as well but it just depends on kind of how you can best communicate this to your clients. Obviously like, I mentioned, the page experience audit itself, I didn’t just look at Core Web Vitals, I looked at the other aspects as well but it’s kind of just about trying to think about the way your client uses language what they’re familiar with, what they’re comfortable with. Just to make sure you can actually, get these things looked at and implemented. Whatever you need to do, basically, to get this into the development queue because, yeah, we’ve got six months before this rolls out. We’d better get a head start on this where possible.
So, using some of the experience I’ve had with page experience auditing already and some of the research just in general as I’ve done into this topic because it’s a really fascinating topic. I’ve compiled some insights there and to try and help you when you’re thinking about what you can actually do for your website, right now to try and prepare.
So, first step, definitely, run a page experience audit for your website to get a better idea of these like UX and performance issues on your website. So, after this talk if you have any- There’s a question time at the end which is good but feel free to reach out to me on Twitter, LinkedIn. I’ll be happy to have more of a chat with you in general around page experience auditing, definitely.
So, some tips on optimizing for Largest Contentful Paint. So, we are going to want to be looking at some tips here in terms of one of the things I actually recommend to clients is pre-loading quite often, especially if the Largest Contentful Paint element on your page is an image, for example, or it’s some text. You could potentially look at adding in, for example, a ‘link rel=”preload”‘ attribute for that element just to make sure that- so what that tag basically does, it tells the browser to load that element in first rather than just doing its thing and trying to load everything as it sees fit. It’s about giving more control and or taking more control back from the browser in terms of what needs to be loaded first. You also want to look at things like eliminating render-blocking resources, removing unused scripts. Basically, just trimming down JavaScript on your website and reducing any unnecessary scripts that are going to be blocking the load time of your page that will then prevent your hero element to be loaded as quickly as possible.
Another one, in if your LCP element is an image, I definitely always recommend compressing file sizes there so that can kind of be loaded as quickly as possible. And as well looking at tactics like deferring off screen images. So, things like implementing lazy loading could be quite good here. So, the browser’s not overwhelmed by trying to load too many things. It can focus on the above-the-fold content in the viewport and kind of defer load the rest as the user then starts scrolling down.
So, this is just an example of how you can see what the LCP element is. So, this is going into Chrome DevTools. If you go into the performance tab and run a profile there. If you kind of hover over the waterfalls section and you can see the different elements when you hover over LCP. You can see on the left-hand side the element that is has been determined as the LCP element is highlighted there. So, you can see on this page in the New York Times, it’s the header image that is the LCP element. So, you can kind of start digging into that a bit more.
So. some tips on looking at optimizing First Input Delay. So, this is looking at optimizing the interactivity of your website. So, there’s a bit of an overlap with some of the more general tests you run for Largest Contentful Paint. This is just because JavaScript optimization is kind of just best practice in terms of site speed. Because JavaScript’s quite resource intensive, it ends up taking up a lot of the main thread time and all of the browser work kind of ends up being quite used up by JavaScript. So, this is where, for example, looking specifically at long tasks, this was one of the main things that came up in a page experience audit I did for a client where long tasks were actually, taking up so much of the main thread time that users then weren’t really getting their responses that they expected to their interactions in time. So, some examples you can look at here is looking at code splitting and maybe serving code in smaller chunks or maybe even using web workers to deliver code off the main thread.
So, how you can look at long tasks? Again, into my favorite Chrome DevTools. We look at the performance section here. So, if you look at the waterfall view under Main, you can actually see long tasks are highlighted with a little red triangle in the corner. And if you click into those and you then select the bottom-up view in the view below, you can, actually, then drill into what the actions were that were actually creating this long task that were blocking the main thread from helping the browser to interact, basically. So, you can see here, for example, compiling JavaScript to taking a long time as well as parsing HTML, such kind of helps you drill into that a little bit as well.
So, looking at Cumulative Layout Shift and how to optimize for that. So, one of the key things to do here is actually, just a simple thing of specifying image and embed dimensions. I know, this is something that’s often neglected especially for responsive sites because everything’s kind of meant to shift around anyway. But if you miss out dimensions, this could actually create these CLS issues where the browser doesn’t know exactly how big the resource is going to be until it started loading the page and that’s where the page overall layout starts shifting around to accommodate for that. So, you could do this through a simple HTML tag or you could, for example, use a CSS aspect ratio box just to block out the required spaces of your images and embeds to make sure they’re loaded into the right space and they’re not kind of rescaled and resized as kind of the browser continues to load them.
Another important thing to do for kind of images embeds and actually advertising as well. I know, ads can be like a huge killer for CLS scores because they just pop up and shift everything around. And so, definitely, if you have to have ads on your website, definitely make sure you reserve space for those. So, this is basically around just pre-computing sufficient space so you kind of block out the right size on the screen for those to load into even if it’s a blank box at the beginning. It’s better having that than the page shifting around and creating frustration for the user on their end.
So, this is an example of CNN, actually, does this quite well. So, this is where I’ve added the screenshots. I’ve ticked that in Chrome DevTools in the performance tab. And you can see here, if you take screenshots you can hover over the visually loaded page and you can see kind of around 700 milliseconds. They have just a blank box but that’s where a video is going to be loaded into. So, kind of then when the video does load into, yeah, it has that reserved space. So that’s an example of kind of a site that does that well.
So, looking at mobile-friendliness. This is looking at the pillars of page experience beyond the speed metrics. So, this is definitely something you can look at using Google’s Mobile-Friendly Test, the Standalone Test or the Mobile Usability Report in Search Console. Some of the key things you want to look out here are kind of incompatible plugins, viewports not being set, usually, kind of websites that are designed desktop first and then don’t really scale properly to mobile viewports. So, this the example of where this happens is like your desktop page doesn’t really scale to mobile. It ends up that the text is kind of really zoomed out it’s hard to read. It’s all of your clickable elements and links aren’t really navigable. So, that’s definitely something to look out there.
As I mentioned, so we use URL Profiler at Builtvisible. You can use this to actually query the Mobile-Friendly Test API to look at pages in bulk rather than kind of running page by page basis tests with the Mobile-Friendly Testing tool. So, this is what the Mobile Usability Report looks like in Google Search Console. So, you can start drilling into these issues this way.
So, thinking about safe browsing. So, safe browsing, basically means whether or not a site has any malicious or deceptive content and so this can include things like malware or even phishing contents. This is something Google’s really keen to keep away from users. They want users to have definitely safe experiences when they’re browsing and through their search results. So, one of the ways you can start looking at whether your site is actually safe is to look at the Security Issues Report in Google Search Console. So, this will show you where you’ve got, for example, hacked content or malware and things like that. So that’s a good starting point.
So, again if you want to look a bit deeper and if you’re not really seeing anything in Google Search Console but wants to make sure, again you can use URL Profiler to query the Google’s safes browsing API just to run this on a broader range of pages to get a good insight into whether or not there is actually any deceptive content on your website that could bring down your overall page experience signals. So, yeah, this is an idea of what the Security Issues Report looks like in Google Search Console. So, you can kind of go into that and look in a bit more detail in terms of what those issues might be.
So, HTTPS is something we can kind of easily spot check on pages in terms of a URL view just looking in the browser. So, Chrome flags whether or not a URL is secure or not But I would say that, this isn’t enough to gain a more holistic view of your HTTPS and security issues is definitely use your website crawler of choice because then you can get a list of all the different URLs. But it’s not just URLs that can be an issue here.
One of the things that gets missed off in HTTPS audits is the, like resources and embedded content there. So, for example, images being served on HTTP links, this could be an issue. So, it gives you this really holistic view there. So, there are some things to start looking at is looking at the whether your certificates expire, looking at TLS versions and things like that, basically.
So, Screaming Frog is quite good for this because they have an entire security section where you can look at, for example, if you’re serving a form on an insecure URL would be a real issue because that means that your users’ personal data potentially payment data is more exposed and more vulnerable.
And then finally, the last section of the page experience audit would want to look at interstitials. So, this is definitely an issue in terms of rankings. Google will actually penalize websites that have large intrusive interstitials that are going to cover crucial content. So, you can spot check this yourself just like by using a browser by emulating that yourself and having a look using your judgment of, would this annoy me as a user? Is this blocking up crucial space? But also, you can run a Screaming Frog crawl like I mentioned, just turn on JavaScript rendering and just flick through the different screenshots there. As well as you can use Chrome DevTools, as well the screenshots feature there just to kind of have a look at how these pages were kind of impacted visually by interstitials.
So, what I mean by this, I know kind of publishers have a bit of a paywall but this is an example of an interstitial that the user, it blocks everything and the user has to click to exit that. So, if you had this, for example, on an e-commerce site just to sign up to the newsletter, this would be a real issue and your website could be penalized for it. Whereas you’ve got the example from misguided on the right-hand side where they have a little pop-up at the bottom. It doesn’t push any content around. It’s not loaded the top so it doesn’t push the content down in terms of CLS but it’s pretty non-intrusive and the user can still browse the website as normal even if they don’t press ‘X’ to exit. So, that’s the main thing, their journey isn’t impacted.
So, I’m aware I’ve talked through quite a lot of stuff. It’s a big topic but just to sum up the key things I’ve talked about. So, the key thing to take away here is this update is coming soon. We’ve got six months to kind of prepare ourselves before this all rolls out. So, the game, the key thing here is to definitely optimize your website now so you can get ahead of the game.
Secondly, like I’ve mentioned before a Core Web Vitals audit’s not going to cover it. Make sure you’re looking at all of the different elements of page experience in really getting to grips with what they are and why they’re important for overall user experience. So, you can kind of provide the best experience for your users, basically.
And then, we’re also wanting to look at user experience in general. So, this is becoming an ever-increasing kind of focus for Google and its algorithms. So, if you can implement more of a user-centric optimization strategy for the websites you manage, you can then start to kind of feature proof your websites and get ahead of Google because that’s where they’re going, basically.
So, I’ve included a few resources here, I’m sure I’ll share the slides out so you can kind of dig through those afterwards.
And that is all from me! Thank you very much for listening! I will stop sharing my screen now.
Sara: Oh, thank you so much! It was so complete and I’m sure then everybody have learned quite a bit. So, thank you. So, we have just a few minutes for the questions. So, there is one question that was like in the chat. They already saying thank you. So… Are live chat boxes considered as interstitial? That is one.
Rachel: So, first of all apologies for running over. Again, I don’t have as much time to answer questions but feel free to reach out to me on Twitter and we can kind of carry-on conversations there.
I would say, they are if the box actually kind of pops out whereas sometimes you might have a little notification that flashes up. If they’re kind of covering a lot of the screen, if it pops up and it kind of covers all of the content that the user is trying to actually view and then this could be seen as an interstitial potentially. So, that’s definitely one to look at about whether you just have that flash up as a little notification rather than the whole chat box kind of popping up and obstructing contents. That would be one to look at from a design element on just how much visual space that would take up.
Sara: So, other question, how are you solving the Cumulative Layout Shift when in past is due to ads?
Rachel: Sorry, let me try and find that.
Sara: So, it’s in the chat. Push down ads, ‘ids’ is ads. Sorry.
Rachel: No worries.
Sara: Sorry. So, ads, yes! How they’re pushing down? Yeah.
Rachel: I’m sorry, yes, I found the right question.
Sara: Okay.
Rachel: So, yes! Ads, like I mentioned in the presentation, ads can be a huge impact on CLS scores. So, yes. I would recommend that any ads that are pushing down content, any that have to be served, I think we’re looking at definitely the main viewport at the top of the page, above-the-fold content is critical here. So, any ads that have to be shown there, I would definitely recommend, like I mentioned in the talk, reserving space for those and setting placeholders. So, if they pop up, they can arrive into those little spaces there. Another useful way-
Another way this is useful, sorry, is that if you have ads sometimes, they’re populated, sometimes they’re not. It depends on whether kind of you get those uploaded or not. Those boxes will still be there rather than the page kind of shifting around as when ads kind of appear. So, yeah, definitely reserving space for those would be ideal. If not, just thinking about how you can maybe add those lower down to the bottom of the page. So, thinking about how they’re definitely not going to impact the content that the user can already see and kind of shifting that around. So, that’s definitely the priority.
Sara: Okay, super. So, we will take some extra questions. So, I actually thank you for the massive presentation. On May 21, can we expect Google to provide a visual indicator in the search result for top performing site. I don’t know what it means visual indicator.
Isaline: Yeah, maybe it’s like the stories, you know, like–
Rachel: Yeah.
Sara: Ah, in that sense! Okay, yes, I see.
Isaline: The little sign something, yeah.
Sara: Ah, okay.
Isaline: Well. Who knows? It depends.
Rachel: Yeah, that’s the thing. I’m not sure really potentially because I know this could impact, yeah. You don’t need to be on AMP like if you have good page experience signals, that’s going to impact there. So, that’s one that- I don’t work for Google. I’m not sure but it’s definitely one to kind of keep an eye on. Potentially but I think because page experience is kind of so broad and it feeds into lots of different areas. I’m not sure if they would but again one to watch out for anyway.
Rachel: Oh, Isaline, did you have a question? I saw you before raising your hand.
Isaline: So, my question basically is… Thing is… Here, it’s like- Here in Switzerland, SEO is like still sort of emerging. So, sometimes I want to grab new clients because I love their website or I love what they’re doing. And I start doing the audits and I’m like freaking out because there are so many different things that go so wrong. And so… And I get lost on how to prioritize like, should I first go for what the competition does better because like, I want to align with the competition? Or should I first go for the older ranking factors? Or should I just strategize on like, be ahead of my competition and go for the Core Web Vitals or like, you know, which direction should I take?
Rachel: Yeah, so that’s a great question. I definitely think focusing on your like core traditional like technical SEO is definitely the way to go to start with because like I mentioned, I think right at the beginning of the presentation, Core Web Vitals and page experience as a ranking factor are only going to really impact websites that are in very direct competition with others where they’re already quite well-optimized but it’s about being that tiebreaker between quite good websites. So, I think definitely, to get up to that level you definitely, have to have a really strong foundation. So, I’d say page experience auditing is really important but you really need to get your foundations and your technical SEO right, first. Like again, you’re not going to suddenly rank just because you have a really fast mobile usable website and that doesn’t have great content or has quite a low backlink profile that doesn’t have much page rank. You kind of have to build that out first and then you can kind of build on top of that with page experience auditing. So that’s kind of what I’d recommend.
Isaline: So, we need to be careful not to follow the new trends because I’m pretty sure everybody is going to talk about these Core Web Vitals and sort of ask for it, also. So, I should actually explain them to go back to the like fundamentals and start from there if I see that they are behind in other ranking factors.
Rachel: Yeah, and I think maybe, also kind of prioritizing those fundamentals but looking at it from like a user-centric kind of view. So, not just purely looking at all of the technical issues but maybe trying to prioritize things that are kind of impacting users on the front end as well. So, maybe having a bit of that view to kind of help prioritize. But, yeah, that’s definitely something to make clear is that you shouldn’t just go straight to optimizing for this. Don’t neglect your essentials because without really strong content and all those foundations then there’s kind of nothing for you to appear within the SERPs anyway. So, yeah, this is just kind of like a nice add-on at the end. But also, definitely very important because there are lots of like, for example, I can think of like e-commerce, like fashion brands are very, very competitive and they’re like really on top of the competitors and what each other are doing. So, sites like that, I think are probably going to be impacted a lot by this because this is where they can finally step ahead of their competitors and kind of be a bit more confident in that rather than always checking what their competitors are doing.
Isaline: Yeah, okay. Thanks, very helpful!
Sara: Okay, so we still have like one question that you already answer in the slides. How important do you think Core Web Vitals would be in terms of SEO compare with HTTPS and other ranking factor? So, almost- Yeah, you already gave some indication in this slide. So, as we are running out of time, maybe we switch to the other one.
What do you think are the key metric to optimize and how for a publisher news site, that has an audio streaming signal in addition to news? Okay that one will ask just for this question probably for 20 minutes. So… I don’t know if you have a quick answer if not, we close it here.
Rachel: Let me just find that, so just to sum up, so we’re talking about publisher?
Sara: Yeah, exactly. It’s a publisher and yes, so he has like also a streaming signal in addition to news.
Rachel: So, I think definitely looking at, well, that’s the thing, I think definitely looking at those Core Web Vitals metrics will be really helpful there. And so, I would start looking at what your- First of all, what your visual loading is like? So, looking at things like LCP, looking at then the interactivity in terms of First Input Delay and looking at Cumulative Layout Shift. Luckily, Google’s kind of packaged these metrics up nicely together so we can kind of focus there. And so, I definitely start by looking at those. And yeah, kind of see how you get on because I would say those are kind of ones to prioritize especially around kind of page experience, anyway.
Sara: So, okay. Do you want to finish with something else?
Rachel: Oh no, I was just going to say, again, like if you have more questions or more specific examples, so I can kind of talk to you in more detail in like Twitter or, yeah, if you reach out to me after this that would be good. And I can upload my slides to Slideshare and I can send the link out if that would work for you. So, yeah everyone has all the resources and all the slides to kind of go back to a later date.
Sara: Anyway, we record also the webinar so we will share it in the community and with the slides too. So they will have webinar and slides and they can go back and check if there was something important and they missed it. They can see it again.
Okay, Rachel, you know, then I love to compare everything know what is happening in your agency, what is happening in other agencies. So, a little bit of my experience what I realized and like a Large Contentful Paint is something then almost all the website that I analyzed have a problem in that. So… I don’t know if Google is so strict, I don’t know what. But, I don’t know, if it is something that is happening here in Switzerland or if something then you also have, do you also have this feeling like mainly, that is like almost all websites have this problem. And then, like Cumulative Layout Shift a little bit less and for simple delay, maybe people already fix it in the past. I don’t know exactly how it’s happening but that I don’t see it so much. So just your background, do you see so much of that so maybe people which should focus a little bit. By people, I mean, developers should focus a little bit on that in future website that they are developing. So, reducing JavaScript, for example, and this kind of thing.
Rachel: Yeah, I definitely agree. I think, one of the problems is that as websites are getting more kind of sophisticated, there’s so many more elements on there, lots more heavy JavaScript. And this is something that can easily happen when you’ve got a lot of legacy code. And there’s lots of different development teams adding all these different features. You’ve got things like third-party tracking scripts like all of this JavaScript ends up being really heavy. And I think JavaScript is one of the biggest like contributors to slow like visual load times. So, I think that’s definitely something that I see a lot as well. I think when you’ve got a smaller team actually working on the website, it’s much easier to send across some changes. It’s one developer or one development team, they can kind of get that added in but when you’ve got a really large like development roadmap or a queue, it’s really hard to kind of get those changes in. So, that’s kind of why sometimes even the bigger websites really struggle with this. It seems like it should be such a simple fix but they’ve got so many other things they want to do and obviously they want to kind of track their revenue and everything. They would rather kind of prioritize that and all like third-party scripts and ads and things versus actually making the website load visually much quicker.
There are things you can do like, I mentioned a bit around ‘link rel=”preload”‘ and other tips like that and that can kind of help to improve like the visual like appearance of load time without actually kind of stripping back all of the codes. So, you can kind of be a bit more selective with, yeah, your resource hints that you can add in into Chrome, into your browser, sorry, to kind of help Chrome and the other browsers to kind of pick and choose the more important things to load first. So, yeah when you can’t get around actually making the page really fast. There are tips you can implement to make it appear like the page is loading quickly because that’s what the user cares about. They don’t know how long the fully loaded metric is. They just know when an image is popped up in their viewport, anyway.
Sara: Okay, thank you so much, Rachel. You answered also my question, thank you. Okay, go Isaline for the closing announcement.
Isaline: Yeah, thank you so much for your time, and the presentation. We know that it takes hours to present, to prepare such a presentation and then. your time being here tonight. So, thanks like a thousands because we would be nothing without you coming And… And also, I mean, it’s the best way just to ask questions to someone more experienced or someone who knows a little bit and then it’s just awesome! I mean, what else?
So, thank you so much and so I shared in the chats, Twitter, handouts. So, just follow us, ask any questions. And as Sara mentions, we’ll share the slides through the meet up community. So, we’ll send you an email probably Friday if we can, or Monday morning but don’t worry we won’t forget.
Sara: Probably, Monday morning, that is the right answer.
Isaline: And thank you so much for being here and we are really happy to sort of welcome you even it’s only you can see us. But we’ll be thinking of social chats and stuff so maybe we’ll do something in 2021. So, thank you everybody.
Sara: Bye and thank you, Rachel and so Isaline. Bye-bye.
Rachel: Thank you! Bye!
Sara: Bye-bye.