Preloading resources and css render blocking

[rfcontreras]

Dear all,

I'm having a couple issues that I would like to address, and probably you've noticed the same.

Preloading banner ads (Invision Advertising)

A) I've noticed that my ads are adding a lot of time to render, impacting the LCP around 750 ms. I've changed on the ACP the "lazy loading" of the resources but ads have not the lazyload code. Maybe preloading them improves the performance. It's noticeable that the ad is the last item loaded on the page. On top of that, when a guest visitor open a page, for a fraction of time the page is fully rendered, but since the ads changes dynamically I see a redraw of the whole page. 

B) CSS blocking the rendering

I've rolled back a change proposed by @Adlago which solves this, but overall the page load does not improve.

 

Running webpagetest we get the following waterfall. To get the HTML takes 780 ms which is not good, webfonts takes a full 1.25 seconds, but with the CSS and JS loaded the JS execution takes ages and the DOM load wait until some JS is executed, THEN it get the images. Document complete is done at the 6.5s mark. 

Even with cloudflare serving the images from an edge server very near, this advantage is dilluted. 

I'm looking for tips to improve the performance, beforehand I've used the stock theme, a stripped down theme, and the current theme, with the same luck. The new v5 is addressing any kind of improvement on these items ?

Thanks a lot for the feedback!

Ricardo

 

[rfcontreras]

For the record, my stack is

Nginx

Php 8.1 with opcache

Redis

MariaDB (with and without cache)

Cloudflare

Everything hosted on a DigitalOcean droplet with Ubuntu 20.04, 16 Gb or RAM, 8 virtual CPU's, on the SFO Datacenter. 

[Adlago]

Link to your site please.

 

[rfcontreras]

It's https://www.espacioprofundo.com

[Adlago]

17 minutes ago, rfcontreras said:

It's https://www.espacioprofundo.com

A quick test
- Your message for guests to sign up is your LCP - and it creates a serious delay…
-Core Web Vitals Assessment: Failed
- You have a problem with contrast on different buttons
- Low image resolution
- Having an issue with touch target areas on mobile

etc.

I'm not sure which of my tips you've used/removed - but a tip doesn't do magic, it's just a stepping stone to a path of improvement...

You have, simply put, a lot of work to do, after which Core Web Vitals  will improve. And loading speed too. With one or two tips, there is ore no way this will happen.

I have an idea and how to improve loading JS - and for me in my site it works well... But I'm not sure how it will work for everyone else - because I analyze many varius of the resources and mine - and monitor their behavior in repeated tests... There are many dependencies that influence each other when changed - and this cannot be created as a general rule... It is individual according to what each site uses... In some sites, certain css rules displayed in critical css improve loading speed, but these rules are not chosen randomly, but after analysis...
To use ads - every block in which ads are displayed on your site should be of a fixed height - otherwise your metrics will drop sharply, because your CLS will increase significantly, and this will decrease loading speed... etc.

 

[rfcontreras]

Thanks for your reply Adlago.

A quick test
- Your message for guests to sign up is your LCP - and it creates a serious delay…
 

Yes, I'm aware of that. My decision should be "keep it" and get more subscribers or "remove it" and improve LCP. This is a stock block with HTML, it's supposed to be cached and speedy, right ?

-Core Web Vitals Assessment: Failed
- You have a problem with contrast on different buttons
- Low image resolution
- Having an issue with touch target areas on mobile

I'm aware of the accesibility issues, but should not be related with speed afaik.

The css and js are loaded as a block, you can defer them but ALL of them, a lot of investigation and testing is needed in order to improve things. I guess you've spent a lot of time and effort to achieve that, I don't know where to start without a lot of extra coding. 

Regarding ads, you're right, but invision does not have a setting for height or width. I'll remove them and do the testing, and I'll let you know my findings. 

This is the tip I've followed (and later remove it) regarding CSS.

 

[Marc]

The first thing I note there is relating to your ads. If these are external ads, then it may well be on the suppliers side that they are taking so long in the first place. We are indeed improving on v5 🙂 

[rfcontreras]

Hi Marc,

These ads are from the "advertising" section of Invision, they're not external. 

 

 

[opentype]

There won’t be an easy fix like just setting preloading, lazy-loading or anything like that. In the end, it’s always the same content that needs to be loaded. 

You could improve the internal ads by delivering them as HTML code. Then you could specific the size of the banners to reserve their space and let the browser start rendering earlier. You could then also add lazy-loading, but that should depend on the position of the ad. It would work well for footer ads, but not for above-the-fold ads. 

[rfcontreras]

Hi OpenType,

I've changed the theme code to inject the widht and height, and improved a lot, and sent the ads below the fold (not optimal) and I've got a noticeable improvement. 

Thanks for your feedback

Ricardo