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

Write to an Airtable with PHP

Lately I’ve been rediscovering the joy of PHP. Also been helping an MVP get off the ground which uses a lot of nocode/lowcode bits and pieces and miraculously puts them together. Anyway, I had to write to an Airtable table with PHP and some quick googling didn’t find an example to copy-paste so I’m writing […]

February 21st, 2022
Tags: api, php

Perfplanet calendar ’21 call for articles

Helloooo, 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 do you want to write about? […]

November 26th, 2021
Tags: performance

Perfplanet calendar’s oldies but goodies

Thomas Steiner has a brilliant idea for this year’s Perfplanet calendar edition: what if we revisit some of the best articles from the past. “Best” is subjective but how about “still popular”? So here’s a list of the 31 most visited articles in the past year in reverse chronological order of publication. (31 as the […]

November 3rd, 2021
Tags: performance

ffmpeg: make a video with a static image and an audio file

tsia ffmpeg -loop 1 -i image.png -i audio.mp3 -c:a copy -c:v libx264 -shortest result.mp4

July 6th, 2021
Tags: ffmpeg

Video grids with ffmpeg

I wanted to create a video that is a 3×2 grid of 6 other videos. This one to be precise: I was hoping I can use ffmpeg, because the thought of using a proper video editing software gives me the chills. In fact at some point I thought things will require iMovie and went to […]

December 7th, 2020
Tags: ffmpeg

Randomizing music with MuseScore and Node.js

One of my esteemed professors from Santa Monica College, Dr. Driscoll asked for an opinion on how one can use a sheet of music and reshuffle some measures to generate a unique exercise for each student. This turned out more fun than anticipated and here’s a solution I came up with using the free notation […]

September 13th, 2020
Tags: JavaScript, Music

Natively lazy-loading Facebook social plugins

tl;dr: Add data-lazy=”true” to your Facebook social plugins that are below the fold and reap the benefits. In code: // before <div class=”fb-like” data-href=”https://phpied.com”></div> // after <div class=”fb-like” data-href=”https://phpied.com” data-lazy=”true”></div> The following 18 seconds video demonstrates the difference. Where currently your visitors load Facebook iframe content even if it’s way down the page, after you […]

July 24th, 2020
Tags: facebook, JavaScript

Life after Facebook?

Yesterday was my last day at Facebook. After 9 1/2 years it was high time for a change. I dropped the news on twitter/fb and thought now it would be nice to answer the question of “what’s next?” that friends are wondering. The trajectory I myself have wondered sometimes what the life after Facebook could […]

July 14th, 2020
Tags: News/personal

A programmer’s job dimensions

I’m not the one who philosophizes often in public, but indulge me this thought on the types of work we do as programmers and feel free to add your own dimensions. I’ve thought about how sometimes I like to work on user-facing products and sometimes on developer-facing ones. Real products that my mom can see […]

May 14th, 2020
Tags: News/personal

WebAudio Deep Note, part 5: gain node

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds nodes In part 4 we figured out how to play all 30 sounds of the Deep Note at the same time. The problem is that’s way too loud. Depending on the browser and speakers you […]

November 9th, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 5: nodes

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds Nodes WebAudio makes a heavy use of the concept of nodes. A node is something that does a thing (I know, very helpful), for example makes noise or manipulates sound somehow. Then you connect the […]

November 3rd, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 4: multiple sounds

Previously in this series: intro play a sound 2.1. kick and snare (a fun distraction from the main series) loop and change pitch We need to play 30 sounds at the time, that is 30 instances of the same cello sample, all pitched all over the place and over time. (If that sounds odd, please […]

October 20th, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 3: loop and change pitch

This journey started here, then continued, then took a slight turn, just for giggles, and now we’re back. After you learned how to play a sound, now let’s loop it, because the DeepNote goes on for about 25 seconds and we play the exact same sample of a cello that is under a second long. […]

October 11th, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 2.1: Boots and Cats

In the previous installment we came across the idea of creating noise via an oscillator and via a buffer filled with your own values (as opposed to values being read from a pre-recorded file). I thought a bit of elaboration is in order, even though we’re not going to use these ideas for the Deep […]

October 3rd, 2019
Tags: JavaScript, WebAudio

A bookmarklet: dataURI, please!

Ever had a string of a data URI image and you want to see said image? Simple: type data:image/png;base64, followed by the base 64 string. Except… it’s too much syntax to remember. I mean c’mon: colon, semi-colon, comma. And you probably don’t do this often enough. A bookmarklet is called for to aid the memory. […]

September 30th, 2019
Tags: bookmarklets

WebAudio Deep Note, part 2: play a sound

(Part 1 (intro) is here.) Now that we know what to do, let’s go for it! First rule of business: load an audio file and play it. UI Let’s build a simple HTML page (demo) to test things: <button onclick=”play()”>â–¶ play</button> <button onclick=”stop()”>STOP!!!!</button> Now let’s implement this play() function. Fetch… Loading means fetching from the […]

September 28th, 2019
Tags: JavaScript, WebAudio

WebAudio Deep Note, part 1: intro

You’ve heard of WebAudio, but have you done any experimenting with it? This is a series of posts on exploring and discovering various APIs that WebAudio has to offer, by doing something concrete, namely recreate the THX Deep Note sound. If you cannot wait for me to write up everything, the code and slides (these […]

September 18th, 2019
Tags: JavaScript, WebAudio

Exploring prefers-reduced-motion

Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don’t want your site to cause motion sickness and dizziness, right? Luckily, most modern […]

August 13th, 2019
Tags: CSS, JavaScript

Integrating React Profiler

Say hello to the new perf hotness – a profiler built into React. This announcement blog post shows how to use it as a Chrome Extension, but you can also use it in your code, to get insight into real world interactions, even in production. Let’s see how. Create a new react app If you’re […]

February 21st, 2019
Tags: react