BEST TIPS TO SPEED UP YOUR BLOGGER BLOG THAT YOU CAN'T AFFORD TO IGNORE

The page speed of your blog is one of the most important factor that affects your traffic, SEO ranking and also Adsense Earning. Everyone wants a fast loading blog but it's hard to maintain. You can check your Page Speed Score for both mobile and Desktop Version In Google Page Speed Insight or in GTMetrix. Slower Blog will increase your Bounce Rate as no one like to hang on the lazy websites. Hence, it is necessary to optimize the speed of your blog. Following are the awesome tips which you cannot afford to ignore to increase speed of your Blogger blog.
speedup blogger

1. Remove blogger default CSS and JavaScript Bundle
Several default javascript and css bundle are loaded by default in your blog. These Javascript and CSS codes are not required if you are using Custom Blogger Template. These codes remains unused throughout your blog. So, you can omit these code without any error or change in your blog design and experience. To stop these code from load you have to change default opening and closing <head> and <body>.
So, find and replace your 
i <head> tag with the following.
   Replace <head> with highlighted text:::  &lt;head&gt;
ii. </head> tag with
   Replace </head> tag with::::  &lt;/head&gt;&lt;!--<head/>--&gt;
iii. </body> tag with 
   Replace </body> with::: &lt;!--</body>--&gt;&lt;/body&gt; 
<body> tag cannot be replaced because it contains some defined proerty inside it.


2. Eliminate/Defer loading of Render Blocking Element
 When you check your page speed from Google Page Speed Insight, you might see the suggestion of "Eliminate Render Blocking Element". Render blocking Element are those element which blocks the rendering of your HTML and CSS code. So, two eliminate render blocking code, there are two ways. First one is to remove those elements from your template or defer or delay their loading after HTML rendering is complete. Render blocking elements are generally external CSS files like Font Awesome CSS icons and other external webfonts. If there are no CSS icon used in your blog you can remove the Font Awesome file.
It is imported inside <head>. I recommend you not to use external Web fonts as they slow down your page speed.
 If you decide to remove these CSS files remove these lines and if you want to use them replace these line with the highlighted text below.
1.         <link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">   
2. <link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>


<script type='text/javascript'>
/* Renderblocking Eliminate by https://www.bimarshak.com.np */
/* First CSS File */
var bimarshak = document.createElement(&#39;link&#39;);
bimarshak.rel = &#39;stylesheet&#39;;
bimarshak.href = '//fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&#39';
bimarshak.type = &#39;text/css&#39;;
var godefer = document.getElementsByTagName(&#39;link&#39;)[0];
godefer.parentNode.insertBefore(bimarshak, godefer);

/* Second CSS File */
var bimarshak2 = document.createElement(&#39;link&#39;);
bimarshak2.rel = &#39;stylesheet&#39;;
bimarshak2.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
bimarshak2.type = &#39;text/css&#39;;
var godefer2 = document.getElementsByTagName(&#39;link&#39;)[0];
godefer2.parentNode.insertBefore(bimarshak2, godefer2);
</script>

Replace URL highlighted above with link of your render blocking CSS file as shown in this code.

3. Compress and resize your images
    The main element that makes your Website slow are images. Mostly, the sizes of the images used in the websites may be larger than the size of entire codes used to develop your site. So, it is necessary to minimize the number of images in your website. For example you can use CSS icons instead of images for Social Media Icons. Reducing number of images is not the only solution as some images that delays your page loading can be mandatory. For this, compressing the images is the solution. There are two types of compression : Lossless Compression and Lossly Compression. I recommend you to use Lossly compression with about 80% quality conserved. Image compression can be dony by using softwares like Adobe Photoshop, GIMP editor and so on. The image format like JPG2000, Webp, Webm provides better compression with quality than PNG and JPG. 
We can also use these online image compression tools.

4. Minify your Template including CSS and JavaScript
   In your blogger templates there are many line breaks and white spaces which occupies unnecessary space and increase file size of your templates. So, you can minify your code to compress your codes. I recommend you to backup your template before you minify it. There are many online tools to minify XML but also I have choosed the following as it provides separate option to minify blogger template which contains HTML, CSS, JavaScript and PHP code. 
In this online minifier tool choose code type as Blogger and paste your code into the Source field.

5. Choose some widgets and Scripts only on Certain Pages
   There are some widgets and scripts which are not necessary to load or display on all pages or Platforms. For example it is not necessary to load Pagination Scripts in Posts pages and it is not necessary to load heavy widgets like Youtube videos Widgets on mobile version. For this you can use the following code.
a. Use cond='not data:blog.isMobileRequest' inside <b:widget> to hide the widget in mobile.
<b:widget cond='not data:blog.isMobileRequest' id='HTML13' locked='false' title='BLOGGING' type='HTML' version='2' visible='true'>
b. Use cond='data:view.isHomepage' to show the widget only on home page..

Similarly you can use these code inside <b:if></b:if> to show or load spme widgets and  scripts only on certain pages only.
Example: <b:if cond='data:view.isHomepage'>
<div class='row' id='hot-wrapper'>
<b:section id='hot-section' maxwidgets='1' name='Hot Posts' showaddelement='yes'/>
</div>
<div class='clearfix'/>
</b:if>
This code is used to show widget with id hot-wrapper only on home page.








  • i. For indeex pages <b:if cond='data:view.isMultipleItems'> … </b:if>  
  • for item pages.. <b:if cond='data:view.isSingleItem'> … </b:if>
  • for pages with post: <b:if cond='data:view.isPost'> … </b:if>
  • For static pages: <b:if cond='data:view.isPage'> … </b:if>
  • FOr search/label pages. <b:if cond='data:blog.searchLabel'> … </b:if>

  • 6. Use CDN Service
       CDN stands for content delivery network. The most Popular CDN are Cloudfare, Max CDN, Key CDN and so on. CDN service when used delivers the content of you blog faster than before. Besides this CDN itself provides some features like Caching, Rocket Loader, Brotli Speed, Polishing and Minifiying which helps you to speed up your blog.

    Beside these you can use only default fonts, use more content than the code and Use images of original size(ie: don't allow/use HTML or CSS code to resize the images.). Comment below if you encounter any errors while speeding up your blog with above methods. 

    Post a Comment

    4 Comments

    1. Hi dear,
      You have created a nice blog and I also read some of your posts. These are very interesting and useful. You have selected very nice content. I think people would be benefited to read your blog.

      Here, I am leaving my blog link below, if you don't mind you are requested to visit my blog and please leave your comment with your blog/post link.
      Thanks.
      English Grammar College

      ReplyDelete
    2. It was really beneficial. I have a question on something similar. What should the image size be in maximum, without compromising my load speed?

      ReplyDelete
    3. thanks fro sharing bro my blogTechlifeware
      best speed now... thanks

      ReplyDelete