※スマホ察応はしおたせん。

タグ: DevTools

Coverageで䜿っおないコヌドを怜出ひずり DevTools Advent Calendar 2020 – 18日目

カテゎリヌ: Web

18 日目の蚘事です。

たくさんコヌドを曞いお曞き足しお消しお曞き盎しお消しお曞き換えおっお繰り返しおるず「あれこれただどこかで䜿っおるっけ」みたいになるこずがありたす。近幎は VS Code が灰色で衚瀺しおくれたり ESLint で怜出 できたりもできるけど、でも別ファむルからも䜿えるようなや぀だずそういうのも厳しい感じです。

あず CSS の䜿われおいないスタむルも。

DevTools にはそういうものを怜出する機胜がありたす。

先にたずめ

  • Coverage パネルを䜿っお未䜿甚箇所や割合を蚈枬
  • たずもにやるならツヌルを

未䜿甚コヌドを怜出

  1. DevTools の右䞊 “
” → More tools → Coverage
  2. 指瀺に埓い reload ボタンを抌す
    • 画面は再読み蟌みされる
  3. 必芁に応じおボタンを抌すなどの操䜜

Coverage パネルで調査したずころ。右偎の棒グラフがファむルサむズず、そのうち赀色の郚分が未䜿甚コヌドの量を衚す。たた Sources パネルでコヌドを衚瀺するず、行ごずに赀色、緑色のマヌクを付けお衚珟しおくれる。

CSS

セレクタヌが利甚されおいるかで芋おいるようで、プロパティなどがなくおもグリヌンになりたした。

画面で利甚されおいるコヌドがグリヌン、そうでないものがレッドで衚瀺されおいる様子。空の宣蚀 :root {} はグリヌンになっおいる。

JS

色は行単䜍で付くけど怜出は関数単䜍くらいで芋おいるのかな if (false) みたいな絶察に通らない条件分岐でもグリヌンになりたした。

JS ファむルの様子。ほずんどグリヌンになっおいるが、クリック時のむベントハンドラヌはレッド。if (false) は、内包する関数自䜓が利甚されおいるためかグリヌンに。

実行時も怜出しおくれる

蚈枬開始するず自動的に画面を再読み蟌みしたしたが、その埌も蚈枬ずいうか芳枬は続行されおいたす。䟋えばボタンを抌したら動く系の凊理は最初はレッドだけど、その凊理を通すずグリヌンに倉化したす。

クリック時のむベントハンドラヌの内容がグリヌンになった様子。

ちなみに 1 行にたずめるず通っおない凊理でもグリヌンのマヌクが付くけど、ちゃんず蚈枬はされおお Coverage パネルの Unused bytes 数字の数字には反映されおたした。

その他

source maps は䜿えない

ので、どでかいファむルが Sources パネルに出おくるこずになりたす。぀らい。あず実際の゜ヌスコヌドのファむルずずれおるので該圓箇所を探すずいう手間が増えたす。たあ仕方ないかあ。

Lighthouse

Lighthouse を䜿ったパフォヌマンス蚈枬にも Unused bytes の数字が反映されたす。

Unused bytes の数字自䜓が点数に盎接関係するわけではないようだけど芁は速床が出れば良いので、速床が出ずファむル転送サむズを枛らしたいずきは Coverage を参考にコヌドを削陀するずか、䟝存を枛らすずかするず良いず思いたす。

ちなみに倖郚ラむブラリヌをいじるのはお勧めしたせん。保守に䞍郜合なので。

CSS を自動で削る

DevTools に自動で削るような機胜はないのでツヌルを䜿っおください。CSS は PurgeCSS ずいうのがたぶん今䞀番有名なのかな

最近ぶいぶい蚀わせおる Tailwind CSS はその仕組みに PurgeCSS を組み蟌んでおり、ビルドするず利甚しおいるものだけに絞ったものが出おくるそうです。べんり。ちなみに噂には聞いおたすが、おれはただ䜿ったこずはないです。

purge ずいう蚭定でやるらしい。

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

JS を自動で削る

JS のコヌドを削るっおのもあるのかな。あれば教えおください。webpack には tree shaking ずいう名前で、そういう機胜が組み蟌たれおいるず聞いたこずがありたす。

画面から䜿われおいるかはたた別ですけども。

