Blog / Growth
4 technial SEO tips to improve your static site
Performant marketing site’s are important for SEO, but also your visitors will love your speedy site.
As a tiny, bootstrapped company, sharing this content réally helps!
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.
In Chrome: open Chrome Dev Tools, press Control+Shift+P or Command+Shift+P, type
Move static resources to 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: (updated: )
Get all Spinal content in your inbox
Every first Thursday of the month, we'll send the latest about Spinal in your inbox. From product updates, articles and a little peek behind the scene of building a SaaS in 2023.
Get all the latest every first Thursday of the month. No spam. Unsubscribe at any time.