Needs the 100 Performance Score on Lighthouse? My 11ty Experience!

#jamstack #javascript #performance

Every now and then I have had to build landing pages for some projects I have developed, (Aurora is a case of these).

Being aware of ReactJS I have always approached a static solution using NextJS Static Export. Convenient, fast and effective.

The other day, however, while I was wandering through the meanders of the web as a good developer in search of new ideas, I came across a project that won me over immediately, it's called Eleventy, or 11ty for friends.

Eleventy is an incredibly quick static site builder to set up and with a pretty low learning curve.

There are three advantages that (until now) made me fall in love with this tool:

Possibility of managing different templating languages, for example I used nunjucks, but also markdown, mustache and many others are compatible.
Management of native paging, with two configuration lines within the page it is possible to create a fully functional pagination.
Native image optimization, with its official plugin and a dozen configuration lines you will never have problems resizing images, thus guaranteeing excellent performance and score!

To fully test its potential, I therefore decided to test both the tool and myself, creating a very simple Pokédex, which you can find on my Github.

The problems I wanted to address are the classics, I wanted the page loading to be instantaneous, regardless of its content, and to shoot myself in the foot, I decided to include images of the first 30 pokemon on the homepage, plus a background image repeated for each card, and the logo. In short, let's say that the browser has to do a bit of work!

This is more or less what a card looks like:

An this is what an entire page looks like:

As you can see there is a lot of stuff to manage for our poor browser! Normally in such situations only for the loading of the images the lighthouse score would inexorably fall at least below 70 points.

Instead, thanks to the optimizations that Eleventy makes available, it is possible to provide fully optimized images to your browser with a single template line!

In my configuration, i've set up 3 type of widths for my images, 150px, 300px, and the original image resolution.

async function imageShortcode(src, alt, sizes) {
  let metadata = await Image(src, {
    widths: [150, 300, null],
    formats: ["avif", "png", "svg"],
    urlPath: "/images/",
    outputDir: "./_site/images",
  });

  let imageAttributes = {
    alt,
    sizes,
    loading: "lazy",
    decoding: "async",
  };

  return Image.generateHTML(metadata, imageAttributes);
}

Let's see how 11ty has managed the code:

Ha you can see, 11ty has inserted the picture tag, with all the generate responsive media, and the correct srcset

The Judgment Of Lighthouse

What about the scores?
The only score important for me in this case is the performance, the other stuffs doesn't make any sense, nobody will use this Pokédex at all.

Let's try it out!

Yessaaahh! 100! Total Green! You can also try it out for yourself by visiting the demo of this Pokédex.

Wrapping Up

So, we have seen how 11ty achieves impressive results through the SSG and its various optimizations.

I will certainly reuse it for more serious projects, perhaps going to rewrite the Aurora landing page, I will also evaluate it if I need to develop very simple websites that require incredible performance.

I absolutely recommend to try it!

Have I intrigued you and you want to try 11ty? You can go on the 11ty official website and follow the start guide, it's really quick to get started!

Do you have twitter? Let's get connected!(@imarenny)