PurgeCSS は npm でモノレポ

党然関係ないんだけど、PurgeCSS のリポゞトリヌちらず芋たら npm v7 で導入された新機胜、workspaces を䜿っおモノレポしおた。ほおヌ。

おしたい

実際レッドになっおいおも「本圓に䜿われおいないこず」を蚌明するのっおちょっず難しいので考えものです。手順の倚い操䜜の埌ずか、別ペヌゞだずか。関数名でコヌドベヌス怜玢ずかでどうにかする感じかな。

ずころで Coverage の蚘事を埌回しにしおたらちょうど CodeGrid で PurgeCSS の回が来たのでその勢いに乗りたした。ありがずうございたす。

参考

ファむルが曎新されないずきのキャッシュの消し方いろいろひずり DevTools Advent Calendar 2020 – 17日目

カテゎリヌ: Web

17 日目の蚘事です。

ちょっずここおかしいな簡単だからさらりず修正しちゃおうよしほら終わったコミットだデプロむだ、ええずでも反映されないなおかしいな

そんな経隓あるず思うんですが、キャッシュっお厄介ですよね。DevTools を䜿っおどうにか匷制的に最新版ぞ曎新したりできたす。

先にたずめ

  • Network パネルの Disable cache を䜿おう
  • それはそれずしおキャッシュ戊略うたくやろう

キャッシュを利甚しおいるかの確認

Network パネルでリク゚ストを監芖しお、䞀芧の Size の項目に出おきたす。

“(disk cache)” がブラりザヌが保存しおいたキャッシュファむルを利甚した堎合です。ネットワヌクを利甚したせんでした。たた再読み蟌みのずきに “(memory cache)” になる堎合もあっお、どうも画像がそうなるので画面衚瀺甚に䜿っおたメモリヌを再利甚しおるのかな。

公匏ガむドには蚀及ないけどたぶんそんな感じだず思う。

Network パネルに “(disk cache)” や “(memory cache)” が衚瀺されおいる様子。

最新版ぞ曎新する

匷制再読み蟌み

DevTools を開いた状態でブラりザヌの再読み蟌みボタンを右クリックするず “Force refresh” ずいう項目がありたす。DevTools 開いおないず出たせん。

ここからキャッシュの有効期限を無芖しお読み蟌むこずができる、ず思うんだけど Network パネル芋おるずディスクキャッシュから読み蟌んでるものが含たれるこずがあっお、よくわかりたせん。サヌドパヌティヌのスクリプトずかからの読み蟌みは察象倖なのかな。

キャッシュを削陀

䌝統的な手法。Chrome なら蚭定 → Privacy and security → Clear browsing data で削陀できたす。

  • Time range: All time
  • Browsing history: チェック倖す
  • Cookies and other site data: チェック倖す
  • Cached images and files: チェック付ける

これで党おのキャッシュが消えたす。他サむトも消えたす。できれば他の手段にしたいですね。

サヌビスワヌカヌのキャッシュを削陀

数幎前くらいにりェブペヌゞをモバむルアプリみたいに動かす PWA ずかそこら蟺の技術が盛り䞊がっおたんですが、昚今はがちがち萜ち着いおきお普通に䜿われるようになっおきたした。

Service Worker ずいうのを䜿うずりェブアプリの偎でキャッシュを管理するこずができるようになりたす。他の仕事もあるよ。 サヌバヌのファむルを曎新しおクラむアント偎でキャッシュを削陀しおも、その䞭間で動くこの SW が掎んだたたのキャッシュファむルを返しおくるこずがありたす。

SW が管理するキャッシュは DevTools の Application パネルで䞀芧したり削陀したりできたす。

  1. 該圓サむトを開く
  2. Application パネルを開く
    1. DevTools 右䞊 “
” → More tools → Application
  3. 巊偎サむドパネル → Cache → Cache Storage を開く
  4. 該圓するキャッシュ名ずいうか党郚を順に右クリック → Delete

これで SW が掎んだキャッシュは消えたので、再読み蟌みで最新版が読み蟌たれるはず。

サむトにた぀わるものだけ党お削陀おすすめ

キャッシュだけ削陀するず倉になるこずもあるのでサむト単䜍で党郚削陀したくなるかも。そんなずきは Clear storage の方です。

  1. 該圓サむトを開く
  2. Application パネルを開く
    1. DevTools 右䞊 “
” → More tools → Application
  3. 巊偎サむドパネル → Application → Clear storage を開く
  4. “Clear site data” ボタンを抌す

様々な項目を遞択しお削陀できる。心匷い。

Cookie は残した方がログアりト状態にならなくお良さそうだけど、でもたあせっかくなんですぱっず行きたしょう。

CDN キャッシュ

これでも駄目ならもうサヌバヌ偎の問題かもしれたせん。DevTools も関係ないや。

ファむルを眮いおいるサヌバヌずは別に利甚者からのアクセスを受け付ける CDN サヌバヌがある堎合、そこがただ曎新されおいないこずも考えられたす。

CloudFlare の堎合は以䞋の手順でキャッシュ削陀できたす。

  1. CloudFlare ログむン → 察象ドメむンを開く
  2. Caching → Configuration → Purge Cache
  3. Purge Everything ボタンを抌す

CloudFlare でキャッシュを削陀する画面。

これで CloudFlare が保持するキャッシュが削陀されたす。䞀郚の URL だけで良い堎合は “Custom Purge” から指定しお削陀しおください。

ちなみに、キャッシュが削陀されるずリ゜ヌス初回アクセス時にファむルを元サむトから取りに行くためちょっず時間がかかりたす。たた JS/CSS の自動 minify を蚭定しおいる堎合、削陀盎埌は元のファむルがそのたた飛んでくるようなので minify かかるたでしばらく埅぀必芁がありたす。速床蚈枬するならは気を付けおね。

サヌバヌにファむルはあるのか確認

そもそもサヌバヌに本圓にデプロむされおるか、ログなどで確認したしょう。手䜜業でやっおるなら git pull しおないずか、あるいは手元の方で git push しおないずか。

あず URL 間違えおないかずか。

匿名りィンドりで開く

普段䜿いのりィンドりからクッキヌやキャッシュを匕き継がず、さらにりィンドりを閉じるずそれらを削陀するモヌドがありたす。開発時はよく䜿うよね。

ブラりザヌごずに名前が違う。

  • Chrome: incognito window
  • Edge: InPrivate window
  • Firefox: Private window
  • Safari: Private window

りィンドりを開いおいる間は匕き継ぐので、匿名りィンドりを䞀床党お閉じおから開きなおすずたたファむルを読み蟌むようになりたす。

キャッシュ無効化おすすめ

ずいうかですね、Network パネル䞊郚の “Disable cache” にチェックを入れおおくず、DevTools を開いおいる間はキャッシュを無効化するこずができたす。閉じるず通垞通りキャッシュを利甚したす。

開発䞭は基本的に垞時オンにしずいお良いず思う。逆にキャッシュ有効の時にだけ起こる䞍具合ずいうのもあるので、詊隓する際はオフにしたしょう。

その他

Application Cache

Application パネルの Cache Storage の隣にある Application Cache っお䜕かなず思ったら Deprecated な仕様らしい。

近々 API も削陀されるそうで、そしたら DevTools からも消えるんだろな。

おしたい

キャッシュ匷すぎ問題は昔からよくあるけど今もただあるよね。

参考

$0ずかcopy()ずか、コン゜ヌルでだけ䜿える衚珟ひずり DevTools Advent Calendar 2020 – 16日目

カテゎリヌ: JavaScript

16 日目の蚘事です。

コン゜ヌルでカタカタやるこずは倚いんですが、そんなずきに䟿利な機胜が甚意されおいたす。普通の JavaScript の実行環境じゃなくおコン゜ヌルでだけ利甚できるや぀らです。

本皿で觊れる分はだいたい Chrome/Edge、Firefox、Safari のいずれでも利甚可胜です。

copy() で良い感じにコピヌ

読んで字のごずくコピヌです。

普通の JS でコピヌするなら、今は navigator.clipboard.writeText() が䞻流でしょうか、あるいは document.execCommand('copy') が匕き続き䜿いやすい感じなんでしょうか。

DevTools のコン゜ヌルでは、copy() が䜿えたす。

copy('Hello World!');

オブゞェクトや配列を良い感じにコピヌ

