- 表示高速化
- 更新日:
TanakaYuta SEO Div. コンサルタント
現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇 効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。
スピードアップデートが実施されて以来、PageSpeed Insightsを活用する方も増えています。
今回は、PageSpeed Insightsで「メインスレッド処理の最小化」を提案された時の対処法を紹介します。
- メインスレッドはWebページの主要な処理を行う領域で、負荷が高いと表示速度が低下する。
- 主な原因はJavaScriptの過剰実行であり、不要なプラグイン削除やコード圧縮で改善可能。
- DOM操作の最適化も効果的で、要素数や階層を減らすことで処理負担を軽減できる。
- JavaScriptの書き換えによるチューニングも有効だが、上級者向けの対処法となる。
- PageSpeed Insightsを活用し、Webサイト全体のパフォーマンスを継続的に改善することが重要。
【今だけ無料】PageSpeed Insightsを100ページ一括自動診断！
「トップページは改善したが、下層ページは放置気味…」「1ページずつ手動で計測するのは手間がかかる…」
そんなお悩みを解決！最大100ページを自動で計測し、修正優先度付きのレポートを無料で作成します。サイト全体の「健康状態」を把握したい方は、今すぐお申し込みください。
目次
「メインスレッド処理の最小化」とは？
スレッドとは、プログラム処理の流れを表す単位のことです。
アプリケーションの開始時に最初に作られるスレッドを「メインスレッド」と言い、この処理を最小化させることでwebアプリケーションの処理を高速化できます。
PageSpeed Insightsで「メインスレッド処理の最小化」が提案されている場合、処理に4秒以上かかり、ページの表示が遅れていることを示します。
メインスレッド処理の最小化の方法
PageSpeed Insightsでは、メインスレッド処理が遅くなっている原因をカテゴリで確認できます。
かかった時間の多いカテゴリを確認すると、「Script Evaluation」（スクリプトの評価）に最も時間がかかっているケースがほとんどです。
この問題は、JavaScriptの実行を最適化することで解決します。
具体的には、次の施策が挙げられます。
不要なWordPressプラグインの削除
WordPressのプラグインを多くインストールするほど、実行されるJavaScriptも増えます。
プラグインは多くても5個が目安です。
「プラグインが多すぎて、どれを削除すれば良いか分からない」という場合、次の基準で判断しましょう。
- 機能が被っているプラグインはないか
- インストールしたものの使いこなせていないプラグインはないか
- テーマの機能で代用できるものはないか
JavaScriptを圧縮する
JavaScriptを圧縮することで、コメントや空白、改行が削除され、ソースコードが軽量化されて読み込みが早くなります。
JS Minifierなど、ブラウザ上で圧縮ができるツールを活用しましょう。
JavaScriptの圧縮には、表示スピードの高速化だけでなく、サーバー容量の節約やコードの難読化といったメリットもあります。
DOM操作を最適化する
DOM（Document Object Model）とは、HTMLとCSSの要素をJavaScriptなどのアプリケーションから操作するための仕組みです。
JavaScriptによる動作の多くに、DOM操作がされています。
DOM操作は異なる言語間でもアクセスできるメリットがある一方で、その分操作の時間もかかるというデメリットもあります。
つまり、DOM操作が多いほどページの表示スピードも遅くなる傾向にあるということです。
次の方法で、DOM操作を最適化しましょう。
過大なDOMサイズの回避
PageSpeed Insightsで「メインスレッド処理の最小化」が提案されていると、「過大なDOMサイズの回避」も提案されている可能性が高いです。
この場合、「合計 DOM 要素数」を確認し、ページ内のDOM要素数を減らしましょう。
DOM要素（ノード）とはHTMLのpやimgといった要素のことです。
DOM要素の上限は、次のように推奨されています。
- 総数：1500個まで
- 階層の深さ：32個まで
- 子要素60個まで
JavaScriptの書き換え
こちらは上級者向けの方法ですが、JavaScriptを効率よく作動するように書き換えることでDOM操作を最適化できます。
JavaScriptの知識がある方は、無駄な動作がないかソースコードを見直しましょう。
参考URL：DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp
まとめ
今回は、メインスレッド処理の最小化について解説しました。
PageSpeed Insightsは無料で表示スピードの改善点が分かる便利なツールですが、馴染みのない言葉も多く、具体的な施策を都度検索している方も多いかと思います。
弊社では、PageSpeed Insightsで計測できるコアウェブバイタルをはじめとしたWebサイトの表示スピードの改善する「表示速度改善サービス」をご用意しています。ご相談は無料ですので、ぜひお気軽にお問い合わせください。
数時間の作業を一瞬で！PageSpeed Insights最大100ページを一括診断！
PageSpeed Insightsを手動でチェックすると、3〜5分程度かかってしまいます。
一定規模、以上のWebサイトで全ページをチェックしようとすると、数時間以上のリソースが必要になります。
デジタルアイデンティティでは、「トップページ以外の速度状況がわからない」「ページ数が多くて管理しきれない」という企業様向けに、PageSpeed Insightsで最大100ページをまとめて計測する「サイトスピード一括診断ツール」を提供しています。
WebサイトのURLを入力するだけで、モバイル・PC両方のスコアやCore Web Vitals指標を全自動で取得。単なるスコアだけでなく、「どのページから直すべきか」がわかる修正優先度リストや、SEOリスクの可視化レポート（PDF・Excel）を無料で納品します。
こんなお悩み、ありませんか？
- 1ページずつPSIで計測するのが面倒で放置している…
- トップページは早いが、記事や商品ページの速度が不安…
- どのページが足を引っ張っているのか特定できない…
- 社内報告用にサイト全体のパフォーマンスを数値化したい…
- 改善インパクトの大きいページから効率よく対策したい…
「点」ではなく「面」でサイトの課題を把握し、ユーザー体験とSEO評価を底上げしましょう。
サービスリリース記念で今だけ無料で診断いたします！
