How to change the order in which elements load on homepage? - html

Question

For some reason my blog homepage starts loading half way down the page, and then slides to the top when the featured images above it have loaded. I'm not sure why it's doing this. Does anyone know how I can change the order so it loads from the first element at the top of the page?
Link to blog is: https://futuremag-demo.blogspot.com

Answer 1

The featured post section requires JavaScript to render but currently that Javascript is executed only after all the HTML is loaded on the page (likely to prevent render blocking issues).
Currently <span data-type="recent"></span> is the only HTML present in the HTML/Javascript widget which renders the featured post section. Behind the scenes, when JavaScript detects the above HTML, it makes an Ajax call to the specific Blogger feed (/feeds/posts/default?alt=json-in-script&max-results=4) to get the posts to be shown in that section.
One way to resolve this problem is by moving the JS snippet responsible for rendering this featured section just after the HTML <span data-type="recent"></span> present in the widget. The specific JS snippet responsible for this section is -
<script>
$('.featured .HTML .widget-content').each(function() {
var v = $(this).find("span").attr("data-label"),
box = $(this).find("span").attr("data-type");
if (box.match('recent')) {
$.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=4",
type: 'get',
dataType: "jsonp",
success: function(e) {
var u = "";
var h = '<ul>';
for (var i = 0; i < e.feed.entry.length; i++) {
for (var j = 0; j < e.feed.entry[i].link.length; j++) {
if (e.feed.entry[i].link[j].rel == "alternate") {
u = e.feed.entry[i].link[j].href;
break
}
}
var g = e.feed.entry[i].title.$t;
var s = e.feed.entry[i].category[0].term;
var y = e.feed.entry[i].author[0].name.$t;
var d = e.feed.entry[i].published.$t,
t = d.substring(0, 4),
w = d.substring(5, 7),
f = d.substring(8, 10),
r = month_format[parseInt(w, 10)] + ' ' + f + ', ' + t;
var c = e.feed.entry[i].content.$t;
var $c = $('<div>').html(c);
if (c.indexOf("//www.youtube.com/embed/") > -1) {
var p = e.feed.entry[i].media$thumbnail.url;
var k = p
} else if (c.indexOf("<img") > -1) {
var q = $c.find('img:first').attr('src');
var k = q
} else {
var k = no_image
}
h += '<li><div class="featured-inner">' + s + '<a class="rcp-thumb" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="featured-overlay"/></a><div class="post-panel"><h3 class="rcp-title">' + g + '</h3><div class="featured-meta"><span class="featured-author idel">' + y + '</span><span class="featured-date">' + r + '</span></div></div></div></li>'
}
h += '</ul>';
$(".featured .HTML .widget-content").each(function() {
$(this).html(h);
$(this).find('.rcp-thumb').each(function() {
$(this).attr('style', function(i, src) {
return src.replace('/default.jpg', '/mqdefault.jpg')
}).attr('style', function(i, src) {
return src.replace('s72-c', 's1600')
})
})
})
}
})
} else if (box.match('label')) {
$.ajax({
url: "/feeds/posts/default/-/" + v + "?alt=json-in-script&max-results=4",
type: 'get',
dataType: "jsonp",
success: function(e) {
var u = "";
var h = '<ul>';
for (var i = 0; i < e.feed.entry.length; i++) {
for (var j = 0; j < e.feed.entry[i].link.length; j++) {
if (e.feed.entry[i].link[j].rel == "alternate") {
u = e.feed.entry[i].link[j].href;
break
}
}
var g = e.feed.entry[i].title.$t;
var s = e.feed.entry[i].category[0].term;
var y = e.feed.entry[i].author[0].name.$t;
var d = e.feed.entry[i].published.$t,
t = d.substring(0, 4),
w = d.substring(5, 7),
f = d.substring(8, 10),
r = month_format[parseInt(w, 10)] + ' ' + f + ', ' + t;
var c = e.feed.entry[i].content.$t;
var $c = $('<div>').html(c);
if (c.indexOf("//www.youtube.com/embed/") > -1) {
var p = e.feed.entry[i].media$thumbnail.url;
var k = p
} else if (c.indexOf("<img") > -1) {
var q = $c.find('img:first').attr('src');
var k = q
} else {
var k = no_image
}
h += '<li><div class="featured-inner">' + s + '<a class="rcp-thumb" href="' + u + '" style="background:url(' + k + ') no-repeat center center;background-size: cover"><span class="featured-overlay"/></a><div class="post-panel"><h3 class="rcp-title">' + g + '</h3><div class="featured-meta"><span class="featured-author idel">' + y + '</span><span class="featured-date">' + r + '</span></div></div></div></li>'
}
h += '</ul>';
$(".featured .HTML .widget-content").each(function() {
$(this).html(h);
$(this).find('.rcp-thumb').each(function() {
$(this).attr('style', function(i, src) {
return src.replace('/default.jpg', '/mqdefault.jpg')
}).attr('style', function(i, src) {
return src.replace('s72-c', 's1600')
})
})
})
}
})
}
});

Answer 2

After analyzing the website, it's found that the said images have big sizes which makes them load slowly.
They can be compressed using a technique called lossless compression to minimize the size without distorting the resolution of the image.
Compress your images using (for example): https://compressjpeg.com/
and test again.