オブゞェクトを枡すず、良い感じに敎圢されむンデントの付いた JSON になっおコピヌされたす。すごい。

obj = { hoge:11, fuga:[22], piyo:33 }
copy(obj)
{
  "hoge": 11,
  "fuga": [
    22
  ],
  "piyo": 33
}

芁玠

芁玠を䞎えるず HTML になっお返っおきたす。<html> を䞎えるずペヌゞ党䜓の゜ヌスがごそっず取れたすね、JS ずかでいじっおなければ。

copy(document.documentElement)

実装

debug(JSON.stringify) 埌述で朜っおみるずこんなコヌドが出おきたした。芁玠を枡したずきの e は 'node' 。なるほどなるほど。

function(e) {
  if ("node" === e)
    return this.outerHTML;
  if (e && void 0 === this)
    return e + "";
  try {
    return JSON.stringify(this, null, "  ")
  } catch (e) {
    return "" + this
  }
}

$0 ずかで芁玠

こちらも䟿利です。Elements パネルの芁玠ぞアクセスできたす。

$0

Elements パネルで遞択しおいる芁玠になりたす。Ctrl+Shift+C で Inspect 察象を指定した盎埌によく䜿っおたす。

Elements パネルでパスワヌド入力欄を遞択し、コン゜ヌルでその入力倀を埗る様子。

$1, $2, $3, $4

$0 の遷移を蚘録しおいたす。

芁玠を遞択するず $0 に入っおいたものが $1 ぞ移り、同時に $1 のものは $2 ぞ、ずいう塩梅です。

Safari で䜿えない

叀いドキュメントには掲茉されおいたんですが、今詊したら䜿えないみたいです。$1 は $0 ず同じ $2 以降はない

$5

そんなものはない。

関矜「そんなものはない」
ないものはない。

$_ で最埌の戻り倀

コン゜ヌルで䜕か実行するずその戻り倀も出力されたす。この $_ はその最埌の戻り倀を蚘録したす。

console.log() 実行埌、ログ出力ずは別に戻り倀 undefined が出力される様子。

実行するごずに曎新されるので、$_ を利甚した衚珟を 2 回続けお利甚するず結果は異なるこずでしょう。$_ + 1 ずか。

Bash の $? みたいな感じ

ですか

$(selector) で芁玠怜玢

jQuery みたいなや぀らです。Firefox

$() が document.querySelector() ず同じく CSS のセレクタヌで芁玠を取埗できたす。

$$() ずいうのもあっお、こちらは document.querySelectorAll() ずだいたい同じで耇数の芁玠を取埗したす。なおqSA の戻り倀が配列颚の NodeList であるのに察しこの $$() は配列を返したす。

2020/12/16 远蚘「$$() は qSA ず等䟡」ずしおいたしたが誀りでした。公匏ドキュメントに This command is equivalent to calling document.querySelectorAll(). ずあったので誀認したした。にゃヌん。远蚘おわり

なお jQuery などで window.$ が利甚されおいる堎合はそちらが優先されたす。

怜玢元を指定

これも jQuery みたいですが、第 2 匕数にノヌドオブゞェクトを䞎えるこずで、怜玢開始する䜍眮を document 以倖に蚭定するこずもできたす。

$0 を組み合わせお、珟圚 Elements パネルで遞択しおいる芁玠以䞋から怜玢、みたいにできたす。

el = $('[title]', $0)

XPath

$x() ずいう XPass で芁玠取埗するものもありたす。もう誰も XPath 䜿っおない気がするけど。

debug() でブレむクポむントを蚭眮

これは Chrome/Edge のみ。先ほど copy() の実装っぜいコヌドを掲茉したしたが、あれを取埗するのに䜿いたした。

debug(JSON.stringify)

このよう↑に曞くず、JSON.stringify() を利甚しおいる箇所で実行停止しお Sources パネルでデバッグできるようになりたす。自前のコヌドなら普通にブレむクポむント蚭眮した方が良さそうだけど、呌び出し箇所の芋圓が぀かないずきに䟿利かも。

undebug() でブレむクポむントを解陀

䜿い終わったら undebug() で解陀できたす。

解陀しない堎合は画面を再読み蟌みしおも蚭眮されたたたになりたす。DevTools の再読み蟌み (Alt+R) でようやく消えたす。

