[Suggest] CSS on the footer

  • Resolved Christian Rodríguez

    (@hanschristian)


    9 years, 4 months ago

    Hallo Frank!

    First of all, thanks for developing this GREAT plugin ??

    I want to suggest you a new feature: what about to add an extra option to include the compressed stylesheet in a JS script in the footer?

    I just discovered this option in this website and I noticed that this site loads the main CSS on the footer! That’s the code on the front-end:

    <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = 'https://www.vesperhotel.com/wp-content/themes/vesperhotel/css/vesperhotel.min.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>
<noscript>
 <link rel="stylesheet" href="https://www.vesperhotel.com/wp-content/themes/vesperhotel/css/vesperhotel.min.css" />
</noscript>

    It helps to increase the score for Google Pagespeed. Now I’m adding this code by hand on my child themes on the footer.php file. But it will be great to use this feature with AO.

    Thanks for hearing!

    https://www.ads-software.com/plugins/autoptimize/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Frank Goossens

    (@futtta)

    this is pretty much what is done when selecting “inline&defer” and leaving the input box for “inline CSS” empty Hans Christian ??

    do take into account you’ll have a brief visible moment during which your site will be unstyled.

    frank

    Ramanan

    (@superpoincare)

    Hi Frank and Hans,

    The requestAnimationFrame is actually good.

    You can even move the script in the header. It loads the CSS async and doesn’t block render.

    The advantage is that it – if put in the head – it loads earlier than the present Autoptimize code. The current code first waits for page load and then sends a request to the server for the CSS file. RequestAnimationFrame loads it much earlier.

    As far as I can see it will just involve a minor change in Autoptimize code to include it.

    Ramanan

    (@superpoincare)

    Or rather body. Inline some and then load the full CSS via requestAnimationFrame:

    https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

    <html>
  <head>
    <style>
      .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>
    Plugin Author Frank Goossens

    (@futtta)

    So I read up on this a bit and I’m afraid I’m not fully convinced (yet):

    1. The code throws errors in (older versions) of MS IE.
    2. I’ve found no examples of this being implemented to load CSS in head, only in a “inline & defer”-scenario (cfr. superpoincare’s follow-up). In such a n scenario it doesn’t really matter that it’s faster then AO’s current approach (which by default does not wait for page load, but for “DOMContentLoaded” which is earlier anyhow), as the page is initially styled using the inlined, critical CSS.

    But if you have better arguments (e.g. 3 pages each implementing one of the scenario’s, proving that requestAnimiationFrame indeed is better), then maybe I could be convinced after all … ??

    frank

    Ramanan

    (@superpoincare)

    Frank,

    Thanks for the reply.

    Didn’t know about the IE 8 errors. Maybe that’s sufficient reason to not use it as many people still use Windows 7 and never upgraded their IE from IE 8.

    Also agree about it not mattering much. I’d think it loads in the background and hence will be available immediately on DOMContentLoaded. However, inline is already painted in either case, so below the fold doesn’t matter, as the user may take some 400ms to move his/her mouse.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Suggest] CSS on the footer’ is closed to new replies.

Tags