Reflow from Google ads and header images

[father_of_6]

The topmost Google ads and the header images don't have defined dimensions in the page, so the browser only knows how tall they are once they've been downloaded.

Because of this, seconds after the page loads it gets redrawn and all of the links kick down a good 50px. It actually happens twice... once for the header images, then again for the ads.

The outcome for me is that often when I attempt to click a link, the page "moves" and I click the wrong link (mobile, so touch really). I understand that TMC gets paid for ad views, but if this is intentional to cause more page visits, that's sad.

Thanks for listening.

 

[danny]

Hi, this is by no means intentional, in fact this didn't used to happen. Let me see what I can do about it. Thanks.

 

[danny]

@father_of_6 Please let us know how it is for you now. We made some changes recently which should improve both the performance and behavior of ads. We are still tweaking things, but your feedback on the reflow issues would be appreciated.

 

[father_of_6]

Thanks Danny. I do still experience reflow. I've recorded the site loading in the attached video. The reflow happens at 16s, 25s, and 30s. None of these are necessary. If resolved the page would be useful to the user the moment that the document and stylesheets were loaded.

https://imgur.com/5fZ0nmh

The solution for the header (and every <img> tag on the site... highly recommended) is to give it width and height attributes. This allows the browser to know its ratio before it even loads. See here:

For the ads, you should be able to just give it a 100px height. So in siropu_ads_manager_ad.less, specify the height of the ".samAlignCenter" selector.

.samAlignCenter {
text-align: center;
margin: 10px auto;
height: 100px;
}

I hope this helps!

 

[father_of_6]

Oops, imgur counts down (remaining time) instead of counting up (elapsed time)... so the reflows show at 16s, 7s, and 2s.