Joan León
LightNews LightNews
banner
nucliweb.net
Joan León
@nucliweb.net
1.7K followers 460 following 440 posts
⚡️ Web Performance Artisan at @perf.reviews | Google Dev Expert in Web Tech | Cloudinary Ambassador | ❤️ Image Optimization | Girona
Posts Replies Media Videos
nucliweb.net
📣 New in Web Performance!

We can now use the WebPerf Snippets for LCP & INP in Safari Technology Preview

This allows us to measure 2 of the most critical Core Web Vitals metrics directly within Apple's browser

Time to test!

webperf-snippets.nucliweb.net

#WebPerf #Safari #CoreWebVitals #LCP #INP
Screenshot showing the WebPerf Snippets website section for Interactions (INP). The browser console, highlighted in red, displays the detailed output of an interaction tracking snippet, listing the Input delay, Processing time, and Presentation delay for multiple mouse events, along with a "good" score validation. Screenshot showing the WebPerf Snippets website section for Largest Contentful Paint Sub-Parts (LCP). The browser console output is highlighted, showing the breakdown of the LCP metric (915 ms) into its four key components: Time to first byte, Resource load delay, Resource load time, and Element render delay, including the time in milliseconds and the percentage of the total LCP time for each sub-part. Screenshot showing the WebPerf Snippets website section for Largest Contentful Paint (LCP). The browser console output is highlighted, displaying the calculated LCP value (915 ms) and details of the Largest Contentful Paint element, including its URL, size, and load time.
November 10, 2025 at 8:25 AM
nucliweb.net
Debugging de INP: Del 'algo va lento' al 'esto es lo que lo rompe'

Ahora nos enfrentamos a la tarea más importante: entender qué es lo que está causando esos frames lentos y, en última instancia, rompiendo nuestro INP.

joanleon.dev/posts/loaf/d...

#WebPerf #INP #LoAF #Performance
Diagrama comparativo que muestra dos líneas de tiempo superpuestas. La primera línea, etiquetada como Evento, tiene una duración de 250 milisegundos y está representada con una barra discontinua naranja. Debajo, la segunda línea, etiquetada como LoAF, muestra una duración de 200 milisegundos, también con una barra discontinua naranja que se solapa parcialmente con la superior. Debajo de ambas líneas aparece una flecha apuntando hacia arriba acompañada del texto: “Se superponen → están relacionados”, indicando que los dos eventos se solapan en el tiempo y por tanto están vinculados.
November 6, 2025 at 1:07 PM
nucliweb.net
I use several tools to debug and monitor web performance. One of them is @debugbear.com, which helps me track and alert on performance issues — like the one shown here.

If you care about performance, I recommend giving @debugbear.com a try.

#WebPerf #PerfTools #Performance #monitoring
Screenshot of an email alert from DebugBear titled “Change alert for [redacted]”. The email, addressed to Joan Leon, reports a performance issue with the message “Total Blocking Time: 150 ms → 2,010 ms,” highlighted in a red rectangle. The email includes links to “View Details,” “Unsubscribe from notifications for this project,” and “Configure alert criteria.”
November 6, 2025 at 10:08 AM
nucliweb.net
Fundamentos de Long Animation Frames API

Descubre cómo Long Animation Frames API (LoAF) resuelve el mayor problema al debuggear INP: saber exactamente qué código causó una interacción lenta. Fundamentos, código práctico y conceptos clave

joanleon.dev/posts/loaf/f...

#WebPerf #INP #PerfTools #LoAF
Tabla titulada “Qué te da LoAF que otras herramientas no”. Compara cuatro herramientas —Event Timing, Long Tasks, DevTools y LoAF— según distintos tipos de información. Las filas y columnas muestran lo siguiente: • Fila 1 (Encabezados): • Información • Event Timing • Long Tasks • DevTools • LoAF • Fila 2: • Nombre de función • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ✅ • LoAF: ✅ • Fila 3: • Archivo o URL del script • Event Timing: ❌ • Long Tasks: ⚠️ Limitado • DevTools: ✅ • LoAF: ✅ • Fila 4: • Tiempo de forced layout • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ⚠️ Manual • LoAF: ✅ • Fila 5: • Disponible en producción • Event Timing: ✅ • Long Tasks: ❌ • DevTools: ❌ • LoAF: ✅ • Fila 6: • Attribution automática • Event Timing: ❌ • Long Tasks: ❌ • DevTools: ⚠️ Manual • LoAF: ✅ En resumen, la tabla destaca que LoAF ofrece todas las funcionalidades, mientras que las demás herramientas presentan limitaciones parciales o carecen de ciertas capacidades
November 5, 2025 at 10:50 AM
nucliweb.net
I love the @stickerapp.bsky.social’s instructions 🤣
A humorous sticker instruction sheet on a light blue background with four sections. Top left shows 'Reaction when opening sticker pack' with YES (excited person with hands together) and NO (person with arms crossed). Top right shows 'Handling of stickers' with YES (person carefully peeling sticker) and NO (person taking selfie). Bottom left shows 'Placement of stickers' with YES (person without hard hat holding sticker folder) and NO (person wearing hard hat on construction site). Bottom right shows 'Applying stickers' with YES (sticker on parking sign post) and NO (sticker on speed limit sign). Text at bottom reads 'KEEP THIS - DO NOT EAT'.
November 4, 2025 at 5:12 PM
nucliweb.net
November 4, 2025 at 5:12 PM
nucliweb.net
New stickers for the WebPerf Snippets project