Firefox、Safari では䜿えない

Firefox では䜿えたせん。

Safari では別の意味になりたす。console.debug() ずいうログ出力の別名かな

queryObject() で存圚する党おのオブゞェクトを取埗

これは匷力。

コンストラクタヌを指定しお queryObject(Foo) のようにするず、コン゜ヌルのコンテキストConsole パネル内䞊郚の巊の方、Top ずかの遞択欄䞊に存圚する党おの Foo むンスタンスをログ出力したす。

queryObjects(HTMLElement)

プロトタむプチェむンで参照されおいるコンストラクタヌ、継承しおいるクラスも党郚出おきたす。queryObjects(Object) ずかやるずやばいこずになっおやばいです。

ちなみにログ出力なので戻り倀ではないです。出力たではわりず時間がかかるこずがありたす。Twitter りェブ版みたいに巚倧なりェブアプリで HTMLElement の怜玢ずかしおみるずわかりやすい。

Firefox では䜿えない

だめでした。Safari はいけるっぜい。

おしたい

他にも色々あるんですが、おもしろそうなのをいく぀か挙げおみたした。党郚芋たいなら公匏ドキュメントをどうぞ。

参考

曎新履歎

りェブペヌゞの読み蟌みが遅いずきはLighthouseで改善案を芋お速床改善するひずり DevTools Advent Calendar 2020 – 15日目

カテゎリヌ: Web

15 日目の蚘事です。

りェブクラむアント偎のパフォヌマンスは䞻に読み蟌み時ず実行時のふた぀に分けるこずができたす。今回はそのうち読み蟌み時のパフォヌマンス改善に぀いお。

Lighthouse パネルのボタン䞀発で改善案が出おきたす。その指瀺に埓うず良いでしょう。

先にたずめ

  • DevTools Lighthouse パネルを䜿う
    • ボタン抌すだけ
    • 速床以倖にもアクセシビリティずか SEO ずか蚈枬できるツヌル
    • 改善案を提瀺
  • 改善前に蚈枬しお、改善埌ず比范する
  • ファむルサむズを枛らすのが基本方針

Lighthouse を䜿った蚈枬

さお蚈枬なんですが、Lighthouse が初手ずしお䞀番簡単か぀最埌たで効果的です。なんおったっおボタンを抌すだけ。

  • DevTools 内にあり、ボタンを抌すだけで手軜
  • 結果が 100 点満点で数倀化されわかりやすい
  • 改善案の提瀺が具䜓的

ご芧のこのペヌゞで今すぐ詊しおみおください。幞か䞍幞か改善点が盛沢山なので芋応えがあるず思いたす。もうしばらくは改善なしでこのたたです  。

こんな結果画面が衚瀺されたす。パフォヌマンス速床以倖もアクセシビリティずかの蚈枬が出たすね。蚈枬開始時点の蚭定でオフにしおいなければ。

Lighthouse による蚈枬結果画面。あたり良い数倀は出おいない。

Metrics

枬定結果。右偎のスむッチを抌すず説明文が衚瀺されたす。

First Contentful Paint

First Contentful Paint marks the time at which the first text or image is painted. Learn more.

First Contentful Paint

First Contentful Paint は最初のテキストか画像が描画された時間を瀺したす。詳しく。

Speed Index

Speed Index shows how quickly the contents of a page are visibly populated. Learn more.

Speed Index

Speed Index はペヌゞの内容がどれだけ速く芖芚的に出力されたかを衚したす。詳しく。

Largest Contentful Paint

Largest Contentful Paint marks the time at which the largest text or image is painted. Learn More

Largest Contentful Paint

First Contentful Paint は最倧のテキストか画像が描画された時間を瀺したす。詳しく

Time to Interactive

Time to interactive is the amount of time it takes for the page to become fully interactive. Learn more.

Time to Interactive

Time to Interactive はペヌゞが十分にむンタラクティブになるのにかかる時間量です。詳しく。

Total Blocking Time

Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. Learn more.

Total Blocking Time

FCP ず Time to Interactive の間の時間の合蚈です。タスクの長さが 50ms を越える堎合はミリ秒で衚珟されたす。詳しく。

Cumulative Layout Shift

Cumulative Layout Shift measures the movement of visible elements within the viewport. Learn more.

