Tailwind vs Linaria: Performance Investigation
Investigating performance of Tailwind vs Linaria frameworks, with a focus on initial load and interaction performance. What's your position on Tailwind? Love or hate? Seems to be no in-between for that one. Even if you've never used it, you probably heard of it by now. It's the second most popular UI framework out there after all, and the source of lots of hype in certain corners of the internet.
The Two Lines of CSS That Tanked Performance (120fps to 40fps)
The Two Lines of CSS That Tanked Performance (120fps to 40fps) First published: 22/08/2024 I recently released Learn WCs. If you’ve seen it, you’ve likely noticed the animation in the background, where the coloured circles move diagonally across the screen. It looks like this: It works nicely on Chrome and Safari, but I noticed a severe drop in performance on Firefox. You might not be able to see
GitHub - kurtextrem/awesome-performance-patches: 🚀⚡ Awesome list about performance related patches/PRs.
fabian-hiller/valibot - convert Set to Array pnpm - convert objects to Set and Map preact/signals - convert Set to Linked Lists, adds lazy value evaluation TanStack/table - replace immutable spread calls with mutable arrays | blog post rollup - replace Set with BigInt | Mastodon explainer parcel-bundler/parcel - convert graph to array of BitSets, avoid new calls, Uint32Array + Wasm instead of BigI
The truth about CSS selector performance
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article. Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance. A quick look behind the scenes The way you write CSS selectors does play a role i
My talk on CSS runtime performance
17 Jan My talk on CSS runtime performance Posted January 17, 2023 by Nolan Lawson in performance, Web. 3 Comments A few months ago, I gave a talk on CSS performance at performance.now in Amsterdam. The recording is available online: (You can also read the slides.) This is one of my favorite talks I’ve ever given. It was the product of months (honestly, years) of research, prompted by a couple ques
Find the most expensive CSS selectors
When it comes to improving web rendering performance, we often spend time working on JavaScript code. But CSS has an important role to play too in how fast a web page renders. CSS selectors, in particular, can sometimes be slow for the browser engine to match to the DOM of the page, and this can become a big problem when the web page has a large DOM tree, a lot of CSS rules, and where the DOM chan
CSS me not
Stoyan Stefanov (@stoyanstefanov) is an ex-Facebook and Yahoo! engineer, writer ("JavaScript Patterns", "React: Up and Running"), speaker (JSConf, Velocity, Fronteers), toolmaker (Smush.it, YSlow 2.0) and a guitar hero wannabe. Happy 25th birthday CSS! Yes, today marks 25th year of CSS’ existence. Source. Contrary to what some may have you believe, CSS is not the worst. CSS is lovely, CSS is empow
Don't attach tooltips to document.body
09 Mar, 2021 TL;DRInstead of attaching tooltips directly to document.body, attach them to a predefined div in document.body. BAD <body> <!-- temporary div, vanishes when tooltips vanishes --> <div>my tooltip</div> <body> <body> <!-- this div stays forever, just for attaching tooltips --> <div id="tooltips-container"> <!-- temporary div, vanishes when tooltips vanishes --> <div>my tooltip</div> </d
How to Eliminate Render-Blocking Resources: a Deep Dive
You might be here because Lighthouse told you to "eliminate render-blocking resources". Render-blocking resources are a common hurdle to rendering your page faster. They impact your Web Vitals which now impact your SEO. Slow render times also frustrate your users and can cause them to abandon your page. I worked with one client to reduce their render-blocking resources and improved their site load
Real-world CSS vs. CSS-in-JS performance comparison
CSS-in-JS has taken a solid place in front-end tooling, and it seems this trend will continue in the near future. Especially in the React world. For example, out of 11492 people who participate in State of CSS survey in 2020 only 14.3% didn’t hear of Styled Components (a dominant CSS-in-JS library). And more than 40% of participants have used the library. I wanted to see an in-depth performance co
content-visibility: the new CSS property that boosts your rendering performance | Articles | web.dev
Published: August 5, 2020 The content-visibility property enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, using the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content. Prett
Optimizing CSS for faster page loads
Not long ago I decided to improve the loading times of my website. It already loads pretty fast, but I knew there was still room for improvement and one of them was CSS loading. I will walk you through the process and show you how you can improve your load times as well. Why loading time matters? Permalink to “Why loading time matters?” # Because Time is money. That proverb is especially true for
Rebuilding our tech stack for the new Facebook.com
Facebook.com launched in 2004 as a simple, server-rendered PHP website. Over time, we’ve added layer upon layer of new technology to deliver more interactive features. Each of these new features and technologies incrementally slowed the site down and made it harder to maintain. This made it harder to introduce new experiences. Features like dark mode and saving your place in News Feed had no strai
CSS and Network Performance – CSS Wizardry
9 November, 2018 CSS and Network Performance Written by Harry Roberts on CSS Wizardry. Table of Contents Independent writing is brought to you via my wonderful Supporters. What’s the Big Problem? Employ Critical CSS Split Your Media Types Avoid @import in CSS Files Beware @import in HTML Firefox and IE/Edge: Place @import before JS and CSS in HTML Blink and WebKit: Wrap @import URLs in Quotes in H
dassur.ma
We’re getting things ready Loading your experience… This won’t take long.
Debugging CSS Performance with Chrome’s Profiling Tools - Ada Developers Academy
This is the story of how I found and fixed a performance problem in a React webapp. I've debugged many slow programs but never in the context of the web, so this was a great opportunity to experiment with the tools and grow my skill set. My problem turned out to be particularly tricky to analyze, but with the help of Chrome's performance tools, some manual profiling and a careful scientific approa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/sebmarkbage/status/1529622371333709825
Get Your Head Straight
Resource inlining in JavaScript frameworks | Aurora | Chrome for Developers
Web Speed Hackathon Online 出題のねらいと解説
