DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Here's how I increased website performance by 21%!
Paul C. Ishaili
Paul C. Ishaili

Posted on • Updated on

Here's how I increased website performance by 21%!

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 possibly increase the performance of this website, then I discovered one very simple and important trick which we will be discussing here.

Fontawesome

I never really enjoyed having to add an SVG directly inside an html file or use an image tag to call it in. My best resort on this has always been the font awesome cdn until recently when I discovered page performance measure then I realize that calling in the entire FontAwesome CDN, for a few icons being used on a multi-paged website is actually appalling.

Loading FontAwesome locally.

I was browsing through reading a few articles about FontAwesome and loading it locally, then I stumbled on this particular solution whose author actually deserves a shout-out, πŸŽ‰ Balasubramani M.

How to properly load FontAwesome locally

After reading the solution, I embarked on implementing it, with a few quirks which you can do too.

  1. Download the FontAwesome package v5.1. or higher The total FontAwesome package v5.1 is approximately about 12mb (don't worry, we aren't using it all!)
  2. Unzip or extract the file. After downloading is completed, you will need to unzip or extract the file using any tool for extracting zip files (window default extract option available on right-clicking the downloaded file).
  3. Open the now extracted folder. After the extraction is completed, you will see a new folder created with all FontAwesome v5.1 files and dependencies in it.
  4. Copy all.min.css to your CSS folder Double-click on the folder to see all the sub-folders containing the files. Double click on the CSS folder, there you will see a file named all.min.css, copy this file, go to your project's directory, and navigate to and paste it into where your existing CSS files are located.
  5. Copy the Webfonts folder to the project's directory Navigate back to the FontAwesome v5.1 extracted folder, double-click to view the folders, and copy the folder named web fonts. Go into your project's directory and paste the web fonts folder in the directory that also contains your CSS files as a direct child. Sample working tree in the image below, public is the parent directory containing the CSS: Here's how I increased a website performance by 21%! 6. Rename the copied all.min.css in your project's directory to fontawesome.min.css. This is particularly useful to ease identification when calling this stylesheet into an HTML file. 7. Make changes in your HTML / PHP files: After successfully doing all the previous steps, it's time to make changes in the HTML files to use font-awesome locally. Navigate through all your files where FontAwesome CDN is being called, and make the changes from this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Enter fullscreen mode Exit fullscreen mode

to where you pasted the now fontawesome.min.css in your project's directory. Code sample:

<!-- FONTAWESOME -->
  <link rel="stylesheet" href="./public/css/fontawesome.min.css"/>
Enter fullscreen mode Exit fullscreen mode

That's all!

I do love to read your comment about successfully implementing this.

πŸŽ‰ Thanks for joining!

Resources

Top comments (30)

Collapse
 
roelmagdaleno profile image
Roel Magdaleno

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 some woff2 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 those woff2 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:

Collapse
 
adelpro profile image
adelpro • Edited on

Im using a different technique with a way better result.
Loading only a set of selected icons that im using in that particular website.
Its better than loading the all icons at once like in fontawsome
Im using this tool: icomoon

Collapse
 
tiagorangel2011 profile image
Tiago Rangel de Sousa

Typo found! 🀣 "Loading Fontawesome locally", "fontwaesome"
Anyway, great article!

Collapse
 
tiagorangel2011 profile image
Tiago Rangel de Sousa

Same inside the How to properly load font-awesome locally category, point 1

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

πŸ™ Thank you so much! Corrections implemented! πŸŽ‰

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

😧 Noted @tiagorangel2011! Thanks for finding that out! Hope you gained something from it too?

Collapse
 
tiagorangel2011 profile image
Tiago Rangel de Sousa

I normaly don't use font awesome 😁. I prefer material icons.

Collapse
 
mrepol742 profile image
Melvin Jones Repol

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..

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

πŸŽ‰ 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 .

Collapse
 
laerciolopesll profile image
LaercioLopesLL

I like to use SVG, always load faster than fontawesome, even locally

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

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!

Collapse
 
laerciolopesll profile image
LaercioLopesLL

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.

Thread Thread
 
mrpaulishaili profile image
Paul C. Ishaili Author

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.

Collapse
 
cicirello profile image
Vincent A. Cicirello

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?

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

@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!

Collapse
 
cicirello profile image
Vincent A. Cicirello

Oh, I see. It's based on the StackOverflow answer you linked to at the bottom.

Collapse
 
greenreader9 profile image
Greenreader9

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?

Collapse
 
jhvanderschee profile image
Joost van der Schee

I like the improvement, but there is no real reason to score below 100%. usecue.com/blog/how-to-get-a-100-g...

Collapse
 
yonaikerlol profile image
Leober Ramos

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.

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

πŸŽ‰ 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!

Collapse
 
jhvanderschee profile image
Joost van der Schee

Thank you for your kind response! Happy coding!

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

Thank you all so much for the reacitons and responses. πŸ™ It means alot.

Collapse
 
behrjozef profile image
Jozef Behr

I will try for my website then let you know ..

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

Thanks πŸ‘ for engaging, @behrjozef! Can't wait to here your view on implementation.

Collapse
 
fedoravpn profile image
Lawrence

Heroicoins is an svg created by Tailwind. There is no need to use cdn or download to local directory.

Collapse
 
anurag_vishwakarma profile image
Anurag Vishwakarma

Please share for WordPress sites too.

Collapse
 
yonaikerlol profile image
Leober Ramos

Manu plugins in WordPress that use FontAwesome load its locally, don't worry.

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

Nice tips!!! I am sharing it with my teams!

Collapse
 
annie profile image
Annie

Hello, can I reprint and translate your article? I will include a link to the article.

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili Author

Thank you, Annie. It will be such an honor! I can't wait to read it!

🌱 DEV runs on 100% open source code that we started called Forem.

You can contribute to the codebase or host your own.