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:
ImageOptim - better Save for Web
Reduces image file sizes - so they take up less disk space and download faster - by applying advanced compression that preserves quality. Removes invisible junk: private EXIF metadata from digital cameras, embedded thumbnails, comments, and unnecessary color profiles. Seamlessly combines all the best image optimization tools: MozJPEG, pngquant, Pngcrush, 7zip, SVGO and Google Zopfli.
imageoptim.com
Compressor.io - optimize and compress JPEG photos and PNG images
Optimize and compress JPEG, PNG, SVG, GIF and WEBP images online. Compress, resize and rename your photos for free.
compressor.io
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.
HTML Minifier
Free web-based tool to minify HTML and any CSS or JS included in your markup.
www.willpeavy.com
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
Preload critical assets to improve loading speed
As soon as you open any web page, the browser requests an HTML document from a server, parses the contents of the HTML file, and submits separate requests for any other external references. The critical request chain represents the order of resources that are prioritized and fetched by the browser.
web.dev
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!
Questions? Ping us in our community space.
Create Something Super
Get started today for free
