What is Font Awesome render blocking?
When someone visits your blog, their web browser reads your template code from top to bottom.
If it finds a traditional Font Awesome stylesheet link near the top of your HTML, the browser completely stops loading your text and images until it finishes downloading the entire icon library.
This pause is called render blocking.
It delays your page display, frustrates mobile visitors, and triggers warnings on modern Google PageSpeed Insights audits.
Instead of forcing browsers to wait, you can update your code to load Font Awesome asynchronously.
This allows your blog content to load instantly while the icons fetch quietly in the background.
How to remove Font Awesome CSS render blocking in Blogger
Follow these step-by-step instructions to safely update your Blogger template HTML with an optimized, modern loading script.
Step 1: Back up your theme
Before making any structural code changes, always save a backup of your current template.
- Log into your Blogger Dashboard.
- In the left-hand menu, click Theme.
- Click the down arrow next to the "Customize" button and select Backup to download your theme file.
Step 2: Locate the legacy stylesheet code
- Click the down arrow next to "Customize" again and select Edit HTML.
- Click anywhere inside the code editor box and press Ctrl + F (or Cmd + F on Mac) to open the search bar.
- Search for your Font Awesome reference line. It usually looks similar to this old MaxCDN link:
Step 3: Replace it with optimized loading code
Completely delete that old line of code and paste the following optimized version in its place inside the <head> section of your site:
<noscript><link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/></noscript>
Step 4: Save your changes
- Click the Save icon (the floppy disk graphic) in the upper right corner of the HTML editor screen.
- Go back to Google PageSpeed Insights and re-test your URL. The font render-blocking warning will be completely gone.
How this optimized code works
Instead of using a basic rel='stylesheet' tag, which blocks processing, this updated approach utilizes two smart features:
- rel='preload': Tells the browser to download the icon font file immediately with high priority, but without pausing page layout rendering.
- onload="this.rel='stylesheet'": A small JavaScript snippet that instantly activates the stylesheet rules as soon as the file finishes downloading.
- <noscript> Fallback: Ensures your icons still display properly for the tiny fraction of users who browse with JavaScript turned off.
RELATED TIPS:
- How to eliminate render-blocking JavaScript and CSS issues
- Free page speed loading time checking tools for Bloggers