Static Super sites come with many optimizations built in. We're committed to giving you the easiest way to build and manage a lightning fast website. In this guide, I'll cover extra optimizations you can do to make your site as fast as possible.
Images
One of the most important parts of a website are its images. They can convey messages which words cannot and often set the mood of a website. Images are also one of the heaviest pieces of data on a site and usually contribute the most to bad speeds. Super has multiple methods of automatically optimizing your images but often they can be even faster. Before uploading an image to your site, running it through some basic optimization software can make big differences in file size. Many optimization solutions simply strip out unneeded metadata from the image. Some solutions I use often are:
If this software isn't good enough for your image and you need it even lighter, reducing the pixel size (width, height) can also make a big difference. It's common for images displayed on websites to be much bigger than they need to be. For example, if your raw image is 3000x1000 but when displayed on your site it's only shown as 500x500 making the image closer to the display dimensions will help.
Minify custom HTML
Our sites offer the ability to inject custom HTML tags. When writing these tags in code they're usually spaced out and indented.
<link
rel="preconnect"
href="https://fonts.gstatic.com/"
crossOrigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
.notion-bookmark__cover {
flex: 1 1 180px;
display: block;
position: relative;
height: 108px;
}
.notion-bookmark__cover img {
display: block;
object-fit: cover;
border-radius: 1px;
width: 100%;
height: 100%;
}
</style>As the amount of code grows that extra white space grows with it. When rendering your site the browser doesn't actually care about how neat and beautiful your code looks. It ignores the white space, but this extra space is still sent over the internet with each bit and byte contributing to load time. To get rid of this extra space use a "HTML minifier" like the one below to minimize your network footprint before submitting the code to Super.
After minifying, the above code looks like this
<link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin=""/><linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"rel="stylesheet"/><style>.notion-bookmark__cover{flex: 1 1 180px; display: block; position: relative; height: 108px;}.notion-bookmark__cover img{display: block; object-fit: cover; border-radius: 1px; width: 100%; height: 100%;}</style>Preload scripts
When a page first loads the bowser looks in its <head> tag for any scripts and stylesheets to fetch. Once found the browser makes a request to their origin so they can be loaded on your page. Since the origin of any custom scripts and stylesheets added to your site are already known we can tell the browser where to look, speeding up the pages loading time. This is accomplished by adding a <link rel="preconnect" /> tag.
The href property is usually the beginning part of the scripts domain as shown below
<link
rel="preconnect"
href="https://cdn.usefathom.com"
crossOrigin=""
/>
<script
src="https://cdn.usefathom.com/script.js"
data-site="ABCDEFG"
defer
></script>If you'd like to read more on preloading check out the article below
Conclusion
Keeping your site fast comes with many benefits including lower bounce rates and better SEO. We'll continue to add optimizations to sites we host, striving toward perfect lighthouse scores on all sites. We can work together to build a faster web!
