Web page Velocity Scores of Each Shopify Theme

With so many native companies pressured to shut as a result of pandemic, I used to be excited to see Shopify’s tutorial to assist retailers arrange a “Purchase On-line, Pickup Curbside” retailer.

The fourth step of Shopify’s tutorial suggests a free, personalized theme, referred to as Debut.

Shopify’s “Purchase On-line, Pickup Curbside” tutorial suggests utilizing the Debut theme.

The tutorial is a useful clarification. However it lacks directions to optimize the brand new web site for search engines like google and yahoo or to hurry up the person expertise.

On this submit, I’ll share a examine I carried out on the web page velocity of Shopify themes.

Shopify Themes

I not too long ago labored with a developer on a challenge to assist a service provider velocity up its Shopify retailer. We improved the cellular web page velocity from 23 to 84 on Google’s PageSpeed Insights software. The desktop velocity improved from 77 to 94. We achieved related enhancements throughout totally different web page sorts.

However the greatest takeaway was how the Shopify theme impacts the web page velocity. The service provider had personalized the premium theme ShowTime, which was lovely and feature-rich. Sadly, it was additionally gradual. By optimizing the theme recordsdata, the developer considerably improved the velocity.

Thus, having labored on that challenge and having noticed the Debut theme, I had an concept. What if I ran Google Lighthouse (which incorporates PageSpeed Insights scores) on all themes within the Shopify retailer? It might assist new retailers find a quick retailer and keep away from the price of optimizing a gradual theme later.

Web page Velocity of Themes

Shopify lists 72 themes. Checking the velocity of every one manually is doable. However it’s extra enjoyable to automate the method as I can accumulate as many metrics as crucial, and repeat the evaluation as themes are up to date.

The abstract outcomes of the examine seem under. The web page velocity scores are from Google Lighthouse. Word that ShowTime, the theme chosen by our shopper, is among the many slowest in cellular efficiency.  However the theme really useful by the Shopify tutorial, Debut, is close to the highest. You’ll be able to kind the desk by any column.

For a compromise between velocity and performance, think about extra granular velocity metrics. To assist, I assembled six such metrics (referred to as “Lab Knowledge” on PageSpeed Insights) on a Google Sheet.  These metrics are as follows.

• First Contentful Paint measures how lengthy it takes to see something on the web page. A superb worth is lower than 1 second.

• First Significant Paint measures when the first content material of the web page is seen. A superb worth for this metric is underneath 2 seconds.

• Velocity Index measures how briskly the content material of a web page is visibly populated. Beneath 4.3 seconds is nice.

• First CPU Idle measures how lengthy it takes for the web page to accommodate enter. A superb worth is underneath 4.7 seconds.

• Time to Interactive measures how lengthy the person has to attend for the web page to be totally interactive. The web page could be totally seen, however nonetheless not able to take enter from the person. A quick worth for this metric is underneath 5.2 seconds.

• Max Potential Enter Delay measures the worst case of how lengthy it takes the browser to reply to typical duties carried out by a person, comparable to a click on on a button. A quick worth for this metric is underneath 130 milliseconds.

Wanting on the detailed metrics supplies nuances. For instance, the Avenue theme ranks forty seventh on cellular web page velocity, however the Max Potential Enter Delay is dangerous at 2,278 milliseconds (2.2 seconds).

For a compromise between velocity and performance, think about granular “Lab Knowledge” velocity metrics in PageSpeed Insights. Click on picture to enlarge.

The Course of

I manually produced a listing of themes (together with their demo web site URLs) from the Shopify Themes Retailer.

Subsequent, I wrote a Python script that reads the checklist of URLs and runs the PageSpeed Insights API six occasions per URL: three to acquire detailed cellular metrics and three for desktop. Repeating the checks is crucial to account for modifications in community circumstances. I reported the median ends in the Google Sheet.

The JSON output returned by the PageSpeed Insights API is a fancy, nested construction. I used  JSONPath to simplify the extraction course of.

I additionally discovered JSONPath evaluator to be extremely helpful. I used the useful jsonpath-ng Python library to run the JSONPaths.

What follows are the JSONPaths I used to extract every metric.

jsonpath_first_contentful_paint = parse("$.lighthouseResult.audits.first-contentful-paint")

jsonpath_first_meaningful_paint = parse("$.lighthouseResult.audits.first-meaningful-paint") = parse("$.lighthouseResult.audits.speed-index")

jsonpath_first_cpu_idle = parse("$.lighthouseResult.audits.first-cpu-idle")

jsonpath_interactive = parse("$.lighthouseResult.audits.interactive")

jsonpath_max_potential_fid = parse("$.lighthouseResult.audits.max-potential-fid")

jsonpath_score = parse("$.lighthouseResult.classes.efficiency.rating")