A SEO professional has a wide range of tools to choose from: depending on the specific task, there are free and paid tools also available. If you have a technical problem, one very useful tool is Chrome Developer Tools.
Most SEO specialists will either press Ctrl+Shift+I (Command+Option+I on a Mac) or click on More tools and then Developer tools in the Chrome menu. We’ve put together a list of the things DevTools has to offer and is well worth mastering.
1. Mobile or desktop view
By default, DevTools loads in desktop view, but with the rise of mobile searches and mobile-first indexing, it’s essential that the mobile version of the site loads properly.
How can this feature be accessed?
Click on the tool icon in the upper left menu bar or just press Ctrl+Shift+M. This will automatically switch to mobile view of the website you are analyzing.
All you have to do is test the navigation of the mobile version, the buttons and the display of the content.
Pro Tip: You can even specify a tablet view or adjust the mobile display size. You can even change the device’s orientation to landscape or portrait.
2. Setting up another user-agent
Wondering how each search engine robot interacts with the content of your website? Switch to any search engine in a few steps.
Do it like this!
2. Uncheck the “Use browser default” box.
3. Go to the “Custom” field and select the user-agent you want to simulate, be it Googlebot Smartphone or whatever. You can even specify a custom search bot.
Pro tip: In the “Network throttling” section, select, for example, the “Slow 3G” option to find out how users with slow internet see your website and how it loads for them.
3. Change content and elements
If you want to see what the Header section would look like with an extra line, or if you want to move a button down within the page, you can test these in real time. Rest assured, these changes only appear in DevTools and do not change the HTML file.
What are the steps and what can I use this feature for?
Click on the element (whether it’s an image or even a piece of text) you want to modify. Press Ctrl (or Cmd)+Shift+I and click either in the text or in the CSS.
You can also change the text itself, the font size, or elements of the menu structure. Moreover, we can change the page title or even the meta description.
4. Create a screenshot quickly and easily
There are countless programs and extensions capable of taking screenshots, but Chrome DevTools also has one built in. If we have made the desired changes on the page, we can take a screenshot of the final result.
How to take a screenshot?
If you are in mobile view, click on the 3 dots in the upper left menu. Then choose whether you want to select a specific section or take a full screenshot: “Capture screenshot” or “Capture full site screenshot”.
In desktop view, press Ctrl+Shift+P (Cmd+Shift+P) and type “screenshot” in the field. Then select the option you need:
5. HTTP headers: status code, robot rules (e.g. noindex), canonical
In the DevTools “Network” tab you can find a lot of important information:
How can you access this information?
Pro tip: You can also check whether the canonical tag is clearly indicated to Googlebot. It is conceivable that the rel=”canonical” tag in the source code contains something different than in the HTTP headers.
6. Render-blocking resources
If many files have to be loaded before rendering can start, this can lead to long page load times. In Chrome Developer Tools, you can see which files are typically JavaScript files that are blocking rendering.
How do we map resources that block rendering?
Within the “Network” section, once all resources are loaded you will see a waterfall model for loading next to each resource. Files that are to the left of the vertical blue line will be executed before the DOM content is loaded, delaying rendering.
7. Filtering unused code
If a page loads slowly, it could easily be due to a high percentage of unused CSS and JavaScript files. Fortunately, these resources can be easily filtered out in the DevTools interface. Then, there’s nothing left to do but send the developers what you’ve experienced and determine how to optimize the resources.
How do we discover unused resources?
Pro Tip: If you click on one of the resources, you can see in detail which lines of code are actually used during rendering. Red stripes indicate lines that are not used, while green stripes indicate lines that are.
8. Image optimization: image size, resolution
Image optimization can easily become one of the most important SEO factors in terms of loading.
One of the problems is the size of the images: if you have a lot of big size images (with large MBs) uploaded, it slows down the page load for users. Another problem is when images are uploaded at a larger size or resolution than they actually appear.
This is how you can be sure of the size of the image that is actually loaded
Click on “Elements” in the top menu and select the image you want to check. You can also do this by right-clicking on the image and clicking on “Inspect”. You will then see the actual image size and the size uploaded to the website.
If you notice a big difference between the two, you may want to upload a lower resolution image.
9. Core Web Vitals factors
There are many external tools to check the performance of your website: PageSpeed Insights, WebPage Test, or even Lighthouse. The latter is built into DevTools and you can easily retrieve the report for any URL.
It’s especially important to pay attention to the Core Web Vitals factors, because in addition to being able to improve the user experience, it’s also a Google ranking factor.
How can we check the page experience?
Go to the “Performance” tab and tick the “Screenshots” and “Web Vitals” fields. Then click the record button (or press Ctrl+E / Cmd+E).
Once the analysis is running, you will get a very detailed diagnostic of the page: how each element is loaded, how long it took for the content to become fully visible. The screenshots that appear in the top bar will further help you understand the process during rendering.
To see which elements are causing visual shifts during page load you can open the “Rendering” tab (3 dots in the top right menu → More tools → Rendering). Then tick the “Layout Shift Regions” box and as you interact with the page and it loads, the selected section that is causing the content to shift will change.
It is also very useful if you run the Lighthouse analysis. To do this, select “Lighthouse” from the top menu and then decide whether you want to get the results on a mobile or desktop device.
The big advantage of running the Lighthouse analysis in DevTools is that for both CLS (Cumulative Layout Shift) and LCP (Largest Contentful Paint), the tool returns exactly where the element is located, selecting that section.
10. Unpacking the code to make it transparent
It is a common phenomenon to minify CSS, JavaScript or HTML to make it smaller. However, when we want to look for bugs or just understand the code, DevTools’ “Pretty print” feature comes in handy to return the same in a line-by-line format.
How to un-minify?
Select the code file you want to see in order. A panel will then load with two brackets {} at the bottom. This way, you can see the compressed code already arranged in lines.
11. What does the website look like without JavaScript?
Google generally understands content embedded in JavaScript if it is properly specified. To make sure that your content is actually displayed correctly and can be interpreted even without JavaScript, it is recommended to turn off JS and look at your site as it is.
Bartosz Góralewicz and his team have created a very useful SEO test site where you can test the functionality of different JavaScript frameworks. It’s a great way to understand that not all frameworks are interpretable by Googlebot.
This is how to access this feature
Click on the small gear in the top right menu (or press F1) and tick the “Disable JavaScript” box. Then reload the page.
If the content loads correctly and there is no difference between loading with and without JavaScript, there is nothing more to do.
Want a full technical SEO audit? We can help!
In our article we’ve covered the most important, most useful and most interesting Chrome DevTools features. These are all important parts of a website’s technical mapping, but they are far from sufficient.
If you want an all-encompassing technical SEO analysis, contact us (INTREN Agency) at our contact page.
About the author: Dorina Végh, one of INTREN’s SEO specialist. Her area of expertise is uncovering technical anomalies and making content user-friendly. She is obsessed with transparency and established processes.
Article originally posted by Intren as “CHROME DEVTOOLS HASZNÁLAT SEO CÉLOKRA“
Back