[interfacesketch]

Text articles are probably the most widespread type of content on the web. Most web sites are not web apps. But many developers want to re-construct web sites into web app architectures even when there's no benefit to the end user.

I posted the links below on a previous discussion about AMP. They are two examples of basic, javascript-free web pages with text content. There's about 2500+ words on these test pages, but the page weight is still much smaller than, for example, a medium article with one tenth the number of words (250).

Try loading them on your mobile on a 3G (or slower) connection. Do they load fast or slow?

Version A: http://interfacesketch.com/test/energy-book-synopsis-a.html

Here is an identical version to the above but one that loads custom fonts (approx 40kb extra).

Version B: http://interfacesketch.com/test/energy-book-synopsis-b.html

[SquareWheel]

Version B could probably be optimized here by not loading two very similar fonts.

You can also try loading the font locally first, to avoid the download if it's installed on the user's system.

Finally, unicode-range lets you avoid the download completely if that character isn't included on the page. Not a likely outcome on an English page, but a good practice regardless.

Webfonts are tough to optimize, but not impossible. Right now there's solutions of using Javascript to background the font so it's non-blocking (eg. loadCSS[1]), but it's not ideal when trying to keep overhead down. The situation should improve once font-display[2] becomes standardized.

For what it's worth though, I find Version B looks much nicer.

[1] https://github.com/filamentgroup/loadCSS

[2] https://css-tricks.com/font-display-masses/

[interfacesketch]

Thanks for trying out these test pages.

Version B has two different font weights from the same family: Regular and Medium/Semi-bold. Version A relies on the fonts already installed on the user's computer.

Dropping the semi-bold font weight would save approx 23k, but having a regular and bold font weight felt like the minimal styles needed to support the page.

Dropping the header image would save 40k. (Note: the header image hasn't been optimised using something like the HTML srcset attribute which can load different picture sizes for different devices).

[flukus]

It could avoid loading the font entirely. Why does every webpage assume I want to use their fonts?

[adrianN]

about:config -> browser.display.use_document_fonts = 0

I don't load fonts. I either don't notice a difference, or the fancy pants fonts are hard to read.

[flukus]

Ever run into trouble on sites that use font's for icons, like bootstrap ones?

[NoGravitas]

It's a pain in the arse. Icon fonts are a Wrong Solution.