PageSpeed Insights Tutorial

Key Takeaways

hello and welcome everyone in this video I'm going to be giving you a complete Google pagee speed insights tutorial and show you how to take your scores from this to this what it all means and explain how and why higher page speed Insight scores will lead to higher search engine Rank and more organic traffic to your site Google page speed insights is a set of online tools provided by Google that analyzes and scores speed and user experience of a web page and then generates suggestions to improve performance on both mobile and desktop devices the reason why page speed insights is so incredibly important is that in 20121 Google rolled out their page experience algorithm update which now uses page speed and other user experience metrics Google collects as a ranking Factor the way Google does this is by collecting anonymized speed and user experience data such as core web vitals from real user devices in the field that they then put into what they call their Chrome user experience report or Crux for short and one way you can access this data is through Page speed insights at the top of the analysis right here so if your web page loads faster and is nicer to use than other sites for a particular search term you could rank higher than them in Google and get more organic search traffic but there are two more reasons why page speeed insights is extremely valuable number one it works in my experience sites and pages that score well are noticeably faster and nicer to use Google has done an excellent job measuring the user experience and providing detailed feedback on how to make it better number two a Google study found up to 24% less abandonment while waiting for a page to load on Fast sites I'll put a link to this study in the description this means up to 24% more traffic just by improving a site to the point where it meets the recommended thresholds not counting any benefits a site might see in improved ranking so now that we understand what's at stake here let's get this page speed insights tutorial started the easiest way to find it is right in Google by entering page speed insights into the search bar and clicking on the result that has this page speed. web.dev URL in it usually the first result I found this a little confusing myself knowing up front that it's a Google tool and looking for a Google domain to click also some people call Page speed insights Lighthouse but there is a difference I'll explain in a minute and if you do a Google search for Lighthouse you'll get a couple Google domains but the top results aren't what you're looking for page speed insights is the third link at the moment for that search the web inter face itself is very straightforward just paste the URL for the specific page you want to test here and click analyze however depending on the traffic to the site you're analyzing you might see a couple different things here this can be a little confusing at first so I will have to show you the analysis for a few different pages to explain everything which is where a tutorial like this becomes especially valuable the first URL I will analyze is actually from the Google documentation about insights which has sufficient traffic on the web so everything we would expect to see is available here in the results the first thing you will notice at the top is that there are two tabs that let you switch between metrics for mobile and desktop devices which is simple enough but unfortunately things get pretty complicated after that so let's roll up our sleeves and dig in this first box is the user experience data what you might hear people refer to as field data this is the data that gets put into Google's Crux report along with a few other factors that may affect ranking in their search engine the results in here are averaged from many samples of what users are experiencing all over the world in many different conditions you can see the specifics used for the insights in this box here so you can see this data was for the latest 28-day collection period on various mobile devices that the data is averaged over many samples and that this is what's going into the Chrome ux report or Crux just like I said to emphasize my earlier point but to add to that the data here is for full visits which may include data collected from multiple Pages viewed on a site by a single person if I switch to desktop the only thing that changes down here is that the info you are looking at is for various desktop devices the second box down here which is much bigger taking up the rest of the page is the lighthouse test which you might hear people refer to as lab data what you see in this box down here are from a single run of the lighthouse on the URL you provided and is intended to help you diagnose and fix problems found in the field data in the first box if you scroll down to the performance section just below the performance metrics you will see a similar gray box as above for this section here notice here we are emulating a mobile device throttling the connection to simulate a slow 4G connection to the net and that the measurement was just the initial load for a single page session and not averaged so even though some of the metrics such as LCP and CLS are also mentioned here you can expect results to be different from what you see above because they are from two different sources because what happens is when you enter the URL and click analyze two things happen at the same time first Google goes into the Crux report and retrieves the field data from the last 2 8 days for the site to display in the first box in second Google uses Lighthouse running on one of their servers in North America to measure the performance and audit the site in real time to provide the lab data in the second box so what are all the results inside these boxes and what do they mean well in the first box the first three items right at the top are the most important thing and they are known as core web vitals largest contentful paint LCP first input delay F ID and cumulative layout shift CLS if you click right where it says expanded view in addition to some ucy statistics I'll talk about in a moment there are links here confirming the fact that the top three are official core web vitals and one of the results here is pending as a vital if you click on the link it takes you right to detailed documentation indicating that this is a stable vital and if you scroll up more detail explaining what they are in a nutshell LCP is a measure of loading time FID is a measure of interactivity and CLS is a measurement of visual stab ability I'm going to make an in-depth video on core web vitals I'll link here and in the description if you're interested in a detailed explainer video to learn more about those back in the report another thing you will notice switching between mobile and desktop is that Google is failing their own assessment for mobile but passing for desktop which is a little amusing at first glance if you expand the view again for mobile you will see at Second Glance it is not so bad you can see that for LCP 55% of the loads were good and only 21% were bad and similar results for the other vitals this reemphasizes the fact that user experience data here that goes into the Crux report and affects SEO and ranking consists of many samples of real world user data in many different conditions from all over the world I should also quickly mention that another place you can find info from your Crux report is in Google search console if you don't want there to be any doubt regarding what insights are being used to rank your pages these insights can be very powerful but unfortunately if your site isn't getting enough traffic within the 28-day collection period what you see here might be a little different if you see anything here at all if you look at this little toggle switch right here which toggles page speed insights this URL versus origin you will see that it changes the result in just the user experience box and not what you're seeing down here in the lighthouse section when you have this URL selected that's pretty self-explanatory it's the metrics from the URL you entered before you click the analyze button but what does origin mean origin means the results have been averaged over all of the pages on the entire site the reason they do this is because there are some cases where a particular URL for a site may not get enough traffic for the results to be statistically significant and in that case the results will not even be shown here however if the URL is not getting enough traffic but all of the pages combined from the site are getting enough traffic then the results here will default to showing the origin only to demonstrate what this looks like I ran an analysis on one of moz.com URLs and you can see here that only info for the origin can be shown and if you hover over the question mark you get a tool tip that starts to explain this and if you click on the link a full explanation confirming what I'm telling you and to demonstrate the third case where there isn't enough traffic to show any user experience data at all I will run insights on my own personal about page URL but before I do that I wanted to let you know that I spent a ton of time researching and creating this video literally over 20 hours of my time because I didn't really find what I was looking for in one place and thought something like this might be useful to someone else out there so can I ask you a big favor if you are finding that this video is useful in Saving you time and improving your website's performance could you please click the like button thanks and if I miss something or if you have a question please post it in the comments and I will do my best to answer everyone okay so in the case of my URL you will see that insights simply says no data for this section and only shows the lighthouse test report instead so now let's go back to the original URL analysis and look inside the lighthouse or lab data box to see how it helps us diagnose issues and improve our site's performance whether we have enough traffic to provide user experience data or not the first thing I suggest that people focus their attention on is the mobile tab for the most part because for one thing most traffic is coming from mobile devices these days and so we should be striving to provide a good experience on mobile but also because anything you do on the mobile tab to improve things is also going to help the desktop performance in fact if you look at the accessibility best practices and SEO audit scores between mobile and desktop you're likely to see that those three are largely the same and fixing an issue for one will also fix it for the other all right let's go through a few of these audits now to understand how we can use the results to help us starting with the performance audit in the performance audit you will see a screen capture of the page on a simulated mobile device here so you can see the same thing Lighthouse is seeing once the page has finished loading then down here you can see the measurements including a couple of core web vitals and whether those are meeting the recommended thresholds or not as with before you can click click expand view here which will provide links right to Google's documentation that will help you understand exactly what is being measured here below that you will see several images taken of the site as it was being loaded at regular intervals in time to further understand what the lighthouse tool is seen when it loads the URL you can see a layout shift here where this text gets pushed down to make room for this table of contents here as an example of how this might be useful for troubleshooting that sort of thing is going to count against cumulative layout shift or CLS in the lighthouse test finally below that we have the detailed list of the Diagnostics and audits that were performed prioritized by severity including audits that passed and as we would expect if you need to understand what a particular failure means you can expand the audit to get the specifics on this particular url's failure to pass the audit as well as a link to learn more about how you can fix it but there is a lot to do here and it's a bit overwhelming where should we start well one nice thing about the performance section is that you can hover over the ring here and get an idea for which metric is contributing the most to the problems where we could make the most impact to improve performance or see which ones might just need one or two things done to it to get into the green territory from that we can see that since TBT is a large proportion of the ring but not too much of it is shaded there is probably a lot to do and a big impact we could have there so we can go down to the audit and click on TBT here so we can look at only the things that affect TBT and start chipping away at that now keep in mind before you start working on anything especially if you are using the lighthouse tests and don't have any runs of user experience metrics to look at you should run the analysis several times looking at the performance each time because it can vary quite a bit from run to run and you don't want to be chasing a problem that was just a fluke of a single run we don't have to spend a lot of time looking at the accessibility best practices and SEO audits they are mostly the same except a little bit more simplified than performance and they might have some additional audit categories such as some items to manual ually check and audits that are not applicable to your site if you expand any of the failing items in these audits it will show you exactly where it thinks the page is failing and provide a link directly to the documentation suggesting how you could fix the problem once again so now how do we actually use page speed insights now that we know what it does and how to interpret the results the primary use cases of course are related to increasing website speed starting with core web vitals and SEO to increase organic traffic to a site remember even without the benefit of increased ranking in the search results that Google study found we can still increase traffic by up to 24% just by getting a site to be within the green thresholds for its core web vitals and all the automated SEO audits that Lighthouse can perform real time are a great place to start for Onsite and onpage search engine optimization let's take a look at speeding up a WordPress website as an example how could we use our new tool to help us with that well the first thing you want to do is to pick a page or a couple pages from the WordPress website and run page speed insight ites on one of the URLs for those pages several times to get a baseline on performance after each run I suggest clicking on this button to copy the link for the results pages to the clipboard and pasting that results URL into a spreadsheet so that you can return to the exact results for that run at a later time next a typical thing to do would be to try out some different WordPress plugins geared towards increasing page speed a caching plug-in would be a good place to start to increase speed in my research for this video two WordPress caching plugins I saw people having really good success with were one called Breeze by cloudways and another called nitr pack so install one of these caching plugins enable and configure it and then run page speed insights on those same pages of your WordPress site again to see what the speed up is in the case of Breeze one Web Master was able to increase performance from 22 to 91 and in the case of nitro pack another was able to increase performance from 15 to 98 I will provide links in the description right to the time stamps in those videos where they install and configure those plugins so that you can duplicate those results quickly if you're interested and I should also quickly add that there are also plugins for WordPress that can be used to monitor multiple web pages on your site daily and log that info over time but a plug-in like that can only help so much because by this point you're probably noticing that both page speed insights and Lighthouse have some pretty significant limitations for user experience data you only get Crux report stats if you have enough traffic and the data only gets updated every 28 days which is a long time to wait to see changes have an effect and for Lighthouse you can only analyze one page at a time and that run happens on a server in North America and finally it's only looking at performance in Chrome and some other chrome-based web browsers so I made another video that will show you three ways to speed test many URLs including your competitor pages in bulk from many locations all over the world using both Lighthouse and some other tools that can also test web performance with other browsers I'll link that here and in the description but if you really want to have your you're mind blown check out this video where I will show you the hacks I discovered to optimize any site in just two steps to totally Crush core web vitals assessment and Achieve perfect page speed insights audit scores so check that video out and if you're not seeing links to any of the videos I've mentioned Please Subscribe and turn on notifications so you will get notified when they come out thank you for watching my in-depth page speed insights tutorial I hope it was really helpful for you if you have any questions leave them in the comments and I'll do my best to answer them all and I'll see you in the next one