How to achieve 100% performance Google Lighthouse score with Drupal

This article is about:

💯 How can you get a 100 percent score in Google Lighthouse with Drupal;

🧠 What is the overall strategy for achieving such a score;

🔧 Technologies used;

🎩 Some general tips and tricks.

The article focuses more on the Front-end side of things.

You can skip the intro and head straight to the technical part if you want or just the general tips and tricks section at the end.

Contents

• Introduction
• Technical part
• Static HTML generation
• Drupal stack
• Images
• CSS, JS, and static assets
• Twig and Component-based approach
• Caching in CloudFront
• General Tips and Tricks

Introduction

The 100% score was not an Idée fixe, but it just happened. We just wanted the website to be fast and followed best practices.

Well, sometimes it is 99, but this is on mobile: 🙂

Here is the whole homepage (all measurements are done on the homepage), so you can get an idea of how the website looks:

One might say: But your page size is very small! Yes, size always matters! 🙂

This is one of the keys to a fast website, but not the only one. You can still have a small page size but a very slow website. For example, images—if you do not load them properly, you're done! No good Google Lighthouse score, bad performance overall, and a very, very angry client!

One might say: But it looks like you’re serving static HTML files. Yes, that is true, but who isn’t? Even Next.js, the most popular React meta-framework for full-stack apps, does it.

Yes, the page size is really small. But beyond that, let’s look at the technologies and techniques used.

💡 Tip #1: Keep Your Page Size Small

You will notice that the site is very simple: header and footer, six paragraphs on the homepage—nothing fancy. HTML, CSS, and JS are kept as small and simple as possible.

💡 Tip #2: Keep It Simple and Follow Best Practices

Static HTML Generation

We use the Drupal Tome module for static site generation.

Static HTML is fast and secure. Since there are no server-side rendering operations, response times are extremely fast. This is the first key step for great results.

The HTML is pre-generated by Tome, then served and cached from a CDN, making it even faster. If you’re not using static HTML generation, you must use something like Varnish to cache your pages, but that’s another topic. This is the simplest approach.

Drupal Stack

We use only a few modules aside from core ones, keeping the site simple:

• Tome for static site generation
• Responsive Image (core)
• Single Directory Components (core experimental)
• Paragraphs for content building
• Nomarkup module for stripping unneeded Drupal HTML

Images

We use the Drupal Responsive Image module to properly size images for different resolutions.

Key points for image optimization:

• Lazy-load images (except those above the fold) using loading="lazy".
• For above-the-fold images, set loading="eager", as lazy-loading them negatively affects performance scores.
• Use modern image formats like WebP or AVIF (better compression than PNG/JPEG).
• Specify width and height for images to improve rendering and prevent layout shifts.

💡 Tip #3: Lazy Load Images Only Below the Fold

This helps improve the Largest Contentful Paint (LCP) metric.

🔗 Learn more about LCP:

• Lighthouse Largest Contentful Paint
• Web.dev: LCP

CSS, JS, and Static Assets

• Enable Drupal CSS and JS aggregation.
• Use Drupal Asset Libraries to load only necessary CSS/JS per component.
• Tailwind CSS is used for styling—small CSS size, reusable classes, no specificity issues.
• JavaScript: Vanilla JS is used (no jQuery for better performance).
• Fonts: Downloaded locally, with font-display: swap; to prevent FOIT (Flash of Invisible Text).

If using Google Fonts, split files by Unicode range for smaller downloads.

💡 Tip #4: Use Drupal Asset Libraries to Eliminate Unused CSS and JS

Twig and Component-Based Approach

We use the Single Directory Components (SDC) module, which allows component-based theming in Drupal.

• Helps maintain clean, consistent markup.
• Reduces unnecessary CSS and JS.
• Works well with Tailwind CSS for streamlined styling.
• Paired with the Nomarkup module to remove unwanted Drupal markup.

💡 Tip #5: Keep Your Markup Clean, Small, and Consistent

General Tips and Tricks

✅ Keep development and content as simple as possible.

✅ Minimize page size (reduce payload sent to the browser).

✅ Use static HTML and CDN caching for static assets (CSS, JS, fonts, icons).

✅ Lazy-load images, but not those above the fold.

✅ Use WebP or AVIF for image compression.

✅ Properly resize images and use responsive image techniques.

✅ Write modular CSS and JS to avoid unused files.

✅ Aggregate, minify, and uglify CSS and JS.

That’s it! Thank you for reading! 🚀