Lighthouse の「Eliminate render-blocking resources」警告を修正する方法
レンダーブロッキングリソースを排除して Core Web Vitals を改善する
「Eliminate render-blocking resources」の概要
レンダーブロッキングリソースを含むページを読み込む際、ブラウザはそれらの原因となっているすべての要素がダウンロードされ評価されるまで、レンダリングプロセスを開始できません。
これは PageSpeed Insights のゴールデンルール「できるだけ早くレンダリングを開始する」に違反します。ページのレンダリングが遅延すると、必要以上にページの読み込みが遅くなります。
レンダーブロッキングリソースを削除または遅延読み込みすることで、この Lighthouse の警告を修正できます。
Lighthouse の「Eliminate render-blocking resources」警告とは？
Lighthouse のEliminate render-blocking resources 警告の原因は何でしょうか？Lighthouse は次のいずれかに該当するページにフラグを立てます：
- head 内にある遅延読み込みされていない script タグ。
ページの head 内のスクリプトは、defer または async 属性がない場合、デフォルトでレンダーブロッキングになります。 - デバイスのメディアに一致するリンクされたスタイルシート。
<link rel="stylesheet"> は、無効化されておらずブラウザのメディアに一致する場合、ページのレンダリングをブロックします。例えば <link rel="stylesheet" media="print"> はデスクトップデバイスではレンダリングをブロックしません。
「Eliminate render-blocking resources」警告は、いくつかの Lighthouse メトリクスに直接影響します。理論的には、レンダーブロッキングリソースがあるページでも高速に読み込める可能性があります。しかし実際にはそうならないことが多いです。レンダーブロッキングリソースが多すぎると、First Contentful Paint (FCP) や Largest Contentful Paint (LCP) などの重要な Lighthouse メトリクスに直接影響を与える可能性が高くなります。
簡単なおさらい - レンダリングとは？
レンダリングとは、ウェブ開発においてウェブサイトのコードをユーザーが閲覧する際に表示されるインタラクティブなページに変換するプロセスです。この用語は一般的に HTML、CSS、JavaScript コードの使用を指します。このプロセスは、ウェブブラウザがウェブページをレンダリングするために使用するソフトウェアであるレンダリングエンジンによって実行されます。
「レンダーブロッキングリソース」の原因は？
レンダーブロッキングリソースは常にページの head 内にあるスタイルシートと JavaScript です。これらは CMS、ウェブ開発者の手動追加、またはプラグインによってのみ追加されます。レンダーブロッキングリソースの原因を特定する際は、以下の場所を確認してください：
- テンプレート ウェブサイトのテンプレートファイルが最初に確認すべき場所です。<head> コードがある場所を見つけ、ハードコードされたスタイルとスクリプトを探してください。
- CMS CMS 自体が正常に動作するために一部のスクリプト（例：jQuery）を必要とする場合があります。
- プラグイン プラグインはページにスタイルやスクリプトを挿入することで悪名高いです。
「レンダーブロッキングリソース」はページスピードにどう影響するか
レンダーブロッキングリソースは、レンダーツリーの生成をブロックします。レンダーツリーが構築されていない場合、ブラウザはレンダリングを開始しません。これは、すべてのレンダーブロッキングリソースがダウンロードされ評価されるまで、ページが完全に空白のままになることを意味します。これは First Contentful Paint や Largest Contentful Paint などのメトリクスに影響を与えます。
「Eliminate render-blocking resources」の修正方法
「レンダーブロッキングリソース」を修正するには、これらのリソースがレンダーブロッキングでなくなるようにする必要があります。最も簡単な方法は、これらのリソースを削除することです。古い、使用されていないリソースがまだページのレンダリングをブロックしている場合があります。削除できない場合は、遅延読み込みする必要があります。
JavaScript の遅延読み込み
JavaScript は、script タグに defer または async 属性を追加することで遅延読み込みできます。
//deferred javascript
<script src="script.js"></script>
//async javascript
<script src="script.js"></script>
スタイルシートの遅延読み込み
スタイルシートの遅延読み込みは少し複雑になる場合があります。スタイルシートが遅延読み込みされると、ページはまずスタイルなしでレンダリングされます。その後、スタイルが読み込まれると、ブラウザがスタイリングを適用し、さまざまなちらつきやレイアウトシフトが発生します。そのため、インラインのクリティカル CSS が必要です。クリティカル CSS は、ページの可視部分をレンダリングするために必要なスタイルのコレクションです。
<style>//cricical CSS here</style> <link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/> 「Eliminate render-blocking resources」の回避策
レンダーブロッキングリソースを排除することが不可能な場合もあります。テンプレートにアクセスできなかったり、CMS が特定のスクリプトを必要としたりすることがあります。レンダーブロッキングリソースの影響を軽減するためのいくつかの回避策があります。
- スタイルとスクリプトを縮小・圧縮する。
現在のスタイルとスクリプトを縮小・圧縮してください。小さいリソースは大きいリソースよりも読み込みパフォーマンスへの影響が少なくなります。 - 大きなファイルを複数のファイルに分割する。
大きなファイルを複数のファイルに分割することで、リソースの読み込み時間を短縮できる場合があります。 - ページごとにリソースをアンロードする。
あるページからリソースを削除できないからといって、すべてのページで必要というわけではありません。例えば WordPress のプラグインは、そのプラグインがそのページでアクティブでなくても、すべてのページにスクリプトとスタイルを追加する傾向があります。
Stop debating in Jira.
Get a definitive answer on your performance issues. I deliver a granular breakdown of your critical rendering path.
- Definitive Answers
- Granular Breakdown
- Critical Path Analysis
