How To Speed Up Loading Blogger Pages 100% Work - Gudio Tutorial

    Social Items


How_To_Speed_Up_Loading_Blogger_Pages_100%_Work
How To Speed Up Loading Blogger Pages - Hello, come back with me on my blog, Gudio Blog. Hopefully you find what you are looking for on this blog and can help find a solution to your problem.

Okay, as the title above How To Speed Up Loading Blogger Pages 100% Work , in this article, I will share the story of my personal experience in doing blog optimization, namely optimization at page loading speed.

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Mobile_Score_(Before)

Just sharing stories, at first my blog had very low speed. I check using:

  1. PageSpeed ​​Insight my blog gets a score of 34 for mobile mode but for desktop mode it has a pretty good value of 97. But I'm not satisfied, because the score for mobile is very low, I will increase the score so that my blog visitors are not disappointed with the slow blog I am.
  2. GTMetrix, I also tested the speed of loading this blog, and I was disappointed again. Because my "YSlow Score" blog has a D score (62%). For those of you who don't know what "YSlow Score" is, YSlow is part of the results of website analysis. Just like Google Page Speed, the results of the analysis displayed by YSlow also show parts of the website that cause a decrease in performance. This tab provides suggestions for improving the performance of website pages and provides detailed statistics on your website pages. YSlow's analysis results are usually different from PageSpeed ​​because YSlow uses different criteria. 

Of the two loading speed testing websites, my blog has very disappointing results. I thought, how my blog would be seen by visitors, if just loading a page would require a lot of time. And I'm sure, not only you, if I get a blog that loads old pages, I will close the blog / website and move to look for other blogs / websites with the same topic. Is that right? yes, I'm sure your answer will be yes. other than that, in this day, where most people use their smart phones to do activities such as opening a website or blog, and more time with their smart phones than computers. That's the reason why I really want to increase the speed score for loading my blog page.

The Cause of Slow Blogs
In my opinion, there are two factors that cause why our blog or website is slow in terms of speed loading pages.

1. External Factor: The Connection You Use And The Hosting You Use.
Of course to access the website or blog, we need an internet connection. If the network you use to access the website or blog is not good, then of course you will need a long time to load a page on a website or blog. and of course, in this case, the slow loading of a page, is not the fault of the blog owner or webmaster.

Not only the connection or network of users, but the connection or network used for hosting or blogging platforms also affects the loading speed of a website or blog. For those of you who use blog services like Blogger or WordPress, you can be quite relieved because you have a reputation and use excellent networks and connections. But when using hosting or other web / blog platforms, it is necessary to be smart in choosing because it is not necessarily a good network to use. The quality of the server from the hosting provider that we use is very important and greatly affects the speed of processing and reading the files stored on the server.

So the higher the specifications of the hosting server computer that we use. Then the faster the time to load a website or blog page. So, I suggest you, be careful in choosing good hosting.

2. Internal Factors: Website / Blog
Lots of things in the internal blog or website that need to be considered by Blogger or Webmaster so that the blog or website is not heavy and slow when accessed by visitors. The main thing is the template or theme used, if the template or theme used is too many lines of script or commands that are used, the reading by the browser will also be slow. So this blog template is like a container, so you have to be wise in choosing this container, look for templates with high page loading speed. If you search on Google, you will find many types of fast loading templates. Some are free and some are paid.

Javascript and flash files though provide a better view on your website or blog but you have to be careful and wise in using javascript. Use what is really needed for your website or blog. Because of course, the number of javascript or flash files will make the page load slow. Besides being wasteful of bandwidth, flash and javascript also requires sufficient computer specifications for faster loading, in some cases even loading failed javascript can cause crashes or hang on accessing computers. So, in this case, obviously you are wrong. 

So will I just tell stories without giving you a solution? ha ha ha, obviously not. Because this blog always tries to provide solutions.

before we start, make sure you backup your template, to prevent problems. Each template may have a different configuration and make changes one by one on the template. I am not responsible if there is a problem with your template because I only share my experience. If it's clear, let's continue.


1. Move the Javascript Position 

If you find a line like this in the results of checking in GTMetrix :
https://-your-link.com/ (xxxKiB of inline Javascript)
That means there are several large Javascripts that have been placed above the body element. So there are heavy articles that are loaded before the contents of the blog article. That is what causes, takes a long time to load the blog page. if you find a line like this in the results of checking in GTMetrix.
So, you are looking for every inline Javascript that made it heavy. The location is usually in the Edit HTML menu in the tag head section, exactly above "</head>". The way as below:

<html>
<head>
 <script> . . . . .Long  Javascript . . . . </script>
