titleタグとは
SEO診断
スピードアップデートが実施されて以来、PageSpeed Insightsを活用する方も増えています。
今回は、PageSpeed Insightsで「メインスレッド処理の最小化」を提案された時の対処法を紹介します。
目次
表示
閉じる
スレッドとは、プログラム処理の流れを表す単位のことです。
アプリケーションの開始時に最初に作られるスレッドを「メインスレッド」と言い、この処理を最小化させることでwebアプリケーションの処理を高速化できます。
PageSpeed Insightsで「メインスレッド処理の最小化」が提案されている場合、処理に4秒以上かかり、ページの表示が遅れていることを示します。
PageSpeed Insightsでは、メインスレッド処理が遅くなっている原因をカテゴリで確認できます。
かかった時間の多いカテゴリを確認すると、「Script Evaluation」(スクリプトの評価)に最も時間がかかっているケースがほとんどです。
この問題は、JavaScriptの実行を最適化することで解決します。
具体的には、次の施策が挙げられます。
WordPressのプラグインを多くインストールするほど、実行されるJavaScriptも増えます。
プラグインは多くても5個が目安です。
「プラグインが多すぎて、どれを削除すれば良いか分からない」という場合、次の基準で判断しましょう。
JavaScriptを圧縮することで、コメントや空白、改行が削除され、ソースコードが軽量化されて読み込みが早くなります。
JS Minifierなど、ブラウザ上で圧縮ができるツールを活用しましょう。
JavaScriptの圧縮には、表示スピードの高速化だけでなく、サーバー容量の節約やコードの難読化といったメリットもあります。
DOM(Document Object Model)とは、HTMLとCSSの要素をJavaScriptなどのアプリケーションから操作するための仕組みです。
JavaScriptによる動作の多くに、DOM操作がされています。
DOM操作は異なる言語間でもアクセスできるメリットがある一方で、その分操作の時間もかかるというデメリットもあります。
つまり、DOM操作が多いほどページの表示スピードも遅くなる傾向にあるということです。
次の方法で、DOM操作を最適化しましょう。
PageSpeed Insightsで「メインスレッド処理の最小化」が提案されていると、「過大なDOMサイズの回避」も提案されている可能性が高いです。
この場合、「合計 DOM 要素数」を確認し、ページ内のDOM要素数を減らしましょう。
DOM要素(ノード)とはHTMLのpやimgといった要素のことです。
DOM要素の上限は、次のように推奨されています。
こちらは上級者向けの方法ですが、JavaScriptを効率よく作動するように書き換えることでDOM操作を最適化できます。
JavaScriptの知識がある方は、無駄な動作がないかソースコードを見直しましょう。
参考URL:DOM操作の最適化によるJavaScriptチューニング(前編) | HTML5Experts.jp
今回は、メインスレッド処理の最小化について解説しました。
PageSpeed Insightsは無料で表示スピードの改善点が分かる便利なツールですが、馴染みのない言葉も多く、具体的な施策を都度検索している方も多いかと思います。
「株式会社アダムテクノロジーズ」では、PageSpeed InsightsをはじめLighthouseやChrome UV Reportなど、全7種類のツールを使って改善点を調査し、弊社エンジニアがタスクを実行いたします。
株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。