head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
Post on:2023年6月7日
sponsors
head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。
指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。
rviscomi/capo.js
rviscomi/capo.js -GitHub
HTMLのheadの書き方について詳しくは、下記をご覧ください。
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
capo.jsの使い方
capo.jsを使用するには、2通りの方法があります。
- デベロッパーツールのスニペットで実行する
- ブックマークレットで実行する
手順は簡単です。
- capo.jsのJavaScriptをコピーします。
- コピーしたJavaScriptをデベロッパーツールのスニペットで実行するか、ブックマークレットを作成します。
※ブックマークレットはBookmarklet Makerで簡単に作成できます。 headを調べたいページを開き、デベロッパーツールを起動し、スクリプトを実行またはブックマークレットを実行し、デベロッパーツールのコンソールペインを開きます。
capo.jsを実際に使ってみた
当ブログで、head内の要素の記述の順番を調べてみました。
以下は、当方で作成したcapo.jsのブックマークです。
- capo.jsのブックマークレット（ブックマークにドラッグしてご利用ください）
デベロッパーツールを起動し、ブックマークレットを実行し、コンソールペインを表示します。
head内の要素でプライオリティが高いものほど大きい数字（レッド）で表示され、低いものほど小さい数字（グレー）で表示されます。
- Actual
<head>order: 実際の並び順 - Priority
<head>order: プライオリティが高い順に並び替えた場合
実際の並び順とプライオリティが高い順は、▼をクリックすると詳細が表示されます。
コンソールペインを表示
まずは、実際の並び順です。プライオリティが高い（11）が4つの後に、（10）のtitleが配置されていますが、その後に（1）の要素が続いています。また、後半にも（11）があります。
実際の並び順
続いて、プライオリティが高い順です。プライオリティが高い（11）のorigin-trialがより先に記述されています。origin-trialなんてheadに記述していないのになんだろう？と思ってChromeのオリジントライアル入門を見てみましたが、よく分かりませんでした。
プライオリティが高い順
sponsors