</head>
<body>
</body>
</html>

move, the javascript and paste the javascript code right above "</body>". 

<html>
<head>
</head>
<body>
 <script> . . . . .Long Javascript. . . . . </script>
</body>
</html>



How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Second_Changes
Don't forget to click save the changes you made. And try checking again using GTMetrix and PageSpeed Insight, ​​in my experience, using this method on my blog. This blog I can get a score of 57 where previously I got a score of 34. And in GTMetrix increased by 4 digits from 62% to 66%. Not bad. Because we only made one change, and we will make another change.



2. Remove Bundled Javascript

Still in "Edit HTML" mode, press on the keyboard "CTRL + F" and find the code </body>. Delete that code and replace it with :
&amp;lt;!-&lt;/body&gt;-&amp;gt;&amp;lt;/body&amp;gt;
Save the changes you made and try to check again, what about the score? My experience of making changes like this on my blog, my score on PageSpeed ​​Insight became 64 where previously I got a score of 57. And in GTMetrix just increased by 1 digits from 66% to 67%.


How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Third_Change



3. Fix : Properly size images

If when you check using PageSpeed ​​Insight there is a problem with the size of the image, then you must make improvements to it.

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Size_Image

In the picture above there are data as follows:

  • data-original-height = "600"
  • data-original-width = "1200"
  • height = "200"
  • width = "400"


The data means that the image you uploaded has a resolution of 1200x600 while the image displayed on a blog or website has a resolution of 400x200. Usually in this case, I do it by changing the 1200x600 image resolution to 400x200, so it doesn't take much time to load the image. And remember, make sure you always display images when posting articles always using original size.



4. Fix : Eliminate render-blocking resources

Eliminate render-blocking resources (CSS)
All websites and blogs certainly have CSS. and I'm sure, all of you already know what CSS is. Usually there is CSS that is inline or directly on the website or external css, which is called css from outside the website. But the use of external css can cause rendering-blocking (delay the loading of the page) before the external css is loaded so that the website loading becomes slow. On this blog there are external links namely:

    <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css? 
        family=Roboto%3A400%2C900%2C700%2C500%2C300%2C400italic%7CMontserrat%3A700&amp;ver=4.6.6#038;subset=latin,latin-ext' media='all' 
         rel='stylesheet' type='text/css'/>
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Then add this javascript code:

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("your css link");loadCSS("your css link");



Eliminate render-blocking resources (JS)
To fix this problem in jquery, just add the async = 'async' code before the src.

Before :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>

After :

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>


save, the changes you have made and please try testing again.




5. Remove css_bundle_v2

This css_bundle_v2 is still part of the existing blocking rendering when you check the PageSpeed ​​Insight. If it's not there, then you can skip to the next step. But if there is a blocking rendering of css-bundle_v2, then you only need to add code:
"b:css = 'false' 
at the beginning of HTML, so that it looks like this:
<html b:css='false' b:version='2'


6. Leverage Browser Caching

Every time the browser loads a web page, the browser must download all files needed by the website to be able to display all pages perfectly. Loading that includes HTML, CSS, Javascript and Images.
Sometimes, some pages may consist of several files and small size, but not a few websites which has many images or files and is large in size.

These large files that require more time to be loaded by the browser and can be very annoying for you, if you use a slow internet connection. Each file makes a separate request to the server. So the more requests to the server, the more work what to do and that's what makes or reduces browser speed loading your page.

Browser caching can help save some of these files locally on the user's browser. For the first visit, the browser takes the same time to load the page, however for the next visit to your website, the user already have some files that they need locally that are stored in their browser.

And of course, this will make the request to the server more a little, and make loading pages faster.

The way is to add data caching to your HTML website. Type the code below under the <head> code in your HTML.

<!-- Leverage browser caching -->
<include expiration='7d' path='/assets/**.css'/>
<include expiration='7d' path='/assets/**.js'/>
<include expiration='3d' path='/assets/**.gif'/>
<include expiration='3d' path='/assets/**.jpeg'/>
<include expiration='3d' path='/assets/**.jpg'/>
<include expiration='3d' path='/assets/**.png'/>

Save the changes you've made. If you do a test after adding this caching, maybe your score will not change immediately, if it doesn't change then try a few days later.

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work-Final_Score_1

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work-Final_Score_2


I hope what I give this time in this article can be useful for all of you. And what I wrote in this article, is my own experience in making changes to my HTML code. Maybe the score you get will vary depending on the template you are using.

And if something is unclear in the article, let's discuss in the comments column. See you later and with other interesting articles.

How To Speed Up Loading Blogger Pages 100% Work


