Lighthouse Adventures

How I used Lighthouse to improve the performance of a Statamic 3 site.

Today I needed to improve the performance of the new version https://cherryaudio.com, at the beginning of the day I ran a lighthouse report and the results were:

Performance 87/100, Accessibility 89/100, Best Practices 87/100, SEO 92/100

For not doing a ton to make the site super performant I didn't think that was too bad, but there were some easy things to fix right away.

Fix #1: Make Dark Mode text more accessible

Using tailwind makes having a dark mode a piece of cake, and I add one on all of my sites since I suffer from chronic migraines so having dark websites is essential for me.

According to my contrast detector (https://usecontrast.com) the contrast for the blue links was AA+ and the gray text was AA but Lighthouse didn't think that was good enough so I changed all references of dark:text-blue-400 to dark:text-blue-300 and dark:text-gray-400 to dark:text-gray-300.

Fix #2: Replace references of Learn More

Apparently Google has decided that "Learn More" is equivalent to "Click Here". I don't agree, but since the gods at google have decreed so it must be (which is rich since Lighthouse uses "Learn more" in the tool). I changed all references of "Learn More" to "Check it Out", I'm not entirely happy with that since clicking on those links took you to more information about a product... but oh well that's how it is for now.

Fix #3: Add aria-labels to Carousel Dots

I was actually pretty good about giving labels to all links that were icons, except for the Carousel Dots that are in multiple places on the site.

To create the dots I was looping through images or testimonials, so adding a label to each dot that made sense was trivial.

For images: aria-label="Show Image {{ index + 1 }}"

For testimonials: `aria-label="Show testimonial from {{ quote.artist.title }}"`

Fix #4: Minify HTML

Checking out the site on dotcom-tools the initial response was 8mb! Which is pretty hefty especially if you're on a DSL or Satellite connection. I thought minifying the HTML would help, and it did a tinsy amount. So jury's still out if this was actually a fix or not.

I used a Statamic addon called HTML Minify created by Vaggelis Yfantis for this, and my config file looks like this:

<?php

return [
    'optimizeViaHtmlDomParser' => true,
    /**
     * Strip HTML comments.
     */
    'removeComments'     => true,
    'sumUpWhitespace'    => true,
    'sortCssClassNames'  => false,
    'sortHtmlAttributes' => false,
    /**
     * Remove space between attributes whenever possible.
     *
     * Note that this will result in invalid HTML!
     */
    'removeWhitespaceAroundTags' => false,
    'removeSpacesBetweenTags'    => true,
    'removeOmittedQuotes'        => false,
    'removeOmittedHtmlTags'      => false,
];

Fix #5: Lazy Images

I found all references to <img and added loading="lazy" to them. This really seemed to help the performance, so when there's 30+ image's on a page and each one isn't fetched right away. Though even with this optimication dotcom-tools still said the response was 8mb. 30+ images all under 500k still adds up!

Fix #6: Add rel="noopener" to external links

This was for the "best practices" section, but I feel like it shouldn't need to be done for sites that are on the same domain... I did it anyway cause I love seeing green circles.

Fix #7: Add Cache Header for Assets

I've never done this before, and maybe I should have. But as a rule I try not to mess with the nginx config if I can help it. But adding this little bit of code made Lighthouse very happy.

location ~* \.(css|js|jpeg|jpg|png|svg)$ {
    add_header Cache-Control "max-age=31536000";
}

Summing Up

At the end of the day, my chart looked like this:

What's left?

Serve images in next-gen formats: Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more. -> Using the glide tag in Statamic should make this possible but maybe I don't know enough about it or I'm just old but using WebP gives me a sour taste in my mouth. I'll do more research and report back.

Browser errors were logged to the console: Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. Learn more. -> These came from Livewire, so I'll see if I can get those to chill out.

There's some other things that Lighthouse complaining about, but these seem possible to fix relatively easily so I'll tackle them and see where that goes.

If you have any questions, or suggestions please reach out on Twitter or through my email!