Categories
Website Advice

The Hack To Optimise Your Site Using Just Google Chrome

The secret hack all website owners need to know. Learn how to analyse your website’s SEO & performance by just using the internet explorer Google Chrome.

It can often be difficult to identify the exact problems with a website we host. What might appear or load correctly on the device we use to build it, how do we know this is the case for all users. If you notice a lot of traffic leaving your website immediately, this hack may be able to help identify the problem.

Call Up The Inspect Toolbar

Lots of users don’t realise that you can analyse the code on every site on the web with just a (right) click of a mouse. On Google Chrome, right click any place, on any page, of any website. A list of options will appear and down at the bottom you’ll find the ‘Inspect‘ button.

Clicking this will call up all the code for the site you’re currently on, even this very website. (Try it! To close the Inspect tool, just click the ‘x‘ at the top right.)

On the right you’ll see all the coding, scripts and lots of buttons we don’t need to understand right now. To run the tool we’ll be using today click the two arrow signs (>>) on the top right next to ‘Network‘.

Opening the Lighthouse Tool

Pressing the two arrows will call up a list of items and near the bottom you’ll find ‘Lighthouse‘. This is where we can generate a report score about the Performance, Progressive App, Best Practices, Accessibility and SEO for any page on our site. We can run this report for either Desktop or Mobile and ensure our website works for all devices.

When running a simple SEO & Performance report, we suggest clicking Performance, Best Practices and SEO only. You’ll also need to run two reports one for Mobile and one for Desktop. When all your settings are selected click ‘Generate report‘ and allow the tool to analyse your website.

Understanding The Report Results

After you run the report, you’ll have a score for each of the options you selected in the last step. There’ll be a score from 0-49 (Bad), 50-89 (Average) and 90-100 (Good). Obviously you want the number to above 90 for all, so looking at the metrics below each heading will give you examples of where your site is falling behind.

Note: Chrome extensions can negatively affect Lighthouse’s analysis. It’s a good idea to use incognito mode or from a Chrome profile without extensions.

Performance

When running an optimisation of performance, Lighthouse calls up ‘metrics‘ and ‘opportunities‘. The ‘metrics‘ allow us to see what is affecting our site’s performance. Clicking the grey button (next to the blue below) we can see an expanded description about what each of these errors mean.

Opportunities‘ is a fantastic way for people with very little web developer experience to find ways to improve their site. Expanding each suggestion will give a guide to how you can fix this issue. It will also display the estimated saving time for the average user.

Best Practices

This is some general best practices of websites – mostly around their usability and trust & safety. Anything from images displayed in the appropriate resolution to allowing users to paste into password fields.

Clicking the expand arrow, allows you to see suggestions on how to fix any errors that appear under Best Practices.

SEO – Search Engine Optimisation

These checks ensure that your page is optimised for search engine results ranking. In other words this is what you have to pay attention to if you want to come up first on Google & Bing.

Lighthouse looks at whether your links are crawlable, your pages have appropriate meta data and if your links have descriptive text. All of these factors will effect the SEO of your website so it’s important to factor in each of these changes along with an SEO strategy for each page.

Accessibility

These checks highlight opportunities to improve the accessibility of your website. It’s important to remember that manual testing is also encouraged as Lighthouse can only highlight a number of issues faced with accessibility of your site.

Lighthouse will look for issues which may be experienced by people who are visually or audibly impaired. All images on your site should contain alt text describing their contents. Similarly, background and foreground colours need to have a sufficient contrast ratio for easy readability.

Progressive Web App

A progressive web app (PWA) delivers an app-like user experience to it’s users. This is an app built from the web using HTML, CSS and Javascript – much like your website. The progressive web app function looks at a number of checklists against your website.

This ensures your website is Fast And Reliable, Installable and PWA Optimised. Performance plays a significant role in the success of any online experience, because high performing sites engage and retain users better than poorly performing ones.

If you want your site to be a PWA you’ll need to allow it to be installable. Users who install or add apps to their device tend to engage more with them, therefore it’s in your best interest register a service worker to control your pages.

This has been our guide to optimising your site using Lighthouse from Google Chrome. If any of the changes you experience are out of your capabilities as a website owner, speak to us today. We help all kinds of websites reach their full potential and increase their performance and SEO on Google & Bing.

3 replies on “The Hack To Optimise Your Site Using Just Google Chrome”

I all the time emailed this blog post page to all my associates, because if like to read it afterward my contacts will too. Sela Mike Lachman

Comments are closed.