CSS and JS files inlining in HTML body.
Why "best practices" in site speed optimization - sometimes wrong?

Aleksey Shaposhnikov May 27, 2020

When we want to achieve good results in website speed optimization, one of the most popular tasks is to reduce total number requests to the server at page loads. There are various methods that can reduce number of server requests when loading a page. 
In accordance with accepted best practices, one of the most popular methods is to inline CSS / JS files directly into the html body of page.
At first glance, this is a great solution. Since the browser receives CSS / JS files immediately in the body of the HTML page and make additional requests to the server not need to get CSS / JS files. Even the popular optimization module ngx_modpagespeed - has built-in optimization commands - 
pagespeed EnableFilters inline_css; pagespeed EnableFilters inline_javascript;
Using these filters - will give your site a decrease in the total number of server requests and an increase in google page speed scores.


Example of inlined - JS files.
But this decision is not always correct. The functionality of the ngx_modpagespeed module is good and the module developers are great. Now I will explain you why this approach is wrong.
The technique of inlining CSS / JS in body of page does not take into account browser caching of CSS / JS files (bootstrap, jquery, files generated by your CMS (WordPress or Bitrix for example)).

The mean that after receiving CSS / JS files once, the browser based on the expires header remembers these files. And when user visiting the following pages of the site - which at probability 99% use same CSS / JS files. Browser doesn’t load them, it gets CSS/JS files from its own cache.

What is wrong with the optimization method embedding CSS / JS - in the body of the page? The fact is that in this case the same CSS / JS files will be embedded in the body of each pages of your site and will increase the amount of information transferred when each page loads, instead of receiving CSS / JS files from network once and then load from browser cache.

Therefore, use the technique of inlining CSS / JS in the body of the page - wisely.

If your site is a one-page landing page, then this is the best solution for you.
If you have a multi-page website with traffic more than one page, then it’s better to rely on the browser cache.
Remember, besides speeding up your site’s speed google page speed, putting site in the green zone. There is also the actual speed that visitors to your site feel when using it.
If you, for example, inline the popular bootstrap.min.css in the body of each page. This will add a certain waiting time to load it when each page loads, and visitors will feel this slowdown. But Google page speed can at the same time show an increase in indicators.

Often, customers of site optimizers do not understand the gap between user experience and performance scores of Google page speed.
And such a difference, as you see, exists.