Harry Roberts

@csswizardry.com

6413 Followers 190 Following

🚀 Independent Web Performance Consultant • Speaker • Google Developer Expert, Web Performance • Accepting new clients • https://harry.is/for-hire

ChatGPT screenshot showing a Wordle leaderboard. Of 27 games played, it shows that I’ve spent 103 total guesses (for an average of 3.81/game) to its 107 (3.96 average).
Harry Roberts presenting on stage at Developers Up North beside a large slide reading ‘that shouldn’t have been an spa’. Audience members are seated in the foreground while he speaks from behind a lectern with a laptop.
Harry Roberts presenting a web performance talk at LeedsJS, speaking beside a slide reading ‘build for the web, build on the web, build with the web’ during a talk on platform-first web development and modern front-end architecture.
/** * FONT-FAMILY * =========== * * font-family rules do not ‘inherit’ or fall back; they’re standalone * declarations. This means any emissions or errors in the current element’s * font-family declaration won’t fall back to a parent’s font-family, but to the * browser’s default for that element. * * This is why you’ll often see a flash of Times (New Roman) in place of * something more suitable. * * It’s vital that, in order to avoid layout shifts and unsightly fallbacks, you * should always specific a complete font stack for font-family rules, and not * just a single value. */ body { font-family: system-ui, sans-serif; } /** * INCORRECT * ========= * * While your custom web font is loading, the following does NOT fall back to * the parent’s font-family (system-ui/sans), but to the browser’s default font * family for this element (usually serif). */ h1 { font-family: Open Sans; } /** * CORRECT * ======= * * Delete the leading underscore. * * Now that we have a full font stack, the browser WILL fall back to * system-ui/sans while waiting on your custom font. No more flash of Times! */ h1 { _font-family: Open Sans, system-ui, sans-serif; }
Sunlit canal in The Hague with calm reflections, a white villa on the left, cyclists and parked bikes along the right-hand path, and a tram crossing a bridge in the distance under a clear blue sky
Me gazing longingly at Jeremy while he introduces me on stage at Web Day Out.
A photo of me on-stage taken from the vantage point of an audience member. I’m pulling a face that looks almost kind of lustful in a way. I’m actually glad you can’t see it—it isn’t flattering.
Jeremy Keith on stage introducing Web Day Out.
A small glass ramekin filled with a 2:1 salt:MSG mix. Behind it are a bag of MSG and a box of kosher salt.
A screenshot from gist.github.com showing the ability to clone a GUI-created Gist to your machine via SSH.
DevTools screenshot showing how an ::after pseudo element creates a reserved space in its parent, thus preventing it colliding with a nearby image.
Terminal screenshot of a git show for a commit titled “Fix stupid typo”. The same HTML change is displayed three ways: a normal unified diff, a word diff, and a regex-based word diff. Each shows corrections to meta tag image paths in demo/index.html, replacing /assets/og-image.png with /Obs.js/demo/assets/og-image.png
Screenshot of browser DevTools showing how adding `display: block` and some other cosmetic properties can not only make active <script>s visible, but actually become part of the documentation themselves.
A screenshot showing ‘Obs.js’ written in untreated, black Gotham Bold on the left. On the right, a modified, kerned, and coloured logotype showing soft rounding and adjusted letterforms. The centre of the ‘O’ contains a simplified ECG graph.
Screenshot of Chrome DevTools’ Performance panel showing a custom track titled ‘csswizardry.com — custom track’, with a nested group ‘Technical Timings’. Within the group are three visible timing bars labeled `headTime`, `cssTime`, and `contentTime`, each rendered as light purple horizontal spans. Below this custom track is the ‘Main’ thread track, displaying standard task activity.
A freshly baked lasagna in an orange enamel baking dish rests on a wooden countertop. The top is golden brown, blistered, and bubbling, showing a well-cooked, crispy cheese layer.
A neatly arranged workspace in an industrial-style office with exposed brick walls and a large window. The wooden desk holds a laptop on a stand, an external monitor displaying a forest wallpaper, a microphone on a boom arm, a keyboard, a mouse, and small speakers. A desk lamp, a black water bottle, a coffee cup, and a candle add to the setup. A black messenger bag hangs on the wall, while a construction crane is visible through the window, contrasting with the calm interior.
Screenshot of HTML demonstrating the potentially incorrect and correct use of the nofollow directive in the robots meta tag. The incorrect example (noindex, nofollow) is marked with a red cross, indicating it removes the page from the index and also prevents search engines from following internal links. The correct example (noindex) is marked with a green check, allowing bots to discover linked pages while still excluding the current page from search results.
Web performance metrics showing trends for Round-Trip Time (RTT), Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP) over several months. The data highlights increasing delays from November to February, with RTT at 280ms, TTFB at 3.2s, FCP at 3.9s, and LCP at 5.3s, indicating performance degradation.
Terminal screenshot showing useful Git commands and flags, including git add -p, git diff --cached, git commit --amend --no-edit, and various git diff options for whitespace, word-level, and character-level changes.
Black and white photo of Harry Roberts standing on a rock at Blackstone Edge, overlooking the landscape below.
Histogram and time-series chart of INP scores: A dashboard showing Interaction to Next Paint (INP) performance, with a headline figure of 175ms. A histogram at the top visualises the distribution of INP scores, where 78.4% of interactions are classed as good (≤200ms), 15.8% need improvement, and 5.8% are poor (>500ms). Below, a time-series bar chart displays month-by-month INP performance, showing significant improvement from poor scores in early months to predominantly good scores by the end of the year.
A screenshot of a Core Web Vitals report displaying charts for mobile and desktop URL performance. The mobile chart shows 788,526 good URLs, 0 URLs needing improvement, and 0 poor URLs as of 21 January 2025. A tooltip from 11 January 2025 highlights that there were 43,855 URLs needing improvement and 698,984 good URLs on that date. The desktop chart shows consistent performance with 788,523 good URLs, 0 URLs needing improvement, and 0 poor URLs over the same period. Both charts show steady improvements in performance over time.