15 Google Chrome DevTools for SEO

One of the most helpful SEO tools is one that we don’t even have to pay for. This tool is Google Chrome’s DevTools. This tool is built in to Google Chrome, and allows you to fix many SEO functions on a webpage.

To access DevTools, simply press on the three vertical dots on the right hand corner of your Google Chrome browser. Next, select More Tools > Developer Tools. Otherwise, the shortcut to open this menu is Ctrl+Shift+ I.

DevTools has nine menus - device menu, elements, console, sources, network, timeline, profiles, application and security. These are all able to help users optimise their websites.

So how can DevTools help SEO? Here are 20 hacks anyone working in SEO needs to know and be using:

1. Analyse network performance

DevTool allows you to analyse your website's page load time under the Network menu. To do this, you will need to enable “capture screenshots”, which turns blue when enabled. This will allow for a screenshot to be taken while the page loads.

Once you have completed this and chosen your desired settings, reload the page and go to the network panel to see the page’s load time, and a markup of where the page has been parsed. To fix speed problems, navigate to the Audit panel and click the “run” button. There, you will have access to a list of resources causing the issue.

2. Check mobile web optimisation

Every SEO worker is going to want to test mobile optimisation. This also allows you to test the network performance for mobiles. To do this, simply check the “disable cache” box. From the menu “no throttling”, select Regular 2G. This will be able to emulate a mobile performance while on your laptop or computer.

3. Identify render-blocking resources

Render-blocking scripts and large requests will often cause your website to have a slow load time. You can identify these resources under the Network panel. This will show you which JS and CSS resources are loading before the DOM, which is located at the bottom of the Network panel.

4. Check your page’s main content elements

Any business with a website is going to want to check their website’s main content elements, including JavaScript-rendered elements. While Google has tools which crawl and index this content, it isn’t always perfect. As a result, it’s important to know how to check this yourself.    

To see the DOM in DevTools, navigate to the Elements page. This can be used to review page elements including title, meta description or page content. You will then be able to verify if your content is accessible to Google.

5. Verify images ALT description

The Elements tab also allows you to verify your images ALT description. Simply right click on any image and select “inspect.” Coding will display showing the ALT description.

6. Fix Memory Problems

You always want to focus on the user experience, which will be greatly decreased if your website has memory problems.

Memory problems are generally caused by memory leak, which will cause a website to progressively get worse overtime, or memory bloat, where a website is using too much memory.

To monitor memory use, navigate to More Tools and then Task Manager, or alternatively press Shift+Esc. Next, right click on the table header of Task Manager and enable JavaScript memory.

Here, there will be two columns. The memory column represents native memory, where DOM nodes are stored. Value will increase when DOM nodes are getting created. The other column is for JavaScript memory. You'll be interested in the live number, which represents how much memory reachable objects on your web page are using. An increase in numbers means objects are being created, or already existing objects are growing.

You can visualise memory leaks by navigating to the Timeline panel, enabling the memory checkbox and make a recording.

7. Find CSS hidden content

A common way to hide text is by using CSS with the “display:none” or “visibility:hidden” properties. It’s important to check these sites for any important information that might be hidden.

To check this, simply navigate to the Search drawer, which can be accessed by hitting Ctrl+Shift+F once you open the DevTool. This will open a search bar that allows you to look for “hidden” or “display:none” properties within the page code. Review the code to see what is being hidden and take appropriate action if necessary.

8. Understand security issues

Website security is one of the most important things when running a business online. You can check whether your page is secure or non-secure by navigating to the Security panel.

The Security overview tells you whether your page is secure, and whether it has a secure connection and resources. Clicking on the “view certificate” button allows you to view the server certificate for the main origin. A non-secure page will read the message ‘this page is not secure.’  You can also use the left hand panel to inspect individual secure or non-secure origins. Clicking on any non-secure links will give you details on which request from that origin was served over HTTP.

9. Validate your Accelerated Mobile Pages (AMP) implementation

For anyone implementing AMP, this is a crucial, but also simple, step to undertake. You can check if there are any problems with your page by adding “#development=1” to your AMP URL. Next, check the Console panel. You will then be able to see if there are any issues, warnings or errors. It will tell you which line the error has occurred on so you can take the necessary action to fix it.

10. Analyse runtime performance

Users expect a website to perform smoothly and seamlessly. A poor user experience will result in a high bounce rate and less conversions. So it’s important to avoid writing JavaScript that forces a browser to recalculate your layout. This will stall application performance and interfere with user interaction.  

To analyse this, make a Timeline recording. You’re going to need to look for long Evaluate Script events. If there are any, you can enable the JS Profiler and re-do the recording to gain more detailed information about which JS functions were called, as well as how long they took to load.

11. Look for HTTP status

When you’re in the Network panel to check header configurations, you can also check if there are any redirects by verifying their HTTP status. This allows you to see not only if it redirects, but what type of redirects it is and any error statuses.

12. Inspect and delete cookies

The Application panel allows for you to view detailed information about a cookie, as well as delete cookies.

Once you open up the Cookies pane in the left hand panel, you will be able to view and delete cookies, as well as modify cookies values. Cookies will be listed by domain.

There are a few ways to delete cookies, including:

• Select the cookie and press the delete button to delete one particular cookie.
• Press the clear button to delete all cookies from a group.
• Right-click on the domain value of a cookie and then select “clear all from” and delete cookies from a selected domain. 

13. Clear storage

Sometimes the best choice is to just wipe all of the data. To do this, navigate to the Clear Storage pane within the Application panel. This allows you to unregister service workers, storage and caches. If you want to clear the data, enable the boxes next to the category you want to clear, and click the button “clear site data.”   

14. Inspect animations

You can use the Chrome DevTools Animator Inspector to inspect and modify animations on a website. To access this, go to the Styles pane, within the Elements panel, and then press the Animations button. This will then open up a tab next to the Console Drawer, and can then be used from any DevTools panel.

Next, you have to capture the animation by triggering the animation while the inspector page is open. Once captured, you can replay it by hovering over the thumbnail in the Overview pane, or click and drag the red vertical bar to scrub the viewport animation.

While still in the Overview pane, click on the animation group. The details pane will give each animation its own row. To highlight it in the viewpoint, simply hover over an animation. Click on the animation to select it in the Elements panel.

A darker left section represents the definition of the animation, while the faded right section represents iterations.   

You can modify animations using animation duration, keyframe timings or start time delay.

15. Emulate Sensors

You can use DevTools to emulate geolocation and accelerometer sensors. To access sensor controls, navigate to More Tools, and then Sensors.

You can enable geolocation by selecting the Emulate geolocations coordinates checkbox. This will override position values for “navigator.geolocation”. It will also simulate cases where geolocation data is unavailable.

If you need to test data coming from the Orientation API, select the Accelerometer checkbox within the Sensors pane. This will allow you to enable the accelerometer emulator. You can choose to manipulate three orientation parameters - rotation around the z-axis, left-to-right tilt and front-to-back tilt.

These Chrome DevTools will help your next SEO Audit to run much more smoothly!