3 ms·
Reducing Asset Size with Subsetting
- dclusin 7y agoNeat idea. My approach to solving this issue was configuring nginx to gzip responses with a high compression ratio. You can also precompress your asset files and tell nginx to find and serve the “.gz” compressed version of a static asset if available. This alleviates additional compute load imposed by Enabling compression.
- teej 7y agoI immediately jumped to “why don’t we just compress them?” and it turns out I was wrong. The author is using the WOFF format (https://en.wikipedia.org/wiki/Web_Open_Font_Format https://en.wikipedia.org/wiki/Web_Open_Font_Format) which is already compressed with zlib using a special encoding. Serving them gzipped is unnecessary.
- deleted 7y ago[deleted]
- brimtown 7y agoSee also https://github.com/Munter/subfont#readme https://github.com/Munter/subfont#readme (or https://www.gatsbyjs.org/packages/gatsby-plugin-subfont/ https://www.gatsbyjs.org/packages/gatsby-plugin-subfont/ for Gatsby sites).
- CharlesW 7y agoFYI, this is common enough that Google Fonts has subsetting built in. You can use the Google Fonts API's 'text' parameter to specify specific glyphs, or you can use the more-general 'subset' property (e.g. subset=greek,cyrillic) to choose one or more scripts. https://developers.google.com/fonts/docs/getting_started https://developers.google.com/fonts/docs/getting_started
- silviogutierrez 7y agoIncredible! Thought of doing this at the app level, but hadn't thought of italics etc. The concept of doing it with puppeteer is pretty neat.
- Ayesh 7y agoIf you are interested in reducing the font size, consider variable fonts. They are supported in pretty much every browser that matters. Although the file size is larger, it often is smaller when regular, italic, and bold variants put together. When sunsetting, it's important to use a good alt don't too, so even if the glyph is missing from the font, it doesn't look too bad with the alt system font.