Staff replied Templates

Optimization: Do not load unsued images and fontawesome optimization

Asked by Ignacio Granados 3 years ago Last activity 3 years ago

Template: Livesport

Hi,

  1. I have seen that my template loads menu-bg.jpg (19.7kb) and stars.svg (1.12Kb) which are not used. How can I disable from load?
  2. Is there a way to load only some icons from font awesome instead of the whole icon set?

Thanks.

4 replies

Paul Frankowski Senior Staff
3 years ago · edited

Hola Ignacio,

  • ad 2) Not really, it's how FontAwesome works, in general, whole FA package (few files) is loaded. It's like font. Theoretically, you could overwrite those 3 icons using svg files that are actually used in the menu (>, ^, search) and disable Font Awesome. It would certainly be a ~200Kb reduction..... but that's your custom task. Hopefully, one day, these 3 icons realistically used we will try to replace in Helix update, so that they work even without FontAwesome.
  • ad 1) Indeed template.css may use some files from orginal design. But please do not edit template.css file. But you can replace that file: menu-bg.jpg (19.7kb ) with a small one (1kb, 1x1px size) - if you don't use it. It will allows you to save ~19kb. This same if we talk about goal-fetti.png (2kb) file. It may not be much, but in total it's always something.

File path: templates\livesports\images\menu-bg.jpg


Paul Frankowski Senior Staff
3 years ago · edited

BTW

I noticed that you have error message from extra plugin, screenshot:

Me di cuenta de que tiene mensaje de error de plugin extra, captura de pantalla:

info_1416_2023.gif

please contact with a plugin developer.

póngase en contacto con un desarrollador de plugins.

Pavel
3 years ago · edited

Is there a way to load only some icons from font awesome instead of the whole icon set?

Hi. You can create your own icon font using Font Awesome svg icons you need, icomoon.io and CSS. Then turn OFF Font Awesome in Helix and SPPB

Paul Frankowski Senior Staff

So theoretically it would have to load 3 small svg files + custom CSS lines instead of the Font Awesome package.

Pavel
3 years ago · edited

Hi Paul. SVG serve only as raw materials to create an icon font. At the output you get a full font (WOFF2, WOFF + CSS stylesheet) containing 3 glyphs (for example), to which you can apply any CSS font properties.

Paul Frankowski Senior Staff

Oh, ok. Thx

Log in to reply.