We are all surrounded by powerful tools which are processing huge amounts of data. I think many of us couldn’t imagine our day-to-day activities without crawlers, scrapers, etc. However, it has made us forget about a super-useful tool which was free and ready to go immediately after launching Chrome Browser. I’m talking about Chrome Developer Tools. I know, it won’t substitute for crawlers and other powerful tools. But it provides so much interesting data that I would recommend using it while technical SEO auditing.
If you want to see and test the newest features in Chrome Developer Tools you should download the experimental version of the browser: Google Chrome Canary.
This article is kind of an overview of the most interesting features for SEO professionals. Some of them are really basic, the other features reach for more complex concepts. So let’s browse the most interesting options from my point of view.
Developer Tools in Chrome
Chrome Developer Tools is a set of tools dedicated to debugging a website – the vast majority of options would be used only by web developers and programmers. However, SEOs are interested in the website’s quality and ‘behavior’ too. Chrome Developer Tools provides this information immediately.
How to access Developer Tools:
Open the browser and go to the page you want to analyze. There are three ways to access the tools:
- Chrome’s Menu: More Tools → Developer Tools
- Shortcuts: Windows (CTRL+Shift+I OR F12) or Mac (Command+Option+I)
- Inspect: you can inspect all the element on the website (Right-Click → Inspect)
The main view:
Mobile vs. Desktop View
The default view of the website in Chrome Developer Tools is desktop mode. However, in the mobile world, a mobile first indexing reality, it’s crucial to know if the mobile version of your website works well.
Go to Chrome Developer Tools. Click on the device icon in the top-left corner of the console.
As a result, the default view will be transformed to the mobile one.
This view gives you an opportunity to test how your mobile website behaves, how the navigation works, and how the content is displayed. Please bear in mind, browsing the website is very useful but it doesn’t replace Fetch and Render with Smartphone User-Agent in GSC.
Chrome Developer Tools gives you the opportunity to modify elements on the websites so that you can see the changes in a real-time mode. Besides CSS styling – which is less important to us – we can change the content on the website. Important! All modifications made with developer tools are temporary and it doesn’t change the HTML file. It’s only a preview of how this or that element would look like on the page.
How can SEOs use this feature?
- Information Architecture optimization
The labels used in internal linking does really matter. It’s important to both users and crawlers. Let’s assume that you did detailed keyword research and picked the most valuable keywords which should be used in the navigation. Now, it’s time for the fitting process.
How to do it?
Go to the page you want to optimize. Click and inspect the element you want to change. In this case, I want to change the labels in this navigation:
Now, double-click the anchor text and insert a new label – the changes on the website are visible at once.
I changed the label to the way I like, but it doesn’t look well 🙁 in spite of the fact that it’s true 🙂
In that way, you can even check the titles and description in SERPS.
Chrome Developer Tools makes it possible to take full screenshots of the page. It’s super useful if we want to point the element on the website in the full context. E.g. ads vs. the content on the page – it’s better to see the page from a distance and assess this ratio.
How to take full screenshots?
Switch to mobile view in Developer Tools. Click on the three vertical dots in the corner:
In the menu, you will find two options: “Capture screenshot” and “Capture full site screenshot”.
Open Command Menu (CTRL+Shift+P OR Cmd+Shift+P) and type screenshot in the box that appeared.
There are a few options to choose from. My favorite is “Capture full-size screenshot”.
An interesting feature is capturing nodes on the website. Inspect element – make sure that the whole
Use Command Menu and pick “Capture node screenshot”.
HTTP Headers are the additional pieces of information exchanged between the server and the browser. It may contain a lot of important information from an SEO point of view:
- status code
- cache headers
- robots rules (noindex), canonicals
- content type
You can check the HTTP headers of every single resource available on the website.
How to do it?
Go to the “Network” tab and reload the page.
In the bar, there are some options to filter the resources by type. Now, you can pick the file you want to check and in the “Headers” tab you will find all the HTTP Headers.
Hint! Inconsistent canonicals
Canonical tags are clues for Googlebot that point to the canonical version of the URL. So you have to make sure that you show clear signals to Googlebot. It may happen that in the source code there is a given rel=”canonical” tag and in the HTTP headers you show something different. Googlebot may have problems with understanding which canonical it should follow.
Status Code and Tracking Redirects
Chrome Developer Tools gives you instant insight into the status codes of all resources. It’s useful if you want to check if there are any 404s or if caching works well on your website. How to do it?
Go to the “Network” tab and reload the page.
As you can see, every single file has a status code so you can see if it’s OK (200) or broken (4xx or 5xx) or redirected (30x). If your caching method is based on etag or Last-Modified, you can see here if your server responds correctly. All you have to do is make sure that Disable Cache is not marked and reload the page twice. If cache works fine, the cache in the browser should have the information about the already downloaded resources and they should respond with a 304 status code (Not-Modified).
As you can see, there is a “small” difference before and after.
There are many tools dedicated to analyzing the website’s performance. However, Chrome Developer Tools is one of the tools which provides the most accurate data.
Since performance became a ranking factor, .js and .css usage has become a real pain. Chrome Developers Tools is a source of information which might be useful in performance optimization.
2. Resources Coverage
Chrome Developer Tools can help you detect the code that you can get rid of.
How to do it?
Go to the “Network” tab and reload the page. Click on the 3 vertical dots in the top-right-corner and choose More Tools → Coverage.
A new box should appear and start capturing the Coverage. Here’s the result:
Above you can see the list of .js and .css files. Each row shows the total bytes and information on how much of the code wasn’t used while rendering. Of course, it doesn’t mean that you can remove 90% of the scripts! But it should be an alert that you need to go through this list more carefully.
If you click on the file, you can browse which lines were used while rendering. It looks like this:
When you start scrolling or you trigger any event on the website you can see how .js or .css usages change in real-time mode.
Again, it still doesn’t mean that you can just remove the red part of the code – it’s a hint!
3. Render Blocking Resources
The render blocking issue is one of the most popular problems to solve during performance optimization. Render blocking files need to be downloaded by the browser before any of the resources needed for rendering can be downloaded, which can be a serious issue for performance optimization.
Chrome Developer Tools helps with diagnosing which files cause the problem. If you know them, you can speed up your website with one of the techniques used in performance optimization.
How to check it?
Go to the “Network” tab and reload the page. The most important section is the Waterfall chart on the right.
The blue line shows when DOMContent was loaded. You can filter the files by type: js., .css and diagnose which of them blocks rendering. Everything on the left side of the blue line may be the reason for the problems. Now, having the list of all these resources, you need to decide what to do with them: async loading? inline? moving them down?
Images might be really problematic in terms of performance. I don’t know why but many times, image optimization is skipped by content creators. While optimizing the speed of your website, making images smaller can make the website significantly lighter.
One of the problems with images is loading a larger size of an image than is needed. With Chrome Developer Tools, you can check the size of the image uploaded and what is displayed. How to do it?
Go to the “Elements” tab and use the searching option and find all
Important: I don’t think it’s a good idea to browse through all the images on the website in this way. You can review some of them to see if there is a problem. If so, a verification at a bigger scale should be done.
Yes, you can also validate if you have implemented AMP (Accelerated Mobile Pages) correctly by using Chrome Developer Tools. If there are some errors, it will prevent these pages from being displayed in mobile search. How to do it?
Open the page that should be AMPed and add to the URL something like this: #development=1. Now, open a console in Chrome Developer Tools and refresh the page. If there any problems found, you will see what went wrong.
It doesn’t always look so positively:
How to Deal with Cookies?
Cookies are served by all websites. However, they may be really disturbing while auditing the website. For example, sometimes the website forces a particular language or mobile version on the user. Yes, you can clear all the cookies from the browser, but you can also remove particular cookies in Chrome Developer Tools.
How to do it?
Go to the “Application” tab in Chrome Developer Tools and choose Cookies in the sidebar. Click on the domain name, and on the right you will see the full list of cookies:
Lighthouse is Awesome
Chrome Developer Tools has a dedicated section for Auditing the website. It’s available in the “Audits” tab and it has 4 modules:
- Progressive Web App
- Best Practices
It has a general review of many of the elements described in this article. Additionally, each issue has a short description and reference.
It’s continuously developed and you can check out the newest features in Canary. Some recently discovered nice features include:
- using images in the correct scale – where? Best Practices → does not uses [sic] images with appropriate aspect ratio.
It means that you have uploaded a bigger image than needed:
- TTFB analysis – where? Performance → Keep server response time low (TTFB)
I tried to review the features which, in my opinion, might be useful in day-to-day SEO duties. It’s not a full list of all the options that you can use. If you want to gain a more in-depth knowledge about Chrome Developer Tools, you can always take part in the course.
Header image photo by Russ Hendricks.