Performant marketing site’s are important for SEO, but also your visitors will love your speedy 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.
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.
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.
In Chrome: open Chrome DevTools, 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.
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 2022.