Render-blocking Issue

#1

Hi,

I am wondering the best practice implemented by Wappler users when it comes to “Eliminate render-blocking resources: Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.”

My question is specifically on the CSS/stylesheets.

Thank you. More power to Wappler.

#2

Have a look at https://r.je/eliminate-render-blocking-css-pagespeed

An Nginx box with Apache serving HTTP/2 will go a long way. Apache so that .htaccess can be used.

6 Likes
#3

Thank you. Will check the link.

#4

Thank you Ben. It worked like magic. Would it also work for an external CSS like for example: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css; as=style; rel=preload

1 Like
#5

This is really a great optimization Ben! I wasn’t aware that it is possible yet.

So full speed ahead! :slight_smile:

2 Likes
#6

Theoretically, it should not matter where the style sheet comes from so that I suggest that it would work for CDN’s a well.

Having said that, I believe that the relevance of a CDN is vastly diminished when using this technique. In other words, no need for a CDN.

1 Like
#7

Thanks for the tip Ben - it added a few points to the speed score. The server concerned doesn’t run Nginx.

1 Like
#8

Hi Ben,

I just noted that the preload added to the .htaccess seems not working when i checked with google pagespeed earlier. Have you noticed thesame on your site(s)?

It was indeed working the last time. I’m curious. Thanks.

#9

It depends on the setup and type of server that is being utilised. Have a look at this article: https://www.tunetheweb.com/performance/http2/http2-push/

1 Like
#10

Thanks once again Ben. Really appreciate all your advices.