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 fast.

So, what can you check and tweak to make your SaaS static site’s pages more performant? Here are four technical 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 occasion.

Remove metadata #

Most images store extra data. If you take, for example, a photo with your phone’s camera, 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 data. For macOS there’s Optimage or use this online tool for image optimisations.

Decrease pixels-per-inch (PPI) #

This is likely less known. 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 double that.

Load images lazily #

Now it is time for some code. Recently browsers introduced the option to load images 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, needs the loading="lazy" attribute and you’re off to the races. Luckily because you’re using a static site, this likely can be done very easily with just a few lines of code without thinking about it.

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 by the user.

Minimise JavaScript #

If your site functions correctly without JavaScript, you are well on your way to a performant page. Now, JavaScript is great to improve the UX of your app or site, but being reliant on JavaScript for your site to load or show any content is a recipe for decreasing visitor numbers. HTML and 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 well without JavaScript, but, when JavaScript is 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 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 Dev Tools, 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.

Don’t forget to enable JavaScript after you are done testing!

Move static resources to a CDN #

A Content Delivery Network (CDN) stores your static resources (like images, CSS and JavaScript on multiple 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.

For SSG with huge number of resources, also check out these tips for a growing static site.

Written by July Forand

Published: 19 November 2022 (updated: 7 February 2023)