This is how I elevated a web site efficiency by 21%!

So for days, I’ve been eager on how I might probably enhance the efficiency of this web site, then I found one quite simple and essential trick which we can be discussing right here.

Fontawesome

I by no means actually loved having so as to add an svg straight inside amn html file or use a picture tag to name it in. My greatest resort on this has all the time been the fontwesome cdn till lately once I found web page efficiency measure then I understand that calling in the whole fontawesome cdn, for just a few icons getting used on a multi-paged web site is actaully appaling.

Loading Fontawesome domestically.

I used to be looking by means of studying just a few articles about fontwaesome an loading it domestically, then I came upon this specific resolution whose writer really deserves a shout-out.

The right way to correctly load font-awesome domestically

Ater studying the answer, I launched into implementing, with just a few quirks which you are able to do too.

1. Obtain the fontaweome bundle v5.1.
   The whole fontwawesome bundle v5.1 is roughly about 12mb (don’t be concerned, we aren’t utilizing all!)
2. Unzip or extract the file.
   After downloading is accomplished, you’ll need to unzip or extract the file utilizing any device for extracting zip recordsdata (window default extract possibility out there on proper clicking the downloaded file).
3. Open the now extracted folder.
   After the extraction is accomplished, you will notice a brand new folder created with all fontawesome v5.1 recordsdata and dependencies in it.
4. Copy all.min.css to your css folder
   Double click on on the folder to see all of the sub-folders containing the recordsdata. Double click on on the CSS folder, there you will notice a file named all.min.css, copy this file and go to your mission’s listing, navigate to and paste in the place your present css recordsdata are positioned.
5. Copy the Webfonts folder to mission’s diectory
   Navigate again to the fontawesome v5.1 extracted folder, double-click to view the folders and duplicate the folder named webfonts. Go into your mission’s listing and paste the webfonts folder within the listing that additionally comprise your css recordsdata as a direct baby. Pattern working tree within the picture under, public is the mother or father listing containing the css:
   
6. Rename the copied all.min.css in your mission’s listing to fontawesome.min.css.
   That is notably helpful to ease identification when calling this stylesheet into an html file.
7. Make modifications in your html / php recordsdata:
   After efficiently finished all of the earlier steps, it is time to make modifications within the html recordsdata to make use of font-awesome domestically. Navigate by means of all of your recordsdata the place fontawesome cdn is being referred to as, and make the modifications from this:

<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="nameless" referrerpolicy="no-referrer" />

to the place you pasted the now fontawesome.min.css in your mission’s listing. Code pattern:

<!-- FONTAWESOME -->
  <hyperlink rel="stylesheet" href="./public/css/fontawesome.min.css"/>

That is all!

I do like to learn your remark for efficiently implementing this.

🎉 Thanks for becoming a member of!

Assets