↵ NEWS

Moonshot: Top Tech Tidbits 2022 Website Recode Attempts to Achieve Sitewide 400/400 Google Lighthouse Score on Both Desktop and Mobile

Released: 1/6/2022

Author: Aaron Di Blasi, Publisher, Top Tech Tidbits

Just to quell any suspense in advance, I'm afraid we didn't quite make it, but we did come really, really close. Perhaps you can help us to close the gap. Some background information on this project below that might help.

Project Background:

In addition to being the Publisher for Top Tech Tidbits I (Aaron Di Blasi) am also the Senior Project Management Professional for a company that I started in 2004 by the name of Mind Vault Solutions, Ltd.

Mind Vault is now a leading international provider of professionally outsourced marketing administration and consultation services and the home of the not-for-profit Top Tech Tidbits initiative under my direct supervision.

That's why when it came time to create the Top Tech Tidbits website back in June of 2020 I wanted to make sure that we would have direct control over every single aspect of the site. Yes, you guessed it, right down to each individual line of code. Why? Because absolute accessibility and Assistive Technology user convenience demand this level of control.

So I went ahead and developed the code for the Top Tech Tidbits website using HTML5, CSS3 and the most minimal amount of Javascript that we could get away with while still handling basic marketing tasks like signing up subscribers and recording website traffic.

Now it is important to note here that in addition to being completely custom coded using semantic HTML5 for the purposes of absolute accessibility and advanced Assistive Technology user convenience the Top Tech Tidbits website is also designed to present sighted visitors with an equally appealing experience. This requires the utilization of custom graphics, some of which can end up being rather large in size if they are not properly output to minimize network traffic.

So I decided in 2022 that we would tweak the site to meet some sort of benchmark that everyone was familiar with. If you're reading this then you already know that there are many, many standards for accessibility out there, but Google Lighthouse, being built directly into the Google Chrome browser itself, seemed to offer the most promising and ubiquitous option.

So I made the decision that by or before January 1st 2022, we would attempt to achieve a perfect, sitewide score of 400/400 in Google Lighthouse.

For those not familiar, this is no small task. Even some of the most accessible websites in the world struggle to achieve a perfect score. And I mean it. Test them and see for yourself. And that's because there are literally hundreds of small website development metrics that Google Lighthouse uses to render their score, and if you want to achieve a perfect score, or even come close, you will need to be able to manipulate each and every one of them.

And for many companies this level of website control is simply not possible. Either due to the software that they initially chose to build their website or due to a lack of staff knowledge around custom coding.

Luckily for us however, it was possible. As a full service digital marketing agency custom coding is one of the services that we provide.

So how did we do? Well, before I give you the results, let's break down the Google Lighthouse scoring system, and explain quickly how to access the audit yourself from any Google Chrome browser.

How to Access The Google Lighthouse Website Page Audit From Any Google Chrome Browser:

1.) Start by loading the web page that you wish to audit into the Chrome Browser.

2.) Once loaded, press CTRL+SHIFT+I to access More tools / Developer tools. You should always arrive in Developer tools on the Lighthouse tab, but in the event that you don't for any reason you will want to be sure to select it from the available tabs.

3.) From the Lighthouse tab select "Generate Report."

The default is a Desktop Audit of the page but you can also select a Mobile Audit as well. The primary differences between the mobile and desktop versions being that the rules are more stringent around network usage used to populate the page under mobile.

Both types of audit produce a score that is broken into four categories, with each category having a maximum score of 100 points.

Here's how we did:

1.) Performance: 100 / 100 Points. This category is judged on how quickly your web page is able to load.

2.) Accessibility: 100 / 100 Points. This category is judged by how accessible your website is. Especially for users who require technology such as a screen reader or have difficulty with colors.

3.) SEO (Search Engine Optimization): 100 / 100 Points. This category is judged by making sure the page is optimized for search engine results. This is a large area of website design but some simple examples are header names and keywords and making sure images have descriptive ALT text so that a search engine can label them.

4.) Best Practices: 87 / 100 Points. This category is judged by factors which will usually only be apparent to developers. This will be on code health, for example, use of deprecated libraries / APIs, asking for permission if you want the user's location and making sure that it utilizes a secure connection via HTTPS.

Final Score for the Top Tech Tidbits Website: 387/400

And while that is a score that I am incredibly proud of, along with all of the work that went into optimizing the many assets required to achieve it, we are still interested in how we might achieve those last 13 points. :)

Do you have any ideas that you might like to share? If you do, here is the current audit item that we are stuck on within the "Best Practices" category:

Includes front-end JavaScript libraries with known security vulnerabilities. - 4 vulnerabilities detected.

We recognize each and every entry and each serves a vital site function. The only issue seems to be that each one of these items are implemented using a cross-site javascript call so we have no way of updating the remote JQuery library.

If you have any experience in solving this kind of problem that you might be willing to share with us we would be sincerely grateful.

You can reach me directly at: publisher@toptechtidbits.com 📧️.

Thanks so much for reading!

Aaron Di Blasi, PMP (2006 - Present)
Publisher, Top Tech Tidbits
The Week's News in Access Technology
https://toptechtidbits.com 🌐

Project Management Professional, Mind Vault Solutions, Ltd.
Innovative ideas. Solutions that perform.
https://mvsltd.com 🌐

Email Marketing Professional, Constant Contact Certified (2019 - Present) ✔
Social Marketing Professional, Hootsuite Certified (2020 - Present) ✔

Specializing in:

Digital Strategy and Content Marketing ⚙
Direct Response Copywriting ⚙
Online Fundraising ⚙
ADA, WCAG and Section 508 Compliance ⚙

⇧ Back To Top