Go to JAKALA website

FFW is now part of JAKALA’s group.

Sandwich

Copenhagen

Odense

Denmark.

Berlin

Hamburg

Düsseldorf

Germany.

Paris

France.

Dnipro

Mykolaiv

Ukraine.

Chisinau

Moldova.

Sofia

Bulgaria.

Hanoi

Vietnam.

Boise

USA.

Romania.

Austria.

Home

About

Work

Services

Insights

Contact

English

Dansk

Français

Deutsch

English UK

Who is this article for and at what point is it relevant now?
This article is intended for web developers engaged in website optimisation. It explores best practices and tips for optimising your performance and focuses on the front end.
It is relevant now as it contains detailed and current advice. This material provides specific tips and tricks that help websites achieve a 100% performance score on Google Lighthouse with Drupal resulting in being more easily found in search engines and improving user experience.
__________
Achieving a perfect score on Google Lighthouse with Drupal is possible and recommended, as it results in better user experience and increases search engine visibility.
We will guide you through five tips and tricks that helped us achieve top performance for the Intermarché campaign website. Intermarché wanted a website to advertise its discount period, bonus points, and available gifts. If you're interested in our case study and deep-diving into content-focused optimisations, please find our case study <a href="/home/work/case-study/achieving-a-perfect-google-lighthouse-score-for-intermarche-and-mastrad/" title="Achieving a perfect Google Lighthouse score for Intermarché and Mastrad">here</a>. 
So, how can we optimise the website, from a technical point of view, to secure a high-performance score on Google Lighthouse?
<h4>Tip 1: Keep your page size small</h4>
Keeping your page size small is one of the key factors in ensuring a fast website. However, more than a small page size is required to guarantee a fast website, as other factors like images can also affect site speed.
<h4>Tip 2: Keep it simple and follow the best practices</h4>
You will notice that the Intermarché campaign site is simple: a header, a footer and six paragraphs on the home page. We kept HTML, CSS, and JS as small and simple as possible. Static HTML is fast and secure. The first essential step for great results is not to have any server rendering or other server operations executed so the response time by the server is very fast. The HTML is pre-generated by Tome, then served and cached from a CDN, which is why it is so fast. 
There are only a few modules used besides the core ones:
<ul>
<li style="font-weight: 400;" aria-level="1">Tome for static site generation;</li>
<li style="font-weight: 400;" aria-level="1">Responsive image(core);</li>
<li style="font-weight: 400;" aria-level="1">Single Directory Components(core experimental);</li>
<li style="font-weight: 400;" aria-level="1">Paragraphs for building the content;</li>
<li style="font-weight: 400;" aria-level="1">Nomarkup module for stripping the unneeded Drupal HTML.</li>
</ul>
<h4>Tip 3: Lazy loaded, responsive, and improved rendered images </h4>
We utilise the Drupal responsive image module to resize images based on resolution. It is essential to employ lazy loading, and browsers now support native lazy loading with the loading= "lazy" attribute. For images above the fold, setting the loading attribute to "eager" is important. If the image is loaded lazily, it will negatively impact the page's score.
We recommend converting your images to the webp format or another format that offers better compression than png or jpeg. If you don't do so, Google Lighthouse may flag it as an error. The aim is to reduce the image file size as much as possible. Consider using AVIF format, which is expected to provide even better compression than webp.
Converting your images also helps with the Largest Contentful Paint (LCP) metric. LCP measures the render time of the largest content element in the viewport. We recommend improving render time by specifying the width and height of your images so the browser can reserve the layout for them in advance. This also helps meet the criteria for Cumulative Layout Shift.
<h4>Tip 4: Take advantage of Drupal asset libraries to eliminate unused CSS and JS</h4>
Make sure to use Drupal's CSS and JS aggregation. Utilise Drupal Asset libraries and only load the necessary libraries for each component to avoid any unused CSS and JS. This way, Drupal will aggregate only the required CSS and JS per page. For styling, we suggest using Tailwind CSS. It is easy to use with utility classes, has a small CSS size, and allows for the reusing of classes without any specificity issues or cascading. As a result, the browser can process the CSS quickly, improving the score.
Download fonts locally. We recommend using "font-display: swap" in the font-face declaration in CSS to avoid layout shift errors and flash of invisible text (FOIT) in Lighthouse. If you're using Google Fonts, it is better to split font files by Unicode range, which Google Fonts API does. This results in smaller font file sizes.
<h4>Tip 5: Keep your markup clean, small and consistent</h4>
We recommend the Drupal Single Directory Components module, which is currently experimental, but it is an excellent module for component-based theming. This module enables you to specify and reuse front-end components throughout the Drupal templates, ensuring a consistent and clean markup and even reducing the CSS and JS utilised on the site.
A beneficial addition to the SDC module is the nomarkup module. It enables you to effortlessly remove any unnecessary markup from Drupal and replace it with your own. This gives you complete control over the HTML, which is particularly important when using Tailwind. Additionally, cleaner and smaller HTML leads to better performance without the unnecessary bloat that Drupal sometimes adds.
Additionally, after generating static HTML files with Tome, we push them onto the server and utilise the caching provided by CloudFront. It's essential to clear the CDN cache every time you publish.
These tips and tricks are tried and tested, and we highly recommend implementing them to optimise your website's performance. Happy coding, and remember to consider performance from the beginning, not at the end; it is a process, not a one-time job!
Do you want to learn more about website optimisation or discuss a project with us? <a href="/home/contact/discuss-a-project/" title="(Discuss a project.)" data-anchor="#">Please reach out to us.</a>

5 Tips to achieve a 100% performance score on Google Lighthouse with Drupal

26 February 2024