The magic of shipping minimal JavaScript

Posted on:April 16, 2023 at 11:11 AM

A large number of websites are shipping out insane amounts of JavaScript. Here is a small sample of popular front-end framework websites.

Sample of JavaScript shipped on websites (minified and gzipped):

These samples are content-based static documentation websites. The situation is even worse for application-like Single Page Applications rendered on a server or browser.

⏳ Nobody likes waiting. Over 50% of users abandon a website if it takes longer than 3 seconds to load 🔗

Content-focused websites like marketing pages, publishing pages, portfolios, blogs, documentation, and some e-commerce websites are great candidates and beneficiaries of minimal JavaScript.

How much JavaScript is your content website shipping? What happens when you ship a minimal amount of JavaScript? Is this even possible?

This article describes an iterative process that you can use to improve the user experience on your content websites and take the performance to the max by minimizing JavaScript.

Six step process to improve performance. Steps: Identify, assess, diagnose, fix and measure.

Identify

The first step is identifying the JavaScript issues affecting your website and creating a baseline. The PageSpeed Insights website from Google provides you with reports on the user experience of a web page and identifies areas for improvement. Typical issues identified by PageSpeed are:

On my blog, the main issues were to avoid serving legacy JavaScript to modern browsers and Total Blocking Time.

Now you know the issues, the next step is to assess their severity.

Assess

The overall performance score and the Total Blocking Time metric from the PageSpeed report are excellent ways to quantify the severity of issues.

An overall score of less than 50 is considered poor and requires urgent attention. Below 90 means improvement is needed to get an edge over your competitors, and a score of 90 and above is good.

Note that the PageSpeed website uses a low-end phone and slow network connection to calculate these scores in a lab setting. These constraints might not match the profiles of your users.

The Core Web Vitals assessment on the PageSpeed report describes what real users are experiencing. This assessment is only available for websites with significant traffic.

My website scored 82 on overall performance and was rated poor on the Total Blocking Time metric.

null

In the next step, you can use the assessment results to prioritize focus areas for diagnosis.

Diagnose

The PageSpeed report offers opportunities and diagnostics for each metric. Use these to diagnose issues on your website. Expanding them will give you more details to help you pinpoint the causes.

null

Fix

After diagnosis, you can start to work on fixes. Reducing the amount of JavaScript you are shipping will eliminate most performance problems.

Websites using React or meta-React frameworks like Next.js or Remix should note:

There is an opportunity to statically generate content websites on the server, avoid hydration and ship zero or minimal JavaScript. The next step describes themagicto make this happen.

Astro

Astro is the magical Multi Page Application framework that enables you to generate zero JavaScript websites.

I migrated my Next.js blog to Astro. I was able to keep my JSX UI components as is. The only changes needed were for fetching data and layout. I liked the clarity of having all code run on the server by default and having to opt-in for client-side interaction code. It made me aware of all the JavaScript I would ship to the browser and put me in control.

You can check out how Astro code looks on my blog’s GitHub repo . Here is a snippet of this blog post page in Astro.

---
import { CollectionEntry, getCollection } from 'astro:content';
import BlogPostLayout from '../../layouts/BlogPostLayout.astro';
import { formatDate } from '../../utils/helpers';

export async function getStaticPaths() {
    const posts = await getCollection('blog');
    return posts.map((post) => ({
        params: { slug: post.slug },
        props: post,
    }));
}

type Props = CollectionEntry<'blog'>;
const post = Astro.props;
const { Content } = await post.render();
---

<BlogPostLayout {...post.data}>
<h1>{post.data.title}</h1>
{
    post.data.pubDate && (
        <div class="mt-3 italic">
            Published on {formatDate(post.data.pubDate!)}
        </div>
    )
}
{
    post.data.updatedDate && (
        <div class="mt-3 italic">
            Last updated on <time>{post.data.updatedDate}</time>
        </div>
    )
}
<Content />
</BlogPostLayout>

When you are ready, deploy fixes to your website. In the next step, you will measure the impact of these fixes.

Measure

Did your fixes work? How much difference did they make? To answer these questions, conduct a new PageInsight report and compare the results with the baseline you created during the Identify step.

In the case of my blog, the overall score jumped to 99, and the Total Blocking Time was rated good. I am re-evaluating my use of an analytics library to get a score of 100.

null

Summary

You can boost performance and user experience on your websites by minimizing JavaScript. Astro is the magic that can help you make this happen. Go and give it a try!