Font Awesome script is a cool CSS plugin in blogger and also wordpress templates. The main purpose is to add simple small beautiful icons representing a known value of icons. Whenever we use the font awesome code in or templates we add style. when the add-on is not optimized we get slower templates and that puts our ranking in jeopardy. To know which render blocking scripts are blocking your speed you can use google speed insights. Font Awesome CSS Script is one of them. Today i am going to show you how to use the font awesome CSS and still have an optimized speed in website. The topic is How to Fix Render Blocking Font Awesome CSS Script Resources.
Render blocking scripts are those which block resources and cause your blogger blog to render slow. Font awesome CSS is not the only render blocking scripts that can cause your blogger or wordpress website run slower. There are other java scripts and CSS that cause our websites to go slower. Here at seoblur we have the perfect medicine for your affected blog. We are going to cure the website loading speed that has been slowed by the font awesome CSS render blocking resource in the code part with what we call a sync script. When the script does is that it allows the whole website to load before the script is loaded in the web view.
The a sync script is meant to let other resources load first before allowing the locked script to load so that the visible content will be seen first before the icons and more images. Font awesome CSS script will still work perfectly well and even better since there will be no interference with the code.
Your font awesome code may be looking like below.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>there are various versions of font awesome render blocking font awesome CSS scripts and they are categorized in number digits. The a sync script code works on the all java script codes in your template that you would like to optimize. This time around we have specified special features in the a sync code so that it would be more comfortable with loading content and all versions of font awesome CSS scripts. Do not use it for other java scripts but i will direct you on how to add async scripts to other render blocking CSS and java scripts in your template.
Fix Render Blocking Font Awesome Script in Blogger
The fixing of the render blocking font awesome CSS script is based on placing the code inside the async script that will then optimize the code each time it is compiled. Its easy to go about it and we are going to go step by step in adding the a sync script and also parsing your version of font awesome CSS script inside the async code script. Its going to be very easy. Without wasting time, we have a website to seep us. Lets jump int blogger implementation.Step 1. Log in to Blogger and choose your specific website to add the script code.
Step 2. Reach out to the left commands by navigating to them to the Template command
Step 3. Click on the template command and then locate the Edit HTML next to Customize.
Step 4. Click anywhere in your code and then click on Ctrl+F in windows or CMD+F in mac.
Step 5. Search for the below scripts .
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>If you search for this font awesome CSS script and dont find it in this manner search for the below.
<link href=' https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>I am sure you have now found the font awesome code in your template. If you have not try checking out the version of font awesome installed in your template. The number 4.5.0 can vary in many cases but according to many designed templates you will find this particular version of font awesome CSS script in their blogger templates.
Step 6. After finding the ABOVE cut the code and paste it somewhere in your notepad or any editor.
Step 7. Now copy the below async code and paste it abouve/before the ending tag of head </head>
Step 9. Now save your template and move to the speed testing tool to know whether the speed of your website will have increased and check if the resource is solved.
How to Fix Render Blocking Font Awesome CSS Script Resources today has been solved and now you are moving to make your website 100% optimized and that's so great for a blogger blog. Continue optimizing the other resources such as images and other CSS and java script codes that might be responsible for the slowing down of your website which jeopardizes the SEO state of your website.