It's been well over a year since I launched the W3Things website with WordPress content management system (CMS). Today, W3Things is now running on 11ty (Eleventy) static site generator.
In this article, I'd like to share the site migration experience from using the WordPress website to using the Eleventy site and some of the main reasons for doing so.
Let's get started.
Why Not Use the WordPress Content Management System?
WordPress is fine as a general CMS if you're not really concerned or worried about what's going on under the hood or how your site is performing in the technical audits.
The same is also true if you're fine with using all its defaults (theme, for instance) and don't care about the site design or overall UI and UX that much.
For instance, it's no secret that WP, out of the box, has no support for SEO, speed optimization, accessibility, and other similar factors. See the next section below to understand what I mean.
For all those things, you must look for many different plugins and themes to make your WP site "complete".
Missing Features in the WordPress CMS
While WordPress offers some of the basic features like modifying your page permalink or URL, previewing pages/posts before publishing them, getting your site content as XML export files to transfer to another WP installation, and using shortcodes, it still lacks in many other critical areas of a typical live site.
Below is a list of some of the important missing features in a typical WP installation.
- No support to add or edit metadata tags like Open Graph protocol tags for your web pages or WordPress posts
- No option for optimizing basic static assets such as JavaScript, CSS, HTML, images, and fonts
- No feature to use modern image formats such as WebP or AVIF with fallback support for traditional image formats such as JPEG or PNG
- No support for semantic markup or semantic site code (such as using the
article,header,footer,time, and other semantic HTML tags) - No ability to add or update structured data (Schema) for your WordPress pages or website articles
Why Use Eleventy Static Site Generator?
When I initially planned W3Things, I needed to get started as quickly as possible without having to spend time putting everything manually together, hence I chose WordPress at that time. As such, I had planned to convert the site to a custom-developed site after some time.
I was aware of 11ty at that time and was really interested in giving it a try (one of the reasons why I chose to write about it as my first blog post). So, I decided to use it when the time came to convert my WordPress site into a custom site.
Getting Started to Convert the WP Site into 11ty Site
To ensure a smooth transition, I had to make sure that all the existing major features of the WP site were available in the 11ty site as well.
In addition to the existing features and the limited WP site features that I had, I also went ahead and ensured that I'd add all the missing features (see the Missing Features in the WordPress CMS section above) and any additional site enhancements that would make the site usage experience better for both, the search engines and the readers of the site.
Below is a non-exhaustive checklist of the migration.
- Keeping all the permalinks intact (to avoid 404 Not Found status codes, etc.)
- Having a table of contents for the blog posts
- Implementing the structured data (Schema) (a complete solution unlike the limited options offered by plugins like Rank Math SEO)
- Adding an accordion for the article FAQs section
- Adding any custom-created modules like the code output module
- Handling image processing (resizing, adding alternate text, width and height attributes, etc.)
For most of the items in the list above, I had to manually create and take care of those things, such as developing custom 11ty shortcodes, writing Node.js scripts, and whatnot.
Site Performance and Speed Score Comparison
In this section, I'll share the before (with WordPress - dynamically generated site) and after (with 11ty - statically generated site) comparison of the W3Things site in terms of the overall web performance, which includes site speed, SEO, best practices, and accessibility, for both mobile and desktop viewing experience.
Below are the PageSpeed Insights score results pages of 4 different kinds of pages I tested (the home page, an article page, a product landing page, and an archive/category page).
Note
In case you're not aware, PageSpeed Insights is a site performance testing tool that audits various different things, such as site speed, accessibility, SEO, best practices, and other similar stuff like security. You can read more about the tool here.
Home Page
Here are the results of the home page.
Essential Gulp Kit
Here are the results of the Essential Gulp Kit product page.
Best WP Rocket Settings for WordPress in 2023
Here are the results of the Best WP Rocket Settings for WordPress in 2023 article page.
Web Development Category
Here are the results of the Web Development category page.
You can very well spot how W3Things performed better in all the categories with Eleventy compared to WordPress despite using the optimization plugins and applying the best possible optimization settings in the WP site.
What's Next for W3Things
W3Things is now running on Eleventy (v2.0.1 as of writing this article). If you're a returning visitor, you might notice some visual site changes such as the header, improved page loading speed, better accessibility, and a streamlined UI/UX, among many other changes.
Hopefully, in the next coming weeks, I'll be making frequent site updates, most of which will be internal or code refactoring along with several frontend updates like new features that further enhance the site interface and user experience.
And if you have any suggestions or bug reports regarding the site, please let me know via [email protected]. Any feedback is always appreciated.
I'll also be sharing some of the things I learned during the site conversion in the upcoming articles, so if anyone else is in the same boat, they'd hopefully get some guidance and avoid the common pitfalls that I ran into.
Conclusion
That's pretty much it. While there's a lot more I wanted to share, such as behind the scenes of what WP plugins and themes I used, my current internal build process, packages and features, site setup, and other configurations of the current Eleventy site, I decided to keep all that content out of this post to keep its length reasonable.
However, I'll be sharing all the behind the scenes in my newsletter. So, if you haven't already, consider subscribing to the W3Things newsletter to be among the first ones to receive news and announcements regarding upcoming articles, site updates, product discounts/coupons, and other exclusive web development tips and content.
Frequently Asked Questions about Converting a WordPress Site to a Static Website
What is a Static Site Generator?
A Static Site Generator (SSG) is a tool that helps automate the process of generating static HTML web pages more easily and quickly.
In other words, an SSG is a tool or software that takes different templates, data files, and other dynamic content and processes them to produce compiled and static HTML files with complete markup and content.
Some of the popular SSGs are Eleventy, Jekyll, Gatsby, Hugo, and Next.js. You can find more of them in the list provided on the Jamstack website.
What makes Eleventy so great?
At its core, Eleventy is a zero-config, fast, flexible, and pure JavaScript-based SSG that does not force you to use a particular client-side JS framework. It also gives you the choice to use whatever template language you're comfortable working with or not use any if you don't want to.
If you're interested in reading more about why Eleventy is so great or the capabilities it offers, consider reading its official docs page.
Can WordPress be static?
The answer to this question depends on the context. For instance, do you want to use WordPress as a headless CMS with Eleventy? If that's the case, then yes, WordPress can be static in that way.
The core idea behind such an approach is that the backend, the WP admin dashboard, is used to manage the content like WordPress posts or pages, and an SSG like Eleventy can take care of rendering and generating the frontend of the site by making use of the WordPress API (WordPress REST API).
This way, content managers and publishers can be comfortable working with the WP dashboard as they usually would, while a developer can take care of the headless WordPress, GitHub repository, git commits, working with and managing the content markdown files, deploying to production, configuring plugins and other existing WordPress site REST API integrations.
If you'd like to dive deeper into headless CMS for Eleventy or want to use Eleventy and WordPress together, then consider giving this SitePoint article a read.
Additional Resources
I've dropped a few external links to some of the topics and stuff mentioned in this article. Consider checking them out if you'd like to know more about them.
- What is Minification (Source: StackPath)
- Core Web Vitals (Source: web.dev)
- Static vs. Dynamic Websites: Here's the Difference (Source: HubSpot)
