How To Optimize Images And Speed Up A Blogger/WordPress Site

For bloggers who are always busy with tutorial posts, surely they always feel uncomfortable with screenshots that are inserted in their posts that are too burdensome to load their blogs.

But now you don't have to worry about high-sized images you can now optimize with the help of the Statically CDN.

With the Statically CDN it will make images that should be very heavy to be loaded on a blog, now very quickly it will be loaded without using any application.

What is Statically?

In short, Statically is a Free, Reliable, and Open Source CDN for your static files, which are equipped with advanced features so you can load your projects and make demos from GitHub, GitLab, and Bitbucket easier or even load images from your server. become faster.

I myself during this blog often complain, where there are so many images in each post, even making loading this blog feels heavy, for the desktop version, while for the mobile version itself can be overcome with AMP features on this blog.

Recently the admin of the KompiaJaib.com blog created an article that discusses the Statically CDN. Yes, this article was inspired by his blog, Mas Adhy Suryadi. Where he discussed how to use Statically to source CDN images for bloggers.

For the presentation on this blog myself, I use this method only in the screenshot image in the middle of the post, because for the thumbnail this blog has a very small size and does not have a negative impact on loading the blog.

Then how to apply this method to the blog?

The method is very easy, if you upload images through blogger, usually you will get a picture URL which is more or less like the following.

https://2.bp.blogspot.com/-GnUJYZwQZps/XJew5HGxinI/AAAAAAAAB8g/jHNwNu2yN5A1VBm-OMfMb4pK0fwfPSzUwCLcBGAs/s640/bomb-3286472_960_720.jpg

You just need to replace https:// by https://cdn.staticaly.com/img/ so that it becomes like this.

https://cdn.staticaly.com/img/2.bp.blogspot.com/-GnUJYZwQZps/XJew5HGxinI/AAAAAAAAB8g/jHNwNu2yN5A1VBm-OMfMb4pK0fwfPSzUwCLcBGAs/s640/bomb-3286472_960_720.jpg

or, can use an easier method, by applying javascript, by saving the code below just above the code </ body>

<script> 
//<![CDATA[ 
var images = document.getElementsByTagName('img'); 
  for (var i = 0; i < images.length; i++) { 
    images[i].src = images[i].src.replace(/.*?:\/\//g , 
"https://cdn.staticaly.com/img/"); 
  }; 
//]]> 
</script>

Using the script above, it will make all the images in the blog use statically automatically. so, please choose whether to use manual or automatic methods.

That way you can make sure that every picture you insert in a blog post will load very quickly.