Skip to content

Conversation

@KyleAMathews
Copy link
Contributor

Been working on a little side project to push google fonts to npm to make it really easy to self-host fonts. This makes for a nice little speed index boost as it avoids the extra ssl negotiation to google fonts + the extra round trip to first grab their css file and then download the fonts. Instead the fontface css is embedded directly in the <head>.

I also used the new link preload fetch directive (only supported on chrome atm) which instructs the browser to immediately start downloading the font file (normally browsers wait to see if the font is actually used in the html on the page before downloading).

Speed index savings seem around ~300 milliseconds on desktop/cable & ~1.5 seconds on smartphone/3g.

I also switched the various icons to use file-loader vs. the default url-loader as currently we're base64 encoding icons in the HTML which is wasted bytes.

desktop/cable:
before: http://www.webpagetest.org/result/170125_GR_GDCE/
after: http://www.webpagetest.org/result/170125_VD_GFA5/

smartphone/3g:
before: http://www.webpagetest.org/result/170125_9G_GDC0/
after: http://www.webpagetest.org/result/170125_1A_GFA0/

desktop/3g:
before: http://www.webpagetest.org/result/170125_TZ_GEJ7/
after: http://www.webpagetest.org/result/170125_21_GF9S/

Also in this commit is forcing using file-loader on icons
as currently we're inlining them which is wasteful as most aren't used
nor are they latency sensative.
Copy link
Member

@vcarl vcarl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I hate font pop in and it's noticeably better on this PR than on the site. Great work.

@KyleAMathews
Copy link
Contributor Author

Sweet, merging!

@KyleAMathews KyleAMathews merged commit e8c4493 into reactiflux:master Jan 25, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants