Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan) header
Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan) profile picture

Brian Louis Ramirez – @[email protected]

@screenspan

Web Perf & Sustainable UX, born in California, made in Germany. Daddy. Loves music, songwriting, hiking and running. @screenspan@mastodon.green

 Bonn, Germany
screenspan.net
Joined May 2009
  • Tweets1.1K
  • Following412
  • Followers428
103Media
Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)Photo by Brian Louis Ramirez – @screenspan@mastodon.green (@screenspan)
The negatives of using Twitter are vastly outweighing the positives at the moment. I’ll be cruising at Mastodon for now. mastodon.green/@screenspan
2
I didn’t have a phone stand on hand, so I cut one out of an egg carton. #upcycling
Phone standing on its side in a phone stand cut out of an egg carton

ALT Phone standing on its side in a phone stand cut out of an egg carton

Top view of a phone leaning against a part of an egg carton that keeps eggs separate

ALT Top view of a phone leaning against a part of an egg carton that keeps eggs separate

An egg carton marked with a dotted line showing where to cut out to make a phone stand

ALT An egg carton marked with a dotted line showing where to cut out to make a phone stand

1
3
103
My colleague Andrea Verlicchi just posted a new blog post on how to improve #webperf Interaction to Next Paint (INP): speedkit.com/blog/enhancing-…
Enhancing web responsiveness: How to debug and avoid slow interactions

Enhancing web responsiveness: How to debug and avoid slow interactions

Web responsiveness is the measure of how quickly a website responds to user interactions, and it is crucial for providing a smooth and efficient user experience to your users.

speedkit.com
1
3
13
917
more replies
🍾 Inducing style recalculations by applying style changes to the document body
1
1
51
🍾 Executing too much UI-related JavaScript at once — even for elements that are not even within the viewport
1
49
Just finished a series of field tests to find out: Can we use CSS containment to improve rendering and interactivity on websites? If so, by how much can it push the needle on Core Web Vitals (LCP, INP, CLS)? speedkit.com/blog/field-test…
Field Testing CSS Containment for Web Performance Optimization

Field Testing CSS Containment for Web Performance Optimization

CSS Containment can help reduce the amount of rendering work the browser does when initially loading a page. But just how much can it improve performance?

speedkit.com
1
87
Heads up! Actionable Performance panel, with the power of Lighthouse. Find out more about Performance tooling in 2024 and beyond 👉 developer.chrome.com/blog/pe… #webperformance #ChromeDevTools
Performance tooling in 2024 and beyond | Blog | Chrome for Developers

Performance tooling in 2024 and beyond  |  Blog  |  Chrome for Developers

Learn about the Chrome team's plans to improve the Performance panel of DevTools.

developer.chrome.com
1
21
4
43
16,570
Brian Louis Ramirez – @[email protected] retweeted
Barry Pollard (@tunetheweb) profile picture
Barry Pollard@tunetheweb15 Mar 2024
We’re working on some big changes in the Chrome DevTools Performance Panel this year! You’re gonna see lots of changes and improvements. – at Cork, Ireland
Chrome DevTools (@ChromeDevTools) profile pictureChrome DevTools@ChromeDevTools15 Mar 2024
Heads up! Actionable Performance panel, with the power of Lighthouse. Find out more about Performance tooling in 2024 and beyond 👉 developer.chrome.com/blog/pe… #webperformance #ChromeDevTools
Performance tooling in 2024 and beyond | Blog | Chrome for Developers

Performance tooling in 2024 and beyond  |  Blog  |  Chrome for Developers

Learn about the Chrome team's plans to improve the Performance panel of DevTools.

developer.chrome.com
5
5
1
46
5,377
My colleague @fabkru just landed 🚀 an excellent explanation of Google‘s new metric of responsiveness, Interaction to Next Paint (INP), and why it’s important. You can also check your INP at inp-check.com
4
220
You're experiencing slowness, and the timeline shows long purple segments (layout/style)? reserve time in the next sprint to explore how CSS containment works and if it can be beneficial to your use case. developer.mozilla.org/en-US/…
Using CSS containment - CSS | MDN

Using CSS containment - CSS | MDN

CSS containment improves the performance of web pages by allowing the browser to isolate a subtree of the page from the rest of the page. If the browser knows that a part of the page is independent...

developer.mozilla.org
2
5
24
1,779
Announcement is here! INP will officially become a Core Web Vital on March 12.
Chrome for Developers (@ChromiumDev) profile pictureChrome for Developers
@ChromiumDev31 Jan 2024
A better way to measure interaction responsiveness is coming to Core Web Vitals! On March 12 Interaction to Next Paint (INP) will become one of the three essential metrics to delivering great UX on the web Start here to learn more and get prepared 👇 web.dev/blog/inp-cwv-march-1…
Interaction to Next Paint becomes a Core Web Vital on March 12 | Blog | web.dev

Interaction to Next Paint becomes a Core Web Vital on March 12  |  Blog  |  web.dev

Interaction to Next Paint will officially become a Core Web Vital and will replace First Input Delay on March 12

