Static Websites, Back to the Basics

In this modern era of large, powerful, complex websites, we often lose sight of what really matters: the user experience. This can encompass everything from how fast the site loads, to how responsive it is, to simply how easy it is to find in search results. Our sites can have all the bells and whistles imaginable but if no one visits or sticks around, what’s the point?

This has led to a resurgence in sites that are built out of simple HTML, CSS, and Javascript. i.e. static websites. Now this is where you ask “Are you crazy? You’re recommending going back to writing boring, flat, html sites?” The answer is “Of course not, that wouldn’t be fun … I mean productive!” But before we dive into the details, let’s talk about static websites for a few minutes.

Why Static Sites?

There are a ton of benefits to static sites, some of the key ones being:

FAST! Because static websites are built out of simple HTML, CSS, and Javascript files with no complicated database queries or processing, they can be served to the end user’s web browser really fast, keeping that user happy and on your site.
Cheap to host. For the same reason as #1, because static sites are simple HTML, CSS, and Javascript, they can easily be handled by the most budget of web servers. Dynamic sites generally need more powerful, capable servers to deal with all that dynamic data.
Great for search engines. Unlike a lot of modern dynamic websites, when you visit a page in a static site, you receive all the information right away. With dynamic sites there can be delays as the content is requested from a server, etc. During this delay, the search engine crawler may have already moved on, assuming there’s no content there. With static sites, the crawler gets everything right away. We all love a happy crawler, right?

How Do We Get There?

There are a few different approaches one could take.

The first is to “simply” build the site from scratch out of HTML, CSS, and Javascript. This is very effective but may not be as efficient as we would want. Or it might result in a less interesting site.

The second is to use a static site generator to build the site. There are a wide range of these tools but the general idea is that you use your software development tools and frameworks of choice and the static site generator takes the result and creates the static pages from it. It basically visits all the pages and takes the resulting pages received by the browser and saves them for later use. That’s a gross oversimplification but it gets the idea across. Some popular examples are Gridsome for Vue developers, Gatsby for React developers, and Jekyll for Ruby. There are tons more but that would be a blog post in itself.

But I already have a great WordPress site! Guess what, there are static site generator plugins for WordPress! I know, right? But don’t get too excited yet, they’re not a silver bullet. If your site uses plugins for things like e-commerce, memberships, etc. there’s a good chance the site generator plugins won’t work. These kind of things require a lot of server interaction and since a static site doesn’t have a server backend, you’ll likely be out of luck. But for that information, blog-like WordPress site, static site generator plugins may just do the trick! Just keep in mind that there will likely be some development work involved.

Wrapping It Up

To summarize, if you’re experiencing any of the following, your analysis should definitely include static websites:

Complaints that your site is slow
Poor search engine rankings
Higher than preferred hosting costs
Lower visitors than expected

Other Resources

If you’re just looking to get an idea what this static websites thing is all about, you can stop reading here. I just wanted to include some resources for those looking to dig deeper into the development side. Feel free to pass this on to your development team or partner!