Eleventy (11ty) — a simple and powerful static site generator

Specifics of static and dynamic sites

This article focuses on the benefits of static site generators or rather one in particular, called Eleventy (also known as 11ty). But to decide whether it’s the right technology to use in your project, you should clearly understand the type of site you plan to create: static or dynamic.

Dynamic sites offer more options for customizing content. For instance, if you want to show personalized content for different users and let them post and comment, you will need a dynamic site.

However, if the content will remain consistent, then a static site would be a more appropriate choice. Static sites are well-suited for displaying articles, reviews, or documents, and if you are creating a landing page, promotional website, personal blog, or product catalog, Eleventy may be a good fit for you. It’s also worth noting that although users of static websites cannot request specific data from a server, the websites can still look custom with interactive UI elements, such as sliders and image galleries.

So the main difference between static and dynamic sites is how they handle content:

Static sites receive ready-made content from the server and display it in the same way for all users.

Dynamic sites, on the other hand, do not store content in a ready-made form. Instead, the content is generated at the time of the request and can vary based on specific parameters. This means that different users of a dynamic site may see different content.

And here’s an example of a dynamic site where a logged-in user and a visitor browsing in incognito mode get different product recommendations.

Advantages and disadvantages of static sites

If you are still considering your options, it can be helpful to weigh the pros and cons of static sites. Here are some of the advantages and disadvantages to think about.

Advantages of static sites over dynamic ones:

• They are often faster than dynamic sites because they do not need to retrieve content from a database.
• They are more secure because they do not involve user interactions, which can be a common security risk.
• Static sites are easy to deliver and cache. The content is only downloaded from the server after the first request, and when a user revisits the site, the information is taken from the browser cache, allowing for faster display.
• They are less demanding on server resources and can be hosted anywhere. They are also cheaper to host and easier to migrate.
• Static sites have high resilience and can withstand DDOS attacks and traffic spikes that can cause dynamic sites to fail.
• Static websites may rank higher in search engines due to their faster loading speeds and content that is easier for search robots to crawl and index. However, it’s worth noting that it is regularly updated websites that tend to rank highly in search results. While on a dynamic website, content can be added by users through features such as commenting and posting, on a static website, content updates are typically made by the site owner and editors.

Disadvantages of static sites:

• Static websites are less functional. They’re made to display static content, such as text, images, and animations. However, they cannot handle complex logic, e.g. user management, search, dashboards, etc.
• They are also less scalable. For dynamic sites, it’s relatively easy to add new logic, while for static sites, it’s either much harder or even impossible.

Now that you know more about static sites, let’s look into how static site generators can help us build and maintain them.

What benefits static site generators can offer?

While it is possible to create static sites without using a static website generator by combining HTML, CSS, and JavaScript, static site generators offer several benefits that make them popular among developers.

Here are the main advantages for you to consider:

• Static website generators help developers automate tasks for improved website performance. They can do this by generating optimized and fast-loading HTML pages using pre-configured templates. This makes it easy to implement best practices and eliminates the need for manual creation and optimization of static pages.
• Some of them support the Markdown markup language, which makes it easier and safer to edit content compared to editing source code. This is particularly useful for static sites that do not include a full-featured text editor or a user-friendly control panel.
• They often come with built-in layouts and templates that can be used to create different types of content, such as blog posts, image galleries, and more. The specific types of content that are supported may vary depending on the static website generator and its focus or specialization.
• Many static site generators also offer built-in search engine optimization (SEO) functionality, which helps ensure that the site’s content is easily accessible to search engine robots and can improve the site's ranking in search results.

Basically, the only challenge with using static site generators is that they require more skilled and knowledgeable professionals to work with, and the development process can be a little bit slower. However, this added effort is well worth it as maintaining such sites is significantly easier, and tasks can be completed more efficiently.

11ty as one of the most efficient static site generators

When choosing a static website generator, it is important to consider the features and capabilities of the different options available. Some of the most popular static site generators include Eleventy, Hugo, and Jekyll, which are specialized in generating static sites by accepting data and returning HTML. Other generators, such as Gatsby, Next, and Nuxt, can generate both static and dynamic sites, which makes them more versatile and popular but also more complex and potentially slower.

