PageSpeed Insights のルール | Google for Developers
ランディング ページのリダイレクトを使用しない 圧縮を有効にする サーバーの応答時間を改善する ブラウザ キャッシュを利用する リソースを圧縮する 画像を最適化する CSS の配信を最適化する 表示可能なコンテンツに優先順位を付ける レンダリングの妨げになる JavaScript を削除する 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。 最終更新日 2025-07-25 UTC。 P�v窪
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 のアプローチでは、RUM（リアル ユーザー モニタリング）メトリクスを取得します。名前が意味するとおり、これらの指標はサイトにおける実際のユーザー操作から取得され、さまざまなデ
Performance Timeline
Performance Timeline W3C Candidate Recommendation Draft 21 May 2025 More details about this document This version: https://www.w3.org/TR/2025/CRD-performance-timeline-20250521/ Latest published version: https://www.w3.org/TR/performance-timeline/ Latest editor's draft:https://w3c.github.io/performance-timeline/ History: https://www.w3.org/standards/history/performance-timeline Commit history Test
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
document.write('<script src="https://example.com/ad-inject.js"></script>'); Before the browser can render a page, it has to build the DOM tree by parsing the HTML markup. Whenever the parser encounters a script it has to stop and execute it before it can continue parsing the HTML. If the script dynamically injects another script, the parser is forced to wait even longer for the resource to downloa
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() を呼ぶことで、スクロールそのものを止めることもできる。
IntersectionObserver’s coming into view - Chrome Developers
IntersectionObserver’s coming into viewPublished on Wednesday, April 20, 2016 • Updated on Tuesday, October 3, 2017 Let’s say you want to track when an element in your DOM enters the visible viewport. You might want to do this so you can lazy-load images just in time or because you need to know if the user is actually looking at a certain ad banner. You can do that by hooking up the scroll event o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - wilsonpage/strictdom: Throws errors when performance sensitive DOM APIs are called out of 'phase'
http://jsperf.co/
parens-and-perf.md
GitHub - ebidel/appmetrics.js: A small (< 1kb) library for measuring things in your web app and reporting the results to Google Analytics.
GitHub - azu/performance-logger: Simple Perf logger based on `performance.mark` API.
http://web.mit.edu/ravinet/www/polaris_nsdi16.pdf
util: improve util.format performance by evanlucas · Pull Request #5360 · nodejs/node
