Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Self host fonts #21

Merged
merged 3 commits into from
Jan 25, 2017
Merged

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