Introduction

In this post, I’d like to take you on my journey of optimizing my blog’s performance. It all started when I began using the cloud-hosted DNS resolver, NextDNS. This allowed me to closely examine the communications and bandwidth usage of my machines, including my blog. What I found was that my blog, like many other modern websites, was loading more content than was actually necessary, causing it to slow down.

Realizing the impact this was having on my blog’s performance, I decided to take action. In this post, I’ll share with you the steps I took to optimize my blog’s content and improve its performance. From identifying and removing unnecessary scripts and plugins to optimizing images and minimizing code, I’ll cover the techniques and tools I used to streamline my blog’s performance.

Main Problem

Currently, websites are often built using large frameworks that, while they may be fast and efficient, are difficult for inexperienced developers to leverage properly. As a result, many websites are filled with unnecessary JavaScript code that is requested from all over the world, leading to a slow user experience for those without good Ethernet or low-spec computers.

Furthermore, the heavy reliance on these frameworks means that running JavaScript is often a requirement for the site to work at all. This can be a major drawback for users who have disabled JavaScript for security or performance reasons.

As a developer myself, I must also take responsibility for the excessive bloat that my website had until recently. Despite being a static website generated with Hugo, there was still a lot of unnecessary code and bloat that was affecting its performance.

But, by taking a closer look at the content being served and optimizing it for better performance, I was able to drastically improve the loading speed of my website.

CloudFlare CDN

Before embarking on this journey for better performance, my blog was being hosted on Netlify. This was primarily due to my previous experience with the platform and its ease of implementation for a CI/CD pipeline.

However, I was using Cloudflare as my DNS resolver due to their competitive domain registration price and the ability to bypass Netlify’s paywall for basic analytics. While Netlify was working as intended, the platform’s performance was lacking in some areas.

To address this issue, I made the decision to switch to Cloudflare Pages for hosting. This allowed me to better manage the CDN being used and reach a wider audience due to the broad range of the Cloudflare network.

Since switching to Cloudflare Pages for hosting, I’ve seen a significant improvement in load times for my blog. The platform’s use of a global CDN and optimized caching has helped to drastically reduce the time it takes for pages to load, even for users accessing the site from far-flung regions.

The switch has also allowed me to better manage the delivery of assets such as images, scripts, and stylesheets, further improving the overall performance of the site.

Unused JavaScript

After switching to Cloudflare Pages for hosting, I also noticed that some unnecessary JavaScript was being loaded on my blog. Specifically, Google Analytics was being called despite the fact that Cloudflare provided analytics as part of their service.

Upon further investigation, I discovered that the hardcoded choice made by the creator of the theme I was using (PaperMod) was responsible for this issue. Once I removed the unnecessary code, the problem was resolved, leading to even faster load times and a smoother user experience.

Images

Static size

Despite the improvements I had already made to my blog’s performance, further testing with the web.dev tool revealed another issue: my images.

All of the images on my blog were screenshots or blogpost covers, which presented a problem. Since the images were a fixed size, users on smaller screens were forced to load unnecessarily large images, leading to slower load times and increased data usage

To solve the problem of fixed-size images on my blog, I delved into the HUGO documentation and discovered the Image Processing section. This section explained the image processing capabilities of HUGO during website building.

Using the built-in HUGO image processing features, I was able to resize and optimize all of the images on my blog, reducing their size and improving load times. Additionally, I was able to implement responsive images by generating different image sizes for different device screen sizes, further reducing unnecessary data usage and improving performance.

This can be seen in the following shortcode:

{{ $altText := .Get "alt"}}
{{ $caption := .Get "caption"}}
{{ with $.Page.Resources.GetMatch (.Get 0) }}
  <figure>
    <a href="{{.RelPermalink}}">
      <img
        srcset="
          {{ (.Resize "240x").RelPermalink }} 240w,
          {{ (.Resize "320x").RelPermalink }} 320w,
          {{ (.Resize "600x").RelPermalink }} 600w,
          {{ (.Resize "720x").RelPermalink }} 720w,
          {{.RelPermalink}} {{.Width}}w"
        src="{{ (.Resize "600x").RelPermalink }}" 
        alt="{{$altText}}"
        style="display:block; margin:auto; height:auto;"
        width="{{.Width}}"
        height="{{.Height}}">
    </a>
    <figcaption><p>{{ $caption }}</p></figcaption>
  </figure>
{{ else }}
  could not find image
{{ end }}

This shortcode takes an image resource, resizes it into different sizes, and creates a responsive srcset attribute with each size and its corresponding width. This allows the browser to choose the best size for the user’s device, improving performance and reducing unnecessary data usage.

Additionally if an user wants the original image they can still access it by clicking on the image and opening it in a new tab or downloading it. This ensures that the website is optimized for performance without sacrificing the quality of the images.

File type

The final problem was the file type being used. The images being hosted were in the PNG format, which is not optimized for websites. PNG files tend to be larger in size, making them slower to load. To solve this problem, I converted all the images from PNG to WebP, which is a modern image format designed for web use. WebP images are significantly smaller in size compared to PNGs while maintaining the same visual quality.

Conclusion

By understanding how the chosen framework and hosting platform work, we can make informed decisions that lead to significant performance improvements. It’s essential to prioritize performance from the outset and make conscious choices that optimize the content and user experience. Ultimately, taking the time to evaluate and improve these aspects can make a big difference in the success of a website.