CSS Delivery Optimization According to Google

Question

So, I launched my site through Google PageSpeed ​​Insights , and he told me that I can improve CSS delivery by delaying the loading of non-critical resources. In particular, he referred to the inclusion of the awesome font:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 

I decided that I could delay its loading by simply putting it in front of the scripts before the closing body tag, for example:

  ... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/min/scripts.min.js"></script> </body> </html> 

But! Looking at the Google documentation on delivery speed , I found two different solutions.

In my native language (Dutch, you can change the language of the documentation in the lower right corner), the documentation states that I should place non-essential css under the closing html tag. It seems oddly strange to me. Would this complicate the situation when trying to access the file through JS? Why don't you put it before the closing body tag?

  ... </body> </html> <link rel="stylesheet" href="small.css"> 

However, in the English documentation, things get complicated and require JavaScript:

  ... <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'small.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> </body> </html> 

Why do I need JS? Isn't that too much?

What is wrong with my approach? Why can't you load non-critical CSS before closing the body tag?

Answer 1

An external style sheet will block the page from displaying until it is fully loaded. Google recommends placing the style necessary for the initially visible (critical, over the fold) part of the document inside the <style> tags in the head ( ), where you can define a non-inline style ) to avoid this blocking. A non-critical style (something that you don’t see directly when landing on the page) is added as an external style sheet inside the head after the HTML has been read. Thus, it is displayed first, and only then will all other styles be loaded. All in order to show the visitor the content as quickly as possible and not allow him / her to wait longer than necessary.

In most cases, most think that Google recommends, and they are just fancy for a few milliseconds - their approach only makes sense if the CSS is huge. But I find it difficult, if not impossible, to maintain existing tools. For example, if it’s a returning visitor who scrolls down the page and automatically lands there (Opera is a browser that is very stubborn with this)? For this you need more JS and maybe juggle with styles. This may not be a good way. And even for the initial display, you will have to type some media queries inside the head directly in order to try to correct the situation without resorting to full-screen sections. This is all counterproductive and abundant.

Using <style> or <link> tags outside the section of a chapter may work, but this is not true. I'm sure Google is no longer in that view, and that the English version is the only valid documentation. Edit - see Comments for a nuance.

Even if you do it differently and get a “good” score on the PageSpeed ​​Insights page, that doesn't mean too much. You can still hide the entire page and show it only when everything has been loaded (which is not unusual), without affecting the result.

I personally decided to ignore it until they implemented a function in which you can load CSS asynchronously (for example, using JavaScript and async already), as announced in the documentation. This will still require special use, but at least you can create a structure for it. Not a fan of plugins for something pretty trivial.

The Google documentation is missing one important thing - providing a backup when JavaScript is disabled. Fortunately with HTML5, you can use the <noscript> tags for this:

 <head> /* other stuff */ <noscript><link rel="stylesheet" href="small.css"></noscript> </head> 

Sidenote - Google Script’s own analytics will prevent an excellent PageSpeed ​​score due to the (logically) expiration of the fast cache installed on it. Drawing.

Answer 2

I would suggest you check out this repository: https://github.com/filamentgroup/loadCSS

LoadCSS is a very experienced script person in the Filament Group to lazyload stylesheets in such a way that most browsers play well. If Javascript is disabled or for some reason the script will not work, there are also backups.

Answer 3

To answer your specific questions:

• Javascript is NOT required to accomplish what you want. There are several ways to load CSS without blocking. Some rely on JS, some do not. Filamant Group LoadCSS is a JS option. The CSS Generator Critical Path is one non-JS method. The process of generating critical CSS can also be automated using Gulp or Grunt .

• While your method will work, it is not recommended. Google recommends loading non-critical CSS files using Javascript so that CSS is loaded in the head after the page has finished loading.

Alternatives

There are two ways to improve your current implementation.

• It looks like you are currently uploading 2 CSS files - your CSS site and font-awesome.min.css . This requires 2 HTTP requests and will result in a slight delay. Combine CSS from two files into one CSS file.

• As others have pointed out, Google recommends that you include critical CSS in the head page and load the remaining CSS in a non-blocking way. An alternative that I found useful is to load all CSS content into the head site in the style tag. I recommend this only if your CSS file is relatively small and minimized.

  <head> <style> // ALL YOUR CSS </style> </head> 

Answer 4

I think you are focusing on the wrong part of your (confusing) documentation. I think what they are really trying to share, is that you should add your critical CSS to your html. Look at the blue class in the style tag.

 <html> <head> <style> <!-- This is what they are trying to show --> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'small.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script> </body> </html> 

I read the same documentation in French, which seems to be out of date, like your Dutch version, and here again they posted a blue class in style

 <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> </body> </html> <link rel="stylesheet" href="small.css"> 

What they are trying to say is that critical CSS can be placed directly in html without loading the entire CSS file. In their example, the blue class is critical since it uses only one.

Regarding the outside of the html tag, this is really invalid HTML, but browsers seem to allow it anyway. For part of the JS code, I assume they are trying to add a stylesheet to the header, but only when JS is executed, which means at the end of the page load. At this point, you may need to consider code readability for performance.

Answer 5

Well, there are 3 main sections where you can post

first the body, the second - the head, and the third - everywhere in html, try working with it