Should I embed js and css in the body of the page?

Question

css

I think I read in the recommendations from Google that it is recommended to embed scripts and styles in the head to speed up page loading. Is it worth it to do so? Does it really speed up loading? Will such a solution increase traffic (after all, there will be no caching)?

Answer 1

As for CSS.
You can split the CSS code into two parts: the first is a small part to make the site look decent, the second is to make it look perfect.
The first block is embedded in HTML, and the second is loaded from a file.
You can set a cookie and, if it is present, do not include styles in the HTML text, but use only the included file. Or make such a division only on landing pages, and don’t bother with more complex internal ones.
As for JS, the principle is the same. The first block is embedded in the HTML so that the site does not break while the main JS is loading, but you can’t easily share it here. I would recommend making the site initially so that it doesn't break until the JS scripts have loaded.
This is called progressive enhancement. In general, this gives a higher ranking from google pagespeed insights and pleases visitors.
Don't forget to set headers for caching CSS and JS in the browser.

Answer 2

This recommendation is only relevant for "critical view" styles or the first loading screen.
As a result, the user sees the rendering of the first screen a little faster.

Answer 3

From an SEO standpoint, the cleaner the code, the better for the search engine. There is such a thing as "bit depth to useful content", i.e. this is the number of characters before the first sane text. So everything superfluous - in a separate file.

Answer 4

Press F12 in Chrome, switch to the "Audits" tab, launch and see the recommendations from Google. In short: styles should be included in the head, scripts should be included before the closing body, everything should be in one file.
Injecting styles and scripts into a page only makes sense in one case: they are negligible (less than a normal HTTP request to get them).

Answer 5

It is better to load styles and js in separate files, since when loading a page of the site, JS and CSS will be loaded once, if they are written in the body of the page, they will be loaded with each page, which will increase traffic and page load time ..

Answer 6

// a bit of nonsense
For static parts of the site, you can save on http requests and place the code inline, then cache these pages for a long time.