Better Lighthouse Scores

[aq1018]

Toha is a great theme. Thank you all so much for making this beautiful theme! However, when I ran LightHouse I noticed a few things that we can improve.

LightHouse Score For hugo-toha.github.io.

As you can see Best Practice and Performance are yellow.

LightHouse Score For My Blog

Pretty big improvement right? I added some hacks in my fork. The way I did it was pretty hacky, and probably is not suitable for just merge the whole thing in directly. However, I would like to organize what I have changed, and split them up into smaller Pull Requests.

In this discussion, I'd like to discuss with you one of the more impactful and more controversial changes I made in my fork. Please feel free to leave comments and let me know if this is a good idea.

My Proposal

Firstly, let's understand why Best Practice and Performance scores are low. There are many other reasons, but below are the two biggest ones:

• Unbundled Assets
• Outdated dependencies causing security issues.

In my fork, I solved it using:

1. Bundle all JS / CSS assets with Hugo Pipes.
2. Mange dependencies automatically with npm and hugo mod npm pack.

Disadvantages

Let's start by recognizing its disadvantages first. The big obvious one is now we need npm to manage our dependencies. I know npm is not for everyone and is probably very controversial. So, again, I'd like your input on this.

I can't really think of anything else that's disadvantageous from my own perspective. Please let me know if there is anything else that I missed.

Advantages

Let's take a look at its advantages, and there are a lot!

Faster Load Time

Assets are optimized, minified, and merged into bundles. With size and less files to download, site performance is increased.

Advanced Optimizations

Not only our JS / CSS can be minified to save space. ESBuild can reduce JS code size by tree shaking, eliminating used code.

Easier Dependencies Management

No need to copy paste js / css / fonts every time we need to update a dependency. Just update the package.hugo.json file and run:

hugo mod npm pack && npm i && hugo serve -D

ES6 Modules

With ESBuild, we can use import and other ES6 features fully. This makes JS development more modern and easier to manage.

Sass Based Bootstrap Theming

We can now utilize Bootstrap's source Sass files to take advantage of variables, maps, mixins, and more. This means Bootstrap theming is simpler via variables. For example:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Bootstrap Mixins

One thing I see through out our current CSS code is the extensive and repeated usages of media queries. Now it's easier with Responsive Breakpoints Sass Mixins.

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Final Words

If you read until this point, that mean you care enough. Please leave your opinions, suggestions, comments, and let's discuss!

[hossainemruz]

Sounds good to me . Go ahead with a PR . I will be happy to accept.

[aq1018]

Thanks @hossainemruz I'll get it done in a few day.s