How to Increase Page speed in Blogger ? Make your blog faster for SEO

witten2022/9/11

Faster site display speed is effective for SEO.

Even small changes can add up to big changes. The same can be said for page acceleration. No single change can provide a large speed increase, but a number of small speed-up changes can result in a large speed increase.

To speed up your blogger blog you might have searched in google and seen lots of pages telling you to use custom made templates or just change to wordpress or such services. well, first take a look at this image bellow.

How to Increase Page speed in Blogger ? Make your blog faster for SEO

This is showing the performance score of Essential Theme provided by Blogger which I formerly used for this blog. After I made smalle changes, it scored 99 out of 100. That's a great result. What do you say, huh ? So you can make a quite fast website with default templates of Blogger without spending money.

In this acrticle I am showing you 5 tips for increase of webpage display speed.

Decrease DOM

Open your blog page and right click and the little menu container appears then left click on inspect at the very bottom. now you have the inspector view.

If you look at the inspector view, which displays the structure of your web page, you will see there are many div element inside of another div element like tree branches. This is called DOM.

if you see there are just too many div element then you need to simplify them to descrease the DOM size because there is a recommended criterial about DOM such as following.

  • DOM depth up to 32
  • Up to 30 child elements in the parent element
  • Up to 1500 DOM per page

Check your page at speedinsight because sometimes you get DOM size alart unexpactedly. If you get alart then that is not good for SEO. So here's the example of what you could do.

If you see something like this hereunder.


<style>
.main-wrapper{padding:16px}
.main-container{max-width:1100px}
.main-content{margin:0 auto}
</style>

<div class="main-wrapper">
 <div class="main-container">
  <div class="main-content">
   <main>
    <div class="main-somthing">
     <div class="main-somthing2">
      <article>
       <div class="article-wrapper">
        <div class="article-container">
         <div class="post-body"></div>
        </div>
       </div>
      </article>  
     </div>
    </div>
   </main>
  </div>
 </div>
</div>

then you could make it something like the one shown bellow.


<style>
.main{max-width:1100px;margin:0 auto;padding:16px;box-sizing:content-box}
</style>

<main class="main">
  <div>
    <article></article>
  </div>
</main>

This will make your dom size much smaller which means template size gets much smaller as well.

Yes, you need div elements for positioning, padding and many other pourposes, but try to keep the DOM tree minimal by jointing classes together and add to one div element insted of making 2 elements and adding classes to each of them.

Canceling Javascript

Deleting or canceling the Java script impoves your site speed rapidly, so Javascripts need to be summarized. In Blogger theme there are many basic javascript which isn't so much needed to display page or for usability. In my case i just turned them all off and inplanted other javascript which are made for lazy load purposes only.

open your temeplate editor then rewrite following.

  • in the very first "<html..." tag add b:js="false"
  • rewrite </body> to &lt;!--</head>&lt;!-- --&gt;
  • rewrite </head> to &lt;!--</body>--&gt;&lt;/body&gt;

by this you won't be able to use contact form, hamburger menum, search icon expand animation and other widget related utility anymore although you can find alternative contact form which could be embed in your page such as google form and etc.

Minimize CSS

If you add CSS frequently on a daily basis, there may be duplicate content or content that is forgotten and left out.

We need to find such unneeded CSS and remove or integrate it. The goal is to avoid unnecessary processing when displaying the page.

It also directly affects the file size. The fewer the number of characters, the smaller the file size.

You could also use this useful site to make you CSS compant at「CSS Compressor」

Add loading lazy to Images

since loading lazy is supported by many modern browsers in 2022 you could just add loading="lazy" to images not only to the images in the article but also to images of popular or featured articles to improve display speed. There is no reason not to do this.

Turn off Webfonts

This is most effective treatment to increase your website display speed. Remove web fonts that have been set from the beginning. If you look at the template in the HTML editing window, you will see many descriptions of webfont at the top. We will change all of them to sans-serif or serif only. I have confirmed that this has resulted in a slight but definite increase in speed.

Post a Comment