How_To_Speed_Up_Loading_Blogger_Pages_100%_Work
How To Speed Up Loading Blogger Pages - Hello, come back with me on my blog, Gudio Blog. Hopefully you find what you are looking for on this blog and can help find a solution to your problem.

Okay, as the title above How To Speed Up Loading Blogger Pages 100% Work , in this article, I will share the story of my personal experience in doing blog optimization, namely optimization at page loading speed.

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Mobile_Score_(Before)

Just sharing stories, at first my blog had very low speed. I check using:

  1. PageSpeed ​​Insight my blog gets a score of 34 for mobile mode but for desktop mode it has a pretty good value of 97. But I'm not satisfied, because the score for mobile is very low, I will increase the score so that my blog visitors are not disappointed with the slow blog I am.
  2. GTMetrix, I also tested the speed of loading this blog, and I was disappointed again. Because my "YSlow Score" blog has a D score (62%). For those of you who don't know what "YSlow Score" is, YSlow is part of the results of website analysis. Just like Google Page Speed, the results of the analysis displayed by YSlow also show parts of the website that cause a decrease in performance. This tab provides suggestions for improving the performance of website pages and provides detailed statistics on your website pages. YSlow's analysis results are usually different from PageSpeed ​​because YSlow uses different criteria. 

Of the two loading speed testing websites, my blog has very disappointing results. I thought, how my blog would be seen by visitors, if just loading a page would require a lot of time. And I'm sure, not only you, if I get a blog that loads old pages, I will close the blog / website and move to look for other blogs / websites with the same topic. Is that right? yes, I'm sure your answer will be yes. other than that, in this day, where most people use their smart phones to do activities such as opening a website or blog, and more time with their smart phones than computers. That's the reason why I really want to increase the speed score for loading my blog page.

The Cause of Slow Blogs
In my opinion, there are two factors that cause why our blog or website is slow in terms of speed loading pages.

1. External Factor: The Connection You Use And The Hosting You Use.
Of course to access the website or blog, we need an internet connection. If the network you use to access the website or blog is not good, then of course you will need a long time to load a page on a website or blog. and of course, in this case, the slow loading of a page, is not the fault of the blog owner or webmaster.

Not only the connection or network of users, but the connection or network used for hosting or blogging platforms also affects the loading speed of a website or blog. For those of you who use blog services like Blogger or WordPress, you can be quite relieved because you have a reputation and use excellent networks and connections. But when using hosting or other web / blog platforms, it is necessary to be smart in choosing because it is not necessarily a good network to use. The quality of the server from the hosting provider that we use is very important and greatly affects the speed of processing and reading the files stored on the server.

So the higher the specifications of the hosting server computer that we use. Then the faster the time to load a website or blog page. So, I suggest you, be careful in choosing good hosting.

2. Internal Factors: Website / Blog
Lots of things in the internal blog or website that need to be considered by Blogger or Webmaster so that the blog or website is not heavy and slow when accessed by visitors. The main thing is the template or theme used, if the template or theme used is too many lines of script or commands that are used, the reading by the browser will also be slow. So this blog template is like a container, so you have to be wise in choosing this container, look for templates with high page loading speed. If you search on Google, you will find many types of fast loading templates. Some are free and some are paid.

Javascript and flash files though provide a better view on your website or blog but you have to be careful and wise in using javascript. Use what is really needed for your website or blog. Because of course, the number of javascript or flash files will make the page load slow. Besides being wasteful of bandwidth, flash and javascript also requires sufficient computer specifications for faster loading, in some cases even loading failed javascript can cause crashes or hang on accessing computers. So, in this case, obviously you are wrong. 

So will I just tell stories without giving you a solution? ha ha ha, obviously not. Because this blog always tries to provide solutions.

before we start, make sure you backup your template, to prevent problems. Each template may have a different configuration and make changes one by one on the template. I am not responsible if there is a problem with your template because I only share my experience. If it's clear, let's continue.


1. Move the Javascript Position 

If you find a line like this in the results of checking in GTMetrix :
https://-your-link.com/ (xxxKiB of inline Javascript)
That means there are several large Javascripts that have been placed above the body element. So there are heavy articles that are loaded before the contents of the blog article. That is what causes, takes a long time to load the blog page. if you find a line like this in the results of checking in GTMetrix.
So, you are looking for every inline Javascript that made it heavy. The location is usually in the Edit HTML menu in the tag head section, exactly above "</head>". The way as below:

<html>
<head>
 <script> . . . . .Long  Javascript . . . . </script>
</head>
<body>
</body>
</html>

