How can I improve the performance of Hugo sites?

support
1

I found that my sites aren’t green highlighted in Page Rank. Bassically there are issues of two types:

  1. Defer css. Not all provided css styles are needed on each page. The same is with js. Is there any way to deal with this, instead of manual setup of css and js for each page type?

  2. Image sizes. What is the modern and Hugo way to provide many image sizes for an image? I.e. mobile needs images with width 320px, 440px, but desktop needs up to grid width ==1140px
    2.1 I guess I need to provide .webp manually. Right?

1 Like
2

I reworded the topic title because you are asking questions and the title seemed like a request.

Regarding .webp that is a new file format that received some buzz about being more performant than .jpg while in reality both are about the same. You do not really need to provide this file format, unless of course you are convinced about its merits.

Regarding the way to construct responsive images in Hugo here is a very good example: https://github.com/gohugoio/gohugoioTheme/commit/d0a76ebb67798309aae2adba3c06bc1d6e2fce8b

Regarding the conditional loading of assets (JS & CSS) I recommend that you read about Go templates conditional logic: https://gohugo.io/templates/introduction/#logic

Conditional logic has been discussed in this forum ad infinitum, please use the forum search to find posts about conditional logic.

Also note that your question regarding deferring CSS & JS is a frontend one and it is OT in this forum. Use a search engine to find articles about current best practices.

One final note -even though that does not seem to be about what you are asking-. To measure the performance of a Hugo site i.e. how much memory is consumed while the project is generated, one needs to use the CLI flag --templateMetrics.

4 Likes