+ Problems you should not care much:
1. Use Google Pagespeed or similar sites as the primary metric that should be used as a reference because Pagespeed or other sites use general accounting when scanning a site if it finds any problems it will put in the alert. Not interested in page load time.
2. Block the js and css default of the Blog because whether you block it does not reduce the page load time sometimes cause errors to the widget if you do not properly.
+ The issue you need to care about:
1. Size or size of a page when loading
2. Rules when loading web pages are loaded first, some are loaded later.
3. Download feeds
2. Rules when loading web pages are loaded first, some are loaded later.
3. Download feeds
Now that I am going to focus on the issues you need to care about, it will determine the page load speed.
1. Size of a page when loading
Now I will take an example to illustrate the size of the page by distance and The runtime to the destination is the page load time. So the shorter the journey, the faster the destination. And now we will look at what increases the size of the page include:
+ CSS
+ HTML
+ Image
+ Script
In which the image will be the heaviest so we need to process to the optimal level. In order to have the image displayed in the post we need to upload photos using the hosting Blogger host. The problem you need to process the image before uploading with the following two issues:
+ Determine the maximum width of the image container, for example, the main-wrapper with a maximum width of 860px, you need to set the width of the image is also a maximum of 860px, such that the image file width 2000px, the size of it will be very heavy but if you adjust the width to 860px, the image size will greatly reduce.
Compressing images before uploading using online image compression sites reduces compression on the network.
After you upload the image to the post then in Blogger allows you to adjust the size in the article as follows:
Small: s200
Average: s320
Large: s400
Very large: s640
First band size: s1600
So if you set the image to s1600 as the size of the image file when you upload it. I encourage you to just average size s320, but when displayed in the article will be small and dim so you need to change using js replace the original image size for the highest definition.
Copy
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</head>
<body>
...
<b:if cond='data:view.isSingleItem'>
<script>//<![CDATA[
$(document).ready(function() {
$('.post-body .separator a,.post-body .tr-caption-container a').attr('href', function(o, n) {
return n.replace('s200', 's1600').replace('s320', 's1600').replace('s400', 's1600').replace('s640', 's1600')
})
$('.post-body .separator img,.post-body .tr-caption-container img').attr('src', function(o, n) {
return n.replace('s200', 's1600').replace('s320', 's1600').replace('s400', 's1600').replace('s640', 's1600')
})
//]]></script>
</b:if>
</body>
You need to pay attention to download the image and change the size of it differently because when loading the page will only load the image size s320 and when finished loading the image then js will process the image size s1600 so the image is loaded and displayed. The image is completely different and the image is finished processing the image.
Another problem with the size of the image you are interested in is that the first image of the article is retrieved as an image that is displayed outside the index page of the Blog1 widget, PopularPosts, FeaturePosts. Since you have set up the s320 size, the first default image when loading and displaying outside the index page is s320, if you see the small size you can also use js replace the image of the widget. Blog1 also popularPosts widget so s320 size is reasonable
Copy
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</head>
<body>
...
<b:if cond='data:view.isMultipleItems'>
<script>//<![CDATA[
$(document).ready(function() {
$('.post img').attr('href', function(o, n) {
return n.replace('s200', 's1600').replace('s320', 's1600').replace('s400', 's1600').replace('s640', 's1600')
})
//]]></script>
</b:if>
</body>
Also in Blogger offers resize the default image very well that is showing the image according to the size of the screen if you do not see much effect on the phone but the speed of the page will increase very well. So you should apply the following:
// widget Blog1 version 1
Copy
<b:if cond='data:post.firstImageUrl'>
<div class='post-thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:srcset='sourceSet(data:post.firstImageUrl, [200,320,400,640,1600], "16:9")'/>
</a>
</div>
<b:else/>
<div class='post-thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:srcset='sourceSet("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX2siAW0OpAtx0QYTkJ-LqyTfpJ_UQDHC3EpFXJcNErYDmpCcHZZD8pzi2R5QNW92sRhw0irXgw1lT6ZWzH2ZMfBSyj4ATiE9yXPHgTLKHVN1tEC2uax8W8kLxYls_siqGWlu5Z01rurs/s1600/safe_image.png", [200,320,400,640,1600], "16:9")' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX2siAW0OpAtx0QYTkJ-LqyTfpJ_UQDHC3EpFXJcNErYDmpCcHZZD8pzi2R5QNW92sRhw0irXgw1lT6ZWzH2ZMfBSyj4ATiE9yXPHgTLKHVN1tEC2uax8W8kLxYls_siqGWlu5Z01rurs/s1600/safe_image.png'/>
</a>
</div>
</b:if>
// widget Blog1 version 2
Copy
<b:if cond='data:post.featuredImage'>
<div class='post-thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [200,320,400,640,1600], "16:9")' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)'/>
</a>
</div>
<b:else/>
<div class='post-thumb'>
<img expr:alt='data:post.title' expr:srcset='sourceSet("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX2siAW0OpAtx0QYTkJ-LqyTfpJ_UQDHC3EpFXJcNErYDmpCcHZZD8pzi2R5QNW92sRhw0irXgw1lT6ZWzH2ZMfBSyj4ATiE9yXPHgTLKHVN1tEC2uax8W8kLxYls_siqGWlu5Z01rurs/s1600/safe_image.png", [200,320,400,640,1600], "16:9")' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX2siAW0OpAtx0QYTkJ-LqyTfpJ_UQDHC3EpFXJcNErYDmpCcHZZD8pzi2R5QNW92sRhw0irXgw1lT6ZWzH2ZMfBSyj4ATiE9yXPHgTLKHVN1tEC2uax8W8kLxYls_siqGWlu5Z01rurs/s320/safe_image.png'/>
</div>
</b:if>
Applying in the PopularPosts version 1 widget changes the image as follows:
Copy
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [200,320,400,640,1600], "16:9")' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<img expr:alt='data:post.title' expr:srcset='sourceSet("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX2siAW0OpAtx0QYTkJ-LqyTfpJ_UQDHC3EpFXJcNErYDmpCcHZZD8pzi2R5QNW92sRhw0irXgw1lT6ZWzH2ZMfBSyj4ATiE9yXPHgTLKHVN1tEC2uax8W8kLxYls_siqGWlu5Z01rurs/s1600/safe_image.png", [200,320,400,640,1600], "16:9")' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX2siAW0OpAtx0QYTkJ-LqyTfpJ_UQDHC3EpFXJcNErYDmpCcHZZD8pzi2R5QNW92sRhw0irXgw1lT6ZWzH2ZMfBSyj4ATiE9yXPHgTLKHVN1tEC2uax8W8kLxYls_siqGWlu5Z01rurs/s320/safe_image.png'/>
</a>
</div>
</b:if>
Next we will process the image displayed in the feeds.
When building the Recent Posts widget, Random Posts we have to use feeds to get the data in there image then the default image in the feeds is always optimized in size The smallest s72-c has a width and height of 72px, which is a square image, and when writing scripts take the image as follows:
Copy
<body>
<script>//<![CDATA[
function getPosts(e) {
for (var t = 0; t < e.feed.entry.length; t++) {
var thumb = e.feed.entry[t].media$thumbnail.url,
thumbsrc = "<img src='+ thumb +'/>";
}
}
//]]></script>
</body>
will output the default image s72-c
Instead we will build the script to take the image as follows:
Copy
<body>
<script>//<![CDATA[
function getPosts(e) {
for (var t = 0; t < e.feed.entry.length; t++) {
var thumb = e.feed.entry[t].media$thumbnail.url,
w200 = thumb.replace("s72-c", "w200-h112-p-k-no-nu"),
w320 = thumb.replace("s72-c", "w320-h180-p-k-no-nu"),
w400 = thumb.replace("s72-c", "w400-h225-p-k-no-nu"),
w640 = thumb.url.replace("s72-c", "w640-h360-p-k-no-nu"),
w1600 = thumb.replace("s72-c", "w1600-h900-p-k-no-nu"),
thumbsrc = "<img src=' + w320 + ' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="' + w200 + " 200w, " + w320 + " 312w, " + w400 + " 400w, " + w640 + " 640w, " + w1600 + ' 1600w"/>";
}
}
//]]></script>
</body>
Thus, when loading the image page in the widget will display the following example:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizotsFIFGDzgv2Ylx9v1qGbTxhBqTx0fcSf-KRKtMXKOoOObd4dIWJl_hikSC_HEMh-Yh-5TI_JBcU3HxKEL2mwGC3bEsZWYOeT-US5SH0g317y-WWxS1vQx-_TJt3O0J6yRW8htKqukV/s320/2018-07-06_11-55-35.jpg" sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizotsFIFGDzgv2Ylx9v1qGbTxhBqTx0fcSf-KRKtMXKOoOObd4dIWJl_hikSC_HEMh-Yh-5TI_JBcU3HxKEL2mwGC3bEsZWYOeT-US5SH0g317y-WWxS1vQx-_TJt3O0J6yRW8htKqukV/w200-h112-p-k-no-nu/2018-07-06_11-55-35.jpg 200w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizotsFIFGDzgv2Ylx9v1qGbTxhBqTx0fcSf-KRKtMXKOoOObd4dIWJl_hikSC_HEMh-Yh-5TI_JBcU3HxKEL2mwGC3bEsZWYOeT-US5SH0g317y-WWxS1vQx-_TJt3O0J6yRW8htKqukV/w320-h180-p-k-no-nu/2018-07-06_11-55-35.jpg 312w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizotsFIFGDzgv2Ylx9v1qGbTxhBqTx0fcSf-KRKtMXKOoOObd4dIWJl_hikSC_HEMh-Yh-5TI_JBcU3HxKEL2mwGC3bEsZWYOeT-US5SH0g317y-WWxS1vQx-_TJt3O0J6yRW8htKqukV/w400-h225-p-k-no-nu/2018-07-06_11-55-35.jpg 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizotsFIFGDzgv2Ylx9v1qGbTxhBqTx0fcSf-KRKtMXKOoOObd4dIWJl_hikSC_HEMh-Yh-5TI_JBcU3HxKEL2mwGC3bEsZWYOeT-US5SH0g317y-WWxS1vQx-_TJt3O0J6yRW8htKqukV/w640-h360-p-k-no-nu/2018-07-06_11-55-35.jpg 640w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgizotsFIFGDzgv2Ylx9v1qGbTxhBqTx0fcSf-KRKtMXKOoOObd4dIWJl_hikSC_HEMh-Yh-5TI_JBcU3HxKEL2mwGC3bEsZWYOeT-US5SH0g317y-WWxS1vQx-_TJt3O0J6yRW8htKqukV/w1600-h900-p-k-no-nu/2018-07-06_11-55-35.jpg 1600w">
In addition to Photo, the rest of the css, html, scripts have a negligible amount of aggregate is not equal to the size of an image file so you do not matter too much about the size of these files.
2. Rules when loading web pages Site
loading guidelines will be in order from top to bottom, just as water flows from high to low and in the page load structure will load in css - html order (including image). In this script, we go into a little analysis of this sequence.
CSS is preloaded so that when the load is finished the HTML will be displayed and the script is loaded for processing. If the script is loaded before HTML then the script must wait for the script to load. is loaded that we need to display in advance so that the script always has to be placed at the bottom of the </ body> tag.
Let's continue with the analysis of scripts that include js or javascript snippets showing different content and at different pages. Back to the original example the same distance but why he ran to front B is because Mr. A has more power and know how to handle the technique better in the run than brother B so he will come first B.
Applying to script A shows content A, script B shows content B, which rules page load and display from top to bottom, then if A is before B then script A must be located on the segment script B to be loaded and displayed first.
Of course, we need to set the script load condition for different pages using the condition tag in Blogspot. For example, the script that runs only at the home page uses conditions
Copy
<body>
<b:if cond='data:view.isHomepage'>
<script>//<![CDATA[
// đoạn script A hoặc B
//]]></script>
</b:if>
</body>
Next we will use the document ready and window onload methods to load the scripts that will be used when css and html are loaded. If in jquery using $ (document) .ready (function (), in pure javascript uses window.onload = function () and in jquery also has the equivalent function is $ (window) .on ('load', function The similarities and differences of these two methods are as follows:
Same: Waiting for the preloaded html
Different: document ready will load the script when the new html part load but not load the window wait wait onload download new download script.
Which of the two methods is better? Depending on the case, using any method if writing a script using jquery, using document ready is more effective. If using javascript, then apply window onload.
However, as mentioned above script A placed on script B which both use the window onload method will cause the page or page load lag due to the same load. So script A uses the document ready method while script B is processed with window onload.
Finally can not help but mention the jumble and iframe js comments in the article, this problem I have written instructions in the blog you refer to the main purpose is to access the article to read rather than to comment so we set the comment frame and comment content is loaded after the article is loaded or we can also set using the button click load the comment frame is also so the page load speed is also faster.
3. Download feeds
This issue is of interest to many people because it greatly affects the page load speed, as mentioned above when building widgets Recent Posts, Random Posts, Recent Comments are required to use feeds. The feeds are divided into two categories:
Summary Type: /feeds/posts/summary
Full Type: /feeds/posts/default
The difference of these two types of feeds if the summary only get a single image of each article and the summary will default to full load of all the images and content of the article so that feeds with fast and effective summary. than the full feeds because when we build just take the first picture and the summary but not the content.
Second, when building widgets Random Posts Random posts usually have to load feeds with the maximum number of posts that while retrieving only specific article numbers, for example:
Copy
/feeds/posts/summary?alt=json-in-script&max-results=5
will load 5 posts compared to
Copy
/feeds/posts/summary?alt=json-in-script&max-results=150
Max load is 150 posts so load time this muchs longer while re-filtering for 5 randomly displayed posts.
The best solution is to divide each article into one feed using start-index and max-results = 1 & callback = randomposts for example.
Copy
/feeds/posts/summary?alt=json-in-script&start-index=10&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=3&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=40&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=101&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=512&max-results=1&callback=randomposts
So for each loaded feed it will only load 1 post and get random posts by start-index. Apparently the same time if loading 5 feeds only 1 post will be faster than a 150 feeds.
Finally, using the get script or ajax method will be more effective than direct scripting because if we use the above methods we will combine the document ready and window onload methods to load the load after the html is loaded. . Illustrate example
+ Use the get script method
Copy
<body>
<script>//<![CDATA[
$(window).on('load', function() {
$.getScript('/feeds/posts/summary?alt=json-in-script&max-results=5&callback=recentposts')
})
//]]></script>
</body>
+ Using the ajax method
Copy
<body>
<script>//<![CDATA[
$(window).on('load', function() {
$.ajax({
type: 'GET',
url: '/feeds/posts/summary',
data: {
'max-results': 5,
'alt': 'json'
},
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'recentposts',
success: function() {
$('.recent-posts').removeClass('spinner').removeClass('load')
}
})
})
//]]></script>
</body>
The above are methods to increase page load speed, during the writing process can be misleading cause you confused if you do not understand. I will update when there is a new method or better.
Post a Comment
Post a Comment