Please help me eliminate render blocks.... So frustrated

Magic Roundabout · Jan 3, 2019

Hi All,

I am getting frustrated I have tried everything,

Minifying, cloudflare, W3 cache settings, wp-super fast cashe, hyper cache, autoptimize, everything I do does not get rid of it, its taking 2.4 seconds to load render blocks, if I do manage to do something to get rid of it, my speed goes to 95/100 on google insights but my website looses the dynamic header and everything breaks...

http://Www.scienceteaser.com

Please help.

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fscienceteaser.com%2F

Naulex · Jan 3, 2019

Well, I am on mobile now so I can't check your site in detail but I have seen the report you linked to.
I don't know if you have already tried it but... if not, try Clearfy, I found that plugin a month ago and I am in love with it (and it is free).
For example, I am seeing you have some render blocking due Google Fonts loading. In Clearfy you can make them load async (so no render blocking).
Check if your host supports HTTP/2 (just google for a http2 checker and enter your website). If you are using it, maybe you should minify the files but don't combine; and if it is not using that protocol or ask your provider to enable it or enable the option on Clearfy (or other tool) to combine the files.
Check that tool and if you have any question, well... post it, I will try to answer it (I am also an addict about load speed optimization).

Edit: oh, and I almost forgot. In the worst case, there are some javascript code that allows you to force to defer every css code but... it will show your website on plain html for 0.2 second or so (depends on your connection speed) and it is sometimes ugly for the visitors. So, sometimes (and more with that score), it is better to accept that score.

Magic Roundabout · Jan 3, 2019

Naulex said:
Well, I am on mobile now so I can't check your site in detail but I have seen the report you linked to.
I don't know if you have already tried it but... if not, try Clearfy, I found that plugin a month ago and I am in love with it (and it is free).
For example, I am seeing you have some render blocking due Google Fonts loading. In Clearfy you can make them load async (so no render blocking).
Check if your host supports HTTP/2 (just google for a http2 checker and enter your website). If you are using it, maybe you should minify the files but don't combine; and if it is not using that protocol or ask your provider to enable it or enable the option on Clearfy (or other tool) to combine the files.
Check that tool and if you have any question, well... post it, I will try to answer it (I am also an addict about load speed optimization).

Edit: oh, and I almost forgot. In the worst case, there are some javascript code that allows you to force to defer every css code but... it will show your website on plain html for 0.2 second or so (depends on your connection speed) and it is sometimes ugly for the visitors. So, sometimes (and more with that score), it is better to accept that score.

Tried loading the google fonts async in clearfy but still no speed increase :/ This is the most stubborn thing I have come across, I have tried everything on google and youtube.

Magic Roundabout · Jan 3, 2019

Naulex said:
Well, I am on mobile now so I can't check your site in detail but I have seen the report you linked to.
I don't know if you have already tried it but... if not, try Clearfy, I found that plugin a month ago and I am in love with it (and it is free).
For example, I am seeing you have some render blocking due Google Fonts loading. In Clearfy you can make them load async (so no render blocking).
Check if your host supports HTTP/2 (just google for a http2 checker and enter your website). If you are using it, maybe you should minify the files but don't combine; and if it is not using that protocol or ask your provider to enable it or enable the option on Clearfy (or other tool) to combine the files.
Check that tool and if you have any question, well... post it, I will try to answer it (I am also an addict about load speed optimization).

Edit: oh, and I almost forgot. In the worst case, there are some javascript code that allows you to force to defer every css code but... it will show your website on plain html for 0.2 second or so (depends on your connection speed) and it is sometimes ugly for the visitors. So, sometimes (and more with that score), it is better to accept that score.

Disabled google fonts and it went up to 83/100, anymore tips please? trying to get this 95+

TheMarquis · Jan 3, 2019

What is your server configuration?
If your server is based on LiteSpeed Web Server, install the LiteSpeed plugin. You can find on the G how to configure it.

If your server is on Apache, have you tried autoptimize plugin?
This is a nice tutorial:

Naulex · Jan 3, 2019

Make your javascript async (except jQuery), install Varnish or LiteSpeed (that can be a lot of work), use the plugin Assets Manager to disable the load of the css and js from plugins you don't need in that page (for example, you can disable contact form plugin on the homepage usually)...

Magic Roundabout · Jan 3, 2019

Ricky.Montana said:
What is your server configuration?
If your server is based on LiteSpeed Web Server, install the LiteSpeed plugin. You can find on the G how to configure it.

If your server is on Apache, have you tried autoptimize plugin?
This is a nice tutorial:

Hi mate, its apache, I am already running same config, did not really improve it, stuck on 73/100 now,

Yee · Jan 3, 2019

Validate your page with hxxps://validator.w3.org/ and fix the error(s) I would ignore the warnings for now.

If you still encounter problems after the fix than you know you possible made an error in php code.

Magic Roundabout · Jan 3, 2019

Yee said:
Validate your page with hxxps://validator.w3.org/ and fix the error(s) I would ignore the warnings for now.

If you still encounter problems after the fix than you know you possible made an error in php code.

23 errors on this page, do you know how to fix them?

Gogol · Jan 3, 2019

Another way to avoid render blocking JS is to add these codes to DOM after the page has loaded. As for example:

Code:

$(function(){
  $(document).find('body').append(`<script>alert("I loaded later")</script>`);
});

This is untested code, but it should work fine in theory. Because the script loaded after the page has finished loading, it should not affect the initial page loading time. Working of the lazy loaded script depends on the particular script's logic nevertheless. Too tired to create a js fiddle right now lol. Time to go to bed

Yee · Jan 3, 2019

Magic Roundabout said:
23 errors on this page, do you know how to fix them?

Probably.

You should look what you did on the "home" and "space" page those pages have no render problem and

I wouldn't follow Gogol advice because it's really bad practise and usually you end up with a hacked website.

davids355 · Jan 4, 2019

Thread moved.

Please help me eliminate render blocks.... So frustrated

Magic Roundabout

BANNED

Naulex

Regular Member

Magic Roundabout

BANNED

Magic Roundabout

BANNED

TheMarquis

Elite Member

Naulex

Regular Member

Magic Roundabout

BANNED

Yee

Regular Member

Magic Roundabout

BANNED

Gogol

Administrator

Yee

Regular Member

davids355

Super Moderator

Main Menu

Marketplace

Making Money

BlackHat World