Fault in documentation code example on page "Optimize CSS Delivery"

42 views
Skip to first unread message

widheg

unread,
Jan 27, 2016, 9:06:49 PM1/27/16
to pagespeed-insights-discuss
Fault detected in the code example on Google's web page Optimize CSS Delivery as of 2016-01-28.

The code displayed in the third box from top has the following fault. The line:
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);

would cause the newly created link element to be inserted as a child to the <html> tag,
instead of as a child to the <head> tag. It is suspected that the code line should read:

var h = document.getElementsByTagName('head')[0]; h.insertBefore(l, null);


In addition, it is recommended to supplement the code example to show how to deal with
browsers that have no JavaScript support or have their JavaScript disabled.
In the <head> tag, add the <noscript> tag, like so:
<head>
...
<noscript>
    <link rel="stylesheet" type="text/css" href="small.css">
</noscript>
...
</head>


Cheers!

Michael Brown

unread,
Jan 28, 2016, 2:07:53 PM1/28/16
to pagespeed-insights-discuss

Nice Catch! I assume it must have still worked in the browsers tho? The noscript is a great idea also!

This is the method I ended up using here: http://slydeways.com/

var stylesheet = document.createElement('link');
stylesheet.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);

Carlos Mendes

unread,
Feb 19, 2016, 1:56:04 PM2/19/16
to pagespeed-insights-discuss
Thank you for the tips.

I'm using the <noscript> approach and inlining critical css.

Nevertheless PageSpeedInsights is still reporting that I have a blocking css - but only on mobile:
Here's a link to the optimized page:


Could this be related to the noscript tag? 

Can you help?

Thanks in advance
Reply all
Reply to author
Forward
Message has been deleted
0 new messages