Pagespeed Insights reporting Should-Fix for content not loaded

[Obinwanne Hill]

I'm doing some performance testing for a website and I noticed that Pagespeed Insights will report "Should Fix" when the content is not loaded.

I have the following code in my HEAD tag

<link href="http://my.c.css" rel="stylesheet" type="text/css/bogus">

<link href="http://my.nc.css" rel="stylesheet" type="text/css/bogus">

When I load the page, both of these CSS files will not be loaded by the browser i.e. the parser will ignore them.

So why is it that when I run Pagespeed Insights on this page, I see a "Should Fix" for "Eliminate render-blocking JavaScript and CSS in above-the-fold content"?!

I think Pagespeed Insights should actually inspect the type attribute of the <link> and <script> tags and disable the warning when this type attribute is non-standard.

Are there any workarounds?!

[Rick Steinwand]

Most people throw links to files on their web pages and expect them to do something, otherwise they comment them out, therefore the warning.

Instead try changing the media type to something like "only x".

[Obinwanne Hill]

Thanks Rick,

I tried that, but I still see the warning. I have two files and I did what you suggested for both files, but Pagespeed Insights shows the warning for the first file, but not the second when I set media type to "only x".

I'm not sure why.

[Rick Steinwand]

You used type="text/css"?

[Obinwanne Hill]

Yes.

Not to worry though, I figured out that there's kind of a bug with Pagespeed in the way it measures non-blocking CSS. So I amended the script to load the CSS on setTimeout after 7 seconds.

Not perfect, but will do for now.

Thanks for the assistance.

On Monday, August 1, 2016 at 5:20:46 PM UTC+1, Rick Steinwand wrote:

You used type="text/css"?

[Joshua Marantz]

For a much better way to delay the CSS, please see the snippets provided in https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/5b0cd821-c49f-4756-a742-75069c1b5e30%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Obinwanne Hill]

Thanks. I tried that first but it didn't work. Funny, since it's the code Google says we should use.

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BECvjZpyCj-jRgW8g1Wk%3DG_C1CT4UoMWd_6zq3Gsfar29g%40mail.gmail.com.

[Rick Steinwand]

Try this code to defer loading: https://github.com/filamentgroup/loadCSS

[Joshua Marantz]

Without seeing the details (waterfall) of your run, I suspect that the problem isn't how you are loading the CSS, but rather that the CSS you are delay-loading is required to render your page.  Delay-loading critical CSS won't help your users or your PageSpeed score; it will only hurt.

You need to inline the critical CSS (which is hopefully quite small) and delay-load the non-critical CSS.

