- 表示高速化
- 更新日:
TanakaYuta SEO Div. コンサルタント
現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇 効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。
スピードアップデートが実施されて以来、PageSpeed Insightsを活用する方も増えています。
今回は、PageSpeed Insightsで「メインスレッド処理の最小化」を提案された時の対処法を紹介します。
無料の高速化診断、実施中！
「PageSpeed Insightsのスコアが低い…」「どう改善すれば良いかわからない…」
など、表示速度の課題を感じている方に、表示速度が遅いページ一覧と原因・改善施策がわかる無料の高速化診断を実施中！サイトの現状を知りたい方、改善施策が知りたい方は、ぜひお気軽にお申し込みください。
目次
「メインスレッド処理の最小化」とは？
スレッドとは、プログラム処理の流れを表す単位のことです。
アプリケーションの開始時に最初に作られるスレッドを「メインスレッド」と言い、この処理を最小化させることで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サイトの表示スピードの改善する「表示速度改善サービス」をご用意しています。ご相談は無料ですので、ぜひお気軽にお問い合わせください。
高速化診断 & 表示速度改善でユーザー体験とCVRを向上！
デジタルアイデンティティでは、Webサイトの表示速度に課題を感じている企業様向けに、無料の高速化診断とフロントエンドからインフラまで一貫対応する表示速度改善サービスを提供しています。
表示速度が遅いページ・原因が一覧でわかる高速化診断でサイトの現状を徹底分析。PageSpeed Insightsのスコア改善はもちろん、画像・CSS/JS・サーバー処理・インフラ最適化まで、技術力と実績に裏打ちされた幅広い施策で、SEO評価やCVR、UI/UXを総合的に底上げします。
こんなお悩み、ありませんか？
- まずはサイトの現状を診断してほしい…
- PageSpeed Insightsのスコアが低く、改善したい…
- ユーザー離脱や直帰率が高く、表示スピードが原因かもしれない…
- 高速化に詳しいエンジニアが社内にいない…
- 対策したがスコアが上がらない、改善方法がわからない…
多くの企業サイトやLP、ECサイトなどで成果を上げてきた表示速度改善のプロフェッショナルが、貴社サイトの課題を根本から解決します。
