10 How Ways to Speed ​​Up Blog Loading

Building a blog or website that is light and fast loading is something that must be done by bloggers and it is mandatory in my opinion personally.

Why is it mandatory?

Because by having a fast blog, it can increase rankings on search engines, especially Google. In addition, speeding up blog loading can provide a pleasant experience for blog visitors. 

But, not a few bloggers even no longer take into account the loading speed of their blogs. On the contrary, they massively put too many AdSense ads on one page, making the blog loading slow. 

In addition to being slower, opening a blog page that has a lot of ads can make the internet quota of visitors more wasteful.

There is one study by Gomez, entitled  "Why Web Performance Matters: Is Your Site Driving Customers Away?" Gomez interviewed 1,500 customers about how blog speed impacts their shopping experience.

And the result is:

  1. An increase in website loading from 2 to 10 seconds will increase the page abandonment rate by 38%.
  2. More than 75% of customers prefer to leave a slow website, instead of waiting for the website to load.

Well, that's why we have to speed up the loading of our blog so that customers who visit our blog get a better user experience.

Yep, for that, all bloggers should also consider the factors that make loading the page heavy. There are so many ways that you can do to optimize blog loading to be faster.

Negative Impact of Slow Blog Loading

Slow loading blogs can have a negative impact, namely:

1. Reduce Traffic

The negative impact that will be experienced on a slow blog is that it will experience a decrease in traffic, because a slow loading blog will certainly make visitors lazy to wait, and eventually no longer want to visit your blog. 

Not only visitors, we are just lazy when visiting a blog or website that is slow, isn't it. OK, let's move on to the next impact.

2. Reducing Income

Not only reducing traffic, along with decreasing traffic due to slow loading blogs, of course it will have a bad impact on your income. With reduced traffic will automatically reduce your revenue and your ad impression rate.

3. Bad Impact For SEO

Google announced that website loading speed is one of the signals used for its algorithm in ranking blog pages. With a slow loading blog, gradually your site or blog will be shifted to blogs that have better quality.

Positive Impact of Fast Blog Loading

The positive impact of a fast loading blog is the opposite of the negative impact of a slow loading blog that I have described above. You must have understood right. So, I don't need to explain anymore here. OK, let's move on to the next discussion.

Tools to Check Blog Loading Speed

There are many tools or applications that you can use to determine the loading speed of your blog. Here are 10 tools to check the loading speed of your blog.
  • Google PageSpeed Insight
  • GTMetrix
  • Geek Flare
  • Google Mobile Website Speed Testing Tool
  • Chrome DevTools
  • Pingdom
  • Load Impact
  • Web Page Analyzer
  • KeyPageTest
  • WebPageTest

How to Speed ​​Up Blogger Blog Loading (Blogspot)

Because it's on Google's server, there's not much we can do to speed up loading blogs on Blogger. Automatically our access is limited to optimize the blog because of this factor.

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 Template

How to speed up loading a blog, the first thing you have to do is to use a fast loading blogger template. This method is very easy for you to do. No need to bother with manual optimization. 

And I highly recommend this method for those of you beginner bloggers who are still learning, who don't know about the ins and outs of blogspot.

2. Optimize Images

After checking the speed of your blog with Google PageSpeed ​​Insight and GTMetrix. Now you can see what components are making the blog load slow, and usually images or photos. 

Well, to optimize the images on your blog, you can start by using images as necessary. And to reduce its size, you can see a few things below:

Use Image Size According to Blog Dimensions

Images that have large dimensions will definitely have a large size too. Therefore, using images that match the blog's dimensions will make the images more optimal without destroying the appearance of the blog itself.

Choose the Right Image Format

Each picture format certainly has its respective advantages and disadvantages. And the most commonly used and browser -compatible formats are PNG, JPEG, and GIF.

Here is a little explanation about the PNG, JPEG and GIF formats:
  • PNGs . The PNG format is more suitable for storing geometric images or vector renderings that have a few colors (approximately 256 colors). 
  • JPEGs . The JPEG format is more suitable for storing images in the form of photos containing real objects such as landscapes or humans.
  • GIFs . The GIF format is usually used to save moving images. Although, GIFs are also suitable for saving small images that have a bit of color like logos.
So, my advice is to just choose PNG format, because if it's for blog post images or post thumbnails, it's even better to use PNG format. And if it's a wallpaper blog, it's better to use the JPEG format.

Compress Image

The next way you can do to optimize images is to do compression. Compressing the image is done with the aim of 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, you can use the following free online tools:

  • Compressor.io
  • TinyPNG.com
  • Kraken.io
  • GIFCompressor
  • CompressPNG.com
  • CompressJPEG.com
  • What tools do you use, bro?

