メインスレッド処理の最小化とは？Script Evaluationなどの主な原因と改善方法

「PageSpeed Insightsで“メインスレッド処理の最小化”と表示されたけれど、何をすればいいのかわからない……」
そんなふうに悩んでいる方も多いのではないでしょうか。

メインスレッドとは、Webページの表示や操作に関わる重要な処理を担う“司令塔”のような存在です。
その負荷を減らすことが、サイトの表示速度やユーザー体験の向上に直結します。

本記事では、「メインスレッド処理の最小化」が求められる理由から、よくある原因のパターン、原因別の改善策、WordPressで実施できる具体的な方法まで丁寧に解説します。

メインスレッド処理の最小化とは？

page speed insight で計測した際の「メインスレッド処理の最小化」

lighthouseで計測した時の「メインスレッド処理の最小化」

メインスレッド処理の最小化とは、ブラウザがページを描画・操作するための負荷を減らし、表示速度や応答性を改善するために行う対策のことです。

メインスレッドとは、表示に関わる中心的な仕事をすべて引き受けている司令塔のような存在です。
この司令塔がやることが多すぎると、表示が遅くなったり、ボタンを押してもすぐに反応しなくなったりします。

そこで、できるだけ無駄な作業を減らし、スムーズに動くようにすることが「メインスレッド処理の最小化」です。

なぜ「メインスレッド処理の最小化」が必要なのか

メインスレッドが重いと、クリックに反応しない、画面が固まるなどの現象が起こりやすくなります。
これにより、ユーザー体験が悪化し、直帰率や離脱率が高まる可能性があります。

また、Googleの検索アルゴリズムにおいても、ページ表示速度はSEO評価指標の一つとなっています。
とくにGoogleが重要視する「Core Web Vitals」の指標の中で

• INP（Interaction to Next Paint）
• LCP（Largest Contentful Paint）

にも直接関係します。

そのため、Webサイトの表示速度を改善するうえで「メインスレッド処理の最小化」は非常に重要なポイントなのです。

PageSpeed Insightsでこの項目が表示された場合は、優先的に対策すべきポイントといえます。

メインスレッドとサブスレッドの違い

メインスレッドは、画面描画やユーザー操作に直接関わる処理を担当しています。
一方でサブスレッド（たとえばWeb Worker）は、重い処理や計算などを並行して行うことができます。
うまく使い分けることで、UIの応答性を保ちながら効率よく処理を分散できます

メインスレッド処理の最小化のよくある原因と改善方法

メインスレッド処理の最小化が表示されてしまう場合の、よくある原因と改善方法は以下の通りです。

Script Evaluation 改善｜JavaScriptの最適化

JavaScriptの実行にかかる時間の低減

JavaScriptの処理時間が長いと、メインスレッドがブロックされ、ユーザー操作ができなくなります。
スクリプトは小さな単位に分け、必要なタイミングで実行することが大切です。
また、asyncやdefer属性を活用して、HTMLの解析と並行して読み込む工夫も効果的です。

JavaScriptペイロードのサイズを抑える

使っていないコードを削除する「Tree Shaking」や、minify（圧縮処理）を行うことで、ファイルサイズを小さくできます。
WebpackやRollupなどのビルドツールを活用することで、自動的に不要なコードを除外できます。

style & layoutの最適化｜不要なスタイルの削除やCSSの統合

ページの見た目を整えるためのスタイルやレイアウト情報が複雑すぎると、ブラウザは表示のたびに何度も計算し直す必要があります。
その処理がメインスレッドの負荷となり、結果としてページの表示速度を遅くしてしまいます。

以下では、よくある原因と対策を2つの観点からご紹介します。

不要なスタイルや重複定義は削除する

CSSが多すぎると、ブラウザは「どのスタイルをどこに適用するか」を毎回判断しなければなりません。
特に、複数のプラグインやテーマを併用している場合、使われていないスタイルが多く含まれていることがあります。

改善ポイントは以下の通りです。

• 使用していないスタイルを整理・削除する
• 同じ意味のスタイルが複数箇所で定義されていないか確認する
• 開発担当に「CSSの最適化が必要か」を相談してみる

ファーストビューに必要なスタイルを優先的に読み込む

ページを開いたとき、まず最初に見える範囲（ファーストビュー）をすぐ表示させることが大切です。
そのために使うのが「critical CSS」と呼ばれる手法です。
これは、必要なスタイルだけを先に読み込んで表示を速くするテクニックです。

さらに、スタイルシートが複数に分かれている場合は、1つに統合して読み込み回数を減らすのも有効です。

• ファーストビューに必要なスタイルを優先して読み込む（critical CSS）
• CSSファイルを1つにまとめ、不要な読み込みリクエストを減らす

Script Parsing & Compilationの最適化｜JavaScriptの分割とminifyで処理を軽量化

JavaScriptは、ページ上でボタンが動いたり、画像が切り替わったりするような「動き」を担当するコードです。
このJavaScriptファイルが大きすぎたり、不要なコードが多く含まれていると、ブラウザがそれを読み込むのに時間がかかってしまいます。

ここでは、よくある原因と対策を2つのポイントに分けて解説します。

不要なスクリプトやライブラリは削除する

Webサイトでは、多機能なテンプレートやプラグインを使うことで、使っていない機能のスクリプトまで読み込まれていることがあります。
こうした「本当は不要なコード」があると、それを読み込んで解釈するだけで時間がかかります。

