「メインスレッド処理の最小化」の意味と対処法を分かりやすく解説！

スピードアップデートが実施されて以来、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サイトの表示スピードの改善する「表示速度改善サービス」をご用意しています。ご相談は無料ですので、ぜひお気軽にお問い合わせください。

表示速度改善のサービスページはこちら

無料Webサイト高速化診断で課題を見える化！【毎月5社限定】

株式会社デジタルアイデンティティでは、毎月先着5社限定で無料の高速化診断を実施しています！

高速化に関するこんなお悩みはありませんか？

• 高速化でどこから手をつければいいかわからない…
• 自社で高速化をしてみたが、効果が上がらない…
• PageSpeed Insightsのスコアが良くならない…
• 高速化ができるリソースがない / 人材がいない…

Webサイト高速化は、同じ項目であってもサイトの状況によって、対応するべきポイントが変わる難易度の高い施策です。
自社での対応が可能な場合もありますが、難易度の高い施策が必要な場合もあります。

そんな時は、無料の高速化診断をお試しください！
様々なサイトの高速化を実現してきたプロが、あなたのWebサイトを分析！
高速化に必要な施策と施策毎の難易度、改善後のインパクトまで、まとめてご報告します！

• どんな施策をすれば良いか？
• どの施策から実施するか？
• どの程度、スピードを改善できそうか？

など、高速化施策の方針が明確化します！

ただし、毎月先着5社様限定となっておりますので、お早めにお申し込みください！

無料の高速化診断に申し込む