[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Google developers pagespeed insights - can't optimize css

lazar

5/15/2015 2:16:00 PM

Hi,

I'm using google developers insights to optimize my site's speed. It seems that no matter what I try to do with my css file, I'm always getting the message:

"Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering your page."

I tried to minify the css, then move it to the bottom of the page, then append the link tag dynamically on window onload. Nothing worked. What should I do about it?

Thanks.
9 Answers

Evertjan.

5/15/2015 2:55:00 PM

0

lazar@convexicon.com wrote on 15 mei 2015 in comp.lang.javascript:
> I'm using google developers insights to optimize my site's speed. It
> seems that no matter what I try to do with my css file, I'm always
> getting the message:
>
> "Eliminate render-blocking JavaScript and CSS in above-the-fold content
> Your page has 1 blocking CSS resources. This causes a delay in rendering
> your page."
>
> I tried to minify the css, then move it to the bottom of the page, then
> append the link tag dynamically on window onload. Nothing worked. What
> should I do about it?

Google is your friend.

<http://stackoverflow.com/questions/18013648/eliminate-extern...
blocking>


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

lazar

5/15/2015 10:10:00 PM

0

On Friday, May 15, 2015 at 5:55:07 PM UTC+3, Evertjan. wrote:
> lazar@convexicon.com wrote on 15 mei 2015 in comp.lang.javascript:
> > I'm using google developers insights to optimize my site's speed. It
> > seems that no matter what I try to do with my css file, I'm always
> > getting the message:
> >
> > "Eliminate render-blocking JavaScript and CSS in above-the-fold content
> > Your page has 1 blocking CSS resources. This causes a delay in rendering
> > your page."
> >
> > I tried to minify the css, then move it to the bottom of the page, then
> > append the link tag dynamically on window onload. Nothing worked. What
> > should I do about it?
>
> Google is your friend.
>
> <http://stackoverflow.com/questions/18013648/eliminate-extern...
> blocking>
>
>
> --
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

I've read this post in stackoverflow, but it doesn't provide me the answer. If I load the css on window onload, that's as non-blocking as can be, so why do I get this message?

Evertjan.

5/15/2015 10:53:00 PM

0

lazar@convexicon.com wrote on 16 mei 2015 in comp.lang.javascript:

> On Friday, May 15, 2015 at 5:55:07 PM UTC+3, Evertjan. wrote:
>> lazar@convexicon.com wrote on 15 mei 2015 in comp.lang.javascript:
>> > I'm using google developers insights to optimize my site's speed. It
>> > seems that no matter what I try to do with my css file, I'm always
>> > getting the message:
>> >
>> > "Eliminate render-blocking JavaScript and CSS in above-the-fold
>> > content Your page has 1 blocking CSS resources. This causes a delay
>> > in rendering your page."
>> >
>> > I tried to minify the css, then move it to the bottom of the page,
>> > then append the link tag dynamically on window onload. Nothing
>> > worked. What should I do about it?
>>
>> Google is your friend.
>>
>> <http://stackoverflow.com/questions/18013648/eliminate-extern...
>> blocking>

[please do not quote sigantures on usenet. corrected]

> I've read this post in stackoverflow, but it doesn't provide me the
> answer. If I load the css on window onload, that's as non-blocking as
> can be, so why do I get this message?

How should we know if you do not show your code?

If you think this is about Javascript, please a webpage-url with the minimal
code that has this behavour.

If this is not about Javascript, your question is off topic.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Christoph M. Becker

5/15/2015 11:32:00 PM

0

lazar@convexicon.com wrote:

> "Eliminate render-blocking JavaScript and CSS in above-the-fold
> content Your page has 1 blocking CSS resources. This causes a delay
> in rendering your page."

A blocking CSS resource? o_O

--
Christoph M. Becker

lazar

5/15/2015 11:49:00 PM

0

On Saturday, May 16, 2015 at 2:31:47 AM UTC+3, Christoph M. Becker wrote:
> lazar@convexicon.com wrote:
>
> > "Eliminate render-blocking JavaScript and CSS in above-the-fold
> > content Your page has 1 blocking CSS resources. This causes a delay
> > in rendering your page."
>
> A blocking CSS resource? o_O
>
> --
> Christoph M. Becker


Here's what I tried:

$(window).load(function() {
$('head').append('<link rel="stylesheet" href="style.css" />');
})

Christoph M. Becker

5/16/2015 12:03:00 AM

0

lazar@convexicon.com wrote:

> On Saturday, May 16, 2015 at 2:31:47 AM UTC+3, Christoph M. Becker wrote:
>
>> lazar@convexicon.com wrote:
>>
>>> "Eliminate render-blocking JavaScript and CSS in above-the-fold
>>> content Your page has 1 blocking CSS resources. This causes a delay
>>> in rendering your page."
>>
>> A blocking CSS resource? o_O
>
> Here's what I tried:
>
> $(window).load(function() {
> $('head').append('<link rel="stylesheet" href="style.css" />');
> })

If I'm not mistaken, a linked CSS resource should never block, but
rather be downloaded, parsed and applied asynchronously. That's
contrary to any client side script resources (e.g. JavaScript
resources), which have to be blocking (unless explicitly stated) due to
potentially writing to the document (e.g. document.write()).

Adding a link element on window load doesn't seem to be a good idea,
because you're risking a FOUC this way.

Anyhow, it might be best if you can post a link to the site â?? the "finer
details" might matter.

--
Christoph M. Becker

JR

5/16/2015 2:12:00 AM

0

On 15/05/15 11:16, lazar@convexicon.com wrote:
> Hi,
>
> I'm using google developers insights to optimize my site's speed. It
> seems that no matter what I try to do with my css file, I'm always
> getting the message:
>
> "Eliminate render-blocking JavaScript and CSS in above-the-fold
> content Your page has 1 blocking CSS resources. This causes a delay
> in rendering your page."
>
> I tried to minify the css, then move it to the bottom of the page,

The links for external style sheets must be in the <head> tag of the
HTML document. Apart from that, you may apply CSS to an HTML document
using inline styles and embedded styles.

> then append the link tag dynamically on window onload.

It doesn't make sense because the window onload event fires at the end
of the document loading process.

> Nothing worked. What should I do about it?

You may try to follow the rules defined in 'Optimize CSS Delivery':
<https://developers.google.com/speed/docs/insights/OptimizeCSSDe...

After that, validate your document:
<http://validator.w...

--
Joao Rodrigues

Thomas 'PointedEars' Lahn

5/16/2015 7:59:00 AM

0

Joao Rodrigues wrote:

> You may try to follow the rules defined in 'Optimize CSS Delivery':
> <https://developers.google.com/speed/docs/insights/OptimizeCSSDe...

I suggest you do nothing of the sort. The advice there ranges among the
worst that Google has to offer. Has been for several years, although â??Last
updated on April 11, 2014â?. In particular, the example that has the â??linkâ?
element as the next sibling of the â??htmlâ? element is *syntactically invalid*
â?¦

> After that, validate your document:
> <http://validator.w...

â?¦ which they will find out then. Big time.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Denis McMahon

5/16/2015 9:33:00 PM

0

On Fri, 15 May 2015 16:49:07 -0700, lazar wrote:

> Here's what I tried:
>
> $(window).load(function() {
> $('head').append('<link rel="stylesheet" href="style.css" />');
> })

First you need to understand what is meant by a blocking resource.

Then you need to decide if you actually want to worry about it.

CSS is a blocking resource, because the page can not be rendered until
the CSS has loaded.

One way to avoid this issue is to include the CSS in style elements
within the document head, and we are now off topic for a javascript
newsgroup.

--
Denis McMahon, denismfmcmahon@gmail.com