改善するには、以下のような見直しが効果的です。

• 使っていないライブラリやプラグインを整理する
• 使用していないボタンやスライダーのスクリプトを削除する
• テンプレートやプラグインの中でも、軽量な選択肢を検討する

必要なタイミングでだけ読み込むようにする

すべてのJavaScriptを最初から一気に読み込むと、表示までの時間が遅くなってしまいます。
そこで、必要な処理だけをタイミングに応じて読み込む「コードの分割」や「遅延読み込み」を行うことで、パフォーマンスが向上します。

あわせて、開発担当に以下のような依頼をするとよいでしょう。

• JavaScriptを複数に分け、必要な場面でだけ動かすようにする
• 使用中のコード以外は読み込まないよう整理してもらう
• コードをminify（圧縮）して、ファイルサイズを減らすよう相談する

分類されない処理「Other」に注意｜不要なスクリプトや動作の見直しがカギ

PageSpeed InsightsやChrome DevToolsのレポートで「Other」と表示される項目は、特定のカテゴリに分類できない処理がまとめられている部分です。
一見すると原因がわかりづらいですが、実はページの表示速度に大きな影響を与えていることがあります。

「Other」に含まれる代表的な原因

「Other」に含まれる代表的な原因は以下の通りです。

• サードパーティのスクリプト（広告・SNS連携・アクセス解析など）
• アニメーション処理やイベント監視などのJavaScript動作
• 長時間動き続けるスライダーや動画背景などの演出系要素

これらは、目には見えづらいながらも、ブラウザに余計な処理をさせていることが多いため、注意が必要です。

改善策として有効な対処法

• 不要な外部スクリプトは読み込まないようにする
  （例：使っていないSNSボタンや旧バージョンの計測タグを削除）
• 広告やチャットウィジェットは読み込みタイミングを遅らせる
  （例：ユーザーの行動が始まってから読み込む「遅延読み込み」を設定）
• 動きのある演出は最小限に
  （例：スライダーの切り替え速度を下げる、アニメーションの数を減らす）

「Other」は対処法が明確でないぶん、制作側との連携が重要になる項目です。
「このスクリプトは本当に必要？」という視点で一度棚卸ししてみると、改善につながるケースが多くあります。

WordPressで「メインスレッド処理の最小化」を改善する主な対策

不要なプラグインは停止・削除する

使っていないプラグインが有効なままだと、裏側でJavaScriptやCSSが読み込まれ、メインスレッドに負担がかかります。
必要な機能だけを残して、不要なものは思い切って整理しましょう。

高速化系プラグインでコードを軽量化する

AutoptimizeやLiteSpeed Cacheなどのプラグインを使うと、JavaScriptやCSSを自動で圧縮（minify）したり、読み込み順を最適化できます。
初心者でもボタン操作で設定できるため、手軽にサイトを軽くすることができます。

JavaScriptを遅延読み込み（defer）または非同期読み込み（async）にする

スクリプトの読み込みを後回しにすることで、ファーストビューの表示を速くできます。
一部のキャッシュ・最適化プラグインでは、これらの設定もボタン1つで対応可能です。

画像・動画・外部ウィジェットの読み込みを見直す

YouTube埋め込みやSNS連携、チャットウィジェットなどは、表示が重くなる原因になります。
Lazy Loadの設定や、クリック後に読み込む「遅延読み込み」機能の活用が効果的です。

表示速度の速いテーマに切り替える

テーマ自体が多機能すぎたり、コードが重い場合は根本的な改善が難しいこともあります。
可能であれば、表示速度に定評のあるテーマ（例：Cocoon、Lightningなど）への乗り換えも検討材料となります。

高速表示を目指すなら、CMSの選択も重要

ページの表示速度を改善するためには、HTMLやCSS、JavaScriptの最適化だけでなく、そもそものCMS（コンテンツ管理システム）の構造も大きく影響します。

WordPressは便利な一方で、多くのプラグインやテーマ機能が裏側で動作し、メインスレッドの負荷につながるケースもあります。
特にカスタマイズ性やスピードを重視する場合、従来型CMSでは限界を感じることも少なくありません。

表示速度と柔軟性を両立するなら「BERYL」がおすすめ

BERYLは、フロントエンドとバックエンドが分離されたヘッドレスCMSです。
表示に不要な処理を最小限に抑えながら、開発者が自由にページ構成やデザインを設計できます。

その結果、以下のようなメリットがあります。

• 表示に関係のない処理を分離できるため、メインスレッドへの負荷が少ない
• 必要なデータだけを取得する構造により、JavaScriptの実行コストを抑えられる
• Next.jsなどの高速なフレームワークとの連携で、LCPやINPの改善も図りやすい

表示スピードと柔軟な開発を両立したい方は、ぜひBERYLの導入をご検討ください。

BERYL公式サイトはこちら

この記事を書いた人

BERYL編集部

「BERYL編集部」は、Web制作、CMS関連、Webマーケティング、コンテンツマーケティング、オウンドメディアなど、多岐にわたる分野で専門的な記事を制作しています。デジタル領域における最新の技術動向や実践的な事例を通じて、マーケティング戦略を強化するための情報を発信いたします。 また、SEO対策やコンテンツの最適化にも注力。ユーザー目線でわかりやすく解説し、企業のマーケティング活動やコンテンツ運営をサポートします。