When it comes to loading speed of a website, the developer must follow the methods that reduce the loading time of webpage as site speed is also considered an important SEO factor. Along with other on page and off page SEO optimization, you must take care of site speed too because it is an element which lets search engines decide your rankings.
Ideally suppose that there are two webpages with same quality of content on the same niche with equal calculation of SEO factors except site speed. For your ease consider that exlcluding webpage loading time, both pages got equal marks for getting indexed with the ratio 1:1. Now search engine has to decide which page to be indexed first, so it will be decided by calculating site speed. The fast loading site would get first ranking and slower gets second.
It's just an example. You shouldn't think that site speed would work in this example only.. Site speed has also its own importance that might bring your site on first page depending on how much good your content is.
Read More: Compress CSS and Javascript to increase site speed
Page load time depends upon many factors, we have already discussed some of them. In this post, I would talk about using Font Awesome to improve page loading speed. How could it be useful? Before going further I should give a short introduction of font awesome and its usage.
What is Font Awesome?
Font Awesome is a custom web font which doesn't contain alphabets as its content. Instead of alphabets, it uses all icons from twitter bootstrap framework. In simple words it is an iconic library in font form. We can modify font awesome completely like any other font with CSS. Like all other custom fonts, it is in the form of a CSS stylesheet which can be linked easily to any webpage.How Font Awesome Reduces Page Loading Time:
Now the question arises how it can be helpful in reducing page loading speed. So here is the answer. While making a webpage design, we have to add icons at various places for example search icon, sharing button icons, icons in menu etc. A common practice is to use images that contain the respective icon in it but thinking from SEO perspective, it wouldn't be a good idea to use them. A page isn't loaded completely until all elements in the page including CSS, Javascript and images are loaded. Images are always linked externally so addition of a single image file increase one HTTP request which delays page load time. No matter how much small sized image is, it has to go through an HTTP request increasing number of round trips a server make and if there are multiple image icons the number of HTTP requests increase with the number of icons hence it would result in delayed loading.So according to SEO perspective, image icons are not recommended if the page is also using a lot of other resources. Good practice is to use Font Awesome icons instead of images. As I told earlier, Font Awesome occurs in the form of a CSS style sheet which has to load only once, rest of all content works like a regular font so it doesn't effect loading time irrespective of the number of icons used.
How To Add Font Awesome Icons:
Font Awesome is a huge iconic library where one can find all commonly used icons. They are all customizable with font awesome default options or by using CSS3 so they could be better than images in this regard.I think it's clear now why font awesome is used. Then it comes to find and install the Font Awesome from world wide web. It is an open source Github project and available for free at Font Awesome official website. You can download it for free and use as regular CSS style sheet by self hosting. If you don't have any resource to host Font Awesome at your own than you can also link it from external resource. It is hosted on MaxCDN servers by bootstrap. To host it externally just add the following line in your webpage inside <head> tag.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>After adding font awesome in your website, you can place any icon easily in the content. Find the complete lists of icon here.
To add an icon click the required icon and find specified class for it. Copy and paste the class where you want to place an icon. Normally font awesome icons are added in the following format.
<i class="fa fa-bluetooth"></i>Here in this example bluetooth icon will appear. In this format, "fa" is the basic class for whole font awesome library while "fa-bluetooth" is specified for bluetooth icon only. All other icons follow the same format if one is placing font awesome directly via HTML.
Read More: How Custom Fonts Slow Down Site Loading Speed
Hope that it is clear to you why and how to use font awesome. If you have any query, feel free to ask me via comments or my social channels.
Post A Comment:
0 comments: