Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #27641 > unrolled thread

Google developers pagespeed insights - can't optimize css

Back to article view | Back to comp.lang.javascript

Contents

  Google developers pagespeed insights - can't optimize css lazar@convexicon.com - 2015-05-15 07:16 -0700
    Re: Google developers pagespeed insights - can't optimize css "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-05-15 16:55 +0200
      Re: Google developers pagespeed insights - can't optimize css lazar@convexicon.com - 2015-05-15 15:10 -0700
        Re: Google developers pagespeed insights - can't optimize css "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-05-16 00:52 +0200
    Re: Google developers pagespeed insights - can't optimize css "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-05-16 01:31 +0200
      Re: Google developers pagespeed insights - can't optimize css lazar@convexicon.com - 2015-05-15 16:49 -0700
        Re: Google developers pagespeed insights - can't optimize css "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-05-16 02:03 +0200
        Re: Google developers pagespeed insights - can't optimize css Denis McMahon <denismfmcmahon@gmail.com> - 2015-05-16 21:32 +0000
    Re: Google developers pagespeed insights - can't optimize css Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2015-05-15 23:12 -0300
      Re: Google developers pagespeed insights - can't optimize css Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-05-16 09:59 +0200

#27641 — Google developers pagespeed insights - can't optimize css

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.

[toc] | [next] | [standalone]

#27643

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-external-render-
blocking>


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

[toc] | [prev] | [next] | [standalone]

#27650

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-external-render-
> 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?

[toc] | [prev] | [next] | [standalone]

#27652

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-external-render-
>> 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)

[toc] | [prev] | [next] | [standalone]

#27654

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

[toc] | [prev] | [next] | [standalone]

#27655

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" />');
})

[toc] | [prev] | [next] | [standalone]

#27656

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

[toc] | [prev] | [next] | [standalone]

#27700

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

[toc] | [prev] | [next] | [standalone]

#27657

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/OptimizeCSSDelivery>

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

-- 
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#27658

Joao Rodrigues wrote:

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

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.w3.org/>

… which they will find out then.  Big time.

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web