How To Use The Google Developer Tools To Check The Health Of Your Recruitment Website

Now hopefully I don’t need to explain why you need a healthy, fast, well functioning, optimised and compliant website but in case I do, here we go and if you know already then skip this section. 

1) Your website is the digital face of your brand and it will often be your candidates and clients first or at least second interaction with your business. 

2) If you’re serving up a slow website to clients and candidates they’ll simply leave and move onto the next search engine result. 

3) Candidates are often sending over highly sensitive information via your recruitment site’s contact form so you need to ensure your website is secure. 

4) If parts of your website are broken then there will be parts candidates and clients can’t use such as the Google Maps functionality or the recaptcha on the contact form. 

5) Also you want your website to be well SEO optimised so it shows up in search engines and subsequently brings in more candidates & clients. 

What is it?

The Google Developer Tools, often referred to as Chrome DevTools are a built-in feature of the Google Chrome browser. It is an incredibly useful tool for web developers when designing websites but it can also be accessed and used with ease by recruitment agency owners, recruitment marketers and well everyone. It will give you unparalleled insights into the inner workings of your recruitment website.We’re talking Neo at the end of Matrix 1 when he's fighting Agent Smith. 

How to access it?

You can access the Chrome DevTools by right-clicking on any page of your website and selecting "Inspect" or by using the shortcut Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac). A panel should pop up taking up the right half of the screen.  

What Are The Benefits?

These tools can really help to optimise your recruitment website for better performance and user engagement. It gives you insights into the speed of your website, how accessible it is, best practices and how well SEO optimised it is. It will also show you any errors and how to fix them. 

Introduction

At the top we have several tabs, “Elements”, “Console”, “Sources”, “Network”, “Performance”, etc. There’s a huge amount to learn here but we’re only going to focus on a few tabs and a select few components in each tab. You can take control of your own learning if you wish to once you know the basics. 

Elements

This shows your website’s or your pages’ actual HTML and CSS code. This makes up what you see on the screen when you’re looking at your website - the layout, text, colours and, video and images. 

Console

This is a great tool for spotting errors that are being logged by your website. Navigate to each of your website pages and use the interactive elements such as links, buttons, the job search filters, blog & job posts, the contact form, etc. Any errors (messages in red) I would suggest googling before reaching out to your developer but ideally there shouldn’t be any red error messages being logged to this console. 

Network

The Network tab shows us a detailed view of all the calls your recruitment website makes and the corresponding loading times. Here we can identify any issues that may be causing a bottleneck when loading your website. Often we want to defer components or parts that aren’t initially needed when the viewport of that page is first loaded. For example we could defer loading images further down the homepage that the visitor hasn’t yet encountered. WordPress websites may be slower as they will often make more “calls” than a “single page application” - a website built with a framework/library such as Angular, React or Vue. 

Application

The Application tab focuses on what is stored in our browser and any cookies that have been left on your device. For example your recruitment website should not be leaving cookies on a user's device until they have explicitly accepted website cookies. If your website is leaving cookies on a user’s device before they have accepted then you could be in breach of UK & EU law. 

One issue I often see on recruitment websites is an incorrectly set up cookie consent pop-up. To test this follow these steps… 

1) Open up a new incognito browser. 

2) Open up the Chrome Developer Tools by right clicking on the page and selecting “Inspect”. 

3) We’ll be focusing specifically on the Network and Application (Cookies) tabs here. 

4) Navigate to the homepage url of your website and DO NOT accept cookies. 

5) Check the Network tab. We are specifically looking for lines (calls) to anything that begins with “js?id=G-”, “gtm.js?id=GTM-” and “collect”. These are all calls that are being made to Google Analytics 4 and Google Tag Manager and your website collecting user data. If you haven’t accepted cookies yet then these should not be viewable. 

6) Navigate to the Application tab and check the Cookies section (left hand panel). You may see a cookie in there with your website name but the values for the fields (“Name”, “Value”, “Domain”, etc.) on the right hand side should not be populated. 

7) Next click accept on the cookie consent pop up and we should see all the fields being populated. 

Lighthouse

This is an absolutely brilliant tool to test 4 main components of your recruitment website - speed, search engine optimisation, accessibility and best practice. Each of these 4 areas will be scored out of 100 for a total score out of 400. Your recruitment website should have a minimum score of 330/400 - for context my website has a score of 380/400 but then I’m very good at what I do. Most recruitment websites I see tend to sit around 260-340/400. The speed score should be above 60 and all the others should be 90 and above ideally. It will also give you an insight into what you may need to change to improve your website, such as ensuring images, buttons and links are fully accessible, fixing errors that are being logged to the console, improving image resolution, etc. 

Well that was a brief overview of using the Chrome DevTools to analyse the health of your website and please do get in touch if you have any questions - we’re always happy to help.