understanding inline_google_font

Ovidiu Pacuraru

unread,

Mar 24, 2014, 5:43:34 AM3/24/14

to ngx-pagesp...@googlegroups.com

If I enable that particular filter, my site becomes about 200kb bigger. Doesn't sound like an improvement.

Jeff Kaufman

unread,

Mar 24, 2014, 9:30:10 AM3/24/14

to ngx-pagesp...@googlegroups.com

Could you post a link to your site, or to before/after waterfall
charts? The filter is supposed move about 250 bytes of css from an
external file into your html, saving your users a round trip. What
part of your site is getting 200kb bigger? The html? The fonts?

On Mon, Mar 24, 2014 at 5:43 AM, Ovidiu Pacuraru <ovi...@pacura.ru> wrote:
> If I enable that particular filter, my site becomes about 200kb bigger.
> Doesn't sound like an improvement.
>

> --
> You received this message because you are subscribed to the Google Groups
> "ngx-pagespeed-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to ngx-pagespeed-di...@googlegroups.com.
> Visit this group at http://groups.google.com/group/ngx-pagespeed-discuss.
> For more options, visit https://groups.google.com/d/optout.

Ovidiu Pacuraru

unread,

Mar 24, 2014, 5:56:16 PM3/24/14

to ngx-pagesp...@googlegroups.com

This is without inline_google_font_css => http://screencast.com/t/MTpydiNL3oUl

And this is with: http://screencast.com/t/CFiyrNtq18h

Is that enough info? In which state shall I leave the site for your inspection?

Any further info I can provide?

On Monday, 24 March 2014 15:30:10 UTC+2, Jeff Kaufman wrote:

Could you post a link to your site, or to before/after waterfall
charts? The filter is supposed move about 250 bytes of css from an
external file into your html, saving your users a round trip. What
part of your site is getting 200kb bigger? The html? The fonts?

On Mon, Mar 24, 2014 at 5:43 AM, Ovidiu Pacuraru <ovi...@pacura.ru> wrote:
> If I enable that particular filter, my site becomes about 200kb bigger.
> Doesn't sound like an improvement.
>
> --
> You received this message because you are subscribed to the Google Groups
> "ngx-pagespeed-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to ngx-pagespeed-discuss+unsub...@googlegroups.com.

Jeff Kaufman

unread,

Mar 25, 2014, 8:20:42 PM3/25/14

to ngx-pagesp...@googlegroups.com

Looking at your screenshots I see:

yslow calculation of font download:
without inline_google_font_css 16K, with one file
with inline_google_font_css 258K, with ten files

When I test this with webpagetest I don't see that:

without inline_google_font_css:
http://www.webpagetest.org/result/140326_31_7M/1/details/
with inline_google_font_css:
http://www.webpagetest.org/result/140326_ZB_A6/1/details/

Both of these downloaded
http://themes.googleusercontent.com/static/fonts/cardo/v6/zpisC4kGu76S5N9VhpMnEg.woff
and no other font files. Without inline_google_font_css it needed to
download http://fonts.googleapis.com/css?family=Cardo:400,400italic,700
but with inline_google_font_css it could inline that file instead,
saving a request.

I haven't been able to reproduce the 268K download, but that really
shouldn't happen. YSlow says your browser downloaded ten font files?
If you can get it to do that again, can you click the plus and see
what ten they were?

On Mon, Mar 24, 2014 at 5:56 PM, Ovidiu Pacuraru <ovi...@pacura.ru> wrote:
> This is without inline_google_font_css =>
> http://screencast.com/t/MTpydiNL3oUl
> And this is with: http://screencast.com/t/CFiyrNtq18h
>
> Is that enough info? In which state shall I leave the site for your
> inspection?
> Any further info I can provide?
>
>
> On Monday, 24 March 2014 15:30:10 UTC+2, Jeff Kaufman wrote:
>>
>> Could you post a link to your site, or to before/after waterfall
>> charts? The filter is supposed move about 250 bytes of css from an
>> external file into your html, saving your users a round trip. What
>> part of your site is getting 200kb bigger? The html? The fonts?
>>
>>
>>
>> On Mon, Mar 24, 2014 at 5:43 AM, Ovidiu Pacuraru <ovi...@pacura.ru> wrote:
>> > If I enable that particular filter, my site becomes about 200kb bigger.
>> > Doesn't sound like an improvement.
>> >
>> > --
>> > You received this message because you are subscribed to the Google
>> > Groups
>> > "ngx-pagespeed-discuss" group.
>> > To unsubscribe from this group and stop receiving emails from it, send
>> > an

