Indeed, this will not make such a big difference as the points dresden_phoenix mentioned above.
This script is "postloading" the css-file, if placed in the end of the page code (just before the </body></html> tags).
- If placed in the <head>, it's just the same as a normal stylesheet link, which blocks the rendering: no effect.
- BTW, shouldn't it be: stylesheet.href = '<?php echo $fCSS; ?>'; instead of stylesheet.href = '<? =$fCSS; ?>'; ? Or is that the same in php?
- Anyway, it could be done without php also: stylesheet.href = 'relative/path/to/styles.css';.
- A <noscript> must be included: <noscript><link rel="stylesheet" href="styles.css"></noscript>.
But for IE 10 and before, document.createStyleSheet('styles.css'); should be used/added , and for IE11+ it has to be: document.createElement('style'); (see this MSDN-page).
- See also [[U]Dynamically loading css stylesheet doesn't work on IE[/U] and the update in this page: [URL="http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery"][U]How to load CSS stylesheets dynamically with jQuery[/U]](http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie).
Then another point.
The script is postloading the whole stylesheet after loading the content. That is giving an awful FOUC (Flash Of Unstyled Content): first the text of the content will be rendered, than a waiting time for the download of the stylesheet, and afterwards the styles will be added (not simultaneously).
- If the page was opened in a not focused other Tab in your browser, you can give a page refresh/reload over there to see what is happening.
- (testpage not IE optimized; look please in another browser)
As I understand the Google-recommendations properly, it reads as follows:
- I go to developers.google.com/speed/pagespeed/insights/?url=www.johns-jokes.com.
- I see in the Overview of Suggestions: "Your page has 1 blocking CSS source. This causes a delay in displaying your page".
- I click the "More" button ►, and there can be read:
- I click the "Optimize the CSS display" link, and arrive at the page Optimize CSS Delivery. If I compare what is said in the Example and under Recommendations, my conclusion is:
- A <style> block in the head is inefficient if it is not very small. Other drawbacks: it should be inserted in the HTML (!) of all pages of the site (enlarging the loading time of all next pages: there is no cached stylesheet!), and a change of these styles cannot be done for all pages at once, but has to be changed in all pages apart...
- If the stylesheet is large (otherwise no significant effect), it should be split into a part "Above the Fold" and a part "Under the Fold".
- The "Above the Fold" part *) can be loaded in a normal aboveTheFold.css in the <head>.
- The "Prioritize Visible Content" link in the Recommendations is leading to the page Reduce the size of the above-the-fold content, which is giving more details.
But all this is in vain if the styles cannot be split, and if it's not a huge original stylesheet! :rolleyes:
- In your case the (1 used) stylesheet vo13-scrn-nor.css is only ... 1,36 KB (1.393 bytes), downloaded in 0.008 seconds.
That brings us back to dresden_phoenix's remarks about the usual bottle necks.
If you give us a link to the page/site, probably we can say more.
*) Note: this is the part of the page showed at first glance: 100% of the window height. So there has be payed attention to high resolutions: the Above part has to cover the largest window height.