search

alanorth / hugo-theme-bootstrap4-blog

A blogging-centric Bootstrap v4 theme for the Hugo static site generator.
Other
204 stars 132 forks source link

omit font load when share icons are disabled #109

Closed fte378 closed 4 years ago

fte378 commented 5 years ago

When the share icons are disabled the web font for them is still included in the css and also loaded by the browser (without any purpose).

It would be nice to use a changed CSS which doesn't include font-awesome when the share buttons are disabled. Or if possible the CSS could be conditionally generated by Hugo then (don't know if this is possible) - maybe even controlled by an additional setting for the case that someone doesn't want the share buttons but still wants to use font-awesome somewhere.

alanorth commented 5 years ago

I'm a bit busy lately, but yeah this is totally possible. Similar to how I generate a custom RTL version of the stylesheet and conditionally load it when the page is in Arabic.

Jieiku commented 4 years ago

was this silently fixed? when I perform gtmetrix or firefox network monitor (ctrl+shift+e and then F5). I do not see any font files being loaded such as font-awesome.

I get 3 requests: index.html, style.css, and favicon.png :)

alanorth commented 4 years ago

@xekon the font-awesome styles are bundled in style.css (see source/scss/style.scss). The font files themselves are loaded from there. Try checking the network monitor with cache disabled:

Screenshot from 2020-01-24 09-32-35-fs8

Jieiku commented 4 years ago

hmm I disabled cache and that file still does not load for me. just the three i mentioned, however maybe it is still somehow cached? (Not that I am complaining, the site looks great so it seems I don't really need fontawesome anyway.)

image

PS: site is still being built or I would share the url :) hopefully be done building soon. PSS: I am using Breeze Dark theme on Ubuntu, and I am in love with how you got your firefox controls looking dark down there. Need to figure out how to do the same to mine.

Jieiku commented 4 years ago

Update, out of curiosity I decided to visit your site to see if it loads for me there either, and it does Not.

edit2: I figured out why it didnt load on your site, it was noscript, once I disabled that, it finally loaded.

On my site, I only have a single post so far, and I did not define any categories or tags yet, so I am guessing that is the reason that fontawesome does not download on mine, it's because none of my page requires fontawesome to render properly. I am guessing once I define some tags and categories on my posts that the fontawesome will start loading. I will however probably make edits so that instead of the little folder and tag icons, it either uses nothing, or an SVG path. I would rather not load fontawesome for such a small task.

I noticed that without fontawesome the only thing that changes is minimal:

image

@fte378 this is the reason font awesome still loads for you, its the folder and tag icons.

Jieiku commented 4 years ago

@fte378 This pull request should reduce Font Awesome to just a few lines in the css file, 1kilobit instead of 72kilobits: https://github.com/alanorth/hugo-theme-bootstrap4-blog/pull/127

alanorth commented 4 years ago

I'm going to close this now because I think we've reached a sort of compromise in version 1.4.0. We use Font Awesome 5 via JavaScript now and we actually load 134 less kilobytes than we were before. That's very significant!

Another reason is that we are using Font Awesome for the category and tag icons so we can't disable them simply when you have sharing disabled, which was the original issue here.

fte378 commented 4 years ago

Thanks for looking into it. I will rethink it again - maybe I come up with something.

fte378 commented 4 years ago

@alanorth What about getting rid of the icons by embedding the SVG directly into the meta-terms partial? SVG should be supported by any browser (except text only) nowadays.

Jieiku commented 4 years ago

@alanorth What about getting rid of the icons by embedding the SVG directly into the meta-terms partial? SVG should be supported by any browser (except text only) nowadays.

My solution was to load them directly, my site loads them directly from css: https://www.solosaga.com/

fte378 commented 4 years ago

My solution was to load them directly, my site loads them directly from css: https://www.solosaga.com/

Ok. Sorry - I didn't have a look at it.

Jieiku commented 4 years ago

For more information about how it works you can read through the comments here: https://github.com/alanorth/hugo-theme-bootstrap4-blog/pull/127

particularlly this info:

When you download fontawesome they actually provide the raw solid SVG files now, you can just open them in notepad or whatever text editor you like.

you then paste the content of that file into an SVG ASCII encoder: https://codepen.io/yoksel/pen/JDqvs

here is a really good read that helped me sort out the hard parts: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris