I recently moved my website from wordpress to Hugo to optimize my website.
My problem is that after I moved it, performance score is kinda low.
I tried to optimized issues of google light house pointed out. But since I move the website from wordpress, I am using same css and js files.
There are too much css styles which I don’t use.
Question:
- How to remove unused css in hugo?
- Should I use modern image format like webp?
- Is there any tip to optimize the website more?
My website is: https://slottarzan.com 슬롯사이트
The simple answer is: Do not include it. The more detailed one: Check, what you really need. Like Bootstrap and fontawesome – why include that if you do not really need it?
You should perhaps, if Google’s performance rating is important for you. But frankly: Their lighthouse numbers show a big variation, so I wouldn’t trust them too much.
Sure. But that is not on-topic here. Nor are your other questions, by the way. Optimizing websites has nothing to do with Hugo, but with how you construct your site. Including un-used (and unnecessary, I guess) frameworks is one aspect.
- Christian Oliff has a great video on how to use PurgeCSS to remove unused css.
- Modern Image Format.
HUGO Provides Powerful image processing that can help you optimize, resize, and can convert jpg images to webp. Joost van der Schee has a great video on resizing and optimizing images using HUGO.
If you need to convert your PNG files to AVIF please see Pawel’s guide on converting images using the command line.
- Self Host Fonts, Icons, Javascript and minimize requests.
Thank you. It helped me a lot!