move, the javascript and paste the javascript code right above "</body>". 

<html>
<head>
</head>
<body>
 <script> . . . . .Long Javascript. . . . . </script>
</body>
</html>



How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Second_Changes
Don't forget to click save the changes you made. And try checking again using GTMetrix and PageSpeed Insight, ​​in my experience, using this method on my blog. This blog I can get a score of 57 where previously I got a score of 34. And in GTMetrix increased by 4 digits from 62% to 66%. Not bad. Because we only made one change, and we will make another change.



2. Remove Bundled Javascript

Still in "Edit HTML" mode, press on the keyboard "CTRL + F" and find the code </body>. Delete that code and replace it with :
&amp;lt;!-&lt;/body&gt;-&amp;gt;&amp;lt;/body&amp;gt;
Save the changes you made and try to check again, what about the score? My experience of making changes like this on my blog, my score on PageSpeed ​​Insight became 64 where previously I got a score of 57. And in GTMetrix just increased by 1 digits from 66% to 67%.


How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Third_Change



3. Fix : Properly size images

If when you check using PageSpeed ​​Insight there is a problem with the size of the image, then you must make improvements to it.

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work_-_Size_Image

In the picture above there are data as follows:

  • data-original-height = "600"
  • data-original-width = "1200"
  • height = "200"
  • width = "400"


The data means that the image you uploaded has a resolution of 1200x600 while the image displayed on a blog or website has a resolution of 400x200. Usually in this case, I do it by changing the 1200x600 image resolution to 400x200, so it doesn't take much time to load the image. And remember, make sure you always display images when posting articles always using original size.



4. Fix : Eliminate render-blocking resources

Eliminate render-blocking resources (CSS)
All websites and blogs certainly have CSS. and I'm sure, all of you already know what CSS is. Usually there is CSS that is inline or directly on the website or external css, which is called css from outside the website. But the use of external css can cause rendering-blocking (delay the loading of the page) before the external css is loaded so that the website loading becomes slow. On this blog there are external links namely:

    <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css? 
        family=Roboto%3A400%2C900%2C700%2C500%2C300%2C400italic%7CMontserrat%3A700&amp;ver=4.6.6#038;subset=latin,latin-ext' media='all' 
         rel='stylesheet' type='text/css'/>
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Then add this javascript code:

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("your css link");loadCSS("your css link");



Eliminate render-blocking resources (JS)
To fix this problem in jquery, just add the async = 'async' code before the src.

Before :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>

After :

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>


save, the changes you have made and please try testing again.




5. Remove css_bundle_v2

This css_bundle_v2 is still part of the existing blocking rendering when you check the PageSpeed ​​Insight. If it's not there, then you can skip to the next step. But if there is a blocking rendering of css-bundle_v2, then you only need to add code:
"b:css = 'false' 
at the beginning of HTML, so that it looks like this:
<html b:css='false' b:version='2'


6. Leverage Browser Caching

Every time the browser loads a web page, the browser must download all files needed by the website to be able to display all pages perfectly. Loading that includes HTML, CSS, Javascript and Images.
Sometimes, some pages may consist of several files and small size, but not a few websites which has many images or files and is large in size.

These large files that require more time to be loaded by the browser and can be very annoying for you, if you use a slow internet connection. Each file makes a separate request to the server. So the more requests to the server, the more work what to do and that's what makes or reduces browser speed loading your page.

Browser caching can help save some of these files locally on the user's browser. For the first visit, the browser takes the same time to load the page, however for the next visit to your website, the user already have some files that they need locally that are stored in their browser.

And of course, this will make the request to the server more a little, and make loading pages faster.

The way is to add data caching to your HTML website. Type the code below under the <head> code in your HTML.

<!-- Leverage browser caching -->
<include expiration='7d' path='/assets/**.css'/>
<include expiration='7d' path='/assets/**.js'/>
<include expiration='3d' path='/assets/**.gif'/>
<include expiration='3d' path='/assets/**.jpeg'/>
<include expiration='3d' path='/assets/**.jpg'/>
<include expiration='3d' path='/assets/**.png'/>

Save the changes you've made. If you do a test after adding this caching, maybe your score will not change immediately, if it doesn't change then try a few days later.

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work-Final_Score_1

How_To_Speed_Up_Loading_Blogger_Pages_100%_Work-Final_Score_2


I hope what I give this time in this article can be useful for all of you. And what I wrote in this article, is my own experience in making changes to my HTML code. Maybe the score you get will vary depending on the template you are using.

And if something is unclear in the article, let's discuss in the comments column. See you later and with other interesting articles.
iklan related post
Load comments