PageSpeed Score Issue

[brandonprajogo]

This theme is beautiful. Before I use it as my main theme for my Hugo site, I test it's speed using PageSpeed Insight. The score is actually not bad, but it can be better. I got 82 on mobile, and 72 on desktop.

I'm curious if there something I can do to increase the score, or you can do some enhancement in the theme? Thanks!

[g1eny0ung]

Thank you for liking it. This result may not be very satisfactory, but it seems to me that it might be “extenuating”. The two key points that caused the performance impact are: images and load lots of third-party JS after I tested. I'll explain them one by one.

Image Optimization

For the first problem, I've already done some optimization for the images if people don't use svg images:

hugo-theme-dream/layouts/_default/summary.html

Line 5 in f85cd89

{{ if eq .MediaType.SubType "svg" }}

The browser will load the optimized webp images to reduce download time. But it's better to use svg format images as instructed by PageSpeed insights.

The insights also pointed out that some images are JPGs and could have been better optimized, which is true. A long time ago, I downloaded some JPGs to use because they didn't have the svg version.

So here's what I could improve if I can do better (and the same goes for everyone): use svg images all the time. This will significantly reduce the size of the image.

Layout Re-renders

The insights also pointed out that in the process of the first loading, the layout changed several times. This is indeed optimizable, just delay the step of rendering the masonry layout until after all the images are loaded. I can try to optimize it.

Third-party JS

I can clearly show that this is a Disqus issue, they may have considered compatibility, or their code is not optimized very well, in any case it's an unavoidable issue if you're going to use Disqus.

Cache

I used a 1-day cache TTL. This varies from person to person, and it's okay to increase the cache TTL if the site doesn't change a lot (by the way, I'm hosting my site's traffic with Cloudflare, where it's easy to adjust the cache TTL).

[brandonprajogo]

Thank you for your response! I'm don't use commenting system on my site, so third party JS issue is not big deal for me. I'm looking forward to see the layout re-render improvement.

[brandonprajogo]

Also I'm curious if there is a way to remove the author in the theme (in post cards, and article)? I'm only use my site as my personal blog, so there is only one author.

And can I use custom description for the post? That only visible in the post card and meta description, instead of cutting description from the article (<!--more-->) because it's a little bit unusual for me. Thanks!

[g1eny0ung]

Also I'm curious if there is a way to remove the author in the theme (in post cards, and article)? I'm only use my site as my personal blog, so there is only one author.

I should be able to modify it to allow the removal of the corresponding page element when the author is not set.

And can I use custom description for the post? That only visible in the post card and meta description, instead of cutting description from the article () because it's a little bit unusual for me. Thanks!

Got it, I think you're right. If users choose to set https://gohugo.io/methods/page/description/, it should be prioritized over the summary.

I'll update these soon and tell you when I finish.

[g1eny0ung]

@brandonprajogo I've already resolved the last two problems you mentioned. Please try again when you have time. If you have new questions, you can open new issues to track them, and I'll close this one for now.

For the layout re-renders, I searched the docs, which says Using a callback function is the same as binding it to the always event (see below). I did do as described, which means I'm already waiting for all the images to load and then start rendering the masonry layout. So I need to debug this a bit more.