Best IT Recipes

CSS delivery optimization: how to delay css loading?

I am trying to optimize CSS delivery by following the Google documentation for developers https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

As you can see in the example of embedding a small CSS file, critical CSS is embedded in the head and the source small.css file is loaded after the page loads .

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

My question regarding this example:

How to load a large css file after page loading?

+55
javascript html css google-pagespeed deferred-loading
Oct. 15 '13 at 6:47
source share
5 answers

If you don't mind using jQuery, here is a simple piece of code that will help you. (Otherwise a comment, and I will write an example of pure JS

 function loadStyleSheet(src) { if (document.createStyleSheet){ document.createStyleSheet(src); } else { $("head").append($("<link rel='stylesheet' href='"+src+" />")); } };

Just call it in your $(document).ready() or window.onload function $(document).ready() you're done.

For # 2, why don't you try this? Disable Javascript in your browser and have a look!

By the way, it is amazing how far a simple Google search can go; for the request "post load css" it was the fourth hit ... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

+45
Oct. 15 '13 at 6:55
source share

A small modification to the function provided by Fred to make it more efficient and free from jQuery. I use this feature in production for my websites.

  // to defer the loading of stylesheets // just add it right before the </body> tag // and before any javaScript file inclusion (for performance) function loadStyleSheet(src){ if (document.createStyleSheet) document.createStyleSheet(src); else { var stylesheet = document.createElement('link'); stylesheet.href = src; stylesheet.rel = 'stylesheet'; stylesheet.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(stylesheet); } }
+32
Mar 07 '14 at 16:14
source share

In addition to Fred's answer:

Solution using jQuery and Noscript

 <html> <head> <style> .blue{color:blue;} </style> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ if($("body").size()>0){ if (document.createStyleSheet){ document.createStyleSheet('style.css'); } else { $("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />")); } } }); </script> </head> <body> <div class="blue"> Hello, world! </div> </body> </html> <noscript><link rel="stylesheet" href="small.css"></noscript>

from http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

Using pure Javascript and Noscript

 <html> <head> <style> .blue{color:blue;} </style> <script type="text/javascript"> var stylesheet = document.createElement('link'); stylesheet.href = 'style.css'; stylesheet.rel = 'stylesheet'; stylesheet.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(stylesheet); </script> </head> <body> <div class="blue"> Hello, world! </div> </body> </html> <noscript><link rel="stylesheet" href="small.css"></noscript>
+10
Jan 12 '14 at 16:08
source share

Try this snippet

author claims to have been published by Google PageSpeed ​​Team

 <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'yourCSSfile.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>
+9
Oct 12 '15 at 18:48
source share

ATTENTION: body{background-image: url("http://example.com/image.jpg");} in CSS files will make your CSS files still block rendering.

If you tried all the solutions described above and still get a warning about blocking rendering from PageSpeed, then you probably have this style rule in CSS files. After several hours of testing, it turns out that this rule is what causes ALL of my css to be marked as rendering blocking resources in the PageSpeed ​​view. I found that the same issue was discussed earlier .

I do not know why body{background-image: url(...) does this for all css! Files, although I have different image resources in the file for buttons, icons, etc.

I fixed this by moving this rule from the .css file and placing it in the inline styles. Unfortunately, you have to disrupt the CSS plan and place the rule in all HTML layout files, not in 1 CSS file that is imported into all your HTML layouts, but the 90s and green in the PageSpeed ​​view deserve it.

+2
Aug 22 '18 at 2:10
source share


More articles:


All Articles