When it comes to websites, there are two main types: dynamic and static. Dynamic websites use a server-side programming language to generate content on the fly, while static websites are pre-built and served as-is.
In dynamic websites like those built on Wordpress and other site builders, the server must query the database, generate an .html file using the queried data, and then serve that to the user. This process is ideal for web pages or web apps that change very often and require content to be unique to each visitor. For example, your Facebook homepage will change every time you open it, and it will be unique to you. Facebook doesn’t store your homepage, rather, they query their database and generate it only when requested.
On the other hand, static websites do not change when the webpage is requested. When requesting the same URL, everyone will see the same page. Static sites are often built with Static Site Generators (SSGs) such as Astro, Next.js, and Hugo. SSGs generate .html, .css, and .js files that can be directly served to the client, making them incredibly fast and optimized for SEO.
There is no one-size-fits-all solution when it comes to choosing between dynamic and static websites. Generally speaking, if the website content should be unique to each visitor, and content is based on data stored in a database, opt for a dynamic website. If the website content will be the same for each user, and the content does not update often, opt for a static site.
Why is Wordpress Dynamic, and Can I Use it as a Static Site?
Wordpress is a popular choice for dynamic websites because it provides an all-in-one solution to build a complete website. This is great for small businesses who don’t know how to code a website and can’t afford a web developer. However, Wordpress can also be used to generate static sites using plugins like Simply Static and WP Static HTML Output. This allows users to enjoy the benefits of a static site, such as improved speed and SEO, while still being able to use the familiar Wordpress interface.
This is only a viable option if you meet the following criteria:
- Your website content doesn’t need to update when requested, and can be served as-is
- You website does not have register/login functionality
- You have no intention of making large changes to the exported code (Wordpress code is extremely messy, and directly modifying Wordpress code can be difficult)
- You will not be updating the content often (you can, but it’s tedious to export again)
If you meet this criteria, consider exporting your Wordpress site to a static site. You can host static site for free on sites like Netlify and Vercel, which we’ll discuss later.
Before we discuss how to do it, let’s quickly look at the speed increase by exporting a Wordpress site to static. I used https://wordpress.org/themes/garden-landscaping/, and created the default site on my Wordpress server.
Performance When Hosted on Wordpress
We’ve seen slower Wordpress websites before - 56 is surprising not bad for a dynamic Wordpress website! The largest issues are unoptimized images, excessive Javascript size and execution (especially on mobile, where almost all of this Javascript is unused), and layout shifts due to content loading in a clunky way.
The site is usable, but it could be vastly improved. For an optimized static site, 56 is extremely bad. Let’s use Simply Static to export the website, host it on Netlify, and perform another speed test:
Performance When Hosted on Netlify
Better! Script execution time is vastly decreased, as well as time to First Contentful Paint (when content is first visible) and Total Blocking Time (when a file is loading/executing and other files have to wait to load, this adds to blocking time). This is because the server doesn’t need to generate content. It simply needs to send the html files and other assets to the client.
But it could still be improved. We’ll talk about image optimization later.
How to Export Wordpress to a Static Site
There are several plugins that will handle the export for you, so you don’t have to do it manually!
Simply Static works well, and that’s the plugin we recommend. It’s easy to setup and use, with minimal configuration. If you face issues with Simply Static, an alternative we recommend is https://www.httrack.com/
Step 1: Install and Activate the Simply Static Plugin.
To get started, you’ll need to install and activate the Simply Static plugin. You can do this by going to the Plugins section of your Wordpress dashboard, clicking on “Add New”, and searching for “Simply Static”. Once you’ve found it, click “Install Now” and then “Activate”.
Step 2: Configure Simply Static.
After activating Simply Static, you’ll need to configure it to export your Wordpress site to a static site. Go to the Simply Static settings page, which can be found under “Tools” in the Wordpress dashboard. Here, you’ll see a number of settings that you can customize, such as the URL of your Wordpress site and the location where the static files will be exported.
Step 3: Generate the Static Site.
Once you’ve configured Simply Static, you can generate your static site by clicking on the “Generate” button. This will begin the process of exporting your Wordpress site to static files. Depending on the size of your site, this process could take several minutes.
Step 4: Download the Static Site Files.
After the generation process is complete, you’ll be able to download the static site files. Simply Static will create a zip file containing all of the static files, which you can then download to your computer.
There are other configuration options as well, such as exporting all files to a chosen folder rather than downloading a zip.
To ensure it exported properly, open index.html within your exported files.
Step 5: Add to Netlify (or other static site host).
Create a new Netlify site: Sign up for Netlify if you haven’t already, and create a new site. Choose a name for your site, and select your preferred deployment method (Git or drag-and-drop).
Connect your Git repository: If you’re using Git, connect your repository to Netlify by providing access to your repository. It’ll ask you to configure your build settings to tell Netlify how to build your site. For static Wordpress sites, leave this blank.
Set up custom domains: If you’re using a custom domain, set up your DNS records to point to Netlify. You can find detailed instructions in the Netlify documentation.
Deploy your site: Once everything is set up, you’re ready to deploy your site to Netlify. Simply push your changes to your Git repository, and Netlify will automatically build and deploy your site.
Images
The largest issue now is unoptimized images, so let’s optimize some of the problematic images. In your static Wordpress folder, you’ll have to seek out the images folder. This can vary depending on your theme, and there may be more than one folder. If you can’t find it, try searching for an image file name in the file explorer.
We highly recommend Microsoft PowerToys for Windows 10+ users as an image resizer. The actual size of your images should be very close to their actual size on the webpage. For example, if you download a 6000x3000 stock image, it will have a large filesize. If you’re only displaying it 800x400 on your website, then you can safely reduce its size to drastically reduce filesize. Powertoys provides a very easy way to do this, completely for free.
Consider running your images through an image compressor as well, such as Compress JPEG for jpg/jpeg images.
You may or may not want to do this with all of your images. We stick to the most problematic ones. If you modify images, ensure that the file names and file type stay the exact same, or your static Wordpress website will not know where to find the images!
Final Result
Hooray, Performance is in the green! I only optimized 5 of the largest stock images to achieve these results. It takes only a few minutes, and it brings enormous benefit.
Limitations
There are a few limitations worth mentioning when exporting a Wordpress site to static.
PHP Version on Your Server
Simply Static requires a specific version of PHP, as stated in the plugin description. There is a minimum and maximum version required for it to work properly. If it’s not working, check your PHP version
Harder to optimize Accessibility, Best Practices, and SEO
Exporting a Wordpress site to static will immediately bring performance improvements, but for other metrics, you are generally limited to Wordpress plugins. Some can be very helpful, but in the end, it may be difficult to get close to 100 on any metric.
Very difficult to make changes after exporting
The easiest way is to host your website on a cheap Wordpress server somewhere, make the changes, then export to static. But, you’ll lose any post-export changes like image optimization as it will be overwritten.
Very tedious and error-prone when making changes and rebuilding your website
If you are going to change the content frequently, we wouldn’t recommend this method.
Can break when using Netlify plugin
This will largely depend on your Wordpress theme, but from our experience, you cannot use Netlify’s inline-critical-css or image-optim plugins, as the plugins will crash. This is unfortunate, because it could save you a lot of manual work.
Wordpress static sites still vastly underperform static site generators
We won’t ask your reasons for wanting to build a site with Wordpress and export it as a static site, but to be honest, this is far from an ideal solution. Site maintenance is not easy, and the code is still clunky. Wordpress is notorious for adding excessive code - this is not a problem if you’ve hand-coded your website, since you have complete control over the code.
Conclusions and Recommendations
Although we don’t generally recommend exporting a Wordpress website to static, it is indeed possible. There are a few reasons why you may want to do this, such as adding a Wordpress site to your portfolio and not needing to pay server hosting fees for it.
Make sure you know why you want to do this - there might be an easier way to do what you want to do!
We highly recommend SSGs like Next.js and Hugo for website front-ends that don’t change often. Next.js is ahead of it’s game, and is suitable for both static and dynamic sites.
For your backend, you can also use Wordpress as a Headless CMS, and connect any front-end you wish. In this case, headless simply means that the CMS (backend) is separate from the front-end. On it’s own, all of Wordpress is tightly coupled so the Wordpress Headless CMS may be suitable for you if you like the Wordpress admin interface, but don’t want the clunkiness that comes with it.