Sound complicated?  Try mod_pagespeed which should do it all for you (disclaimer -- that's what my team works on :).

-Josh

On Mon, Aug 8, 2016 at 11:34 AM, Rick Steinwand <colc...@702com.net> wrote:

Try this code to defer loading: https://github.com/filamentgroup/loadCSS

--

You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/6e5d1174-be33-4ea5-8366-9ef24e020b62%40googlegroups.com.

[Obinwanne Hill]

Thanks Joshua,

I managed to figure it out. I’m using a combination of inline CSS (critical) and delay-loaded (non-critical).

Pagespeed works only when I delay loading for about 6 or 7 seconds. I’m loading the CSS after DOMContentLoaded but Pagespeed seems unable to detect this (seems like a minor bug) so I have to use setTimeout.

To fix finally, I isolated Pagespeed Insights traffic to load the CSS after 6 to 7 seconds, and then I delay-loaded the CSS the original way I was doing it without setTimeout.

Works like a charm.

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BED4cNR_A%2BW%2BBAHaJFP21nN1TJHfDhBeGLMkQiXMQtn%2BEA%40mail.gmail.com.

[Obinwanne Hill]

Thanks Rick.

I tried that, but still had the issue. A few users of that script still seem to report issues concerning blocking.

Found a fix though, so it’s all good now.

Regards,

From: <pagespeed-ins...@googlegroups.com> on behalf of Rick Steinwand
Reply-To: <pagespeed-ins...@googlegroups.com>
Date: Monday, August 8, 2016 at 4:34 PM
To: pagespeed-insights-discuss
Subject: Re: [pagespeed-insights-discuss] Re: Pagespeed Insights reporting Should-Fix for content not loaded

--

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/6e5d1174-be33-4ea5-8366-9ef24e020b62%40googlegroups.com.

[Joshua Marantz]

I'm not a fan of the 7-second delay-loading approach you suggest.  Basically you are serving a different experience to PSI.  What's the point?

Did you try the mechanism described in OptimizeCriticalCSS, pasted below?

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <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 = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

On Mon, Aug 8, 2016 at 11:58 PM, Obinwanne Hill <oh...@restive.io> wrote:

Thanks Joshua,

I managed to figure it out. I’m using a combination of inline CSS (critical) and delay-loaded (non-critical).

Pagespeed works only when I delay loading for about 6 or 7 seconds. I’m loading the CSS after DOMContentLoaded but Pagespeed seems unable to detect this (seems like a minor bug) so I have to use setTimeout.

To fix finally, I isolated Pagespeed Insights traffic to load the CSS after 6 to 7 seconds, and then I delay-loaded the CSS the original way I was doing it without setTimeout.

Works like a charm.

From: 'Joshua Marantz' via pagespeed-insights-discuss
Reply-To: <pagespeed-insights-discuss@googlegroups.com>
Date: Monday, August 8, 2016 at 7:29 PM
To: pagespeed-insights-discuss
Subject: Re: [pagespeed-insights-discuss] Re: Pagespeed Insights reporting Should-Fix for content not loaded

Without seeing the details (waterfall) of your run, I suspect that the problem isn't how you are loading the CSS, but rather that the CSS you are delay-loading is required to render your page.  Delay-loading critical CSS won't help your users or your PageSpeed score; it will only hurt.

You need to inline the critical CSS (which is hopefully quite small) and delay-load the non-critical CSS.

Sound complicated?  Try mod_pagespeed which should do it all for you (disclaimer -- that's what my team works on :).

-Josh

On Mon, Aug 8, 2016 at 11:34 AM, Rick Steinwand <colc...@702com.net> wrote:

Try this code to defer loading: https://github.com/filamentgroup/loadCSS

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsubsc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/6e5d1174-be33-4ea5-8366-9ef24e020b62%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BED4cNR_A%2BW%2BBAHaJFP21nN1TJHfDhBeGLMkQiXMQtn%2BEA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/34F072A7-D6E1-48C4-BFB9-0A500B022915%40restive.io.

[Obinwanne Hill]

I’m not a fan of it either, but I have no choice. 

Yes, I tried the code in Google’s recommendation and it didn’t work. I have no idea why. And, I’m not the only one having this issue: https://github.com/filamentgroup/loadCSS/issues/53.

I had tested my original code in the browser dev tools of Chrome and Firefox, and also using WebPageTest. The result shows CSS clearly loads after DOMContentLoaded, yet Pagespeed Insights still penalizes me. It’s only when I delay the loading of CSS for 7 seconds or so that they let up. Of course, under normal circumstances, this is unacceptable for the user experience, hence the user agent isolation.

So, I have no choice but to isolate the traffic until the Pagespeed Insights team fixes the issue. It’s not my fault their saying my CSS is blocking when it clearly isn’t.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEBpvtnmBuTAZ_CX%3DvhpgJWXgMf9x%3DCN3sD%2BKVeDzjKHaQ%40mail.gmail.com.

[Joshua Marantz]

Well, I'm the one that wrote that code and when I tested it, it worked :)

What's different about your testcase?  My suspicion is that you are delay-loading some CSS which actually affects the rendering of the page.

Could you provide a link to your HTML employing the loadDeferredStyles approach I gave, so I can see why it's not working?  You could do that temporarily, as you did not indicate it was functionally broken; just that PSI gave you a deduction.

-Josh

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-discuss+unsubsc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BED4cNR_A%2BW%2BBAHaJFP21nN1TJHfDhBeGLMkQiXMQtn%2BEA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsubsc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/34F072A7-D6E1-48C4-BFB9-0A500B022915%40restive.io.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEBpvtnmBuTAZ_CX%3DvhpgJWXgMf9x%3DCN3sD%2BKVeDzjKHaQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/C6DF992E-7F6D-49B1-AB24-B1B3C5A95E4A%40restive.io.

[Obinwanne Hill]

Yes, I am delay-loading CSS, but it’s not blocking the parser.

Here’s my process:

1. I have two CSS file references in my <head> inside a <noscript>
2. I use async JavaScript to lazy-load those two files from <noscript> into the <head>, setting a type attribute value of “text/css/r_defer” and a media attribute value of “only foo”, which guarantees that the file will be ignored by the parser 
3. When the parser is done, I then change the media attribute value to “all” and the text attribute value to “text/javascript"

In earlier testing, when I did step 1 and 2, Pagespeed Insights had no issues at that stage. However, when I enable step 3, I had the blocking notice.  Even though I delayed step 3 by about 4 seconds (long after the parser is complete), it still kept telling me that there was blocking, when there was clearly not.

It’s only when I delayed step 3 by 6 or 7 seconds that I got my required results. Visually, this was not a problem because I had inline CSS so the user would be none the wiser. Still, I wasn’t comfortable with the fact that even when my CSS was loading 5 seconds after DOMContentLoaded, Pagespeed was still giving me the blocking notice.

The site I was testing this on is here: http://www.rpscore.org. You can test it in WebPageTest to see that CSS is loaded after DOMContentLoaded. I’m not going to be able to disable the Pagespeed fix because it’s sort of baked-in to a larger toolkit that we’re actively testing.

All tolled, there’s something slightly off with Pagespeed Insights. I’m almost certain there is.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEDCMtO_5gbfntgDnxe2UqBbkk%3D8sF0phGtY8aY901iW3Q%40mail.gmail.com.

[Joshua Marantz]

Ok that is *not* the technique recommended in OptimizeCSSDelivery.  In particular it does not trigger loading the non-critical css in response to requestAnimationFrame, but instead uses other timing signals that we have found do not work well.

We worked pretty hard to arrive at a solution that works, automated it in mod_pagespeed and published it in OptimizeCSSDelivery.

It is free for you to use if you want it.  In any case I recommend that you do not cloak your site for psi.

Josh

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-discuss+unsubsc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEBpvtnmBuTAZ_CX%3DvhpgJWXgMf9x%3DCN3sD%2BKVeDzjKHaQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsubsc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/C6DF992E-7F6D-49B1-AB24-B1B3C5A95E4A%40restive.io.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEDCMtO_5gbfntgDnxe2UqBbkk%3D8sF0phGtY8aY901iW3Q%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/5D4D59F1-ED5D-42BD-8E49-F6A72AA0406D%40restive.io.

[Obinwanne Hill]

Thanks for the advice Josh, but that still doesn't answer the question of blocking vs non-blocking.

Pagespeed Insights says it's blocking when it is not, and that is a bug, is it not?! It really doesn't matter what technique or timing signal I use as long as it delivers the intended result.

I recorded a first-view Speed Index of 566 over Cable Internet + DomInteractive at less than 350 ms so I'd say our technique works really well. We also worked hard to make sure it passed muster regarding non-blocking.

So, if DomInteractive is 350ms, and I wait for 4 more seconds before exposing the CSS, and you still say I'm blocking, that can't be my fault now, can it?!

I should also point out that the code we're using for the shielded Pagespeed traffic uses virtually the same requestAnimationFrame code you recommend, only delayed. Unfortunately, we just couldn't get it to work right after days of tweaking, which included lazy-loading CSS before the closing body tag + exposing after 3 seconds.

What we're doing is part of a bigger JavaScript toolkit, and one of the things we're very particular about is performance. I'm not against your technique at all. We tried it several times but no dice.

Thanks for the time.

Obi.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/6e5d1174-be33-4ea5-8366-9ef24e020b62%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BED4cNR_A%2BW%2BBAHaJFP21nN1TJHfDhBeGLMkQiXMQtn%2BEA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/34F072A7-D6E1-48C4-BFB9-0A500B022915%40restive.io.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEBpvtnmBuTAZ_CX%3DvhpgJWXgMf9x%3DCN3sD%2BKVeDzjKHaQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/C6DF992E-7F6D-49B1-AB24-B1B3C5A95E4A%40restive.io.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEDCMtO_5gbfntgDnxe2UqBbkk%3D8sF0phGtY8aY901iW3Q%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/5D4D59F1-ED5D-42BD-8E49-F6A72AA0406D%40restive.io.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/6zQW2qbN5VI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CAGKR%2BEAOn1rTeQ9-Mx%3D%3Dh8aX4X3fbQy_rYE2PWRE5a%3D3HWBh1w%40mail.gmail.com.