Studies have shown that Eleventy is one of the fastest generators for small to medium-sized sites with several dozen pages, outperforming more popular options such as Gatsby and Next.

Though speed is important, it is not the only indicator to consider when choosing a static site generator. The work of a site generator always involves a trade-off between its speed and the tasks it can perform. Choosing a static site generator is not just about selecting the “fastest” option but rather about finding the tool that is best suited for a particular project and a particular programmer, taking into account their skills and personal preferences.

And here’s why you might want to choose 11ty:

• Eleventy is written in JavaScript and Node.js, which is familiar to many front-end developers. This means that you may not need to learn a new programming language in order to use Eleventy effectively. Our company’s developers have also found Eleventy to be a useful tool, creating a library to improve the work with images.
• Eleventy supports a wide range of templates, including Markdown, HTML, WebC, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, and Pug. This allows for flexibility in creating a project, as you can use one particular template or combine multiple templates written in different languages. For example, you can combine HTML, Markdown, and JavaScript templates.
• Eleventy is renowned for producing efficient, high-quality sites that load and run quickly. It is used by well-known companies and sites, such as Google, Netlify, CSS Tricks, W3C, MIT, CERN, A11Y Project, ESLint, Stack Overflow, and many others.

Naturally, Eleventy’s own website, https://www.11ty.dev/, is also created using the Eleventy generator. You can visit the site to see the performance and speed of a real working site created with Eleventy. Take a look at how Google Lighthouse evaluated its performance.

As you can see, the result is nothing short of excellent, and that’s quite telling.

Speed as one of the most important features of 11ty

Throughout this article, we have emphasized the importance of speed in relation to Eleventy, and for good reason. Speed is a crucial factor for the success of any website. No matter how useful the content or how appealing the design is, if a user can’t access it, all of that effort will go to waste.

According to HTTP Archive, the average web page size in 2022 was 2.3 MB on desktops and 2.0 MB on mobile devices. These figures are quite high, considering that the average page size was much smaller just a decade ago. The similar page size for both desktop and mobile devices suggests that many websites are not optimized for mobile devices.

According to Neil Patel, 40% of desktop users and over 50% of mobile users will leave a page that takes more than three seconds to load. This means that a slow website can lose half of its audience due to poor performance. Additionally, a slow website will likely negatively impact SEO and lead to a decrease in traffic from search engines.

It’s also interesting to take a look at the basic components that contribute to web page size. Typically, images are the heaviest component of a website, followed by JavaScript, which tends to make up about half the file size of images on average.

Thus, optimizing images and reducing the weight of JavaScript can significantly improve the size and speed of a web page.

That’s exactly how Eleventy can help. While it does execute some JavaScript code, it does so to a much lesser extent even compared to other static site generators such as Next.js and Gatsby, reducing resource usage to a minimum. In addition, once installed and configured, Eleventy Image Plugin automatically converts all web page images into the most modern WebP or AVIF formats, depending on the project’s settings. In our experience, this change in image format provides a two- to five-fold reduction in size.

The same plugin also makes it easy to use different images for different screen resolutions. Let’s assume we use images with widths of 1280px for desktop devices, 640px for tablets, and 320px for smartphones. Applying this strategy for square-shaped images will result in a fourfold decrease in the file size of the images on tablets, and a sixteenfold decrease on smartphones, compared to the file size on desktop devices.

Our own case of moving the company site to 11ty

Eleventy’s ability to improve the speed of web pages played a significant role in our decision to use it for our company’s website redesign. But let’s look at some data first. Below you can see the Google Lighthouse results in evaluating the performance of the Halo Lab homepage before implementing Eleventy.

According to the report, our website’s performance score for mobile devices was 82%. While this is considered good, it falls short of an excellent 90% or higher score. In general, Google Lighthouse identified several areas for improvement:

• Speed Index is the time to display the visible parts of a page (8.2 seconds, optimal value is up to 3.4 seconds).
• Largest Contentful Paint is the time when the main content of the page is likely loaded (2.6 seconds, optimal value is up to 2.5 seconds).
• Time to Interactive reflects the point at which users can interact with the web page (6.5 seconds).

Now compare how these values have changed with Eleventy. Below are the Google Lighthouse results in assessing the performance of the Halo Lab homepage after we implemented Eleventy.

We got the following results:

• The Performance score increased by 10% to 92%.
• Speed Index decreased from 8.2 to 2.4 seconds (an acceleration of 5.8 seconds or 70%).
• Time to Interactive also decreased from 6.5 to 4.6 seconds (an acceleration of 1.9 seconds or 30%).
• While the Largest Contentful Paint score was not optimal due to us having a lot of images on the site, this indicator still highlighted for us what needs to be addressed.

Overall, that’s quite an improvement, don’t you think?

Taking it up a notch: integrating 11ty and Sanity

Previously, we mentioned that Eleventy supports over ten different types of templates, including Markdown, a markup language designed to be as human-readable as possible. And while our developers were adding data to the site, using Markdown was a breeze. For them, the language was indeed straightforward. The problems occurred when we involved the editors in the process — for them, working with Markdown was much more time-consuming and complicated than they’d like.

The second challenge we encountered was that adding templates to a project as Markdown files required knowledge of git and GitHub. While it is possible to learn these technologies, we wondered whether it was necessary for our editors to have this technical expertise. The third challenge stemmed from the second — if non-technical individuals were allowed to edit the code repository, it was only a matter of time before issues arose.

To address these challenges, we set the following goals:

1. Make it easier for non-programmers to add content to the site using a visual editor that is familiar and convenient to them.
2. Protect the project code repository from being edited by non-technical individuals to prevent potential problems.

We decided to add an admin panel to the project, similar to those used in traditional CMS systems. However, static website generators typically do not provide for such panels. Fortunately, Eleventy supports integration with Sanity, and that’s what we could use to add content.

Being a new generation headless content management system (CMS), Sanity allows managing and storing website data in a separate server. This separation makes it easier to use Sanity’s data in any application without being tied to a specific technology or architecture. At the same time, traditional CMS systems combine the backend and frontend into a single system.

Sanity is a highly popular and developer-friendly CMS with a great feature set even in its free plan. It enables easy management of text, images, and videos through its API and functional admin panel. Content can be saved as drafts and published when ready.

In addition, Sanity’s image transformation feature, which allows for on-the-fly conversion by adding parameters to the URL, greatly improves efficiency and streamlines work with images.

We can say that the integration of Sanity into the project was a success, and it fully met all of our expectations. The use of Sanity and its CDN-based storage for uploaded data results in faster data delivery, and that helped us maintain high performance while making the process of adding content to the site more efficient, convenient, and secure.

Conclusion

When designing websites, it’s important to consider the users who will be accessing them. Many people do not have fast, unlimited internet or new, powerful devices, so using modern technology can help make websites more lightweight and perform well even on slow internet connections or older devices.

Here’s what Content Strategist Brice Berdah says about this:

Poorly designed websites result in the exclusion of regular people from services they could benefit from.

And there’s truth to that, as unnecessary traffic overloads networks and higher demands push up service costs. Ultimately, he concludes that “Publishing an unnecessary dynamic website is an abuse of a common good,” which is something to think about.

However, we can improve the situation. Instead of relying on suboptimal technology, consider using modern approaches and mechanisms in website development. If a static site is needed, using a static website generator would be a reasonable decision — and Eleventy might be just what you need.

Resources

If you’re a developer interested in the technologies discussed in this article, below you can find detailed resources to help you get started with learning Eleventy and integrating it with Sanity. We hope your experience learning these modern and progressive technologies is both successful and enjoyable. By mastering these tools, you can improve as a developer and make your projects faster, more efficient, and more user-friendly.

1. Eleventy Documentation

2. Learn the Eleventy Static Site Generator

3. How to get started with the 11ty (Eleventy) Blog Starter