foo • 4 min read

A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience

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.

Redesign charts displaying Lighthouse, Web Vitals and Binoculars data

You can now choose time periods from a date picker to display historical data.

Date picker to choose a timeframe of 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.

Detail overlay visible by clicking on any point in the timeline chart
Annotation point in timeline chart

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).

Switch device picker in the page dashboard
Switch device picker to choose desktop when in mobile

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.

Unified dashboard with Lighthouse, Web Vitals and Binoculars data together

If CrUX data exists for the page, we also display it at the top of the dashboard.

Demo Google dashboard with CrUX data

Lighthouse Opportunities

We now expose Lighthouse performance opportunities in the page dashboard. This is a first step in a future initiative to provide insights.

Lighthouse opportunities in the page dashboard

Data Tables

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.

Data table from the page dashboard

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.

Account Slack management

You can add any of these Slack connections to a page (when editing or adding a new page).

Page edit Slack connection

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.

Page management

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.

Setting a page as primary

Conclusion

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 💗.

Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed
Next.js

Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed

With our website redesign we revamped our technology stack. This post reviews choices including Next.js, GraphQL, MUI (Material UI), and TypeScript.

Read more

How to Collect and Analyze Web Vitals from Next.js for Page Experience
Web Vitals

How to Collect and Analyze Web Vitals from Next.js for Page Experience

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.

Read more

A New Lighthouse REST API to Automate Testing for a New Day in SEO
REST

A New Lighthouse REST API to Automate Testing for a New Day in SEO

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.

Read more