Browsers lagging in @supports support?

I’ve been crafting a nice font-face fallback and it works well, however Safari doesn’t yet support ascent-override, descent-override, nor line-gap-override in @font-face blocks. It does support size-adjust though. Since my code requires all 4, the results with size-adjust-only look bad. Worse than no overrides. Easy-peasy I thought, I’ll target Safari and not give it any […]

November 3rd, 2024
Tags: font-face

Letter frequency in the Bulgarian language

In this post, I talked about the letter frequency in English presented in Peter Norvig’s research. And then I thought… what about my own mother tongue? So I got a corpus of 5000 books (832,260 words), a mix of Bulgarian authors and translations, and counted the letter frequency. Here’s the result in CSV format: letters.csv […]

November 1st, 2024
Tags: misc hackery

Web font file size study: a variable font addition

TL;DR: If your variable font file is significantly larger than 35K you may ask yourself “How did I get here?” Two font files (of the same family) means more bytes than one variable font that does both For context see part 1 and part 2. After publishing part 2 of my ongoing web fonts file […]

October 28th, 2024
Tags: font-face

The zebra jumps quickly over a fence, vexed by a lazy ox

The zebra jumps quickly over a fence, vexed by a lazy ox. Eden tries to alter soft stone near it. Tall giants often need to rest, and open roads invite no pause. Some long lines appear there. In bright cold night, stars drift, and people watch them. A few near doors step out. Much light […]

October 21st, 2024
Tags: font-face

Lessons learned from 222,557 font file subsets?

