Songwriter City in Nashville, TN specializes in bringing together music’s biggest hitmakers for incredible corporate, private and public events to be remembered.
Its website features images from several of those events, including profiles of some of the artists in their network. Just by activating PicPerf for those images, an impressive performance boost was brought to the site.
The “Before” State
For this feature, we’ll focus on the site’s home page. Prior to enabling PicPerf, images were being loaded straight from the its WordPress instance. They were being routed through a CDN, which made them quickly available globally, but no optimizations or reformatting was happening.
Because of this, approximately 2.2MB of image data was being downloaded for the home page alone. They were being locally cached, but not as strictly as possible, causing the browser to perform a revalidation check on every load.
Enabling PicPerf
Because Songwriter City’s on WordPress activating setting up PicPerf was extremely simple: install the official plugin.
The plugin automatically filtered as many image URLs as possible, including those with srcset attributes. When the page was reloaded, each image was processed in the background. And reloading the page once again resulted in freshly optimized and cached images being returned.
The Impact
After that initial optimization, each image was now being served in an optimal format — WebP for most of them, although AVIF may be served for visitors whose browser supports it. And on top of that, aggressive cache headers were now being set, meaning a visitor’s browser will always use images they’ve already downloaded for repeat visits. There’d be no more “extra” requests back to the server.
In terms of raw metrics, a couple stick out. First, the amount of total image data downloaded for a visitor dropped significantly. Before enabling PicPerf, 2.2 megabytes were being sent over the wire as the vistor scrolled the length of the home page. A sizeable amount of data.
But after PicPerf had a chance to optimize and reformat the images, that value dropped to only 634 kilobytes — a whopping 72% less data.
Change in Page Weight
| Stage | Total Image Weight |
|---|---|
| Before | 2.2MB |
| After | 0.634MB |
| Impact | High |
Then, there’s the performance score provided by Google’s Lighthouse tool. This value can be a little misleading. It’s calculated by emulating an actual device and isn’t based on real-world data. Even, it’s often a good indicator of whether a site is headed in the right direction in terms of performance, SEO, and accessibility. And it can also help raise red flags that need to be addressed.
For Songwriter City’s site, Google’s Lighthouse performance score increased 11 points — a very healthy improvement for a very low-lift change.
Change in Performance Score
| Stage | Lighthouse Performance Score |
|---|---|
| Before | 67/100 |
| After | 78/100 |
| Impact | Impact |
It’s encouraging and satisfying to see immediate feedback to key website metrics just by running a site’s images through PicPerf. It goes to show just how large of an impact using modern formats like WebP and AVIF can have. Still, even more meaningful benefits are yet to come. Over time, these changes will be factored into how Google calulates the site’s Core Web Vitals and ultimately how it factors those results into its search rankings.
Check out Songwriter City’s website directly to see these changes in action, and sign up if you’d like to see what’s possible for your own site.
Top comments (0)