Defer css load google speed?

JavaScript
1

I am using this code to defer css load it works but at first page looks broken case CSS is missing. So I would like to inline some simple css which i would like to remove once css sheet is loaded and applied.

$test = '<script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener(\'load\', loadDeferredStyles);
    </script>

CSS i’d like to inline and then get rid off once sheet is loaded.

.ow_page_container {
  background:#E9EAED;
  left:0;
  padding-left:10px;
  position:absolute;
  top:0;
  width:100%;
}
.ow_site_panel {
  display:none;
}

.ow_menu_wrap {
  display:none;
}

I can’t inline add the stuff case it’s simply too big. So to make Google hapey I need to cut corners.

Please guys help me with this.

2

Why do you need to remove it? If it’s CSS the best thing to do would just be to use styles that override those settings. Put that CSS in your <head>.

1 Like
3

The sheets are loaded with the code above and wrapped in: <noscript id="deferred-styles"><link rel="stylesheet" type="text/css"

Wait a minute do you mean I should add code to css sheet? Is there a way without messing which the sheet?

4

You can put the “above the fold” css in the <head> section so it loads straight away and avoids the un-styled flash.
Then you may defer the rest of the css if you want.
Like @mawburn I don’t see the point in then removing css already loaded.

1 Like
5

The problem is I’d like to overwrite it with the one in the sheet which is loaded later.

6

If these stylesheets are wrapped in noscript, JavaScript will not be able to touch them in any way. Remove or add. NoScript only works when JavaScript is disabled by the client.

The problem is I’d like to overwrite it with the one in the sheet which is loaded later.

This is a fundamental piece of CSS, it’s even incorporated into it’s name (Cascading). There’s no reason to remove it.

Please read this MDN explanation of Specificity:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.