P.S.: A lot of updates have been made on this post from the comments and feedback on this article
So for days, I have been keen on how I could p...
For further actions, you may consider blocking this person and/or reporting abuse
Hey man, for icons, I personally inline SVG with heroicons.com.
Why? The inline SVG will be parsed by the browser, won't do extra requests, and won't render-block the website.
What you just did was to remove the external request from
cdnjs.cloudflare.com
domain (the website will try to connect to that domain, that includes: DNS + Connection + SSL) and load the library locally, that's fine but it's still loading somewoff2
fonts but now inside your domain. (I don't know how many of them you're using, you didn't specify, but those are still making requests)Also, the
fontawesome.min.css
local file (and all CSS files) is always considered as a render-blocking which means the CSS file will be requested and parsed by the browser before doing any JavaScript and other render jobs.The
fontawesome.min.css
local file is also huge and might contain unused code because you're not using all fonts, that can be fixed with Critical CSS but you'll need thosewoff2
fonts.So, to wrap up. This is performance analysis and can be tricky while you optimize your website because CSS, JavaScript and more can affect your scores. I highly recommend to analyse your website with webpagetest.org, so you can see what's going on with your website under the hood.
Thanks. :)
Reference:
Typo found! 🤣
"Loading Fontawesome locally", "fontwaesome"
Anyway, great article!
Same inside the
How to properly load font-awesome locally
category, point 1🙏 Thank you so much! Corrections implemented! 🎉
😧 Noted @tiagorangel2011! Thanks for finding that out! Hope you gained something from it too?
I normaly don't use font awesome 😁. I prefer material icons.
I like to use SVG, always load faster than fontawesome, even locally
You are very correct @laerciolopesll! Can you share on how you use yours, sir? It will greatly the performant enthusiasts 😊.
I really appreciate you engaging! 🙏 Thank you so much!
Well, when I started using fontawesome, icons that load dynamically by JS always load with a delay, they appear as a [], so I put an SVG in place of an icon and I had no delay. When I use Vue I make icon components.
The generated html is more verbose, I don't know if this impacts page loading or performance...
Thank you for being so kind in your response.
Okay. Here's a link to the platform I use in measuring any site performance of projects I work on: web.dev/measure. From your feedback I also decided to do a little research on if actually there it is a possibility use svg rather than the tag locally with Fontwesome, then I found something very interesting which I will be sharing soon. Most of this are actually best for vanilla projects in HTML / PHP / EJS. Libraries/Frameworks such as React, VueJS, etc. uses svgs/icons from the ones installed in the node_modules packages therefore, would have worked on it's optimality.
🙏 Thank you so much too for your interesting and intriguing responses.
i personally prefered adding the svg inside html than downloading the fontawesome and hosting it on my own... because the project or a page may not use the fontawesome and only few icons..
🎉 Exactly! I get the point!
However, with this, your local FontAwesome file size wouldn't be up to even 500kb. I have made some discovery also which I will be sharing soon on how you can make this even lesser and more convenient as adding the SVG tag.
🙏 Thanks for engaging @mrepol742 .
Early on in the post, you said that you "stumbled on this particular solution whose author actually deserves a shout-out". Who is it that deserves a shout-out?
@cicirello I appreciate that. Check in the resouces section of the post.
I'd have to make an edit to fix that right in this article!
Thanks once again!
Oh, I see. It's based on the StackOverflow answer you linked to at the bottom.
I like the improvement, but there is no real reason to score below 100%. usecue.com/blog/how-to-get-a-100-g...
No, but fontawesome is very used, and most of the time it is not loaded in this way, which can help raise the score a little, but it will not do a miracle.
🎉 Great article link you shared here @jhvanderschee! I should defintely see how this can help on this project too!
Thanks so much, especially for engaging!
Thank you for your kind response! Happy coding!
If you only have a few icons per page, you could load the icons individual, saving even more time.
Any why did your SEO score go down, did you change something else?
I will try for my website then let you know ..
Thanks 👍 for engaging, @behrjozef! Can't wait to here your view on implementation.
Thank you all so much for the reacitons and responses. 🙏 It means alot.
Heroicoins is an svg created by Tailwind. There is no need to use cdn or download to local directory.
Please share for WordPress sites too.
Manu plugins in WordPress that use FontAwesome load its locally, don't worry.
Nice tips!!! I am sharing it with my teams!
Hello, can I reprint and translate your article? I will include a link to the article.
Thank you, Annie. It will be such an honor! I can't wait to read it!