performance posts

Inline emoji favicon

in

On a simple one-page site, I wanted as much as possible to be inline in the single document request. I didn’t have a favicon, and I didn’t want browsers to make that extra request. I considered just adding an empty file, as I’ve done sometimes in the past, but that would still be an extra request. So I looked up if it could be inlined. It can be done, with a data URL. And using an SVG format, an emoji can be used for a cheap actual icon.

Continue reading post "Inline emoji favicon"

Fallback webfont and emoji

in

Recently I found that browsers will download a fallback webfont (@font-face) to try to find an emoji or other missing character. I was looking at the perf characteristics of my site when I noticed that the browser was downloading a webfont that wasn’t being used at all. After some digging, I found that the browser was going down through the full font stack to try to find an emoji I had added to that page, downloading the webfont on the way.

This is probably not a common setup, but I have a webfont in my font stack down stack from some similar common system fonts, as a fallback just in case. It uses a nice system font unless it can’t find it, in which case it uses the webfont, unless it can’t use that, in which case it uses a less desirable system font or the generic font class.

Continue reading post "Fallback webfont and emoji"