重い lint ルールを特定しよう！TIMING オプションで ESLint 実行速度改善
こんにちは，株式会社 AbemaTV Web browser チームの山﨑です． 私たちのプロダクトでは JavaScript や TypeScript などの静的解析ツールである ESlint を CI で活用しています．しかし，ESlint の実行が不安定になっており開発速度や開発者体験が低下している問題が発生していました．具体的には， eslint を実行している CircleCI のインスタンスクラスを large にしても，job の失敗率が 50% を超えてしまっているような状態でした． この問題を解決すべく，eslint のルール毎の実行時間を計測する TIMIMG オプションを活用することでボトルネックとなっていたルールの特定・精査を行いました． 今回の記事では，不安定だった CI 上での ESlint 実行を TIMIMG オプションを活用し安定化させるに至った話をします
Brand New Performance Features in Chrome DevTools | DebugBear
This guide covers some modern web performance features of Chrome DevTools, with a focus on the new Performance Panel features which helps you optimize Core Web Vitals and improve your general web performance. What We'll Cover In this guide, we'll dive deep into the new Performance Panel features in Chrome DevTools. We'll explore what the new features are, how to access it, and how to use it effec
The Ultimate Guide to Font Performance Optimization | DebugBear
Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more. Optimizing the fonts displayed on your website comes with many web performance advantages, includin
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
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
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Boost
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript July 29, 2024 I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief OverviewWhen you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer
Mastering Node.js Performance Hooks
Node.js includes a built-in module called performance hooks for precise performance measurement. But why use it when you can simply log timestamps and calculate the difference between two dates? At least because it is precise. The module uses a monotonic clock that allows you, as a user, to make performance measurements and be sure that they are not corrupted. At first, I struggled to understand h
Optimizing WebKit & Safari for Speedometer 3.0
Apr 10, 2024 by Alan Baradlay, Antti Koivisto, Matt Woodrow, Patrick Angle, Ryosuke Niwa, Vitor Ribeiro Roriz, Wenson Hsieh, and Yusuke Suzuki The introduction of Speedometer 3.0 is a major step forward in making the web faster for all, and allowing Web developers to make websites and web apps that were not previously possible. In this article, we explore ways the WebKit team made performance opti
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
DORA Metrics At Work
sourceImagine your team secured a budget for doubling the number of software engineers. That’s great! You can finally fix all the bugs, implement new ideas, and clean up all the technical debt that’s been accumulating for years. Right? Wait, wait… Not so fast. First, it will take time to hire new software engineers and onboard them. They’ll need to learn the product domain, deep dive into the tech
Speedometer 3.0: The Best Way Yet to Measure Browser Performance
As announced on browserbench.org today, in collaboration with other browser engine developers, Apple’s WebKit team is excited to introduce Speedometer 3.0, a major update that better reflects the Web of today. It’s built together by the developers of all major browser engines: Blink, Gecko, and WebKit with hundreds of contributions from companies like Apple, Google, Intel, Microsoft, and Mozilla.
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
Million Lint is in public beta | Million.js
Million Lint is in public betaAiden Bai (opens in a new tab), John Yang (opens in a new tab), Nisarg Patel (opens in a new tab) – February 29, 2024 It’s launch time. After three months and hundreds of commits, we invite you to try out Million Lint. The experience is not finished – there are a few known bugs and several missing features – but we are really happy with how it's shaping up and couldn'
3Dモデルの配信サーバーでRustとZstandardを採用して数倍のパフォーマンス向上を実現した - pixiv inside
はじめに こんにちは、VRoid部所属のエンジニアのyueです。 この度VRoid Hubで3Dモデルの配信サーバーの見直しを行い、技術選定から始めRustとZstandard (zstd)を採用した実装に切り替えました。 結論から見るに従来のNode.js製サーバーと比べて以下のことを実現しました。 最大のレスポンス時間が 1.5 ~ 2.5s から 300 ~ 400msまで低下 平均のレスポンス時間が 700 ~ 800ms から 150 ~ 200msまで低下 サーバーのCPU使用率が ~ 50% から ~ 10%まで低下 docker image のサイズが ~ 346mb から ~ 21mb程度まで削減 配信されるファイルサイズが平均 10 ~ 20% 軽量化されました レスポンス時間 CPU使用量 (上からAVG(MAX), AVG, AVG(MIN)) メモリー使用量に関し
ソフト ナビゲーションの測定実験 | Web Platform | Chrome for Developers
Core Web Vitals イニシアチブは発足以来、ウェブサイトの作成方法や読み込み方法の技術的な詳細ではなく、ウェブサイトの実際のユーザー エクスペリエンスを測定することを目指してきました。Core Web Vitals の 3 つの指標はユーザー中心の指標として作成されました。DOMContentLoaded や load などの既存の技術指標から進化したものであり、ユーザーがページのパフォーマンスを認識する方法とは無関係なタイミングを測定していました。そのため、サイトの構築に使用されているテクノロジーがスコアに影響を与えることはありません。 現実は常に理想よりも少し複雑であり、一般的なシングルページ アプリケーション アーキテクチャは、Core Web Vitals の指標によって完全にサポートされているものではありません。これらのウェブ アプリケーションでは、ユーザーがサイト内
The Performance Inequality Gap, 2024 - Infrequently Noted
The global device and network situation continues to evolve, and this series is an effort to provide an an up-to-date understanding for working web developers. So what's changed since last year? And how much HTML, CSS, and (particularly) JavaScript can a new project afford? The Budget, 2024 JavaScript-Heavy Markup-Heavy Calculate Your Own Situation Report Mobile Desktop Takeaways The Great Branch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Performance tooling in 2024 and beyond | Blog | Chrome for Developers
Booking.com Doubles Delivery Performance Using DORA Metrics and Micro Frontends
The Golden Rule of Web Performance and Different Performance Engineering Specializations
Chrome Tracing for Fun and Profit - Slack Engineering