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

What is a static website?

In its most basic form, a static website is a bunch of HTML/CSS/JavaSscript 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

According to Google’s research, if your website loads from anywhere from 1 to 3 seconds, the probability of a bounce increases by 32%. It means that every 3 out of 10 visitors to your website will leave your page without even touching all your marketing bells and whistles. Your website must load faster than a second because users will not tolerate a lack of speed. If your website loads slowly, your potential customers will simply leave. The good news is that static websites can lift the performance of your website to a new level, even without applying advanced techniques. Instead of calling a database or other external source of data, a web server simply sends a bunch of files from a local drive right into the user’s browser. The absence of computation on the server side saves a lot of time!

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 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?

Modern static website generators are powerful tools for generating static files from a JavaScript app. They can deliver a sophisticated user experience and a complex business logic backed by JavaScript. Let’s take the most famous static website generator Gatsby.js as an example. It is quite common to create real web apps with it, and these apps limitations will hardly be noticeable. At the same time, Gatsby.js lacks any complexity and allows you to create static websites seamlessly and very quick. It is as simple as writing a couple of React components in the file structure according to Gatsby.js. The generator will then build static pages from these components, namely a set of JS/HTML/CSS files.

What types of projects are static websites good for?

Static websites are the perfect fit for your next fully featured blog with media content (video, images, or audio), tags, comments, and small but important features like pagination or a “filter by date” function. It will be your one-stop tool. If you want to keep the content of your blog in your favorite online writing tool (like Google Docs or Dropbox Paper), you can set up a static website generator to pre-fetch data using the API of these tools. Another obvious application for static websites is landing pages. The purpose of creating a landing page with a static website generator is that this approach will allow for new features by simply adding a JavaScript module. If your website is generated by Gatsby.js, then you are able to pick from tons of ready-to-go JavaScript modules written in React. There is everything you need — forms, video players, image galleries, analytics, 3rd-party API SDK like Facebook or Google, and many others.

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.

Originally published at https://ottofeller.com on July 10, 2019.