Progressive Storyboards
Sergey Chernyshev (@sergeyche) is web performance enthusiast, open source hacker and web addict. He organizes New York Web Performance Meetup Group, local community of web performance geeks in New York and helps kick-start local groups about Web Performance around the world. Sergey volunteers his time to run @perfplanet twitter companion to PerfPlanet site. He often speaks on performance-related t
Blur Busters TestUFO Motion Tests. Benchmark for monitors & displays.
The world's most popular display testing website. Faster 🚀 + More Secure 🔒 + More Mobile Friendly 📱 + Better HDR Color Support 🌈 + Pixel Scaling 🔎 + WebGL Shaders 🎨 To enable improved HDR color gamut support in Chrome/Edge 110+, go see WCG & HDR Browser Test. NEW Tests: Mouse Poll Rate | CRT Electron Beam Simulator | Resolution/Scaling | Color Ghosting | MPRT Indicator | Popular Tests: Ghost
PageSpeed Insights のルール | Google for Developers
PageSpeed Insights のルール コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ランディング ページのリダイレクトを使用しない 圧縮を有効にする サーバーの応答時間を改善する ブラウザ キャッシュを利用する リソースを圧縮する 画像を最適化する CSS の配信を最適化する 表示可能なコンテンツに優先順位を付ける レンダリングの妨げになる JavaScript を削除する 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。 最終更新日 2025-07-25 UTC。 �
Change width of element without reflow
I have a music player with an animated bar that displays the current position in the song. It is rendered with requestAnimationFrame and works by changing the width style of the div to X%, where X is the percentage of time through the current song. This causes huge CPU use in Chrome I believe due to the constant reflow work being done each frame. What are other options I can use to eliminate reflo
Find and Fix Web App Performance Issues
This codelab is a text-based version of part of the content covered in a Udacity course on app/web performance (ud860). Rather than a transcription of the video course, this codelab is meant to be a lean, to-the-point treatment of jank identification and correction, using the course's original hands-on final project. We have all seen apps whose displays tend to jump raggedly during animations, scr
Performance — Firefox Source Docs documentation
Overview A Glossary of Common Terms A Quick Guide to Mozilla Applications Getting Started Getting Set Up To Work On The Firefox Codebase Working On Firefox Working on Firefox Bug Handling Firefox User Guide Firefox DevTools User Docs Source Code Documentation Governance Firefox Front-end DOM Editor Style system (CSS) & Layout Graphics Processes, Threads and IPC Firefox DevTools Contributor Docs To
入力ハンドラをデバウンスする | Articles | web.dev
入力ハンドラをデバウンスする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 入力ハンドラは、フレームの完了をブロックしたり、不要なレイアウト処理を追加したりする可能性があるため、アプリのパフォーマンスの問題の原因となる可能性があります。 入力ハンドラは、フレームの完了をブロックしたり、不要な追加レイアウト処理を引き起こしたりする可能性があるため、アプリのパフォーマンスの問題の原因となる可能性があります。 概要 長時間実行される入力ハンドラは、スクロールをブロックする可能性があるため、使用しないでください。 入力ハンドラでスタイルを変更しないでください。 ハンドラをデバウンスします。イベント値を保存し、次の requestAnimationFrame コールバックでスタイル変更を処理します。 長時間実行される入力ハンドラを回避する 最速の場合、ユーザーがペ
クリティカル レンダリング パスを測定する | Articles | web.dev
クリティカル レンダリング パスを測定する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2014 年 3 月 31 日 優れたパフォーマンス戦略の基盤となるのは、適切な測定と計測です。測定できないものは最適化できません。このガイドでは、クリティカル レンダリング パス（CRP）のパフォーマンスを測定するさまざまなアプローチについて説明します。 Lighthouse のアプローチでは、ページに対して一連の自動テストを実行し、ページの CRP パフォーマンスに関するレポートを生成します。このアプローチでは、ブラウザに読み込まれた特定のページの CRP パフォーマンスの概要をすばやく簡単に把握できるため、パフォーマンスのテスト、反復、改善を迅速に行うことができます。 Navigation Timing API のアプローチでは、リアルユーザー モニ
Navigation Timing APIの仕様 - Qiita
利用可能なブラウザ Google Chrome Ver18〜 Firefox 7〜 Android OS Ver4〜 概要 Webサイトの制作では、ページデータの読み込み時間が問題になることがあります。ページが表示されるまでに時間がかかると、ユーザーのストレスが増加し、場合によってはユーザーが離れてしまう場合もあります。すばやく表示されるWebサイトであれば、ユーザーも使いやすいはずです。また、Googleはページの表示速度を検索結果の順位算出に使っていると明らかにしています（Googleの発表）。 ページの読み込み速度はJavaScriptで計測できます。ところが、JavaScriptではHTMLファイルが読み込まれHTMLの解釈が始まった段階からしか計測できず、どの処理に時間がかかっているのか、詳細な処理時間を把握できません。 そこで登場したのが、「Navigation Timing
Intervening against document.write() | Web Updates - Google Developers
(index):34 A Parser-blocking, cross-origin script, https://paul.kinlan.me/ad-inject.js, is invoked via document.write(). This may be blocked by the browser if the device has poor network connectivity. Composability is one of the great powers of the web, allowing us to easily integrate with services built by third parties to build great new products! One of the downsides of composability is that it
GitHub - ebidel/appmetrics.js: A small (< 1kb) library for measuring things in your web app and reporting the results to Google Analytics.
A small (803 bytes gzipped) library for measuring things in your web app, annotating the DevTools timeline, and reporting the results to Google Analytics. This library is a small wrapper around the the User Timing API. It makes it easier to use. appmetrics.js allows you to instrument your app, record performance metrics, and (optionally) report those metrics to Google Analytics. Over time, you'll
performance.markでパフォーマンス計測する
JavaScriptである区間にかかった時間を計測する時に、次のようなコードを書いたことがあると思います。 const start = performance.now(); // 処理 // 色々な処理がすべて終わった doSome(() => { console.log(performance.now() - start); }) Performance Timelineのperformance.markとperformance.measureなどを使うと、ある区間の処理時間をもっと簡単に取ることができます。 APIについて詳しくは以下の記事を見るといいと思います。 User Timing API: あなたの Web アプリをもっと理解するために - HTML5 Rocks Performance.mark() - Web API インターフェイス | MDN 簡単に解説すると perf
Performance observer - Efficient access to performance data | Blog | Chrome for Developers
Progressive Web Apps enable developers to build a new class of applications that deliver reliable, high performance user experiences. But to be sure a web app is achieving its desired performance goals, developers need access to high resolution performance measurement data. The W3C Performance Timeline specification defines such an interface for browsers to provide programmatic access to low level
Passive Event Listeners によるスクロールの改善 | blog.jxck.io
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。 実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tumblr perf
GitHub - wilsonpage/strictdom: Throws errors when performance sensitive DOM APIs are called out of 'phase'
http://jsperf.co/
parens-and-perf.md
GitHub - azu/performance-logger: Simple Perf logger based on `performance.mark` API.
Insights | Nearform