>> > email to ngx-pagespeed-di...@googlegroups.com.

>> > Visit this group at
>> > http://groups.google.com/group/ngx-pagespeed-discuss.
>> > For more options, visit https://groups.google.com/d/optout.
>

> --
> You received this message because you are subscribed to the Google Groups
> "ngx-pagespeed-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to ngx-pagespeed-di...@googlegroups.com.

Ovidiu Pacuraru

unread,

Mar 26, 2014, 5:44:57 AM3/26/14

to ngx-pagesp...@googlegroups.com

Sure, I just enabled inline_google_font again, its live, you can check it in the current source code, that is the easiest way.

Jeff Kaufman

unread,

Mar 26, 2014, 6:53:16 AM3/26/14

to ngx-pagesp...@googlegroups.com

On Wed, Mar 26, 2014 at 5:44 AM, Ovidiu Pacuraru <ovi...@pacura.ru> wrote:
>> Sure, I just enabled inline_google_font again, its live, you can check it
>> in the current source code, that is the easiest way.
>
>
>

Ovidiu Pacuraru

unread,

Mar 26, 2014, 7:22:41 AM3/26/14

to ngx-pagesp...@googlegroups.com

I used yslow and it shows a lot of google fonts which it is complaining about... but if they are not called for, hm, maybe then inlining google fonts is working as expected here.

<style>@font-face {

font-family: 'Cardo';

font-style: normal;

font-weight: 400;

src: local('Cardo'), local('Cardo-Regular'), url(http://themes.googleusercontent.com/static/fonts/cardo/v6/c6Zi_ulq7hv-avk-G9Yut6CWcynf_cDxXwCLxiixG1c.woff) format('woff');

}

@font-face {

font-family: 'Cardo';

font-style: normal;

font-weight: 700;

src: local('Cardo Bold'), local('Cardo-Bold'), url(http://themes.googleusercontent.com/static/fonts/cardo/v6/gHC1KgRPdVNdvvVcxLMCY3YhjbSpvc47ee6xR_80Hnw.woff) format('woff');

}

@font-face {

font-family: 'Cardo';

font-style: italic;

font-weight: 400;

src: local('Cardo Italic'), local('Cardo-Italic'), url(http://themes.googleusercontent.com/static/fonts/cardo/v6/mSKSxAIybPTfRoik7xAeTQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');

}

</style>

<style id='open-sans-css' media='all'>@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
	}
	@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
	}
	@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
	}
	@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 300;
	src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxnZ4362_PV5aPD5jU0S2ELI.woff) format('woff');
	}
	@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBqfTCPadK0KLfdEfFtGWCYw.woff) format('woff');
	}
	@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 600;
	src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxhyVJL_BP-r1aUfHSUUH87w.woff) format('woff');
	}
	</style>

Ovidiu Pacuraru

unread,

Apr 11, 2014, 4:16:28 PM4/11/14

to ngx-pagesp...@googlegroups.com

Anyone? Does this issue look OK to you? I'm not sure if you stopped replying because its a non-issue or forgot about the thread :-)

Jeff Kaufman

unread,

Apr 14, 2014, 7:32:24 AM4/14/14

to ngx-pagesp...@googlegroups.com

On Fri, Apr 11, 2014 at 4:16 PM, Ovidiu Pacuraru <ovi...@pacura.ru> wrote:
> Does this issue look OK to you?

It looks to me like this is fine. When I look at the font downloads
in a real browser or in webpagetest it's only downloading the fonts it
needs. I think this is a yslow bug: it's able to detect the fonts
only when the css is inlined, but it isn't able to detect that
browsers can see which ones are unused.

> I'm not sure if you stopped replying
> because its a non-issue or forgot about the thread :-)
>

Sorry; I was off on vacation for a bit.

Ovidiu Pacuraru

unread,

Apr 15, 2014, 5:35:32 AM4/15/14

to ngx-pagesp...@googlegroups.com

No worries, you're volunteering here after all. I was just not sure if you overlooked my reply or what :-)

Thanks for your feedback!

Reply all

Reply to author

Forward

understanding inline_google_font_css

Ovidiu Pacuraru

Jeff Kaufman

Ovidiu Pacuraru

Jeff Kaufman

Ovidiu Pacuraru

Jeff Kaufman

Ovidiu Pacuraru

Ovidiu Pacuraru

Jeff Kaufman

Ovidiu Pacuraru