Earlier this year I wondered how many KB is “normal” for a web font file size (spoiler 20-ish KB). I finished the post questioning how much subsetting really helps, meaning how much do you save from painstakingly choosing which characters should stay in the subset as opposed to just broad strokes (ASCII vs Latin vs […]

October 20th, 2024
Tags: font-face, performance

Font-face toggler bookmarklet v2

This is a different version of a font on/off toggler bookmarklet. I did one such bookmarklet earlier this year, which works by messing up font-family inside @font-face. This new version works my messing up url() inside @font-face blocks. By “messing up” I mean changing the string “woff” to “woof” which means making the font files […]

October 17th, 2024
Tags: font-face, performance

“Your app crashes my browser” talk

Today I gave a talk on memory leaks in web apps at the wonderful dotJS conference in Paris’ Folies Bergère theater. It was only 5 minutes, so not much time for links and such. Here’s more or less what I said including the links. Bonjour à toutes et à tous, who’s excited about… Memory Leaks!? […]

June 27th, 2024
Tags: JavaScript

Chrome extension: Open in this tab

Do you hate it when sites open new tabs, for example from search results? Yeah, me too. So I thought a good idea would be to have a right-click “Open in this tab” similar to “Open in a new tab” option. Voilà, a new Chrome extension. You can install it from the store. How it […]

June 16th, 2024
Tags: chrome, JavaScript

Minimal SVG Favicon

Why minimal? I like “minimum-viable”s of all sorts. As a performance enthusiast I’m fascinated by anything minimal. So here goes a minimum viable SVG favicon. Why favicon? Welp, browsers will look for one and if you don’t have it, enjoy the 404s! Why SVG? It could be tiny, almost as tiny as a CDN URL, […]

June 15th, 2024
Tags: images, performance

Capturing web page video with a couple of bookmarklets

I recently saw someone sharing a blog post on social media using a video that just scrolls through the blog post. I wondered if a video like this can be created easily and automatically. Using a simple bookmarklet. Turns out yes! I ended up with two bookmarklets because they do different and independent things: one […]

June 3rd, 2024
Tags: bookmarklets, JavaScript

The Truth(tm) about encoding SVG in data URIs

tl;dr: You can stop worrying and URL-encode only the # character. What? So you want to have an SVG image in a CSS stylesheet. Yup, using data URIs (hey lookie, a 2009 post). There are a number of reasons not to embed images in CSS to begin with (caching, reuse), but hey, sometimes you’re not […]

February 9th, 2024
Tags: CSS, images

How many bytes is “normal” for a web font: a study using Google fonts

TL;DR: If your font file is significantly larger than 20K you may ask yourself “How did I get here?”. For images I think we (web developers) have a sense of how many bytes we can expect an image we see on a page to be. A JPEG photo? 100-ish K is ok for a decent […]

January 23rd, 2024
Tags: font-face, performance

Font-face toggler bookmarklet

Update: a different version that supports the use of local() is now available Ever wanted to look at your page and turn Web Fonts on and off? Experience the layout shift repeatedly, like some sort of UX torture? Look no further, here comes the handy bookmarklet. Install Drag this link to a bookmark toolbar near […]

January 8th, 2024
Tags: font-face, performance

Image requests in hidden content

You know the pattern: spit out some markup, probably server-side, but hide it for later. On-demand features (not to overwhelm the UI), dialogs waiting to pop, and so on. <div class=”modal hidden”>content here…<div> And what happens when the “content here…” includes resources, such as images? Is the browser going to download them? Let’s check. What […]

January 1st, 2024
Tags: images, performance

Minimum viable no-image image src

Remember spacer.gif? Yeah, “good” old days… We may now have all the CSS features to make everything better but sometimes the ghost of spacer gif rears its transparent head. And that’s an HTTP request. A request that’s better devoted to something useful. Like an LCP image or something, I dunno. So anyway, sometimes a simple […]

December 26th, 2023
Tags: images, performance

Perfplanet calendar ’23 call for articles

Hello, dear reader and web performance enthusiast! It’s time to sit down and write an article for the performance calendar. Here are some more details. Or if you’re not feeling like writing, look around you and recruit the person you think should share their knowledge with the world. What can you write about? Just share […]

November 2nd, 2023
Tags: News/personal, performance

A quick study of PDF optimization

Couple days ago I found out about a tool called pdfcpu, a PDF processor. Among its features I saw “optimize” so I had to take it ot for a spin and see how much of an optimization we’re talking about. Here’s a quick study of optimizing a random-ish sample of PDF files. Source data I […]

August 17th, 2023
Tags: performance, tools

Running JPEG-XL tools on shared Dreamhost

Let’s see how to setup and run cjxl (and its sibling djxl) on a simple shared hosting provider so you can encode and decode JPEG-XL (aka JXL) images. How There are better ways to install libjxl and its command-line tools but they require you to have sufficient privileges on your computer or server. With inexpensive […]

July 20th, 2023
Tags: hosting, images, tools

Fixing INP with a VIEWPORT tag

So I woke up yesterday being scolded by Google. An email from Google Search Console Team with subject “Core Web Vitals INP issues detected on your site”. Huh?! It was about this WordPress-powered site that you’re reading now (phpied.com). The Interaction to Next Paint metric (INP for short) was in the “Needs improvement” category as […]

July 12th, 2023
Tags: performance

A circle of web performance innovation

Inspired by Harry Roberts’ research and work on ct.css and Vitaly Friedman’s Nordic.js 2022 presentation, Rick Viscomi hacked up a tool (a JS snippet) called capo.js that can do what Harry says. Next logical step is to test the results of the tool in a no-code experimental setting and see if the results make sense […]

May 21st, 2023
Tags: performance

Lighthouse diff + WebPageTest

Lighthouse (LH), the performance auditing tool from Google now has a diff tool so you can compare what happens before/after a change or me vs competitor types. And WebPageTest.org (WPT), the industry-darling web perf analyzer, also runs Lighthouse and in addition to presenting the results (in two different ways, actually) you can export the results […]

May 9th, 2023
Tags: performance

Jehl’s Law of Web Performance

Adam Fendrych reported that Scott Jehl said in his Web Expo talk that a website should load before you can say “Cumulative Layout Shift”. What does that mean in practice? We’re web performance specialists here, we work with measurements and numbers, so we need a more exact number. Numbers reduce ambiguity. To find out that […]

April 21st, 2023
Tags: performance

Quick BPP (image entropy) check

Chrome is making a change on how Largest Contentful Paint (LCP) core web vital (CWV) is being calculated in order to avoid abuse. The abuse is that people cheat by putting a fake “hero” image (imagine a stretched out 1×1 transparent gif) and have this counted as a sooner LCP event. Chrome is fighting this […]

April 13th, 2023
Tags: performance

Progressive

Details from a talk to NYWebPerf meetup will go here after the talk. For now there’s: github.com/stoyan/progressive with the code and slides

July 26th, 2022
Tags: images

Faster WordPress rendering with 3 lines of configuration

“When I was younger, so much younger than today” and upset and full of vinegar about the state of the world, I’d say things like “CSS is the worst” (not really). Now, half a year later, older and wiser and more accepting, I’d agree to mellow down to “CSS is render-blocking”. Un-render-blocking CSS What this […]

July 2nd, 2022
Tags: HTTP, performance, tools