The newly released Lighthouse 10, the technology underlying PageSpeed Insights and Chrome DevTools, introduces two new site audits. These audits should be useful as part of audit because they pertain to site security and user experience factors.
Technically, one of the audits is an expansion of a previous audit, but it’s essentially a new audit.
Lighthouse contains several kinds of audits, including, Accessibility Audits, Best Practices Audits, Performance Audits, Progressive Web Apps Audits and an SEO Audit.
These two new audits are from two different audits within Lighthouse. One is a part of the Best Practices audit and the other is from the Performance audits category.
New Back/forward Cache Audit
Something that isn’t ordinarily thought of is that Back/forward cache, also known as bfcache.
bfcache is a cache that is enabled with optimization that allows webpages to instantly load when a user navigates back or forward within a website.
Websites without bfcache enabled force site visitors to download webpages a second time when they navigate backwards and forwards within a website.
But with bfcache enabled the same site visitors experience instant loading.
Google’s developer page about bfcache explains it like this:
“The back/forward cache (bfcache) stores a snapshot of the page in memory for when the page is restored from the navigation history.
This significantly speeds up return navigations to the page, however some browser APIs (e.g. unload listeners) can cause the bfcache to fail and the page will be loaded normally.”
There are best-practices to ensure that pages are eligible to be stored in the bfcache.
The first optimization is to never use the unload event.
According to Web.dev:
“The unload event is problematic for browsers because it predates bfcache and many pages on the internet operate under the (reasonable) assumption that a page will not continue to exist after the unload event has fired.
This presents a challenge because many of those pages were also built with the assumption that the unload event would fire any time a user is navigating away, which is no longer true (and hasn’t been true for a long time).”
The Mozilla developer webpage for the unload event also advises against it:
“Warning: Developers should avoid using this event.”
Lighthouse 10 now has an audit for bfcache.
The way it works is that it navigates away from the webpage being tested and then returns to it.
Any problems with the ability to use the bfcache are called attention to by the bfcache audit.
There are three types of failures:
- Actionable
Issues that can be fixed. - Pending Support
Features that are not yet supported by Chrome prevent the browser from caching the webpage. - Not Actionable
These are issues that are outside of the page itself that cannot be controlled or fixed.
Read for more information: Chrome developer page about the bfcache:
Ensure the page can be restored from the back/forward cache
Expansion of Paste Into Passwords Field Audit
Allowing users to paste passwords into a password form field is a security improvement.
Disabling the ability to paste passwords prevents site visitors from using password managers that employ strong passwords.
Previous versions of Lighthouse that tested for this best practice related to pasting into form fields were limited to only testing the password field.
Lighthouse 10 improves this audit by expanding to test if pasting into any (non-readonly) input field works.
Google’s announcement of this new audit explains why it’s important:
“For most sites, preventing pasting is a net-negative user experience and prevents legitimate safety and accessibility workflows.”
A “readonly” input field is a form field that contains a default entry pre-filled.
All other input fields should allow pasting because it is useful for accessibility, user experience and improving security.
Google’s developer troubleshooting page for this audit type offers this advice for fixing this problem:
“How to enable pasting into password fields
#Find the code that’s preventing pasting
To quickly find and inspect the code that’s preventing pasting:
-
Expand the Event Listener Breakpoints pane.
-
Expand the Clipboard list.
-
Select the paste checkbox.
-
Paste some text into a password field on your page.
-
DevTools should pause on the first line of code in the relevant paste event listener.”
Google encourages identifying the JavaScript listener script that is preventing pasting and then removing it.
Two New Lighthouse Audits
Many SEO audits don’t test for security issues, presumably because security doesn’t have anything to do with ranking, a belief that is arguably incorrect.
I’ve asserted for many years that security is an SEO issue because poor security leads to a negative impact to rankings.
If the goal of an audit is to spot reasons why rankings might be compromised, then in my opinion a security check should be a part of the SEO audit.
Lighthouse 10 is active in the PageSpeed Insights tool and will appear in Chrome version 112, which is currently scheduled for a March 29, 2023 release.
Those wishing to try out the new Lighthouse 10 from the Chrome DevTools interface can do so with the developer version of Google’s browser, Chrome Canary, which contains all the latest features ahead of the regular version of Chrome.
Read about the new audits on the Lighthouse 10 announcement:
What’s new in Lighthouse 10 – New audits
Featured image by Shutterstock/Asier Romero