webperf-snippets.nucliweb.net

#WebPerf #WebPerfSnippets #PerfTools
A collection of white rounded rectangular stickers displaying 'WebPerf Snippets' text in a gradient from blue to teal. Seven stickers are fanned out in a cascading arrangement on a dark gray textured surface, with one sticker placed separately to the right.
November 4, 2025 at 5:12 PM
nucliweb.net
"0 kB of JavaScript is not a feature" - @rich-harris.dev

#perfnow #WebPerf
A speaker is presenting at the performance.now() 2025 conference in front of an audience. The slide behind them reads “0 kB of JavaScript is not a feature,” with the second line highlighted in red.
October 31, 2025 at 4:58 PM
nucliweb.net
"SSR is about ~SEO~ performance" - @rich-harris.dev

#perfnow #WebPerf
A speaker is presenting at the performance.now() 2025 conference in front of a large audience. The slide projected behind them reads “SSR is about SEO performance,” with “SEO” crossed out and “performance” emphasized in red.
October 31, 2025 at 4:32 PM
nucliweb.net
Huge thanks to @andydavies.me for mentioning the LoAF Helpers WebPerf Snippet at @perfnow.nl!

Honored to be part of the amazing Web Performance community 🫶

🔗 webperf-snippets.nucliweb.net/Interaction/...

#WebPerf #PerfNow #Performance #LoAF #INP #CoreWebVitals
A speaker stands on stage at the Performance.now() 2025 conference, presenting a slide titled “LoAF Helpers: Advanced Debugging in DevTools.” The slide displays details about WebPerf Snippets and a highlighted URL link. The audience is seated in front of the stage, watching the presentation.
October 31, 2025 at 10:21 AM
nucliweb.net
This year, I’m following @perfnow.nl online.

To all attendees, enjoy it! ☺️

#perfnow #WebPerf
Joan Leon, wearing headphones and glasses, sits at a computer desk smiling at the camera. On the monitor in front of him, a livestream of the Performance Now conference is playing, showing a presenter on stage. The desk includes a keyboard, mouse, microphone, small figurines, and a laptop displaying notes.
October 30, 2025 at 8:50 AM
nucliweb.net
I saw it last year 😉
A poster displayed behind glass advertising a performance titled “I’M A ROBOT AND I NEED THERAPY.” The design mimics computer programming code, including lines like import {Marina Orlova} from "EIAI_Institute"; and performer.ai.mentalState = "unstable";. It announces show dates of 13–14 November at 20:00, located at “Frascati 4.” The background features a person with curly hair, fur clothing, and a contemplative expression, holding their hands near their head. Logos for “IDlab” and “Creative Industries” appear on the right side of the poster.
October 29, 2025 at 4:05 PM
nucliweb.net
Hey @developer.chrome.com, time to print a new sticker for my laptop 😎💻
Chrome DevTools User icon
October 24, 2025 at 1:45 PM
nucliweb.net
Cooking up a new #WebPerf snippet using the Long Animation Frame (LoAF) API

Great for debugging jank and improving smoothness!

Stay tuned 👀

#Performance #PerfTools #CoreWebVitals #INP #LoAF
Screenshot of Chrome DevTools showing a JavaScript snippet named “LoAF Helpers” in the Sources panel. The snippet provides debugging helpers for the Long Animation Frames API with usage instructions and function examples. On the right, the Console panel displays logs indicating “LoAF Helpers Loaded” and a summary report from loafHelpers.summary() showing metrics such as total frames (2), total blocking time (422.10ms), average duration (211.05ms), and frame severity levels (critical, high, medium, low).
October 23, 2025 at 9:57 AM
nucliweb.net
"When a user interacts with the page, those interactions should be as fast as possible"

#WebPerf #Performance #INP #UX
When a user interacts with the page, those interactions should be as fast as possible
October 20, 2025 at 6:09 PM
nucliweb.net
After three years attending @perfnow.nl in person — the leading conference in the Web Performance community — this year I’ll be joining online.

Huge thanks to the organizers for building such an inspiring community, full of talent, inclusion, collaboration, and friendship!

#WebPerf #Perfnow
Promotional graphic for performance.now(), the web performance conference held online and in Amsterdam on the 30th and 31st of October, 2025. The design features the conference name “performance.now()” in large text, with details explaining that it’s a single-track event focused on modern web performance topics like JavaScript and CSS performance, performance culture, budgets, monitoring, and post-Core-Web-Vitals strategies. The bottom text reads: “Joan, you’re all set to attend performance.now() – we’ll see you here 30th and 31st of October, 2025.” The background is a gradient of dark to light purple.
October 17, 2025 at 9:56 PM
nucliweb.net
Collecting the first INP data from Firefox 144 🤩

#WebPerf #INP #CoreWebVitals #Performance #Firefox #PerfTools
Screenshot of the DebugBear performance monitoring dashboard showing Interaction to Next Paint (INP) metrics filtered for Firefox on desktop. The main metric shows an INP value of 336 milliseconds, categorized as “Needs Improvement.” A tooltip on a trend chart indicates that on October 15, 2025, the INP rating was “Needs Improvement” with one view and 50% of interactions affected. A world map highlights data from a region in Europe.
October 14, 2025 at 10:23 PM
nucliweb.net
New Web Performance challenge, improve the INP and LCP of this Web App.

Interaction to Next Paint
🟥 920ms in desktop
🟥 1800ms in mobile

Largest Contentful Paint
🟩 2.33s in desktop
🟥 4.13s in mobile

#WebPerformance #CoreWebVitals #INP
September 29, 2025 at 10:23 AM
nucliweb.net
#TIL You can sent multiple Server-Timing headers
Screenshot of HTTP response headers showing three Server-Timing entries: cfCacheStatus with value HIT, cfOrigin with duration 0 and cfEdge with duration 18, and cfExtPri with no value.
September 9, 2025 at 10:57 AM
nucliweb.net
#WebPerfTip

If you need a GitHub Action to automatically compresses JPEGs, PNGs and WebPs in pull requests, IMHO this is the best option

#WebPerf #ImagePerf #PerfTools #Image
GitHub Actions bot comment showing that images were automatically compressed by Calibre’s image-actions. The comment reports a 47.1% reduction in image size, saving 104.46 KB. A table displays one example file (‘Screen Shot 2020-09-17 at 3.29.33 pm.png’) reduced from 221.87 KB to 117.41 KB. It notes that 348 images did not require optimisation, and includes a ‘View diff’ link for visual comparison.
August 25, 2025 at 9:29 AM
nucliweb.net
Do you have a website with international visitors?

Check the Time to First Byte (TTFB) from different locations, and create a plan to improve it if your visitors are having a bad experience.

Start testing today, links in the first comment.

#WebPerf #PerfTools #Performance #TTFB
August 21, 2025 at 10:05 AM
nucliweb.net
🔍 Found in a recent web performance audit:
favicon.ico → 301 redirect → broken URL → returns 13 MB uncompressed HTML

⚠️ Even tiny assets can slow your site if misconfigured.
Check static files (favicon, images, CSS, JS) — small issues add up

#WebPerf #WebPerformance #Frontend #DevTips
A screenshot of a web browser's developer tools, specifically the network tab, showing the details of a network request for a "favicon.ico" file. The view is split into two main sections. The left section, under the "Request" heading, details the HTTP GET request, including the URL https://www.**********/favicon.ico (with the domain name obscured). The right section, under the "Response" heading, shows the server's response details. The highlighted information includes "Status: 200", "Transmitted Size: 1.19 MB", "Full Size: 13.0 MB", "Content Type: text/html; charset=utf-8", and "Request Duration: 3.46 s".
August 14, 2025 at 5:45 PM
nucliweb.net
📉 E-commerce site with LCP > 6s, INP > 2800ms, CLS > 1.1
Broken UX = lost sales.

💡 Performance isn’t just for devs.
It’s key to convert, retain, and grow.

Is your site fast enough to keep up with your customers?

#WebPerf #UX #CRO #eCommerce
Performance metrics from a web performance tool showing results for a mid-tier mobile device with a fast 4G network. The metrics are divided into Local and Field (URL) data. Under the Local tab: LCP (Largest Contentful Paint) is 3.59 seconds, INP (Interaction to Next Paint) is 319 milliseconds, and CLS (Cumulative Layout Shift) is 0.91. Under the Field (URL) tab: LCP is 6.19 seconds, INP is 2827 milliseconds, and CLS is 1.16. All values are highlighted in red or orange, indicating poor performance.
August 7, 2025 at 7:41 PM
nucliweb.net
Two-panel meme. In the first panel, a “Designer” character is secretly handing an “SVG” file to a “Developer” during a test. In the second panel, the developer looks frustrated while staring at a long block of embedded base64 image code inside the SVG file. The humor highlights the pain of receiving an SVG file that contains large, unreadable base64 image data instead of clean vector code.
July 15, 2025 at 5:52 PM
nucliweb.net
#WebPerfTip Avoid embedding raster images directly in SVGs

ℹ️ In this case, the image is a vector graphic

#WebPerf #Perfomance #WPO #ImagePerf
Screenshot of an SVG file that includes an embedded image using base64 encoding. The image is inserted directly within the <image> tag using the xlink:href attribute, rather than linking to an external file. This means the entire image is stored inside the SVG as base64 data.
July 15, 2025 at 5:52 PM