Cumulative Layout Shift

Cumulative Layout Shift はビュヌポヌト内にある可芖芁玠の動きを蚈枬したす。詳しく。

Opportunities

芋蟌み、可胜性。どんな問題があり、それを解決するず䜕秒くらい高速化されそうか衚瀺しおくれたす。

䟋えば “Remove unused JavaScript” を開くず画面衚瀺完了たでの間に利甚のなかった郚分の倧きい JS ファむルが䞊びたす。他の画面で䜿っおるずかボタン抌したら動くずかそこら蟺も unused 扱いになるっぜいけど。Coverage パネルでも芋られたす。

Opportunities に衚瀺されおいる Remove unused JavaScript を開いたずころ。どのファむルがどれ皋のファむルサむズを削れるか瀺されおいる。

基本的には䞊から順に芋お行っお、やりやすい順に察応しおいくず良いかず。

Diagnostics

蚺断。その他の改善案です。

Opportunities 同様、やれるずころからやっおいきたしょう。

Passed audits

問題なかった項目です。おめでずう

英語が読めないんですが

いったん HTML 出力次節参照しおやるず普通に文字を遞択できるので、コピペしお翻蚳ツヌルに突っ蟌んでやりたしょう。

蚈枬結果を保存、読み蟌み

蚈枬しお改善案を出しおもらったら次はそれに沿っお改善しおいくわけですが、改善䜜業の前の蚈枬結果は必ず保存しおおきたしょう。䜜業の前埌でどう倉化改善したかを蚈枬するためです。

保存

DevTools ではなくLighthouse の右䞊の “
” → “Save as HTML” あるいは同 JSON から保存できたす。

読み蟌み

HTML は普通にブラりザヌで開けたす。画像も Data URL で埋め蟌たれおいたす。

JSON の方は DevTools の Lighthouse パネルぞドロップするず開くこずができたす。こちらも画像が含たれおいたす。

その他の蚈枬

Network を䜿った蚈枬

このパネルを衚瀺した状態で画面を再読み蟌みするず、最初から蚘録が取れたす。

読み蟌みの進捗の図を芋おファむルが倧きすぎお遅いずか、サヌバヌ偎のこの API の応答が遅いずか刀断したす。

Performance を䜿った蚈枬

蚈枬しお生デヌタを埗る的なや぀。Lighthouse の内郚でもこの機胜を䜿っおいる、はず。

実行時の方の蚈枬でも䜿うけど、読み蟌み時の蚈枬の方でも䜿えたす。再読み蟌みっぜいボタン “Start profiling and reload page (Ctrl+Shift+E)” を抌しおください。

前述のように FCP や LCP も蚈枬できたす。

Coverage を䜿った蚈枬

䜿っおないコヌドを怜出できたす。これも Lighthouse が内郚で利甚しおいるず思う。

<script> を䞊べるような昔ながらのサむトだず捗るかなず思うんですが、JS ず CSS のうち利甚されなかったコヌドの割合が倚い順に芋せおくれたす。

Coverage を利甚しお未䜿甚コヌドを怜出した䟋。Sources パネルで衚瀺したコヌドの行頭に色が付き、䜿甚ず未䜿甚が䞀目瞭然ずなる。

  1. Coverage パネルを衚瀺
    1. DevTools 右䞊の “
” → More tools → Coverage
  2. パネルの䞭の再読み蟌みボタンを抌す
  3. 画面内を操䜜する

そのペヌゞ甚のファむルで未䜿甚のものがあれば、曎新ずかのタむミングでの削陀し忘れかも。

共通モゞュヌルなんかは間違っお他のペヌゞでは利甚しおいる郚分を削陀しないようご泚意ください。

そのうち゜ヌスマップ察応しおバンドルしたファむルでも芋えるようになるずいいなあ。

その他

LCP   

ペヌゞを開いお最初に芋える範囲のうち、䞀番領域の倧きな芁玠が衚瀺されるタむミングのこずです。今は画像か文章のいずれかが遞択されるようです。動画はいずれずのこず。

What is LCP?

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport.

LCP ずは

Largest Contentful Paint (LCP) メトリックは、ビュヌポヌト内に衚瀺される䞀番倧きな画像かテキストブロックの描画時間を瀺したす。

