The homepage lost some weight

Recently, I had the curiosity to check if this blog was not too heavy to load, because it’s something I don’t like to endure.

So, I’ve checked on GTMetrix and the result was … 😱

The total page size was 27MB, that’s terrible. Of course the main problem is because I use images to illustrate my article (and I like it). Previously, I’ve made the effort to reduce their size and optimize them to the excepted display size. But, I’ve also tried the pagination and I wasn’t satisfied by it because finding a previous post was a pain.

So, what did I do ?

I’ve revamped the homepage of this blog to display only the 10 last articles.

 <main>
{{ range first 10 (where site.RegularPages "Type" "in" site.Params.mainSections) }}
{{- partial "post-card.html" . -}}
{{ end }}
 <p style="text-align:center;"><a   href="/posts/">Older posts</a></p>
 </main>

And made a specific posts template to display the full article pages. The previous posts are now available in this dedicated section.

The result for the homepage was better as I lost 20MB and now the homepage is 2.3MB large according to the developer tools network tab. That’s still a little big so let’s check what is still taking too much bandwidth.

The illustration image of one of the previous articles, the Photo Blog, wasn’t reduced and weighted 1.2MB itself ! Size reduced, now I am at 1.4MB. That’s still too much, I convert the file to JPG, 1.1MB transferred.

Who’s next in the fat asses ? The Star Citizen illustration, same punishment because I’ve forgot to reduce it at first. Good, now we’re under the megabyte !

Next, the illustration of this article that is also a PNG file using 305KB, I convert it into JPG. Now we are at 830KB transferred.

Let’s put a goal : no image weighting more than 100KB ! A couple of optimization later, now this homepage transfers 628KB of data.

The full posts page is still large, but at first it transferred 30MB of data. Now, after just some quick image optimizations, it is 12MB. It’s a lot, but better than the first time.

Conclusion

After modifying my visual theme template to limit the displayed articles number on the homepage, it took only five minutes to identify these over weighted images and optimize them. And the GTMetrix analysis get far better !

I may still be too fat for applying to the 512kbclub, but that’s not my goal. However, it’s good to keep in mind to avoid neglecting your website size just like I did.