The right way to speed up a blog , Hello my friends Blogger bloggers, in this article I will present several ways to speed up the loading of the blog and improve the loading of its pages. So I will compensate in this article in which we will mention distinct methods and solutions, follow me.
Optimize and speed up the images used.
Of course, images are one of the most important media used for us as bloggers, and they often line the main interface of our articles and blogs, and they are a great attraction for visitors, but did you ever think that it is also a major factor for the slowness of the blog, as sometimes the images are of a large size, which causes slow loading of the blog, so it is preferable to make the images light It is small in size, with a maximum size of 1000px * 1000px, and do not use GIFs at all due to its large size.
And if you are one of those who design images for his posts himself through Photoshop, Illustrator or others, it is preferable to extract the images
Save for Web - Png 24 method and use a small number of colors when designing images "I use this method when designing my own images and when extracting them, their size is 30Kb and 60Kb as a maximum, which is the ideal size for images"
note
This method does not distort the quality of the images at all
Is that all for the photos?
Of course not, there is also a way to reduce the size of the images as well after extracting them, which is to use the images in the webp format
Also, I have used this method, and it is very effective on all types and sizes of images, and the percentage of reducing the size of the images may reach 50% or even more, and the percentage may also be less for images of small size basically, so do not take it easy. All kilobytes are very important.
The method of converting images to webp format is done through several sites and I use the tool provided by the online-convert website, the tool link is from here.
Use a script to delay uploading images.
Using the famous Lazy Load script, you can postpone the loading of images when the browser reaches them, and in this way, we have postponed a heavy load on the browser to download it once.
To install the script on the blog, go to Blogger, choose the theme, then edit the HTML, then search for the </body> tag and paste the following code before it / above it
<script type='text/javascript'>//<;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:"https://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script>Note : The script may conflict with some template code and do the opposite and slow down the blog or not show images, so it is preferable to take a backup copy or try the code before installing it.
Script delay loading adsense ads
Ads, one of the most things that cause slow loading of the blog, especially if it is a lot, so to get a quick blog, it is preferable to be satisfied with a number of ad units with a maximum of 4 ad units and also according to the size of the topics and the distribution of ads, and also using the script to delay the loading of Adsense ads, which works to delay the loading Ads are pending access, and most importantly, they are protected after loading the main page resources.
To install the script on the blog, go to blogger, choose appearance, edit HTML, search for the <head> tag and paste the following code after / under it
<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense By Itheric
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>Now we search for the following code or something similar and delete it from the template
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Note: It is preferable to take a backup copy of the template before making modifications.
Compress CSS, HTML
The code is the basis of the pages and is responsible for structuring the templates, and of course every code takes a part of the structure and construction of the page and each one of them does its work, but you may find some codes that can be dispensed with and replaced with something that is lighter and less in size, even after filtering the template from Unimportant codes Some templates remain somewhat stuffed with codes, which is why it is preferable to compress codes to reduce their size, especially CSS codes that take the largest space from the template after the JavaScript codes that you can compress through this tool, the CSS code compression tool.
As for compressing HTML codes, it is almost the same process, but we have to be careful in identifying and targeting specific codes to compress them, and you can do that through this tool, the HTML code compression tool
Use conditional tags
The topic of the use of conditional tags is a very deep and simple topic at the same time and it will need an article of its own to explain the use of tags in many aspects, but I will give a brief definition of it. By showing or hiding a particular tool or element on a page, a category, or even a multiple set of conditions at the same time without compromising the eligibility of the codes or modifying them.
Of course, a tool was designed to facilitate the use of conditional tags, the tool link from here
Examples of using the tool
If the sidebar (sidebar) appears on the blogging pages, wrap the HTML and CSS codes of the sidebar with the code to appear on the blogging page, for example:
<b:if cond='data:view.isPost'>
........ Place Your SideBar Code Here .........
</b:if>This is how the special codes will be loaded into the sidebar on the blogging pages only
Of course, this is just a very simplified example, and I mentioned that the use of conditional signs is very deep, so you will need to dive into the tool and its uses, which, God willing, I will present a topic in which I will explain as much as possible about the use of conditional signs.
Disqus . Comment System Changed
Some may be surprised when you include changing the comment system from Blogger to Disqus, as it is one of the things that may make your blog speed faster.
Of course, Blogger comments are good and do their job perfectly, but the annoying thing is that the basic codes for uploading comments are impossible to modify, meaning that the comment box will be loaded as if it were an essential part of the page’s construction and would never be delayed, unlike the Disqus comments system, which can be modified and made to load either when The user's access to the comment box space, or by placing a button that the user presses on to download the comment box, meaning that it is up to the user to download the comment box and it is not loaded with the page's structural codes as blogger comments.
To understand the process more, view this page from here
As you can see, the comment box is not loaded until the browser is there.
In this article, I'll just explain how to add the lazy-loading script to Disqus comments, and I'll go over the Disqus comment system in more detail later.
To install the script, we must first hide (not include) Blogger comments in the blog, by going to Blogger, then choose Settings, then choose Posts, Comments, and Sharing, then Comments Location, choose Hide.
Now go to Appearance and choose Edit HTML, search with Ctrl +F for the following code <b:includable id='comments' var='post'> you will find a code similar to the following code
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4><data:post.commentLabelFull/>:</h4>And put the following code after the third line
<div id="disqus_thread">
<div id="disqus_empty">
</div>
</div>
<script>//<![CDATA[
function load_disqus( disqus_shortname ) {
// Prepare the trigger and target
var is_disqus_empty = document.getElementById('disqus_empty'),
disqus_target = document.getElementById('disqus_thread'),
disqus_embed = document.createElement('script'),
disqus_hook = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);
// Load script asynchronously only when the trigger and target exist
if( disqus_target && is_disqus_empty ) {
disqus_embed.type = 'text/javascript';
disqus_embed.async = true;
disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
disqus_hook.appendChild(disqus_embed);
is_disqus_empty.remove();
}
}
/*
* Load disqus only when the document is scrolled till the top of the
* section where comments are supposed to appear.
*/
window.addEventListener('scroll', function(e) {
var currentScroll = document.scrollingElement.scrollTop;
var disqus_target = document.getElementById('disqus_thread');
if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top - 150) ) {
load_disqus('itheric');
console.log('Disqus loaded.');
}
}, false);
//]]></script>Change iteric with your Disqus ID
Regarding the topic of installing Disqus comments on Blogger, you will find many explanations on the Internet that will help you.
There are also some methods that could not be mentioned in this article and which I will mention in future articles.
Here I have reached the end of this article. If you have any suggestions or questions, please mention them in the comments