Scripts

Instead of putting your <script> elements in the <head> element of your document, eliminate render-blocking JavaScript by putting the scripts at the end of the <body> element. This will reduce the amount of time browsers spend displaying a white screen while these resources are being downloaded.

One consequence of putting these scripts in the <body> element is that the parts of your page that depend on them will be loaded a little later, when the document has loaded. For this reason, the scripts that need to load as early as possible should remain in the <head> element.

Deciding whether to eliminate render-blocking resources is a balancing act between speed and providing the best user experience.

Stylesheets

Render-blocking CSS manifests itself as external stylesheets which are placed in the <head> element before the scripts. They can instead be installed directly into the document inside <style> tags. Doing this will eliminate requests that your server needs to make. These <style> elements should be placed in the <head> element, but most modern browsers will allow them to be placed in the <body> element as well.

Pin It on Pinterest