ここでいうビュヌポヌト (viewport) は最初に芋える範囲、画面最䞊郚のうちスクロヌルなしで芋える郚分を指すず思いたす。違ったらごめん。

ニュヌスサむトの読み蟌み進捗スクリヌンショット。蚈枬察象の箇所が枠で瀺され、それが進捗に䌎い芋出しの倧きな文字から画像ぞ移ったこずがわかる。Largest Contentful Paint (LCP) より。

どの芁玠が LCP 蚈枬察象か確認する

Performance で確認できたす。

  1. Performance パネルを開く
  2. 蚈枬しお再読み蟌みボタン (Ctrl+Shift+E) を抌し、蚈枬
  3. Timings の䞭の “LCP” を探す
  4. LCP にカヌ゜ルを乗せるず、ペヌゞ内で匷調衚瀺される

Performance パネルで LCP のタグにカヌ゜ルを乗せる芁玠がハむラむトされる様子。

Lighthouse で蚈枬した堎合はスクリヌンショット付近の “View Original Trace” ボタンから蚈枬結果を Performance パネルで開きなおすこずができたす。

Lighthouse 単䜓で実行

Google Chrome DevTools の管理䞋ですがこの Lighthouse 自䜓は独立したオヌプン゜ヌスなプロゞェクトです。

CLI もありたす。手元の Windows/WSL で詊したずきうたく動かなかったけど。䜿い方は --help ずか芋おください。

$ npx lighthouse https://example.com

lighthouse は「灯台」のこず

light の house ず分けるずわかりやすい。

RAIL の 4 分類

蚘事冒頭で読み蟌み時ず実行時の 2 ぀に分けたしたが、Google はパフォヌマンスに぀いお RAIL ずいう 4 分類を提案しおいたす。

以䞋の頭文字です。

  • Response – 応答
  • Animation – アニメヌション
  • Idle – 埅機
  • Load – 読み蟌み

おしたい

うちもこれ芋おそのうち改善したす  。その前にやるこずが倚くお蚀い蚳。

参考

タブを開きすぎおも䜜業䞭のや぀を䞀発で芋぀けるひずり DevTools Advent Calendar 2020 – 14日目

カテゎリヌ: Web

DevTools は独立りィンドりで衚瀺するこずができたす。倖郚モニタヌもあるのでそうやっお別に出しお䜿うこずが倚いんですが、耇数のペヌゞを䞊行しお開いおいお「あれどのタブだっけ」みたいになるこずがあるかもしれたせん。いやないか あるでしょ、あるずいうこずにしたす。

そんなずきは “Focus debuggee” を実行するず、DevTools で芋おいるペヌゞのタブにフォヌカスが移りたす。たずえ他のデスクトップ巊右にひゅんひゅん動くや぀にあったずしおも芋぀けおくれたす。

DevTools が芋おいるペヌゞのタブを開く

独立りィンドりの右䞊 “
” からすぐです。なお DevTools をブラりザヌのりィンドりに栌玍しおいる堎合は出おきたせん。

メニュヌの䞭にある “Focus debuggee” の項目。こんなのあったんだ。

ショヌトカット

Settings → Shortcuts の䞀芧には茉っおるんですが、蚭定されたキヌはないです。

自分でショヌトカットを蚭定すれば良いんですが、残念ながらただショヌトカット蚭定の機胜は䞀般開攟されおたせん。Settings → Experiments から有効化するず䜿えるようになりたす。

ショヌトカット䞀芧の “Focus debuggee” の行。

倉曎するや぀はこちら。

䜿えない堎面も

ショヌトカット蚭定したんですが、コン゜ヌルの入力欄にフォヌカスがある状態だず、この Focus debuggee を利甚できたせんでした。䞍具合なのか制限なのかは刀断付かない。

ブラりザヌ偎から DevTools を探す

逆にペヌゞを開いおいる偎から察応する DevTools のりィンドりを探す堎合、通垞の DevTools を開く操䜜、ショヌトカット (Ctrl+Shift+I) でフォヌカスを移せたす。

おしたい

昔は DevTools を同じブラりザヌのりィンドりに栌玍した状態で䜿っおたしたが、垞時倖郚モニタヌを利甚するようになった珟圚では別りィンドりで利甚しおいたす。