A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience
This week we released a new version of www.foo.software, a website leveraging Lighthouse, Web Vitals and Binoculars tools to provide page experience testing services. This release was a complete redesign and rebuild. We introduced technologies to our stack including Next.js, GraphQL, TypeScript and strengthened others we love like React, Node.js and Kubernetes to provide performant, user friendly and highly available services. We've been working on this redesign for most of the past year, heavily focused on design and user experience. With that said we're happy to announce a set of new and updated features we'll cover in this post.
Better Charts with Annotations
We display a historical timeline of Web Vitals, Lighthouse and Binoculars SEO metrics in "audit detail pages". Chart presentations have been overhauled and as part of that now present color coded area fills.
You can now choose time periods from a date picker to display historical data.
One of the most exciting new features related to our charting overhaul is the ability to add annotations. This is useful to denote eventful points in time that impact audit results. For example, as seen below, unfortunately for us - our redesign had a drastic negative impact on Lighthouse performance results of our website. It was however a perfect opportunity for us to utilize the annotation feature for our own records. With an annotation we marked the redesign as the event that caused a drastic degradation in performance of the home page seen in the historical data set.
Unified Desktop and Mobile Pages
When you create a page to run Lighthouse or Binoculars audits against, you no longer need to do so for both desktop and mobile devices. Now, when you create a page, audits will run for both in automated runs. Web Vitals will also be collected by device separately, respectively (if enabled).
Unified Dashboard: Lighthouse, Web Vitals, and Binoculars
Upon logging in you are now presented with a dashboard that shows you audits from both Lighthouse, Binoculars as well as Web Vitals (if those services are enabled), altogether in one screen. By default data is displayed for the "primary page", which you can set in the edit page screen. You can switch between pages via the page search icon or at the bottom in the data table.
If CrUX data exists for the page, we also display it at the top of the dashboard.
We now expose Lighthouse performance opportunities in the page dashboard. This is a first step in a future initiative to provide insights.
To better support comparisons between pages and audit types, we've added more data table views. In the page dashboard we now present a data table at the bottom of the screen with sorting functionality of each column representing metrics for Lighthouse, Web Vitals and Binoculars. A data table is now available as an alternate view in the audit detail screen for a table view of all audits from a single page.
Better Slack Management and Test Alerts
In the account section, you can now manage Slack connections. From here you can add Slack connections and dispatch test alerts.
You can add any of these Slack connections to a page (when editing or adding a new page).
Better Page Management
Page management is a key part of our website, the starting place in engaging with our services. In one single section of the website you can add, edit and delete pages to run audits against. This section also provides visibility of the audit queue and with a button click allows you to add pages to be audited.
In this section, when you create or edit a page, you can set it as "primary" so it becomes the default page when you first arrive in the page dashboard.
In our new about page we expose usage data of our service, updated with every deployment. At this time we have 1,583 website users, 2,895 pages tested and 2,355,714 audits ran in the past year. With this, we're feeling the love and hope the newly designed website gives a little something back 💗.
Google's Web Vitals is becoming the standard for measuring page experience. As of version 9.4 of Next.js, it provides a built-in method for capturing and reporting Core Web Vitals. This post illustrates how to collect Web Vitals metrics from a Next.js app and send them to a service for storage.
As Google continues steps towards a new search algorithm change focused on page experience, Foo has released version 2 of its REST API to automate Lighthouse testing. This post provides examples of how to use each of the new REST API endpoints to manage pages and Lighthouse audits on Foo.