After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this:
<div class="blue">Hello, world!</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
This approach seemed puzzling due to its excessive nature, confusion, invalid HTML structure, and the claim of maintaining CSS rules application order through JavaScript, although no JavaScript was present in the example. This led me to wonder:
When examining their sample code output, all content following the </html> tag moved just before </body>. So the burning question is... WHY?
What prompted this shift? It seems most major browsers automatically reposition any code after
</html>prior to</body>. My search for documentation or standards on this matter yielded little results.Why would Google advocate for this method? Is there a tangible performance benefit to this practice? One might assume placing it before
</body>initially would suffice. (and as BoltClock's insightful explanation suggests, is there concrete evidence supporting improved performance from this technique?)
This behavior was observed in IE11, Firefox 26, Chrome 32.x, and Windows Safari 5.1.7. The inspected HTML appeared as follows:
<div class="blue">Hello, world!</div>
<noscript><link rel="stylesheet" href="small.css"></noscript>
</body>
</html>
Inserting additional code post </html> rendered the same outcome.
This phenomenon evokes memories of other peculiar error-corrections, such as how browsers render <image> tags as <img> (reference)...
UPDATE: In my testing, I created this URL for NON-deferred CSS and also this URL for deferred CSS (based on my interpretation of the mentioned article)...