In this new article, we will briefly review the Google Chrome DevTools and how they can help improve the speed of your website and, in turn, improve its ranking on Google.
The Google Chrome browser offers us completely free tools to perform a WPO audit of our website. If we have the necessary knowledge to interpret the information that these tools provide us, we can significantly improve our ranking.
What is WPO?
WPO (Web Performance Optimization) refers to all the actions we take to improve the performance of a website. In terms of performance, we refer to the loading time and the speed with which resources are displayed to the user browsing the page, i.e. rendering.
For this, Google offers us what is known in the SEO sector as the Google Chrome DevTools.
These tools provide us with important data about our website, but how do they really work?
When a user wants to access a website, their browser makes a request to the server, and the server returns a set of files to render the website. Once the browser has obtained and configured all the necessary files, we can analyze them through Google Chrome’s developer tools.
How to open the Google Chrome developer console?
To open the Google Chrome Developer Console, follow these steps:
- Right-click: Right-click on the web page you want to examine and select “Inspect.”
- Keyboard shortcut: Windows/Linux: Press Ctrl + Shift + I.
- Mac: Press Cmd + Option + I.
It is recommended that these scans be performed in incognito mode to avoid interference from browser extensions that could be detected as JavaScript files.
How to use the Google Chrome console?
Once you open the Google Console, you will see a menu with several tabs, each with a specific utility for analysis. Below, we describe some of the most important ones:
Items
In the Elements tab, the HTML code of the URL and its associated CSS will appear once the corresponding JavaScript has loaded. You can edit both as if they were a text document, and it will appear exactly as you overwrite it, which is very useful for making changes on the website.
But you may be wondering: Is this part useful in terms of WPO (Web Performance Optimization) or SEO? The answer is a resounding yes.
The great utility of this tab is that it tells us what Google reads from the URL in the first instance, including its elements and attributes. For example, if we found an attribute called data-nosnippet in some of the elements, we would be indicating to Google that we do not want it to index that element. So, if we are having a problem with a specific element, this is the place to analyze it.
Another common mistake is that if there is text that does not appear in the code until a button is clicked (for example, a drop-down), Google will not process this information initially since the necessary JavaScript must be executed first.
One of the most used features of the elements tab is that you can check the adaptability of the website to different screen sizes, which is crucial for mobile SEO. You can do this through the button that appears at the top left, which shows a laptop and a mobile.
In short, the Elements tab is essential to understand and optimize how Google and other search engines view and interact with our website, as well as to ensure that our page is mobile-friendly.
Grid
One of the most interesting aspects of WPO analysis in Chrome Developer Tools is what the Network tab offers. If you click on this tab, you will see the files that are downloaded at the selected URL and the order in which they are being downloaded. Once inside the tab, reload the selected page or press Ctrl + F5 to see the downloaded files and their order.
The information provided by this tab is valuable because you can see what is being downloaded first, how long it takes, and what its size is. This allows you to optimize the order of loading and the weight of the files. Additionally, by clicking on each item, you can get more detailed information. You can configure the analysis to show the most relevant data for each file, such as the protocol used, which is important for identifying files that are downloaded externally and optimizing their loading.
Sources
This section schematically shows the files used to load the URL and the domains from which they are downloaded. Here, you can see if you are downloading resources from external domains, such as Google Fonts, and consider downloading them to your own domain to improve loading speed. This is especially useful if downloading the resource from your domain offers a significant speed improvement.
Recorder
The recorder allows you to simulate a user’s navigation on the web and analyze the performance during this navigation. You can create a new recording, simulate the user’s navigation and analyze the performance to identify inefficiencies. The steps are simple: start a new recording, simulate the user’s navigation, and, when finished, analyze the results. This is useful for identifying specific performance problems and optimizing the user experience.
Lighthouse
Lighthouse is a tool built into Chrome’s DevTools that provides a score for a website, similar to PageSpeed Insights but more detailed. It allows you to perform analyses on both production sites and development projects. In addition to providing a score, Lighthouse offers specific recommendations to improve performance and user experience. It is a more comprehensive tool than PageSpeed Insights because it goes into more detail and allows you to test unreleased projects.
Other practical use cases for Chrome developer tools at WPO:
Optimizing resource loading
Let’s say you notice that your website is taking a while to load due to a large number of images. Using the Network tab, you can identify which images are taking the longest to load and consider optimizing or lazy loading them. Additionally, you can see if there are any resources that are loading from external domains and consider hosting them on your own server to improve loading speed.
Minifying CSS and JavaScript files
In the Sources tab, you can see all the CSS and JavaScript files that are being loaded. If you identify unnecessary or overly large files, you can choose to minify or combine them to reduce the number of HTTP requests and improve loading time. It may also be more efficient to download some of the resources you are requesting from external domains and have them loaded from your own server.
User Experience Analysis
Using the recorder, you can simulate a typical user’s navigation on your website and analyze how the page behaves in terms of loading time and performance. If you find that certain pages or resources are slowing down the user experience, you can take steps to optimize them, such as making them load a URL or certain elements before clicking.
