Is it possible to optimize a prefetched CSS?

[mick...@kikuta2008.com]

Hi,

We tried optimizing a prefetch link tag that is pointing to a CSS resource by adding ModPagespeedUrlValuedAttribute link css-prefetch stylesheet to no avail. The css-prefetch attribute value remains the original url and using the debug filter we can see the link is ignored.

Any idea why this is happening?

We need it, as on the first request we inline the CSS files and add a link for prefetching those files at the bottom of the page. On following requests we add the CSS link tag at the head and the browser load them from the cache. On the rare occasion the prefetch didn't work, the browser request the CSS from the server. In a way it's similar to the way the LocalStorageFilter works, it's just simpler and since we have a lot of page requests reusing those resources, more efficient in terms of the html itself being slim.

Thanks,

Mickey.

[Jeff Kaufman]

Looking at the code for handling UrlValuedAttributes, this isn't going
to work right now. Sorry! I've filed a bug:
https://groups.google.com/forum/#!msg/mod-pagespeed-discuss/h6M9LIdsf2U/mEF2daOqBwAJ

> --
> You received this message because you are subscribed to the Google Groups
> "mod-pagespeed-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to mod-pagespeed-di...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/mod-pagespeed-discuss/8d01b428-08e4-4a60-8036-2d7ac0e38cb1%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Mickey]

No worries, thank you for your response :-)
Mickey.

BTW, a question for a work around -- if we add a span with the property css-prefetch, can that be optimized? We can do the actual prefetch with JS.

--------------------------------------------
Q: Why is this email two sentences or less?
A: http://two.sentenc.es

[Jeff Kaufman]

With the current code, the only way to get PageSpeed to optimize a css
file is for it to be in a <link rel=stylesheet href=...> section. I'm
going to update the UrlValuedAttributes docs to remove the bit where
it says we can handle stylesheets there, because that's basically
completely unworkable until we fix
https://github.com/pagespeed/mod_pagespeed/issues/1324

(This came about because there's some extra checking you need to do
with css around things like media=screen/print etc.)

> https://groups.google.com/d/msgid/mod-pagespeed-discuss/d3020547-d8c1-d9a4-1254-6acf39a669c2%40kikuta2008.com.

[Mickey]

Got you. 10x for the update :-)

[Joshua Marantz]

Hi -- I hadn't heard of the ' css-prefetch' attribute before, and I can't seem to find anything about that specific attribute in a google search.  I do get relevant results for CSS and pre-fetching, but nothing with that spelling.  Can you give a reference for that attribute?  Or is it something custom in your environment?

-Josh

To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/ac234a99-4ccd-3cc3-14c6-9f40ebfe7bec%40kikuta2008.com.

[Mickey]

Hi Josh, I apologize for not being clear.

We wanted to have a simple link prefetch for the combined CSS file and it didn't work (reasons explained earlier on the thread). As an alternative we tried other workarounds including adding a custom css-prefetch attribute, planning to make the actual prefetch with JS for the optimized url. In order to do that we needed to define css-prefetch as a CSS for mps.

Of course if the standard link prefetch is working, there is no need for a custom css-prefetch attribute. Note that others might try to optimize CSS through adding a custom attribute and you might save yourself time answering their questions if the ModPagespeedUrlValuedAttribute support for CSS bug is fixed as well.

Best and thank you for getting back to me with all my questions! I really appreciate it.
Mickey.

You received this message because you are subscribed to a topic in the Google Groups "mod-pagespeed-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mod-pagespeed-discuss/h6M9LIdsf2U/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mod-pagespeed-di...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mod-pagespeed-discuss/CAGKR%2BEDyOVy5GmpvQG_QyzHU3e6ZprmzZ%2BjVZQkTdfte94zr%3Dw%40mail.gmail.com.

[Jeff Kaufman]

On Sat, Jun 25, 2016 at 2:42 PM, Mickey <mick...@kikuta2008.com> wrote:
>
> We wanted to have a simple link prefetch for the combined CSS file and it
> didn't work (reasons explained earlier on the thread).

Because PageSpeed changes what resources are on a page, manually
inserting loading hints isn't going to work well. At some point we'd
like to extend PageSpeed to insert these automatically when they will
speed up loading [1] but that hasn't gotten beyond the "this would be
a good thing to add" stage.

> Note that others might try to optimize CSS
> through adding a custom attribute and you might save yourself time answering
> their questions if the ModPagespeedUrlValuedAttribute support for CSS bug is
> fixed as well.
>

As of this commit [2] UrlValuedAttribute now does support CSS.
(Added, in response to you reporting that it wasn't working!) For
example, someone could use it to divide their CSS loading between some
short CSS that PageSpeed could inline and a larger file that wasn't
necessary to block rendering on loaded via JS. But it's not going to
support cases like yours, with combining, because PageSpeed has to
treat UrlValuedAttribute-defined CSS as non-combinable (and
non-inlinable). This is because if we were willing to combine it we
could turn:

<link rel=stylesheet href=a.css data-additional-css=b.css>

into

<link rel=stylesheet href=a.css+b.css>

Jeff

[1] https://github.com/pagespeed/mod_pagespeed/issues/1158
[2] https://github.com/pagespeed/mod_pagespeed/commit/3d1018621558806345ba1effaf414a45d1612ab5

[Jeff Kaufman]

On Mon, Jun 27, 2016 at 8:25 AM, Jeff Kaufman <jef...@google.com> wrote:
> At some point we'd
> like to extend PageSpeed to insert these automatically when they will

> speed up loading but that hasn't gotten beyond the "this would be

> a good thing to add" stage.
>

Actually, I'm out of date, sorry! Maks has been working on this.
I've marked https://github.com/pagespeed/mod_pagespeed/issues/1158 as
his.

Jeff

[Mickey]

> PageSpeed has to treat UrlValuedAttribute-defined CSS as non-combinable (and non-inlinable).

I see your point. How about just optimizing the CSS without combining and inilining? This can work for prefetch instructions as well.

> Actually, I'm out of date, sorry!  Maks has been working on this

:thumb-up:

[Jeff Kaufman]

On Tue, Jun 28, 2016 at 2:15 AM, Mickey <mick...@kikuta2008.com> wrote:
>
> How about just optimizing the CSS without combining and
> inilining? This can work for prefetch instructions as well.
>

Yup! That's what I added in
https://github.com/pagespeed/mod_pagespeed/commit/3d1018621558806345ba1effaf414a45d1612ab5

Jeff

[Mickey]

:thumb-up: