How I Achieved Over 90 on All LightSpeed Scores for PopaDex’s Jekyll-based Site

5 min readApr 10, 2024

A Website for a Net Worth Tracker

My objective when launching PopaDex was to provide an excellent net worth tracker that was not only functional but also efficient and user-friendly. I decided to build the marketing website using Jekyll and a TailwindCSS component library called Flowbite. However, after deploying the website, the initial LightSpeed scores indicated a need for substantial optimisation, despite some of the good SEO and Best Practice scores that come with a good Jekyll site. This essay is an overview of the steps taken to transform popadex.com into a fast and efficient website.

Initial scores — Performance needed improving, particularly on mobile

Hosting with Netlify

The decision to host popadex.com on Netlify was driven by its robust features, including a global content delivery network (CDN), automatic SSL certification, and integrated support for forms. Netlify’s capability for server-side rendering (SSR), particularly with Google Tag Manager, also played a role in making this decision. This latter feature optimises the loading times of third-party scripts, which can significantly hinder site performance.

Using Netlify’s SSR for Google Tag Manager provides several benefits:

Faster Load Times: Server-side rendering minimises the reliance on client-side JavaScript, which is often slowed down by heavy third-party scripts. This setup reduces the time to first paint, which is fairly important for retaining users’ attention and reducing bounce rates.
Reduced Bandwidth Consumption: SSR reduces the amount of data transferred over the network, which not only speeds up the loading process but also lowers hosting costs and improves accessibility for users with limited internet bandwidth.

By implementing SSR, Netlify not only improved the load times of popadex.com but also ensured that the site’s interactions with Google Tag Manager did not impede its performance.

Optimising Images with ImageMagick

High-quality images are crucial for an engaging user interface, yet they can hinder site speed. When I replaced a stock SVG with a demo of the product as the hero image, there was a significant trade off between user experience and site speed. The srcset attribute in HTML is recommended for displaying responsive images so I used ImageMagick to generate a series of images for various screen sizes, in WebP for enhanced compression without losing image quality. Because I use TailwindCSS, I made them so they correspond to TailwindCSS’s breakpoints. This ensured that regardless of the device or screen size, the website would load an image optimised for that specific view, significantly improving load times and user experience. The command script used in this process was as follows:

for width in 2902 2602 2302 2002 1702 1402 1102 802 502; do convert /path/to/original/image.jpg -resize ${width} /path/to/output/image@${width}w.webp; done

With the optimised images ready, the next step was to implement them on the website using the srcset attribute, which as mentioned is the standard method for displaying responsive images in HTML. This attribute allows the browser to select from a list of images, choosing the best fit based on the current viewport's width. Here's how it was integrated:

<img src="/assets/images/screenshot.webp" alt="Screenshot" 
     class="w-full"
     srcset="
     /assets/images/screenshot@2902w.webp 2902w, 
     /assets/images/screenshot@2602w.webp 2602w, 
     /assets/images/screenshot@2302w.webp 2302w, 
     /assets/images/screenshot@2002w.webp 2002w, 
     /assets/images/screenshot@1702w.webp 1702w, 
     /assets/images/screenshot@1402w.webp 1402w,
     /assets/images/screenshot@1102w.webp 1102w, 
     /assets/images/screenshot@802w.webp 802w, 
     /assets/images/screenshot@502w.webp 502w"
     sizes="(min-width: 1280px) 1280px, (min-width: 1024px) 1024px, (min-width: 768px) 768px, 100vw"
     loading="lazy"
     decoding="async"
     width="2902" 
     height="2518">

The srcset implementation, coupled with the WebP formand and TailwindCSS for styling, ensured that images are displayed in their optimal size, contributing significantly to the site's overall performance and enhancing the user's visual experience. Incidentally, this strategy is an example of how combining backend image processing with frontend responsive design principles can lead to substantial improvements in website speed and efficiency.

Leveraging Jampack for Above the Fold Optimisation

Jampack is a solid tool offering a suite of features aimed at optimising web performance, and one of its standout capabilities is the optimisation of “above the fold” content. By prioritising the loading of critical CSS and deferring less crucial resources, Jampack ensures that the initial viewport loads as quickly as possible, significantly reducing perceived load times. More specifically, here’s how it contributed to enhancing PopaDex:

Critical CSS Extraction and Inline Loading: Jampack automatically identifies and extracts CSS critical to rendering the “above the fold” content. This CSS is then inlined in the HTML document. What this means is the need for browsers to fetch an external CSS file before rendering the page is removed, thus speeding up the time to first paint.

Deferring Non-Critical Resources: For resources not required immediately for the initial render — such as certain JavaScript files or below-the-fold images — Jampack defers loading until after the main content is displayed. This ensures that the browser’s main thread is not blocked by resources that are not critical to the initial user experience, improving the site’s responsiveness from the user’s perspective.

As a result, the site’s “above the fold” content began loading significantly faster, creating a snappier initial loading experience. This not only improved our LightSpeed scores but also enhances user engagement, as visitors are more likely to stay on a site that appears responsive and quick.

Accessibility

I also added aria labels, and meta lang tags as suggested in the accessibility section, in order to boost this score. Google uses this as a factor when ranking websites, but naturally this is just best practice.

The final result

Using these methods together, I managed to get all scores to an acceptable level both on Mobile and Desktop.

Conclusion

By hosting the Jekyll site on Netlify, I leveraged features like their global CDN and server-side rendering for Google Tag Manager to improve load times. Image optimisation was key; using ImageMagick, I automated the resizing of images to fit TailwindCSS breakpoints and conversion to WebP, significantly reducing load times without sacrificing quality. The srcset attribute in HTML allowed for responsive image delivery, optimising download efficiency based on the user's device. Additionally, Jampack optimised above-the-fold content by prioritising critical CSS and deferring non-critical resources, which streamlined the initial page load and enhanced user engagement.

Put together, the strategies turned popadex.com into a fast, efficient, and user-friendly marketing website for the net worth tracker, dramatically improving its LightSpeed scores.