Emre Tosunkaya

Use Emoji & SVG Instead Of Font Awesome to increase website speed

Website page performance will be the new ranking factor as per the SEO gurus. Loading font awesome, and SVG images cost too much speed, so I tried a new way.

I used emoji and replaced Font Awesome and SVG from the website to boost speed, and it did.

Use emoji to increase website speed, remove font awesome and SVG.

What is font awesome?

As the name says, fa- (font awesome) is just a font having an icon as a character, so to get this working, we need to load the entire fa JavaScript and CSS file, which will again import font files.

Disadvantages of font-awesome

  • It will increase the number of requests per page load.
  • The browser has to download entire font files to use few icons on the website, which increases page size.
  • The increased rendering time of the page
  • Low performance of core web vitals

Method 1: Use SVG as an alternative to Font Awesome

As for me to use only a few icons, I can not allow eating my performance I switched to SVGs. In this way, you can replace your icons with SVG, which are low in size and no font or js or CSS files required to load. You can either load it as an image or use it as an inline. Make sure you use proper classes to get the icon to fit your website.

You can find font awesome and other icon SVG from the below lists

1. Font Awesome SVGs

https://github.com/FortAwesome/Font-Awesome/blob/master/svgs

The direct Github link to font-awesome default SVGs. You can find

2. PNG and SVG icons

https://github.com/Rush/Font-Awesome-SVG-PNG

Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator

3. Simple Icons

SVG icons for famous brands and alternate design of font-awesome. https://github.com/simple-icons/simple-icons

4. Bootstrap Icons

Official open source SVG icon library for Bootstrap.

https://github.com/twbs/icons

5. SVG Icon by leungwensen

An ultimate SVG icons collection DONE RIGHT, with over 10,000 SVG icons out of the box.

https://github.com/leungwensen/svg-icon

Method 2: Use Emoji as an alternate of SVG and Font Awesome

Once I moved from fa to SVG, I realized that loading SVG external URL would cause additional request count, and for some large icons putting it inline will require lots of code inline. Though I was getting better results, my hunger forced me to a higher level which I have never found on any website.

Following are the merits and demerits of using Emoji as an alternate of SVG and Font awesome.

Advantages of using Emoji as an Icons

  • No additional requests as emoji load from the system fonts
  • No CSS required as it is considered as a text and suits surrounding texts.
  • You can use it inside a button or an href link
  • No markup or element needed to wrap it

Demerits of Emoji

  • It will support modern browsers only: if you know most of your visitors are from modern pc and mobile, then you should only go for replacing SVG or fa with Emoji. But for an older browser, it may not render correctly.
  • Render differently based on the OS and Make: The emoji display different in a windows pc and an android phone. So the look of Emoji may vary from browser to browser. Even some emoji are supported on some devices only.
  • Not all icon alternatives available as an emoji means your required icon or similar meaning icon may not have any emoji version.

Hence Emoji is not having additional request or large inline codes. The page loads faster, which I have tested and found to work well. If you find any other demerits of Emoji must comment below so we can share with others too.

Add Desired Emojies From getemoji.com or emojipedia

😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾

Related Posts