web.dev
1
8
1
32
7,703
💪🏽 Extending the life of servers not only makes good $$$ sense, it also is best-practice #techsustainability theregister.com/2024/01/31/a…
Alphabet banked $3.0 billion by stretching servers lifespan

Alphabet banked $3.0 billion by stretching servers lifespan

Q4 results reveal AI is the answer to – or the reason for – everything: a cloud profit, wobbly ads, boosting subscriptions

theregister.com
1
49
Join us for the 11ty International Symposium on Making Web Sites Real Good (We are running a conference in May 2024!) conf.11ty.dev/
11ty’s International Symposium on Making Web Sites Real Good

11ty’s International Symposium on Making Web Sites Real Good

We’re running a conference — this is an 11ty Conference!

conf.11ty.dev
2
9
4
38
5,083
It pays to inspect your website's CPU usage in Safari to improve #webperf and reduce energy usage. Here I spotted recurring rendering work due to infinite animations. After removing those using local overrides, I could see energy use drop. #100DaysOfPerf
CPU timeline showing repeating layout and rendering work, causing medium to high energy usage

ALT CPU timeline showing repeating layout and rendering work, causing medium to high energy usage

CPU timeline showing low energy usage after removing infinite animations

ALT CPU timeline showing low energy usage after removing infinite animations

2
3
11
757
Excellent tutorial from WWDC19 at developer.apple.com/videos/p…
Understanding CPU Usage with Web Inspector - WWDC19 - Videos - Apple Developer

Understanding CPU Usage with Web Inspector - WWDC19 - Videos - Apple Developer

As a developer of web content, you play an important role in fulfilling customer expectations for a high performance web experience while...

developer.apple.com
1
48
Brian Louis Ramirez – @[email protected] retweeted
Andrea Verlicchi (@verlok) profile picture
Andrea Verlicchi@verlok24 Jan 2024
If a 3rd party injects an overlay with its own style element in a page, when users click to close the overlay, if the DOM node is removed instead of hidden, a big reflow is generated, therefore #INP increases. Difference attached. #100DaysOfPerf #WebPerf #WebVitals #PageSpeed
Image from Andrea Verlicchi (@verlok)
Image from Andrea Verlicchi (@verlok)
1
4
175
Glad to share this by my colleague Theo!
Stoyan Stefanov 🪩 (@stoyanstefanov) profile pictureStoyan Stefanov 🪩@stoyanstefanov14 Dec 2023
🪩 Web Performance calendar day 13 🔗 calendar.perfplanet.com/2023… 🌲 Theo Bajusz on Declarative Shadow DOM

Declarative Shadow DOMs: Bridging the Gap Between Components and Performance

tl;dr: The Declarative Shadow DOM is a novelty in standardization which enables the server-side rendering of web components. This approach, in contrast to the traditional JS-based Shadow DOM, reduces...

calendar.perfplanet.com
3
134
Perfplanet calendar article pipeline is almost dry. If you thought about writing an article, now's the time. If you didn't plan, now's a great time to think about what you'd like to share with fellow #webperf enthusiasts. Details: calendar.perfplanet.com/cont… and I'm here for any...
Contribute

Contribute

Passionate about a topic? Working on a new tool? Have a technique you want to teach? Research you've done? Tell the web performance community! Send your articles to [email protected]. Please include:...

calendar.perfplanet.com
3
13
16
4,053
🪩 Web Performance calendar day 10 🔗 calendar.perfplanet.com/2023… 💻 @soulislove presents a CPU benchmark used by @Wikipedia to estimate the power of the devices people use 📉 see the results in USA, India and South Africa and dig deeper into the open data
Wikipedia's Worldwide Web: CPU benchmark

Wikipedia's Worldwide Web: CPU benchmark

Many years ago my former colleague Gilles Dubuc wanted to know if Wikipedia users' performance gets faster over time so he added a new metric: The CPU Benchmark. Essentially it's a JavaScript loop...

calendar.perfplanet.com
1
12
1
23
4,306
So honored to kick off this year's Web Perf Calendar! 🤩Improving web responsiveness is tricky: bottlenecks can arise from first-party and/or third-party code. I honestly love the new INP metric and look forward to more refined field measurements with INP attribution and LoAF. 🤹🏽‍♂️
Stoyan Stefanov 🪩 (@stoyanstefanov) profile pictureStoyan Stefanov 🪩@stoyanstefanov1 Dec 2023
Say hello to the 2023 Web Performance Calendar! In the first article @screenspan shares the results of an analysis of RUM data on over 780 e-commerce sites and shows which common patterns make INP the worst on product category pages calendar.perfplanet.com/2023…
Sluggish CATs: Category Pages Have the Worst Responsiveness (INP) on e-Commerce Sites

Sluggish CATs: Category Pages Have the Worst Responsiveness (INP) on e-Commerce Sites

An analysis of Speed Kit RUM data on over 780 e-commerce websites shows: INP is worst on product category pages (AKA "product listing pages"). Several common patterns are responsible for sluggish...

calendar.perfplanet.com
1
13
1,249
Load more