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

Conversation

Projects
None yet
2 participants
@KyleAMathews
Copy link
Collaborator

KyleAMathews commented Jan 25, 2017

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/

KyleAMathews added some commits Jan 25, 2017

Self-host our fonts + preload main header/body font
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.
@vcarl

vcarl approved these changes Jan 25, 2017

Copy link
Member

vcarl left a comment

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

@KyleAMathews

This comment has been minimized.

Copy link
Collaborator

KyleAMathews commented Jan 25, 2017

Sweet, merging!

@KyleAMathews KyleAMathews merged commit e8c4493 into reactiflux:master Jan 25, 2017

1 check passed

deploy/netlify Deploy preview ready!
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment