PageSpeed Insights Rules | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. Avoid landing page redirects Enable compression Improve server response time Leverage browser caching Minify resources Optimize images Optimize CSS Delivery Prioritize visible content Remove render-blocking JavaScript Except as otherwise noted, the content of this page is licensed under the Creative Commons Attr
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 13 February 2025 More details about this document This version: https://www.w3.org/TR/2025/CRD-performance-timeline-20250213/ 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
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
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
