How to make a website without render block?

I know the script tags paste in bottom of html page is fine. But when check with google that say there have a render block. Always if you use only one .css that also cause render block. Or more script files?

How to make a page no render block?


If your including a java script library that you use in your script, it needs to be declared first in order to be used.
the same with css. I’m not sure i understand your question.

Are you looking at the Google page speed results? Because if so, you need to bear in mind that it’s making recommendations to make the page load as fast as possible, and that you can disregard some of the suggestions, they’re optimisations you probably don’t need.

  1. So a user lands on your page.
  2. The parser find a link tag with the CSS file.
  3. The rendering of the page is blocked until that CSS file is parsed, otherwise you would have an unstyled page.

The way to get around this is to inline all of the CSS that is needed when the page is first loaded into the HTML like <body style="background-color: pink; color=blue;"> etc. There are tools to do this automatically, but they take a lot of setup, and you don’t need this optimisation in a lot of cases. For example, you ideally want to figure out what parts of the web page will show on the user’s screen when it first loads, and only those parts need the CSS inlining. And not all the CSS needs inclining, just the stuff that is immediately visible. None of this is trivial, having a CSS file linked in is much easier and works fine in 99% of cases.

If you have an app where is vital that it loads as fast as humanly possible, then look at these things, but most of the time you don’t need to do that.