JPEG XL and the Pareto Front
Version 0.10 of libjxl, the reference implementation for JPEG XL, has just been released. The main improvement this version brings, is that the so-called “streaming encoding” API has now been fully implemented. This API allows encoding a large image in “chunks.” Instead of processing the entire image at once, which may require a significant amount of RAM if the image is large, the image can now be
Common misconceptions about how to optimize LCP | Blog | web.dev
For this post, we used data from page navigations with a subresource image LCP in Chrome to take a look at the LCP sub-parts. We've looked at this kind of data before, but never from field data to see where real users are spending their time while waiting for a page's LCP. Like with Core Web Vitals, we took the 75th percentile (p75) of each LCP sub-part for each origin in the CrUX dataset, resulti
blocking=render: Why would you do that?! – CSS Wizardry
WebKit have recently announced their intent to implement the blocking=render attribute for <script> and <style> elements, bringing them in line with support already available in Blink and generally positive sentiment in Firefox. The blocking=render attribute allows developers to explicitly mark a resource as render blocking, but… why on earth would you want to do that?! The short answer is: genera
How To Hack Your Google Lighthouse Scores In 2024 — Smashing Magazine
Do perfect Lighthouse scores mean the performance of your website is perfect? As it turns out, Lighthouse is influenced by a number of things that can be manipulated and bent to make sites seem more performant than they really are, as Salma Alam-Naylor demonstrates in several experiments. This article has been kindly supported by our dear friends at Sentry.io, who help developers see what actually
制約のない `:has()` のパフォーマンス計測
CSS の :has() が全ブラウザで使えるようになって久しいですが、その特性上パフォーマンス上の問題には注意したいところです。 とくに *:has(.foo) のように全称セレクターを使うなどして制約のない要素を対象にした場合は顕著にパフォーマンスが悪化するので、できるだけ避けるべきでしょう。このような「制約のない :has()」はたとえば以下のパターンがあります。 :has(.foo) *:has(.foo) .bar:has(*) これらのセレクターを使用すると、Firefox のインスペクターでは亀のアイコンによる警告メッセージが表示されるのですが、わざわざインスペクターを開き当該要素を選択する必要があるため、なかなか気付きにくいものと思います。 Firefox のインスペクターで :has(.foo) を選択し、ツールチップでこのセレクターは制約のない :has() を使用して
Web Performance Guide | SpeedCurve
New to the world of web performance? Welcome! Here's everything you need to know to master website monitoring, analytics, and diagnostics. Learn how to deliver a fast, joyous experience to all your users. Business Success Making your pages faster isn't just for the web performance geeks in your organization. Site speed affects every business metric you care about – from bounce rate to conversions
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証 | フロントエンドBlog | ミツエーリンクス
containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。 これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。 ブロック内に3つの要素を設置します。 1つ目の要素は、position: fixed;を設定して相対的な配置にします。 2つ目の要素は、flo
Optimizing Javascript for fun and for profit
I often feel like javascript code in general runs much slower than it could, simply because it’s not optimized properly. Here is a summary of common optimization techniques I’ve found useful. Note that the tradeoff for performance is often readability, so the question of when to go for performance versus readability is a question left to the reader. I’ll also note that talking about optimization n
capo.js: get your ﹤𝚑𝚎𝚊𝚍﹥ in order
Why it matters How you order elements in the <head> can have an effect on the (perceived) performance of the page. Capo helps you identify which elements are out of order. How to use it Install the Capo Chrome extension OR: Copy capo.js Run it in a new DevTools snippet, or use a bookmarklet generator Explore the console logs For applications that add lots of dynamic content to the <head> on the cl
Interaction to Next Paint is officially a Core Web Vital 🚀 | Blog | web.dev
Interaction to Next Paint is officially a Core Web Vital 🚀 Stay organized with collections Save and categorize content based on your preferences. Interaction to Next Paint is now a stable Core Web Vital metric, replacing First Input Delay. Today's the day! After years of work, we're finally ready to make Interaction to Next Paint (INP) a stable Core Web Vital metric. This marks a significant step
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Layers and Compositing
How to Select the Best Image Format for Your Website
Why you should be testing your 404 pages web performance - Matt Hobbs
Long Animation Frames API | Web Platform | Chrome for Developers
How Deep is Your DOM? | Frontend at Scale
Investigating INP issues
Render-blocking on purpose
Identifying Font Subsetting Opportunities with Web Font Analyzer
Yellow Lab Tools
We're Bringing Responsive Video Back! | Scott Jehl, Web Designer/Developer