Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

8 Ways to Speed ​​Up Blogger Blog Loading (Blogspot)

8 Ways to Speed ​​Up Blogger Blog Loading (Blogspot)

- - Post a Comment


Who likes a slow website? So, first find out how to speed up the loading of the following Blogger blog.

Website speed is one of the important factors that a successful website must have. An easily accessible website is not only good for visitors, it's also great for search engine bots. In fact, pagespeed is one of the factors that Google takes into account in determining website rankings.

So if you have a blog, don't just pay attention to how it looks, make your site fast too!

Then how to increase the loading speed of the blog? Relax, especially for Blogger (Blogspot) users, see how here!

How to Increase Blogspot Loading Speed

Before learning how to speed up loading a blog, it's a good idea to check the loading speed of our current blog. To do this, we can use free online tools such as Page Speed ​​Insight, GTMetrix, or Pingdom.

Not only can it be used to determine the speed of access to our blog, with this tool we can also see what makes our website slow and how to overcome it.

If you receive poor results, there are several ways you can do to speed up the loading of your Blogger blog.

1. Use a fast-loading Blogger template

The first step you can do to speed up the loading of your Blogger blog is to use a fast loading template . A well-made template will usually be executed well too so that Blogspot blogs can appear quickly.

I myself have proven this when I replaced the template from ThemeXpose with Mas Sugeng's Viomagz template . Only by using this template, my Blogger blog has experienced many improvements as follows,

  • PageSpeed Score: 78% ► 94%
  • YSlow Score: 72% ► 82%
  • Fully Loaded Time: 1.4s ► 0.9s
  • Total Page Size: 772KB ► 469KB
  • Request: 46 ► 25
The results of the website speed test before changing the Blogger template
Speed ​​up loading blogspot by using fast loading blogger template
Faster after changing the fast loading Viomagz Blogger template

2. Optimize images

If you've checked your website speed with GTMetrix or Page Speed ​​Insights, maybe you can see that one of the biggest website components that usually makes a slow loading blog are images/photos. The larger the size, the longer it will take to display the image.

To optimize images on a blog, we can start by using images as necessary. And to reduce its size, we can do the following:

a. Choose the Right Image Format

The image formats commonly used and compatible with all types of browsers are JPEG, PNG, and GIF . Each image format has its own advantages and will be suitable for use in certain types of images.

For example, the JPEG format will be more suitable for storing images in the form of photos containing real objects such as landscapes or humans. If you save it in PNG format, this kind of image will not look natural and instead have a larger size.

The PNG format itself is more suitable for storing geometric images or vector renderings that have a few colors (about 256 colors). For example you can see a lot of 'cartoonish' images or some WordPress screenshots on this site. If we save these images in JPEG format, the images will not look sharp and tend to be blurry . In addition, the size will be larger when compared to the PNG format.

Finally, the GIF format is generally used to store moving images. Even so, GIFs are also suitable for saving small images that have a little color like logos.

b. Use Image Sizes That Appropriate to Blog Dimensions

Logically, images with large dimensions will have a larger size as well. For this reason, using images that match the dimensions of our blog will make the image size more optimal without destroying the appearance of the blog.

For example, if the width of our blog is only 700px, then using an image size more than that will be very redundant. Depending on the theme you use, blogs will usually load images in the original size even though they will be displayed according to the width of our blog.

Well, to find out the width of the blog, we can use the Inspect Element tool in the browser.

How to find optimal image dimensions with Inspect Element
How to find optimal image dimensions with Inspect Element

c. Image Compression

Another way that you can do to optimize images is to do compression. Image compression itself is done by removing the meta data in the image. In addition, compression also uses a special algorithm so that images can be saved in a smaller size without reducing their quality.

To compress images, we can use the following free online tools:

d. Gunakan Script Lazy Load

Lazy Load is a technique that can be used to delay loading images until they are needed by visitors. In other words, images that are not visible in an area of ​​the screen will not be loaded until the reader scrolls to that area.

To use lazy load in Blogger, first find the THEME menu EDIT HTML, then copy the following code before the </body>or tag &lt;!--</body,

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

3. Be careful when using images for website headers or backgrounds

Continuing the previous point, the use of images will generally increase the amount of load that must be loaded by the server. Not only images in the article, but also images that you use as headers and images that are used as blog backgrounds.

