Keep it light

07 Apr, 2025

Keeping your blog small in size isn't just about performance.
It's also about accessibility and sustainability.
Lighter websites are faster, consume less energy, and work better for users with slow or limited connections. Reducing your bandwidth usage helps the environment and ensures a smoother experience for everyone, regardless of their device connection quality.
Here are some practical tips to optimize your blog without giving up on style.

Fonts

The most minimal approach is to stick with OS fonts and fallbacks. They require no additional downloads and load instantly.
However, if you want a specific typeface there are some tips you can follow.
Host it locally on your server rather than using third-party CDN services.
Convert the font to .woff2 format. It's a simple task that significantly reduces the file size. Look at JetBrains Mono (NL Regular) .tff, it's 208.6kb, but the .woff2 file is just 92.2kb.
Choose between variable and static fonts:

variable fonts reduce the number of requests but can be heavier and may not always render bold/italic styles correctly;
static fonts are often more predictable and lighter overall.

For example, in this blog (at the time of writing this note) I chose to use Inter in the static format: regular, bold, and italic. The total weight of these three variants is still less than the sum of the two variable ones.

          static [kb]    variable [kb]
regular   21.1           21.1
bold      21.5           (included in the regular one)
italic    22.6           122.2
------------------------------------------------------
total     65.2           143.3

Sizes refer to .woff2 files after subsetting; more on that later.
Variable italic fonts tend to be large due to their complexity.

Since Inter comes with different files based on the text size, I chose the 24pt version over the 18pt one because I prefer to optimize for laptops instead of mobiles. Anyway, the difference is very subtle, mostly in overshoots and character width.

To reduce file size even further, subset the font to include only the characters you need.
I recommend transfonter.org for this. This online tool can significantly reduce the font size because it removes the unnecessary characters, and it can convert the font to .woff2 straight away.
Since I'm writing in English I select only the Latin subset, but I typically include some accented letters and symbols.

For critical fonts like a logo, preload them in your HTML to speed up the initial render.
This is recommended only for key fonts that affect layout. Using it for every typeface makes the preload useless.

Images

Always save images as .webp. This offers a great balance between quality and compression.
Strip EXIF and XMP metadata to preserve privacy.
Adjust exported image quality to the lowest acceptable level. This changes depending on:

The number of images per page;
The type of image (screenshot vs photo);
The level of detail needed.

I use GIMP because I crop and add notes to images too. While exporting, I edit the format and the quality slider.
For converting a batch of images to .webp I like anywebp.com.

Extras

Use as little JavaScript as possible because:

it adds weight and slows down loading time;
many interactive features can be achieved with pure CSS;
JS runs on the client's machine, adding extra work to it.

Include CSS using <style> tags directly in the HTML to avoid extra requests.

Enable gzip compression.
Monitor requests and loading time.
Monitor uncompressed size.
Estimate carbon emissions.

"Design is not just what it looks like and feels like. Design is how it works."
~ Steve Jobs