Chasing performance

So I decided to participate in Smashing Mag's Front End Performance Challenge, not only for the potential of winning the prize but to further experiment with optimizing my site. (Web performance is a passion of mine)

Below I will breakdown the before & after statistics of my personal site and what changes I made in great detail.

I will be using both my homepage and the image-heavy article I recently wrote, The Death of Personality, as the basis for my tests.

Lighthouse Score - Homepage

Full source original stats // Full source updated stats

BeforeAfter
Performance8298
Accessibility100100
Best Practices7594

100

80

60

40

20

0

Lighthouse Score - Article Page

Full source original stats // Full source updated stats

BeforeAfter
Performance3996
Accessibility97100
Best Practices6994

100

80

60

40

20

0

Web Page Test - Homepage

Full source original stats // Full source updated stats

BeforeAfter
Initial Load Time0.91s0.68s
Visually Complete0.9s0.8s
Fully Loaded0.94s0.76s

5.0s

4.0s

3.0s

2.0s

1.0s

0.0s

Web Page Test - Article Page

Full source original stats // Full source updated stats

BeforeAfter
Initial Load Time4.7s1.1s
Visually Complete3.1s1.5s
Fully Loaded4.8s1.4s

5.0s

4.0s

3.0s

2.0s

1.0s

0.0s

Quick Look

Though my homepage only made some minor speed performance enhancements, my article post's initial load time was slimmed down by a whopping 3.6 seconds! That's pretty incredible and very noticeable from an end-user's perspective.

So - What Changed?

Webfonts

I'm not using any webfonts but instead defaulting to the user's OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them.

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons;
}

For reference, there are some things you should to look out for when using custom typefaces:

Critical CSS

This part was easy. In order to avoid the weird styling 'pops' present on some websites when initially loading with slow connections, it's best to place all your most critical styling inline and then load your external CSS once everything else has loaded.

On top of that, I decided to also implement Filament Group's loadCSS function to load my CSS asynchronously. If you are not currently using this in any of your projects; stop reading this and go do it! It's a game changer.

Critical JavaScript

My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the defer property I can be sure to load the IntersectionObserver API polyfill after the rest of the DOM as finished loading.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" defer>

I could probably optimize this further by only calling these scripts if an image is actually present in the article post, but this fits my needs nicely as is.

Responsive Images

The only images I use are those included in supported blog posts, so the first step was making sure to only call iolazy.min.js on those specific template pages. The next step was defaulting to webp image formats with a lossless jpg fall-back with the help of the picture element:

<picture>
    <source type="image/webp"
    data-srcset="
    /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w,
    /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w"
    class="lazyload">
    <img
    sizes="(max-width: 1400px) 100vw, 1400px"
    data-srcset="
    /images/articles/flat-design-toggles_qfre51_c_scale,w_200.jpg 200w,
    /images/articles/flat-design-toggles_qfre51_c_scale,w_727.jpg 727w,
    /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.jpg 1065w,
    /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.jpg 1400w"
    src="/images/placeholder.png"
    alt="Toggles Comparison"
    class="lazyload">
</picture>
I've also included responsive image sizes for further optimization based on screen size and loading speeds.

What about users with JavaScript disabled I hear you ask? It's time for noscript to save the day:

<noscript>
    <picture>
        <source type="image/webp"
        srcset="
        /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_200.webp 200w,
        /images/articles/webp/flat-design-toggles_p0v2hv_c_scale,w_1400.webp 1400w">
        <img
        sizes="(max-width: 1400px) 100vw, 1400px"
        srcset="
        /images/articles/flat-design-toggles_qfre51_c_scale,w_200.jpg 200w,
        /images/articles/flat-design-toggles_qfre51_c_scale,w_727.jpg 727w,
        /images/articles/flat-design-toggles_qfre51_c_scale,w_1065.jpg 1065w,
        /images/articles/flat-design-toggles_qfre51_c_scale,w_1400.jpg 1400w"
        src="/images/articles/flat-design-toggles_qfre51_c_scale,w_1400.jpg"
        alt="Toggles Comparison">
    </picture>
</noscript>

HTTPS & Caching

The Lighthouse audit also suggested implementing an SSL certificate (something I've been meaning to do for a while anyway) and also utilize CDN caching. So it was Cloudflare to the rescue!

Since my website is hosted through Github, setting up a free SSL certificate and enabling site-wide caching was a breeze. If you're interested in setting this up yourself, step-by-step instructions can be found here.

This simple update helped boost my best practices score from a 69 to a 94. Yet another performance enhancement you should be enabling for all your current and future projects!

Performance Happiness

Overall I'm pretty content with the major performance boost my site has received from these fairly minor updates and I hope this article inspires other designers and developers to jump into updating their own site/app performance speeds. The pay-off is truly worth it!

Some Extra Reading Material

Did you enjoy this article?

Subscribe to get notified when new articles are posted.

Other Articles