Back to all articles

A static website — simplicity, performance, and SEO that fit any project

Artem Rudenko

Artem Rudenko

Software engineer, founder of ottofeller.com

What is a static website?

In its most basic form, a static website is a bunch of HTML/CSS/JavaScript files served by a web server. In other words, there is nothing between the static files and the web server that serves them over HTTP — no dynamically generated pages or templates. There are no frameworks or cloud infrastructure, just static files that you can host with any cloud provider almost for free. This article highlights the features and benefits of static websites that make them a perfect fit for most online projects, even for web apps. Additionally, this article will briefly cover tools for generating static websites from JavaScript apps.

Benefits

Performance

Probability of bounce, according to Google's research
Probability of bounce, according to Google's research

SEO

Google likes fast websites and ranks them higher. That's another benefit of static websites because they consistently load faster than dynamically generated websites. Along with performance, static websites solve other issues that prevent your page from floating to the top of Google search results. Static content, which is not generated by javascript, is extremely easy to parse by Google's crawler. A crawler seamlessly walks through your HTML and collects all the copies, with no need to call your scripts. This means that your websites will be faster and will be ranked higher.

Simplicity of deployment

As we mentioned a moment ago, a static website is just a set of files, mostly HTML/CSS/JavaScript. These files can be served by any existing web server, so there is no need for any specific configuration or set up — just copy the files and that's it! Moreover, you have a plenty of options for automated deployments, which are all pretty painless. For example, you can set up your codebase repository on Github to trigger and copy files to Netlify cloud hosting whenever files are changed in one of the branches. This can be done in a matter of a few clicks.

Perfectly fits serverless architecture

Serverless functions are indeed a perfect fit for static websites. Setting up a function that serves HTML using services like AWS Lambda is incredibly simple and should be covered by every article that explains how to start deploying serverless functions. The main advantage of running a static website as a serverless function is quite obvious: hosting bills will be significantly lower compared to traditional cloud hosting. By significant, I mean something like 50–60% reduction in cost. Isn't that a good enough reason to give static websites a try?

Can a static website replace a web app?

The process of building and deploying of a static website, according to gatsbyjs.org
The process of building and deploying of a static website, according to gatsbyjs.org

What types of projects are static websites good for?

A static website is the perfect choice for bloggers
A static website is the perfect choice for bloggers

The application of static websites is not limited!

As it turns out, blogs and landing pages are not the only applications for static websites. In fact, there are many others. Promo websites, or for example online surveys, all sorts of feedback forms — they all can be implemented as a static website in an elegant and robust way. Chances are very high that your website or (well-structured web app) can be implemented as a set of static files. At the end of the day, everything on the internet is represented as HTML/CSS/JS files.


Other articles

Gradual rollouts with AWS Lambda

Learn how to mitigate deployment risks using AWS Lambda's gradual rollout feature, enabling safer, incremental updates to your product's backend.

Using Tailwind to fill in the gaps in your team's CSS knowledge

Many engineering teams are favoring Tailwind CSS over plain CSS for its ease of styling web frontends with utility classes, addressing scalability issues encountered with traditional CSS as project size grows.