Fixing Google's PageSpeed Error "Uncaught ReferenceError: applyFlushedCriticalCss is not defined"

Amazon If you use Google's PageSpeed service, you may get the following JavaScript error in the web developer tools toolbar when you use Chrome or Firefox to go to your website:

Uncaught ReferenceError: applyFlushedCriticalCss is not defined

If you use the same browser to browse your origin server, the JavaScript error does not exist. So you wonder what PageSpeed service did to your webpage to raise this JavaScript error.

PageSpeed Service is a Google-hosted optimizing proxy for your website. In other words, PageSpeed Service acts as a CDN for your website so that you can practically serve millions of visitors per day.

Root Cause

If you look at the source of the resulting HTML, you will see the following culprit:

<script pagespeed_no_defer="">applyFlushedCriticalCss("wGedr1rwih", "");</script>
<script id="psa_flush_style_early" pagespeed_no_defer="">var applyFlushedCriticalCss = function(script_id, mediaString) { var scripts = document.getElementsByTagName('script'); var styleScript = document.getElementById(script_id); if (styleScript == null) { return; } var cssText = styleScript.innerHTML || styleScript.textContent || styleScript.data || ""; var styleElem = document.createElement('style'); styleElem.type = 'text/css'; if (styleElem.styleSheet) { styleElem.styleSheet.cssText = cssText; } else { styleElem.appendChild(document.createTextNode(cssText)); } if (mediaString) { styleElem.setAttribute("media", mediaString); } var currentScript = scripts[scripts.length-1]; currentScript.parentNode.insertBefore(styleElem, currentScript);};</script><script pagespeed_no_defer="">applyFlushedCriticalCss("6gSHpay4Ye", "");</script>

As you can see, the document tries to call the JavaScript function applyFlushedCriticalCss without defining it first. It looks like Google's PageSpeed Service, or PSS, introduced this bug. All you need to do to fix the JavaScript error is turn off one small setting in the PSS console.

Solution

Follow these steps:

1. Log into your Google account
2. Go to your PageSpeed Service console.
3. Go to Configure Rewriters -> Prioritize Content
4. Uncheck the check box labeled "Flush Resources Early"

Try again and see if it fixes the error.

Questions? Let me know!