Embrace the Page Load Paranoia: Why It’s Good for Your Site
Written by:
Jeremy Kutner
May 24, 2024
3 min Read
At Eko, we build incredibly unique, interactive video experiences for ecommerce. There’s nothing else like it.
However, with rising competition, being unique isn’t enough. Our solutions need to drive business KPIs, or we’ll never grow. As a video-based technology, the number one question customers ask is:
“Will it slow down my page?”
Despite many sites already grappling with slow performance, it’s crucial that our offering is fully optimized and nonintrusive. It’s our responsibility as a SaaS business to do no harm.
In order to assuage customers, our CTO suggested comparing our customer’s PageSpeed Insights report before and after we integrate into their site. That way, we can benchmark and compare our impact on their page load with real world users.
If you’re not familiar with PageSpeed Insights, it displays Google’s Chrome User Experience (CrUX) to actual user data, along with simulated pagespeed data using Lighthouse. It’s free to use, revealing important insights into page speed issues. Even better, Google provides APIs to this same data. There are plenty of resources explaining these tools, so I won’t get into it.
My team started by manually checking pagespeed.web.dev and copying our results to a Google Sheet. It didn’t take long to realize that, if we’re going to track this data across many customers, we needed to automate this process. Finding few solutions that fit our needs, I decided to leverage ChatGPT and create something myself. Here’s what I came up with.
How to use Google Sheets and CrUX API to generate a weekly, automated Page Performance report
Go to Google’s API Console, Create a Project, Enable the CrUX Report API, and create credentials. This will provide you with an API key.
Make a copy of this Google Sheet.
Open the Extensions menu and click on Apps Script. You will see the Code.gs file that does all the automation magic.
In row 6, replace the text [REPLACE WITH YOUR API KEY] with your new API key from step 1.
Click Run. Note: for the script to function, you’ll need to approve it. Please review the code and make sure you’re comfortable with running it. Once approved, go back to the Sheet and you will see that it generated two new rows in the “Pagespeed results” tab.
Go into the “Sites to check” tab and replace the URL with the URLs you want to check.
If you want to automate this script, go back into the Apps Script and click on triggers in the navigation menu. From there you can schedule the script to automatically run on a regular basis.
Keep in mind
This works whether you’re tracking URLs across multiple domains or within a single domain.
It automatically generates two separate rows for each URL, for PHONE and for DESKTOP.
Each time you run it, it will add new rows at the bottom, giving you a full history. You may need to add new empty rows it if fills up (or consider periodically deleting or copying the historical data into a new tab).
“Date of automation” is when the query was run, “First recorded date” and “Last recorded date” are the actual CrUX data collection period.
I’m using the “URL” param, so it will find results for the specific URL entered, not the “Origin” domain.
Final thoughts
it's vital that our solutions stand out and drive business KPIs without compromising page performance. By integrating Google’s PageSpeed Insights and automating the data collection process with Google Sheets and CrUX API, we can effectively benchmark and monitor our impact. This approach ensures that we maintain optimal performance, providing real value to our customers.
