Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Igor Kavalar
Igor Kavalar
1,077 Points
Posted by Igor Kavalar
Igor Kavalar
1,077 Points

Optimize CSS Delivery, Eliminate render-blocking JavaScript and CSS in above-the-fold content

Hi,

I am still new in CSS and I was testing my projects How to make a website and Lake Tahoe with Google Pagespeed Insights.

I managed to fix all of problems but now I am stuck with optimize css delivery.

When I tested my page it tells me this:

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 4 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Optimize CSS Delivery of the following:

main.css responsive.css normalize.css fonts from Nick Pettits example

Resource.

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

How come google wants me to inline css, if we learned here its better to use external style sheet.

How can this be fixed? Is it better to forget about google, and achieving good speed score?

3 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

What it is saying is that all 4 of the CSS files in your head have to be fetched from the server, before any content is. So your page is delaying showing your users anything, until all of the files load. If this was 8,000 lines of CSS, it could be a noticeable delay.

What it's suggestion, is that you get only the CSS neccessary for the content "above the fold", which is refer to as the content that user can see without scrolling. Screen sizes vary, but in most cases this is the first 1100 pixels or so of content. If you were to inline that CSS, their browser doesn't have to go to the server to fetch and load a bunch of stuff. The above the fold CSS is probably a few short hundred lines or so. Again, depends. It than suggest to asynchronously load the resources, meaning as the page is downloading, so is the remaining external CSS.

I probably wouldn't worry about it at this point. I'd leave it external. If you start working on bigger sites or projects, it certainly may be worth the time to do all of this. It'll help load at least the first visible content of your site fast, which will increase the perceived speed of your site, and thus improve your UX, which improves your Google rank.

If done correctly, these work together. Google likes fast pages.

Igor Kavalar
Igor Kavalar
1,077 Points
Igor Kavalar
Igor Kavalar
1,077 Points

Ok. So I tried with class on h3 and style tag like in example on google page and added red color. I also tried with id wrapper, and linked main.css, but still leaving all the rest of stylesheets. Pagespeed optimize css delivery for main.css worked, it dissapered from google msg to have it optimized, while the rest stayed as I did not fix any. However viewport makes problems then. Image gallery bellow, Nicks Portfolio Images got out of container and got super big again while top header was not styled. And when I checked page online it was. But when I refreshed it showed no style and then it reverts to styled page right away. On pagespeed it wasnt styled at all.

Larry Neese
Larry Neese
2,544 Points
Larry Neese
Larry Neese
2,544 Points

You can also try out a service like Minify which combines multiple CSS sources into one. Go here to see it:

https://code.google.com/p/minify/

Igor Kavalar
Igor Kavalar
1,077 Points
Igor Kavalar
Igor Kavalar
1,077 Points

Thanks Larry I already checked it. It could be very useful, but at the moment I am still a bit green and there is alot of information, plus english is not my native language ;). Will try to solve this asap. Ty again.

Louis Philippe Savard
Louis Philippe Savard
5,378 Points
Louis Philippe Savard
Louis Philippe Savard
5,378 Points

It's well explained there https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example, but the script : <script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'small.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> Is intended for one css file. I wonder if you have to rewrite 4 time the script it's possible to write it once with all 4 css files included. ??