Running Your First Google Lighthouse Audit

Coding your first webpage takes lots of learning and lots of trial and error. If you are submitting for a college project then you may have been asked to provide evidence of your Lighthouse Audit or you may have stumbled across it whilst using Chrome's Developer Tools. I'm going to fill you in on some simple tips that I wish I had known before I had even started my first webpage, let alone run the test. They will set you up with a base of good web practices that will help to (hopefully) return a high score. Before we get started...

What is Google Lighthouse?

Google Lighthouse is a free, open-source tool that analyses your web pages based on pre-determined performance metrics and developer best practices. It can help you to improve your website's performance, speed, quality and overall user experience.

How do I use it?

If you are using Google Chrome, Lighthouse is built in and accessible via the Developer Tools. To open the Developer Tools, select:

• Top Menu → View → Developer → Developer Tools or ⌥+⌘+ I on Mac
• F12or Ctrl + Shift + I on Windows.
  • You can also open it from the top right three-dot menu → More tools → Developer Tools
  • Or by right-clicking on the page, choosing Inspect → Lighthouse tools from the Dev Tools top toolbar

From here you can choose checkboxes to focus your report on one or multiple areas, choose between Desktop or Mobile testing and what mode you wish to run.

What do I receive?

Lighthouse generates multiple audits, yielding scores of between 1-100. These audits show, in detail, where you've gone right and where you've gone wrong. For areas that need work, Lighthouse will point you in the right direction. I will stick to discussing reachable targets for the new web developer when it comes to improving these scores. Reaching the high 80s and even getting into the green is possible with careful coding and design. If you wish to read further into each topic covered in the audits then please consult Google's own documentation. The following four categories will be your main concern starting out:

• Performance
• Accessibility
• Best Practices
• SEO (Search Engine Optimization)

Performance ⚡⚡⚡

Poor performance leads to poor loading times, often causing the user to leave your page and visit a competitor instead. We want the user to have a positive experience. Some factors that could cause this are out of our hands, such as network issues or if the webpage is being viewed on older, slower technology. However, there are some things that you can do to try to prevent this:

- Keep your code clean: An obvious but important habit to start from day one. Learning how to comment your code correctly and concisely, removing any dead code and being conscious of whitespace can aid in keeping your file sizes smaller. Although the speed improvements will be minimal at first, as you start to develop larger projects, contribute to larger code files or join Hackathons, these good habits will pay off in more ways than one.

- Optimise your images: Page load times can be determined by the images displayed on your site. Before adding any images to your site, consider ensuring that they are high-quality and in the correct format like PNG, or better still WebP. Take into account the device that potential users may view your webpage from. Do your images need to be optimised for mobile or full-resolution widescreen? Uncompressed images, in the wrong format, can tank your score. Use an image compressor such as TinyPNG or TinyIMG to convert JPEG and PNG to WebP.

- JavaScript files: If your webpage uses JavaScript for interactivity, placing your <script> tags at the bottom of your HTML code, just above the closing </body> tag, will allow your web page to finish loading visually before starting to load your JS file.

Accessibility 🤝🤝🤝

It is of particular importance to consider the needs of all of your users and to not create content that is inaccessible to people with disabilities and additional needs. Being conscious of this from the planning stages of your webpage will ensure that you will have little to do in improving your accessibility score:

- Use semantic HTML: Laying down a good foundation of semantic HTML code where all tags are used accurately, helps to provide context to assistive technologies, such as screen readers.

- ALT Text: Including 'alt' text in your <img> tags allows screen readers to provide a text description of the image for people with visual impairments. Also providing descriptive link text on links and buttons will allow differentiation between them for assistive technologies to pick up on. Instead of writing 'Click Me!' on a button or a link, consider adding more specific information relating to the link's purpose such as 'Send us a message' or 'Find out more about our local services'.

- Colour contrast levels: Ensure your webpages colour contrast ratios are at the correct levels by using a contrast checker tool such as Webaim or Adobe's Color Accessibility Tools. Foreground and background contrast ratios must be at or above 4.5:1 for text and 3:1 for graphics. These ratios are set by the WCAG(Web Content Accessibility Guidelines) to create a more accessible web for all. Lighthouse will check for sufficient contrast ratios and the audit will inform you if this has not been met. You could go further with the above accessibility tools by considering colour blindness and choosing a sympathetic, inclusive colour palette.

- Keyboard navigation: The Tab key can be used to navigate around a webpage that has been created semantically. Interactive elements can be jumped to by a user who depends on using Tab to move forward over the webpage elements and Shift + Tab to navigate backward. Spacebar and the Enter key are used to confirm a choice or check a box. There are multiple others. Google Lighthouse requires you to check that all custom controls have the appropriate ARIA attributes.

Best Practices ✔️✔️✔️

Keeping on the right side of HTML semantics from the beginning will help you achieve a higher score for Best Practices. Simply starting your HTML code with a <!DOCTYPE html> declaration is an easy few points, this aids in the webpages rendering.

-Validate your code: Running your code through a validator and eliminating any errors is a great habit and a great way to raise your audit score. HTML can be validated using the W3C HTML Validation Service, whilst CSS can be checked using the CSS Validation Service. Similar to the Lighthouse audits report which will give you suggestions on how to improve your score, these validation services will sharpen up your code and break any bad coding habits. JavaScript can be validated using JSHint

-Responsive Design: Pay attention to how you create your webpage and keep in mind whether it will be responsive to all screen sizes and devices. Flexbox and Grid are two CSS methods to create responsive design. They both have their merits but keep in mind that flexbox can affect performance if your project is large.

-Browser errors: Lighthouse will indicate any browser errors that were logged to the console. It will even indicate the line number and file that contains the error and sometimes hint at what the error is exactly. Fix all of these errors to improve this score. If you have difficulty understanding any error, consult StackOverflow, as someone has most likely encountered it before and squashed it.

SEO (Search Engine Optimization) 🔍🔍🔍

Search engine rankings will make or break the success and visibility of your webpage. Optimising your page with the above steps will raise your SEO score and present your page as a desirable place to visit. Ensure that your ```<meta>tags in the<head>`` section of your HTML contain the appropriate information and details about your page. Check that your page title reflects the contents displayed accurately. Check out Google Trends for page-relatable keywords that are in high demand and use them in your content if you wish to raise this score further.

That is a lot of information...

Yes, it is! But the great thing is that this will all become second nature to you as you build future web pages. The more obscure error messages that Lighthouse generates will become less daunting as you have already set yourself up to succeed. I am only five months into this coding lark and I am sure I have left many handy hints out, so please if you feel like sharing, pop them into the comments below 👇 and keep the learning going!