Translating...

Cancel

Ilya Grigorik
1 year agoPublic
Google Fonts recently switched to using new Zopfli compression algorithm:  the fonts are ~6% smaller on average, and in some cases up to 15% smaller! For example, Open Sans is one of the most popular fonts and is now more than 10% smaller -- this translates to faster load times and faster rendering.

What's Zopfli? It's an algorithm that was developed by the compression team at Google that delivers ~3~8% bytesize improvement when compared to gzip with maximum compression. This byte savings comes at a cost of much higher encoding cost, but the good news is, fonts are static files and decompression speed is exactly the same. Google Fonts pays the compression cost once and every clients gets the benefit of smaller download. If you’re curious to learn more about Zopfli: http://bit.ly/Y8DEL4

In short, faster web fonts - yay!
101
Rich Bradshaw1 year ago
What is the best way to use Google Web fonts for load performance? Using the basic CSS way doesn't seem ideal, using the JS async loader causes a very obvious flash of unstyled content. Are there any articles discussing this? Also, as an aside, wouldn't it be nice if Chrome (particulary on Mobile) bundled the top 10-20 fonts from webfonts to ensure faster loading?
'twould be wonderful if GWF had some fonts with popular unicode codepoints+1
Chris Dolan1 year ago
Zopfli should be implemented as "gzip --11" :)+13
Wow!!! amazing! Good job!
Ilya Grigorik1 year ago
+Rich Bradshaw unless you have a very good reason to use the JS loader, I recommend using the CSS include provided on the Google Fonts page. 

We recorded an episode about webfonts optimization last year, which may be of interest: http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/
+2
To me, css @importing is the "best" way for most cases, but that isn't reflected in pagespeed metrics, which knock points for doing it. Is the "solution" to not use fonts?+1
Rich Bradshaw1 year ago
+Ilya Grigorik that's pretty much what I thought. Thanks for the link, don't think I've seen that one :)
Great news. Thanks +Ilya Grigorik.
Ilya Grigorik1 year ago
+Jacob Taylor if you want the absolutely fastest experience, then you should avoid any external blocking resources: CSS, JS, and yes, fonts... But that doesn't mean you should use CSS, JS, or webfonts... Just make sure that you optimize the blocking resources: eliminate unnecessary resources from critical path, load just what you need, etc. 

PageSpeed Insights (intentionally) doesn't special case this stuff... a critical resource is a critical resource.
+1
+Ilya Grigorik Is Zopfli a general improvement or something specific to fonts? Would it give good improvements for text files such as CSS and JS?
Chris Dolan1 year ago
+Hari Krishna Dara it's a general improvement, trading copious encode time for slightly better compression.
Ilya Grigorik1 year ago
+Hari Krishna Dara yep, as Chris said, you can apply Zopfli to any content... anywhere it makes sense to use gzip, you can use zopfli.
Thanks, I was going to tip our UI perf guys, but they seem to be already on top of this.
In Future, Will it replace the general Gzip Algorithm that we use for compression?.
Ilya Grigorik1 year ago
+Vignesh Shanmugam Zopfli is not a "replacement" to gzip. Rather, Zopfli is an improvement to the encoding algorithm which allows improved compression (3-8% better than gzip with maximum compression setting)... otherwise, it uses same format as gzip. For more information, check out this blog post: http://bit.ly/Y8DEL4.
Thanks, zopfli is really great. For nodejs or Grunt user who want the same feature on their static files server I recommend https://github.com/pierreinglebert/node-zopfli and https://github.com/pierreinglebert/grunt-contrib-zopfli
+Ilya Grigorik Thanks Ilya :)
Mathias Bynens1 year ago
+Jérome, there’s also https://github.com/mathiasbynens/grunt-zopfli.

+Ilya Grigorik, any plans to do the same for Google Hosted Libraries (https://developers.google.com/speed/libraries/devguide)?
+3