As an adherent of a minimalist flow, I myself do not really recommend using this kind of image. But different bloggers have different tastes. If you want to use an image on your blog's header or background, there are a few things you can pay attention to so that your blog still looks beautiful without sacrificing your blog's loading speed.

First, you can optimize the image first in the way I mentioned above.

Second , you can choose an image with a limited number of objects and colors. For example, a picture of a sky or a wall has a smaller size than a more complex picture such as a flower garden or recreation area.

Third, you can use a seamless pattern image that is smaller in size but can be arranged to appear repeatedly with CSS, as in the following example.

body { 
background-image: url("background.png");
background-repeat: repeat; /* to repeat the image vertically and horizontally */
}

Fourth , if you only want to display gradient colors, you can also add CSS code like the following example.

body {
background-image: linear-gradient(-90deg, red, yellow);
}

4. Compression of JavaScript and CSS scripts

In addition to compressing images, we can also compress scripts on the Blogger blog to speed up loading. In general, you can compress all scripts in Blogger templates from HTML, JavaScript, to CSS.

Script compression itself is done by removing comments and characters that are not important without changing the script's function. And you don't need to do it manually because we can use the help of online tools to reduce the size of the script.

In some premium templates, the Javascript used is usually compressed, but most of the CSS code is not. To compress CSS, open the Blogger template and copy the code between <b:skin>and </b:skin>.

After that we can copy it in CSSminifier.com or Minifier.org and compress it. If so, copy the minified code in place of the previous CSS code.

5. Don't use too many font types

In almost every template we can set the display font for each blog element starting from the navigation menu, header, post, sidebar, etc. Although it's fun to beautify the appearance of our blog, it's better if you don't use too many fonts, especially Google fonts. The more Google fonts you use, the heavier your blog will load later.

To speed up loading your Blogger blog, it's better if you only use two types of fonts. Also, avoid stylish fonts such as calligraphy, which are usually larger than serif or sans-serif fonts.

6. Limit the number of posts on the Blogger homepage

By default, Blogger will display 10 posts on our blog homepage. But if you want to speed up Blogspot loading, you can limit it to only 3-7 according to your taste.

Limit the number of posts on the homepage to speed up Blogger blog loading
Limit the number of posts on the homepage to speed up Blogger blog loading

7. Reduce unnecessary widgets/gadgets

Compared to reducing the number of posts on the front page of the blog, I myself recommend reducing the number of widgets/gadgets that are not important.

Some of the widgets that usually make blogs slow are Adsense Widgets, Affiliate Banner Widgets, Widgets that display our social media posts.

a. Widget Adsense

The name of the ad will make the website slower. But if you want to keep putting Adsense ads on the sidebar, maybe there are a few things you can consider first.

First, check the ad earnings posted in the sidebar with ads elsewhere. To do this, you can create an Ad Unit and install it in only one place. After that compare the results for a month. If the result is much smaller, it's better to just delete it.

From my experience, Adsense's biggest income usually comes from ads placed in headers or in posts. The sidebar itself is a pretty bad place, especially if a lot of your blog visitors come from mobile devices.

b. Affiliate Banner Widget

There's actually nothing wrong with installing this widget. It's just that on the affiliate banner, the images used are generally taken from the affiliate provider's site which sometimes has not been optimized.

So if you install an affiliate banner, it's a good idea if you download and save the banner image on your own blog.

c. Social Media Widget

Social media widgets such as fan pages or widgets that display your recent posts on social media are widgets that you should also avoid.

If you want to use it, it's better to use a regular link widget in the form of text or a logo which when clicked will direct visitors to your social media accounts.

8. Limit ads

This one doesn't need to be explained at length. The more ads you display, the slower your blog will load. So, if you want to speed up the loading of your Blogger blog, just reduce the number of ads if there are too many.


Even though there is no plugin help like in WordPress, it turns out that there are many ways to speed up the loading of your Blogger blog that you can do easily, right! so it seems there is no reason not to try it yourself on the Blogspot blog that you have.

As usual, if you have any suggestions or questions regarding this tutorial, don't hesitate to leave your comments below!

Post a Comment for "8 Ways to Speed ​​Up Blogger Blog Loading (Blogspot)"