You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by George Christman <gc...@cardaddy.com> on 2014/12/08 21:26:02 UTC
eliminate render blocking javascript and css above the fold content
This seems to be an improvement google webmaster is requesting, is it
possible and if so how would you go about getting it working?
Re: eliminate render blocking javascript and css above the fold content
Posted by George Christman <gc...@cardaddy.com>.
On Tue, Dec 9, 2014 at 11:45 AM, Howard Lewis Ship <hl...@gmail.com> wrote:
> One idea that may come after 5.4 is the ability to aggregate CSS as well as
> JavaScript. That would help, reducing this to a couple of requests, rather
> than eight.
>
That would be great.
>
> Bear in mind that this is all first-time loading issues. Any subsequent
> visit will find that all those assets are already in local browser cache,
> with far-future expires headers.
>
I actually posted another question in regards to the expires header. Google
is saying the expiration header of a lot of assets hasn't been set yet
which seems to be costing me a lot of points in speed. I don't fully
understand how the expiration headers are set to fix it or if that's
something handle by tapestry core. I posted the Google link below to give
you an idea what they are complaining about. I do want to say overall that
my Tapestry app is scoring much higher in speed than my competition which
includes companies like autotrader etc. so +10 for Tapestry :), but there's
still room for improvement given these few items are dragging my score down
to a 70. There's been rumor that speed plays a role in google search rank
which is my primary reasoning for trying to address these issues.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.cardaddy.com&tab=mobile
>
> The directive you are following appear, to me, to be based on more "hand
> tooled" pages; the idea that you know whats "above" or "below" the "fold"
> implies that your page has a very specific structure that you are totally
> in control of. That's a little much for Tapestry to manage!
>
Yes your correct, I build most of my own tools, so one potential option
would be to provide a configuration option to eliminate all core css with
the exception of error reporting in dev mode. The bootstrap classes are
added automatically to most form elements, so in most cases where your
building a lot of custom forms etc. that is probably more than sufficient.
For now, using the code I showed you earlier seems to work perfectly for
removing the unused css.
Thanks Howard.
>
> On Mon, Dec 8, 2014 at 6:57 PM, George Christman <gc...@cardaddy.com>
> wrote:
>
> > nvm, figured it out
> >
> > @Contribute(JavaScriptStack.class)
> > @Core
> > public static void
> > setupCoreJavaScriptStack(OrderedConfiguration<StackExtension>
> > configuration) {
> > configuration.override("exception-frame.css", null);
> > configuration.override("tapestry.css", null);
> > configuration.override("tapestry-console.css", null);
> > configuration.override("tree.css", null);
> > }
> >
> > On Mon, Dec 8, 2014 at 6:55 PM, George Christman <
> gchristman@cardaddy.com>
> > wrote:
> >
> > > After digging a little deeper, it looks like it's complaining about css
> > >
> > > Your page has 8 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
> > > <https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
> >
> > > of the following:
> > >
> > > - …f5/tapestry5/bootstrap/css/bootstrap.css
> > > - …ts/meta/za327fba4/tapestry5/tapestry.css
> > > - …/z46ba6ee5/tapestry5/exception-frame.css
> > > - …z9cac79b1/tapestry5/tapestry-console.css
> > > - …/assets/meta/z123f049/tapestry5/tree.css
> > > - …uto/assets/meta/zdf3b597a/css/layout.css
> > > - …to/assets/meta/z1a175d43/css/desktop.css
> > > - …ets/meta/core/z4225cc8a/Autocomplete.css
> > >
> > > Is there away to remove the Tapestry css files?
> > >
> > >
> > > On Mon, Dec 8, 2014 at 6:23 PM, Howard Lewis Ship <hl...@gmail.com>
> > > wrote:
> > >
> > >> Tapestry puts all of its main JavaScript at the bottom of the page. It
> > >> includes a tiny amount of JavaScript at the top of the page, to
> > introduce
> > >> an element that prevents unwanted user input until the page is fully
> > >> loaded. On newer browsers, it will animate in a translucent overlay
> and
> > a
> > >> cycling "loading image" ... all of which is removed once the page is
> > ready
> > >> for operation (after all JavaScript has been loaded and executed).
> Most
> > >> users won't notice it, and it barely affects page load speed, but is
> > very
> > >> handy!
> > >>
> > >> On Mon, Dec 8, 2014 at 12:26 PM, George Christman <
> > >> gchristman@cardaddy.com>
> > >> wrote:
> > >>
> > >> > This seems to be an improvement google webmaster is requesting, is
> it
> > >> > possible and if so how would you go about getting it working?
> > >> >
> > >>
> > >>
> > >>
> > >> --
> > >> Howard M. Lewis Ship
> > >>
> > >> Creator of Apache Tapestry
> > >>
> > >> The source for Tapestry training, mentoring and support. Contact me to
> > >> learn how I can get you up and productive in Tapestry fast!
> > >>
> > >> (971) 678-5210
> > >> http://howardlewisship.com
> > >> @hlship
> > >>
> > >
> > >
> > >
> > > --
> > > George Christman
> > > CEO
> > > www.CarDaddy.com
> > > P.O. Box 735
> > > Johnstown, New York
> > >
> > >
> >
> >
> > --
> > George Christman
> > CEO
> > www.CarDaddy.com
> > P.O. Box 735
> > Johnstown, New York
> >
>
>
>
> --
> Howard M. Lewis Ship
>
> Creator of Apache Tapestry
>
> The source for Tapestry training, mentoring and support. Contact me to
> learn how I can get you up and productive in Tapestry fast!
>
> (971) 678-5210
> http://howardlewisship.com
> @hlship
>
--
George Christman
CEO
www.CarDaddy.com
P.O. Box 735
Johnstown, New York
Re: eliminate render blocking javascript and css above the fold content
Posted by Howard Lewis Ship <hl...@gmail.com>.
One idea that may come after 5.4 is the ability to aggregate CSS as well as
JavaScript. That would help, reducing this to a couple of requests, rather
than eight.
Bear in mind that this is all first-time loading issues. Any subsequent
visit will find that all those assets are already in local browser cache,
with far-future expires headers.
The directive you are following appear, to me, to be based on more "hand
tooled" pages; the idea that you know whats "above" or "below" the "fold"
implies that your page has a very specific structure that you are totally
in control of. That's a little much for Tapestry to manage!
On Mon, Dec 8, 2014 at 6:57 PM, George Christman <gc...@cardaddy.com>
wrote:
> nvm, figured it out
>
> @Contribute(JavaScriptStack.class)
> @Core
> public static void
> setupCoreJavaScriptStack(OrderedConfiguration<StackExtension>
> configuration) {
> configuration.override("exception-frame.css", null);
> configuration.override("tapestry.css", null);
> configuration.override("tapestry-console.css", null);
> configuration.override("tree.css", null);
> }
>
> On Mon, Dec 8, 2014 at 6:55 PM, George Christman <gc...@cardaddy.com>
> wrote:
>
> > After digging a little deeper, it looks like it's complaining about css
> >
> > Your page has 8 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
> > <https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery>
> > of the following:
> >
> > - …f5/tapestry5/bootstrap/css/bootstrap.css
> > - …ts/meta/za327fba4/tapestry5/tapestry.css
> > - …/z46ba6ee5/tapestry5/exception-frame.css
> > - …z9cac79b1/tapestry5/tapestry-console.css
> > - …/assets/meta/z123f049/tapestry5/tree.css
> > - …uto/assets/meta/zdf3b597a/css/layout.css
> > - …to/assets/meta/z1a175d43/css/desktop.css
> > - …ets/meta/core/z4225cc8a/Autocomplete.css
> >
> > Is there away to remove the Tapestry css files?
> >
> >
> > On Mon, Dec 8, 2014 at 6:23 PM, Howard Lewis Ship <hl...@gmail.com>
> > wrote:
> >
> >> Tapestry puts all of its main JavaScript at the bottom of the page. It
> >> includes a tiny amount of JavaScript at the top of the page, to
> introduce
> >> an element that prevents unwanted user input until the page is fully
> >> loaded. On newer browsers, it will animate in a translucent overlay and
> a
> >> cycling "loading image" ... all of which is removed once the page is
> ready
> >> for operation (after all JavaScript has been loaded and executed). Most
> >> users won't notice it, and it barely affects page load speed, but is
> very
> >> handy!
> >>
> >> On Mon, Dec 8, 2014 at 12:26 PM, George Christman <
> >> gchristman@cardaddy.com>
> >> wrote:
> >>
> >> > This seems to be an improvement google webmaster is requesting, is it
> >> > possible and if so how would you go about getting it working?
> >> >
> >>
> >>
> >>
> >> --
> >> Howard M. Lewis Ship
> >>
> >> Creator of Apache Tapestry
> >>
> >> The source for Tapestry training, mentoring and support. Contact me to
> >> learn how I can get you up and productive in Tapestry fast!
> >>
> >> (971) 678-5210
> >> http://howardlewisship.com
> >> @hlship
> >>
> >
> >
> >
> > --
> > George Christman
> > CEO
> > www.CarDaddy.com
> > P.O. Box 735
> > Johnstown, New York
> >
> >
>
>
> --
> George Christman
> CEO
> www.CarDaddy.com
> P.O. Box 735
> Johnstown, New York
>
--
Howard M. Lewis Ship
Creator of Apache Tapestry
The source for Tapestry training, mentoring and support. Contact me to
learn how I can get you up and productive in Tapestry fast!
(971) 678-5210
http://howardlewisship.com
@hlship
Re: eliminate render blocking javascript and css above the fold content
Posted by George Christman <gc...@cardaddy.com>.
nvm, figured it out
@Contribute(JavaScriptStack.class)
@Core
public static void
setupCoreJavaScriptStack(OrderedConfiguration<StackExtension>
configuration) {
configuration.override("exception-frame.css", null);
configuration.override("tapestry.css", null);
configuration.override("tapestry-console.css", null);
configuration.override("tree.css", null);
}
On Mon, Dec 8, 2014 at 6:55 PM, George Christman <gc...@cardaddy.com>
wrote:
> After digging a little deeper, it looks like it's complaining about css
>
> Your page has 8 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
> <https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery>
> of the following:
>
> - …f5/tapestry5/bootstrap/css/bootstrap.css
> - …ts/meta/za327fba4/tapestry5/tapestry.css
> - …/z46ba6ee5/tapestry5/exception-frame.css
> - …z9cac79b1/tapestry5/tapestry-console.css
> - …/assets/meta/z123f049/tapestry5/tree.css
> - …uto/assets/meta/zdf3b597a/css/layout.css
> - …to/assets/meta/z1a175d43/css/desktop.css
> - …ets/meta/core/z4225cc8a/Autocomplete.css
>
> Is there away to remove the Tapestry css files?
>
>
> On Mon, Dec 8, 2014 at 6:23 PM, Howard Lewis Ship <hl...@gmail.com>
> wrote:
>
>> Tapestry puts all of its main JavaScript at the bottom of the page. It
>> includes a tiny amount of JavaScript at the top of the page, to introduce
>> an element that prevents unwanted user input until the page is fully
>> loaded. On newer browsers, it will animate in a translucent overlay and a
>> cycling "loading image" ... all of which is removed once the page is ready
>> for operation (after all JavaScript has been loaded and executed). Most
>> users won't notice it, and it barely affects page load speed, but is very
>> handy!
>>
>> On Mon, Dec 8, 2014 at 12:26 PM, George Christman <
>> gchristman@cardaddy.com>
>> wrote:
>>
>> > This seems to be an improvement google webmaster is requesting, is it
>> > possible and if so how would you go about getting it working?
>> >
>>
>>
>>
>> --
>> Howard M. Lewis Ship
>>
>> Creator of Apache Tapestry
>>
>> The source for Tapestry training, mentoring and support. Contact me to
>> learn how I can get you up and productive in Tapestry fast!
>>
>> (971) 678-5210
>> http://howardlewisship.com
>> @hlship
>>
>
>
>
> --
> George Christman
> CEO
> www.CarDaddy.com
> P.O. Box 735
> Johnstown, New York
>
>
--
George Christman
CEO
www.CarDaddy.com
P.O. Box 735
Johnstown, New York
Re: eliminate render blocking javascript and css above the fold content
Posted by George Christman <gc...@cardaddy.com>.
After digging a little deeper, it looks like it's complaining about css
Your page has 8 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
<https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery> of
the following:
- …f5/tapestry5/bootstrap/css/bootstrap.css
- …ts/meta/za327fba4/tapestry5/tapestry.css
- …/z46ba6ee5/tapestry5/exception-frame.css
- …z9cac79b1/tapestry5/tapestry-console.css
- …/assets/meta/z123f049/tapestry5/tree.css
- …uto/assets/meta/zdf3b597a/css/layout.css
- …to/assets/meta/z1a175d43/css/desktop.css
- …ets/meta/core/z4225cc8a/Autocomplete.css
Is there away to remove the Tapestry css files?
On Mon, Dec 8, 2014 at 6:23 PM, Howard Lewis Ship <hl...@gmail.com> wrote:
> Tapestry puts all of its main JavaScript at the bottom of the page. It
> includes a tiny amount of JavaScript at the top of the page, to introduce
> an element that prevents unwanted user input until the page is fully
> loaded. On newer browsers, it will animate in a translucent overlay and a
> cycling "loading image" ... all of which is removed once the page is ready
> for operation (after all JavaScript has been loaded and executed). Most
> users won't notice it, and it barely affects page load speed, but is very
> handy!
>
> On Mon, Dec 8, 2014 at 12:26 PM, George Christman <gchristman@cardaddy.com
> >
> wrote:
>
> > This seems to be an improvement google webmaster is requesting, is it
> > possible and if so how would you go about getting it working?
> >
>
>
>
> --
> Howard M. Lewis Ship
>
> Creator of Apache Tapestry
>
> The source for Tapestry training, mentoring and support. Contact me to
> learn how I can get you up and productive in Tapestry fast!
>
> (971) 678-5210
> http://howardlewisship.com
> @hlship
>
--
George Christman
CEO
www.CarDaddy.com
P.O. Box 735
Johnstown, New York
Re: eliminate render blocking javascript and css above the fold content
Posted by Howard Lewis Ship <hl...@gmail.com>.
Tapestry puts all of its main JavaScript at the bottom of the page. It
includes a tiny amount of JavaScript at the top of the page, to introduce
an element that prevents unwanted user input until the page is fully
loaded. On newer browsers, it will animate in a translucent overlay and a
cycling "loading image" ... all of which is removed once the page is ready
for operation (after all JavaScript has been loaded and executed). Most
users won't notice it, and it barely affects page load speed, but is very
handy!
On Mon, Dec 8, 2014 at 12:26 PM, George Christman <gc...@cardaddy.com>
wrote:
> This seems to be an improvement google webmaster is requesting, is it
> possible and if so how would you go about getting it working?
>
--
Howard M. Lewis Ship
Creator of Apache Tapestry
The source for Tapestry training, mentoring and support. Contact me to
learn how I can get you up and productive in Tapestry fast!
(971) 678-5210
http://howardlewisship.com
@hlship