4 technial SEO tips to improve your static site

It's no secret that Google prefers a performant site, but more importantly your visitors will be thankful too! Because the faster internet connection and devices get, the less people like to wait. After all, if everything is quickly accessible, but your site is not, it will only take 100ms for them to decide to go to the next site.

Yes, 100ms is quick.

So, what can you check and tweak to make your SaaS static site's pages more performant? Here are four techinal SEO tips you can check and tweak in any of the popular static site generators.

If you don't know how to act upon all the points described here: your developer team for sure knows how to do so!

Improve images

You can improve your images in multiple ways. That list all of the options:

Decrease dimensions (width/height)

This one's obvious, but it helps to not upload or store images that are well over 2560 pixels wide or more (or take any random big number). If an image is not showing as 1280 pixels wide, there's really no way to upload it at 5120 pixels.

There's a GitHub action that resizes images for you. Or you can use any of the available tools on your laptop. Note that Spinal has an upload limit of 2MB.

Use a performant format

One more, probably, obvious tweak to make. Often jpg is a better choice than gif. Or maybe you can get away with the heic format. Check the right format for the right occassion.

Remove metadata

Most images store extra data. If you take, for example, a photo with phone's camera, may extra data is stored. When the picture was taken, where it was taken and details about the camera. For privacy reasons you want to scrub this data, but it's also unneeded data if you use it in your static site's content.

There are various tools you can use to remove this kind of data. For macOS there's Optimage or use this online tool for image optimisations.

Decrease pixels-per-inch (PPI)

This is likely less known too. But images can store more pixels per inch than is needed to show them sharp on screen. When there are more pixels, the image will take up more space. Most basic tools, like the preview.app on macOS will allow you to check the resolution by going into Tools > Adjust Size. In the dialog check the resolution. Based on your customer's screen resolution, anything above 144 ppi is likely too much. 72 ppi used to be the default for screens, but the introduction of high density pixel screens (dubbed retina displays by Apple) upped to be more close to double that.

Load images lazily

Now it's finally time for some code! Recently browsers introduced the option to load asynchronous, meaning they load once they enter the viewport. Wow! This sounds technical, right? It's not really difficult. Each image you want to load async, need the loading="lazy" and you're off to the races. Luckily because you're using a static site, this likely done very easily with a few lines of code.
You can be confident with setting this attribute by default on all images in your static site, unless the default loading="eager" is set to the image, for example on any hero image (above the fold).

Note that Safari, at the time writing (November 2022) doesn't support this feature out-of-the-box, but needs to be enabled manually.

Minimise JavaScript

If your site functions correctly without JavaScript, you are well on your to a performant page. Now, JavaScript is great to improve the UX of your app or site. But being reliant on JavaScript for your to load or show any content is a recip for decreasing numbers. HTML + Css have everything you need to build a well-performing site.
So I'd like to suggest to use progressive enhancement here instead. This means that the site functions just well without JavaScript, but, with JavaScript enabled, it adds a bit more flair. A good example of this is the Spinal documentation. The navigation is hidden on smaller screen and can be shown by tapping the button in the bottom-left. This works just well without JavaScript, but if you enable JavaScript the icon, indicating the state, changes as well as a little transition/animation is in place.

JavaScript allows you to do a lot of cool things, but be mindful to not overuse as to harm your site's performance.

How to test your site without JavaScript

Disabling JavaScript depends on your browser.

In Chrome: open Chrome DevTools, press Control+Shift+P or Command+Shift+P, type javascriptselect Disable JavaScript, and then press Enter to run the command. JavaScript is now disabled.
In FireFox: open the Web Developer Tools, press F1, under Advanced Settings check Disable javaScript. Note that this option only stays enabled with the tools open.
In Safari: open Preferences, go to Security and check off Enable Javascript.

In this cases of Chrome and Safari don't forget to enable JavaScript after you are done testing your static site's performance without JavaScript!

Move static resources to a CDN

A Content Delivery Network (CDN) stores your static resources (like images, CSS and JavaScript on mulitple servers around the world. This makes sure that the biggest files to download are as close (geographically) to your visitor as possible. Platform like Netlify and Vercel have support setting up your site on a CDN.

Really a quick win!

Tools to help you check and improve your site's speed

Pagespeed Insights is an easy to use tool that gives you a number between 0 and 100. Where 0 is poor and 100 is good. Next to that (vanity) number, it also comes with actionable ideas to improve your static site's weaknesses.
Website Speed Test by Pingdom is a handy tool to see how your site behaves based on various locations in the world.
You can also use the Performance Report by GTmetrix to get a few more metrics to check and act upon.

Those are the most common, low-hanging fruit technical SEO tips for your static marketing site. Did it help your site? Do share it with the world.