I usually use the TinyPNG and Kraken.io.

Install Script Lazy Load

The next way to speed up the loading of the blog is to use the lazy load javascript code. Lazy Load is a technique to delay loading images until they are needed by visitors. That is, images that are not visible in the screen area will not be loaded until the visitor scrolls the page.
How to Install Lazy Load Script on Blogger

  1. First, go to your Blogger Dashboard .
  2. Then, click on Theme Menu >> Edit HTML .
  3. The next step is to find the code </body> or it could be with CTRL + F .
  4. Copy the lazy load script below and place it above the </body> code
<script type='text/javascript'>
// 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"})});

3. Avoid Using Images For Blog Backgrounds and Headers

The next way to speed up the loading of the blog is about using images in the background and blog headers. 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.

I personally don't really recommend you to use images for blog backgrounds or blog headers. But, back to each of us, bloggers usually have different tastes. 

So, 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.

One of them is that you can optimize the image first before using it for the blog header or blog background as I explained above.

4. Compress Script JavaScript dan CSS

The next way to speed up the loading of the blog is to compress the javascript and css code. Reducing the size of the javascript and css code can increase the loading speed of the blog. In general, you can compress all scripts in Blogger templates from HTML, JavaScript, to CSS.

Compressing the script 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 tools to reduce the script size.

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 you can copy it and paste it in CSS Minifier , then compress the css code earlier. If so, copy the reduced code to replace the previous CSS code.
Attention! Please be careful in doing this action, if you don't really understand coding, you should skip this fourth method. And if you want to do it this way, I recommend backing up the template first, just in case something goes wrong.

5. Limit the Number of Posts on the Blogger Homepage

Usually by default, blogger will display 7 posts on your homepage or blog homepage. But, if you want to speed up the loading of your blogspot blog, you should set it to only 4-6 posts that appear.
6. Don't Install Too Many Widgets
Installing too many widgets is a big mistake, because apart from lack of SEO, it can also reduce the loading speed of the blog. Well, some beginner bloggers intentionally install a lot of widgets on their blogs with the excuse that it will make it easier for visitors to browse the content on the blog. 

So, the widget serves as a navigation for visitors to get what they are looking for. That’s right this is great too, when installing widgets with the aim of making it easier for visitors to get what they’re looking for. But, if too many widgets can make your blog become slower. 

Therefore, the more widgets there are, the more heavy the requests charged to the server will be. We recommend that you use just enough widgets, not too much. In my opinion, it's better to just install three widgets, which are more than enough, the Recent Posts, Labels, and Popular Posts widgets.

Here are some widgets that usually make blogs slow; Adsense Widget, Affiliate Banner Widget, Widget that displays our social media posts.

Widget Adsense

The name of the ad will make the website slower. However, if you want to keep your AdSense ads in the sidebar, there might be a few things to 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 under headers, sidebars and in posts.

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.

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 account.

7. Don't Use Too Many Font Types

Almost in 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 be loading 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.

8. Limit the Number of Ads Shown on Your Blog

The next way to speed up the loading of the blog is to limit the number of ads that appear on your blog. Sometimes there are bloggers who excessively place too many ads on one blog page, of course this can make your blog load slower. 
We recommend that you do not serve too many ads on one page, it can also affect the loading speed of your blog. In addition to slowing down the loading of the blog, too many ads on one blog page can also interfere with the convenience of visitors to read your content properly.

9. Take advantage of AMP

The next way to speed up the loading of the blog is to use AMP. AMP or accelerated mobile pages is a method recommended by Google to speed up blog loading. Therefore you can use AMP for your blog. Because AMP can enable caching in mobile browsers.

Apart from enabling caching in mobile browsers, AMP has several other functions, including:
Can limit image resolution
Can change the image format to suit the display of mobile devices
Can reduce image quality
That way, AMP can significantly reduce the size of your blog page. Besides loading faster, visitors' internet quota can also be more efficient.

10. Avoid Using Pop-ups

The last way to speed up blog loading is to avoid using pop-ups. Banners or pop-up forms are often used on blogs. For example, to do promotions or email list forms.

However, the use of pop-ups on mobile blogs should be avoided. Because with mobile device screens that are much smaller, the appearance of pop-ups will actually cover the blog content itself. By reducing pop-ups, you can speed up the loading of your blog.

Especially if the pop-up is difficult to close. The visitors might suddenly become annoyed and leave your blog. You don't want that to happen to your blog, right?
CEO & Founder RazPiblog Soft

Posting Komentar