Issue #12 — Essential image optimization, web fonts without JavaScript, the cost of ads and more!
As developers, we frequently use third-party tooling coming in the form of external scripts. Unfortunately, often those trackers and widgets can significantly slow down our apps and websites.
Luckily, [Ryan Townsend](https://twitter.com/ryantownsend) wrote an impactful, nine-step guide to mitigating potential harmful effects, featuring such strategies as asynchronous inclusion or preload. Thanks, Ryan! ⚡️
| [How 3rd Party Scripts can be performant citizens on the web](https://www.twnsnd.com/posts/performant_third_party_scripts.html) |
Folks over at The New York Times sat down to examine the performance and cost footprint of ads in top 50 news outlets. Guess what they found out—**more than half of transferred data comes from advertising and has a hefty price tag.**
For the biggest offender, [Boston.com](https://www.boston.com/), visiting the home page every day for a month would cost the equivalent of about $9.50 in data usage just for the ads! No need to say that neglecting performance can be pricey for our users.
| [The Cost of Mobile Ads on 50 News Websites](https://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?smid=tw-share) |
[Addy Osmani](https://twitter.com/addyosmani) is back with what’s probably the most extensive eBook on image optimization 😱 From choosing an image format, image spriting, lazy-loading to automation, CDNs, preloading and performance budgets specific to imagery.
An absolute must-read for anyone building for the Web, wanting to use media sensibly.
| [Essential Image Optimization](https://images.guide/) |
[Bram Stein](https://twitter.com/bram_stein), one of the few highly regarded web font experts, just published a comprehensive handbook under A Book Apart.
If you’ve ever wondered how to efficiently utilise web fonts and more importantly, avoid common performance pitfalls, this highly practical book is a gold mine.
| [Webfont Handbook](https://webfonthandbook.com/) |
Network Information API, a specification developed by [Ilya Grigorik](https://twitter.com/igrigorik), [Marcos Cáceres](https://twitter.com/marcosc) and [Fernando Jiménez](https://twitter.com/f_jimenez) Moreno is already accessible in Chrome M62.
**navigator.connection **can help determine connection type (for example cellular, Wi-Fi, Ethernet or Bluetooth), bandwidth and round-trip estimates and much more. This API will hopefully aid developers in tailoring user experiences for slower connections.
| [Network Information API in Chrome](https://twitter.com/igrigorik/status/911263826594619393) |
Typekit, one of the most popular web font services, is continuing their mission of enabling fast font delivery. It’s now possible to serve custom fonts without any script! 👏
It not only reduces the performance footprint but allows using the vast Typekit library in HTML emails, custom webpage builders and Google AMP. You can opt-in to test this feature via enabling [Early Access](https://pages.typekit.com/early-access-user-guides/en/early-access/).
| [Serve web fonts without JavaScript](https://blog.typekit.com/2017/08/30/css-font-loading/) |
BROUGHT TO YOU BY
** ♠︎ Calibre** — Let’s make the web fast for everyone.