Jump to content

Eliminate render-blocking CSS in above-the-fold content

Peter64

By Peter64
in CSS

 Share

Recommended Posts

Peter64 Newbie

Peter64

Posted
Posted

I am testing my website with Google's PageSpeed Insights. But I can't figger out what to do or how to do this. When I am correct I have to put the most elementary css in-line so the first page can be loaded to be displayed a.s.a.p., The rest of the css should as google says be placed after the closing body tag. But first when I do that I get in conflict with https://validator.w3.org/ ( they want me to have css in the head section ) and how do I know what css is so important that I have to place it in-line to make things properly? Searching on the internet I found: http://jonassebastianohlsson.com/criticalpathcssgenerator/, but I have changed the absolute paths of the images and the clearing floats to 

.cd-container::after {  content: '';  display: table;  clear: both;}

and I still get an error. I found things like criticalCSS/filamentgroup, critical by addyosmani or penthouse by pocketjoso and the seem to do the job but I am pretty new with these things an can't figger out what is the best way to handel this. Could someone tell me what is the best way to approach this matter and where I can find how to do this ( explained in an easy way so I can understand this ). The last days I have been searching, the haystack is growing and the needle is schrinking. The website is displayed at http://main-site.nl/

 

Thanks

Link to comment
Share on other sites
Peter64 Newbie

Peter64

Posted
  • Author
Posted

Thanks for your reply.

 

Here it is where I have seen this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery. Sorry the page is dutch, it appears in dutch automatically. Allmost at the end it says:

<html>  <head>    <style>      .blue{color:blue;}    </style>    </head>  <body>    <div class="blue">      Hello, world!    </div>  </body></html><link rel="stylesheet" href="small.css">

Maybe I see this wrong, that could be, but I thought that I should place the minor css after the body tag.

 

Thanks again.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

That uses JavaScript to insert the link tag between opening html tag and opening head tag.

 

A JavaScript created element/content is not seen by the validator or google, (I don't know WHY they placed it there instead of normal place between <head>...</head>, but! as it is not seen it does not matter i suppose) so it validates a page on how it is presented before JavaScript makes any adjustments, so the created js link element does not exist to validate against

 

IF you add the code directly how you have shown it, then it will fail validation.

Link to comment
Share on other sites
Peter64 Newbie

Peter64

Posted
  • Author
Posted

Thanks again for the reply. Then when validator says that the HTML is okay I am on the right way. But now: is there a site or video on Youtube that makes it easier for me to onderstand how I should eleminate render-blocking css. My knowledge is poor when it comes to this.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

All you have to do, is reduce number of style sheets to a minimum amount as possible, make any reference to images for background images is correct (make images as light as possible), try to make sure it is as lite as possible by using shorthand if possible, not produce duplicate styling, then minify, which will remove all spacing so it looks like one big block of continuous css styling code.

 

http://www.cleancss.com/css-minify/

Edited by dsonesuk
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

What they are saying is insert minimum css code within style tag in each page usually this would be background images, maybe logo, menu styling which usually appears on all pages, or css that make the page fully loaded, the other css which maybe related to JavaScript created elements and content, use link to this stylesheet created by JavaScript at bottom of page.

 

Probably better to create startup css style sheet 'startup.css' and start to add required css code to it until the page look fully rendered, any the code left is the css code JavaScript will create a link to.

Link to comment
Share on other sites
Peter64 Newbie

Peter64

Posted
  • Author
Posted

I have been trying to dynamically load the css by adding the code found on http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml in to my html. It looks like this:

<script type="text/javascript">    function loadjscssfile(filename, filetype){    if (filetype=="js"){ //if filename is a external JavaScript file        var fileref=document.createElement('script')        fileref.setAttribute("type","text/javascript")        fileref.setAttribute("src", filename)    }    else if (filetype=="css"){ //if filename is an external CSS file        var fileref=document.createElement("link")        fileref.setAttribute("rel", "stylesheet")        fileref.setAttribute("type", "text/css")        fileref.setAttribute("href", filename)    }    if (typeof fileref!="undefined")        document.getElementsByTagName("head")[0].appendChild(fileref)	} 	loadjscssfile("css/style.css", "css") ////dynamically load and add this .css file</script>

and I have placed at the and before the closing body tag. After including this, Pagespeed inside tells me that I still have 3 .css files that are delaying the loading of the webpage, but allso the .js files are delaying the loading of the page ( befor adding this Google didn't report these ). It doesn't make any difference if I place it in the head or at the and I keep getting this same message. I have allso tried loadCSS and scripts that should do the same trick, but all with the same result. (I haven't put the important css in-line that I will do later when the render blocking issue is fixed) Could some one tell me what I am doing wrong and why this doesn't work?

Link to comment
Share on other sites
Peter64 Newbie

Peter64

Posted
  • Author
Posted

I solved the problem as described befor. As Dsonesuk said I have made 2 css files, the first one has the most elementary css whisch is needed for starting up the first page. This css is places in script tags in the head. The second css is loaded with the following java code:

    <script type="text/javascript">    var cb = function() {    var l = document.createElement('link'); l.rel = 'stylesheet';    l.href = 'css/style.css';    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);    };    var raf = requestAnimationFrame || mozRequestAnimationFrame ||    webkitRequestAnimationFrame || msRequestAnimationFrame;    if (raf) raf(cb);    else window.addEventListener('load', cb);    </script>

and is placed just befor the closing body tag. After including this, Pagespeed inside tells me that there are .js files that are delaying the loading of the page ( befor adding this Google didn't report these ). All so I had to load the Google css fonts, I have loaded these with the following java code allso placed just befor the closing body tag:

	<script type="text/javascript">	var cb = function() {	var l = document.createElement('link'); l.rel = 'stylesheet';	l.href = 'http://fonts.googleapis.com/css?family=Roboto:400,700,300';	var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);	};	var raf = requestAnimationFrame || mozRequestAnimationFrame ||	webkitRequestAnimationFrame || msRequestAnimationFrame;	if (raf) raf(cb);	else window.addEventListener('load', cb);	</script>

After doing this there wasn't a report anymore about any .js files that were delaying the loading of the page. ( I don't know why, but insight told me that the problem was solved, maybe someone can tell me why adding these fonts this way solved the problem with the delaying .js )

 

Some other things except the help from Dsonesuk that helped me solve this:

http://www.giftofspeed.com/defer-loading-css/

https://www.feedthebot.com/

https://www.youtube.com/watch?v=YV1nKLWoARQ

 

Maybe this can help someone out when he is facing the same problem.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...