Skip to main content?

Welcome dog lover to your new supercharged dog knowledge base! Earn your sad a bone today with your 1st comment on what you read

g+ wa li fb pin tw

May 072018
 
website-speed-is-easy

Testing different load types for non-critical css

I thought I briefly share some cool load speed tests we did, say for non-critical css (also misleadingly called "below the fold" css) as this may help one or the other visitor searching the web for some practical experience of typical wordpress website speed tests.

These two load types are distinctly different so it made sense to actually speed-test them:

------------------------------------

Non-critical css Load Type 1:

------------------------------------

wp_footer(); ?>
<script>
if (window.addEventListener) window.addEventListener("load",downloadAllCrapOnload,false);
else if (window.attachEvent) window.attachEvent("onload",downloadAllCrapOnload);
else window.onload=downloadAllCrapOnload;
function downloadAllCrapOnload(){var mystyle=document.createElement('link');
mystyle.rel='stylesheet';
mystyle.href='/wp-content/themes/gsd/custom/css-below-the-fold.css';
mystyle.type='text/css';
var defercss=document.getElementsByTagName('link')[0];
defercss.parentNode.insertBefore(mystyle,defercss);
var mya=document.createElement("script");
mya.type='text/javascript';
mya.async=false;
mya.src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.body.appendChild(mya);
var myb=document.createElement("script");
myb.type='text/javascript';
myb.async=true;
myb.src="https://checkout.stripe.com/checkout.js";
document.body.appendChild(myb);
var myc=document.createElement("script");
myc.type='text/javascript';
myc.async=true;
myc.src="/wp-content/themes/gsd/scripts/mygsdorg_final.js";
document.body.appendChild(myc);}
</script>

</body>
</html>

Note that the script really is tiny, we have it in one line. It only looks large/difficult here because I had to split up the lines as wordpress messed up the code representation (despite using special character encoding), so I quickly regex-ed the ; to new lines.

------------------------------------

Non-critical css Load Type 2:

------------------------------------

wp_footer(); ?>

<link rel="preload" href="/wp-content/themes/gsd/custom/css-below-the-fold.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/wp-content/themes/gsd/custom/css-below-the-fold.css"></noscript>

<script>
if (window.addEventListener) window.addEventListener("load",downloadAllCrapOnload,false);
else if (window.attachEvent) window.attachEvent("onload",downloadAllCrapOnload);
else window.onload=downloadAllCrapOnload;
function downloadAllCrapOnload(){var mya=document.createElement("script");
mya.type='text/javascript';
mya.async=false;
mya.src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.body.appendChild(mya);
var myb=document.createElement("script");
myb.type='text/javascript';
myb.async=true;
myb.src="https://checkout.stripe.com/checkout.js";
document.body.appendChild(myb);
var myc=document.createElement("script");
myc.type='text/javascript';
myc.async=true;
myc.src="/wp-content/themes/gsd/scripts/mygsdorg_final.js";
document.body.appendChild(myc);}
</script>

</body>
</html>

In words: For webpage speed, is it better

  • to link the non-critical css as the penultimate end of the footer (here "Non-critical css Load Type 2")
  • or to include it in the script at the very end of the footer that after the initial page load as assessed by Google & Co loads the non-critical scripts too (here "Non-critical css Load Type 1")

Webpage Speed Test Results

Multiple tests at webpagetest.org documented that Type 1 is faster: On average 100ms to 200ms faster for us. Here are the detailed results (they don't cache them for long, understandably).

Type 1Type 2
Details pdfDetails pdf
Performance Results pdfPerformance Results pdf
Performance Review pdfPerformance Review pdf
Content Breakdown pdfContent Breakdown pdf
Test result data plots pdfTest result data plots pdf

Defer-loading a style sheet

To give you a more general idea, during internet research the following suggested solutions were found, here sharing only the best:

1This could load the css asynchronously:

<link rel="preload" href="/yourstylesheet.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/yourstylesheet.css"></noscript>

But rel="preload" is new, not yet supported in many browsers at all. We wouldn't use the add-on polyfill script, no interest in outdated browsers.

2This does load the css in a non-blocking manner, after page rendering the bogus is revealed to the browser:

<link rel="stylesheet" href="css.css" media="bogus" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css.css"></noscript>

Such bogus though was found to NOT work in all browsers (but would you care?)

3The nicest way would be to truly defer load css as well, as is done with scripts, images, videos etc, see below. But unfortunately for css it did NOT work with ANY combination of link/style/stylesheet and text/css//stylesheet/style and document.body.append/document.head.append. Illustrated by my attempts below, showing one of the mentioned combinations tested, see the FIRST node called mystyle:

<script>
if (window.addEventListener) window.addEventListener("load",downloadJSOnload,false);
else if (window.attachEvent) window.attachEvent("onload",downloadJSOnload);
else window.onload=downloadJSOnload;
function downloadJSOnload(){

var mystyle=document.createElement("link");
mystyle.type='text/css';
mystyle.src="/wp-content/themes/gsd/custom/css-below-the-fold.css";
document.body.appendChild(mystyle);

var mya=document.createElement("script");
mya.type='text/javascript';
mya.async=false;
mya.src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.body.appendChild(mya);
var myb=document.createElement("script");
myb.type='text/javascript';
myb.async=true;
myb.src="https://checkout.stripe.com/checkout.js";
document.body.appendChild(myb);
var myc=document.createElement("script");
myc.type='text/javascript';
myc.async=true;
myc.src="/wp-content/themes/gsd/scripts/mygsdorg_final.js";
document.body.appendChild(myc);}
</script>

Had it worked, I'd have renamed the whole thing to: function downloadAllCrapOnload. mrgreen

Again, the script really is tiny when in one line.

 

Update: Tried it slightly modified, and now it works! grin

var mystyle=document.createElement('link');
mystyle.rel='stylesheet';
mystyle.href='/wp-content/themes/gsd/custom/css-below-the-fold.css';
mystyle.type='text/css';
var defercss=document.getElementsByTagName('link')[0];
defercss.parentNode.insertBefore(mystyle,defercss);

Compare with the complete solution posted at the top, called Non-critical css Load Type 1.

 

 

adult GSDWill you give back a bit today?

USD
 

g+ wa li fb pin tw

 

Start the discussion

 

 

Jonathan: "Thank you for your period advice. It is excellent! My GSD puppy is now 8 months and we read your advice regularly."
Dwayne: "I love this site and the info you post onto it. Thanks again!!!!"
Penny: "Thanks for making your great articles available to all of us. it's nice to know that a recommended product is actually available in my country."

Stay with us and your dog will stay with you, both of you healthy and well-behaved.
If you are ever unhappy with anything we write, do or don't do, we want to be the first to know, thanks.

Disclaimer: Always apply your own common sense when you follow anyone's suggestions. As much as your dog is special (s)he may react different too.

© MYGERMANSHEPHERD.ORG - All content is protected. You must not copy or spin or otherwise change our content to republish it in your name, another one's name or without a name. If you wish to make use of our Intellectual Property Rights contact MYGERMANSHEPHERD.ORG. Thank you.

There's nothing quite like a healthy and well-behaved dog who freely guards every corner of your home, who brings you peace, who brings you joy!
Welcome to MYGERMANSHEPHERD.ORG Saves Health, Cost, Lives!
We help YOU that YOUR DOG does not end up in a(nother) shelter! Nor at a costly yet incompetent vet!
The server used 31 database queries and rendered the page in 1.74 seconds