「メインスレッド処理の最小化」とは？改善方法も解説【PageSpeed Insights】
Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「メインスレッド処理の最小化」とはどういう意味か、また診断結果を改善する方法についても解説します。
目次
「メインスレッド処理の最小化」とは？
スレッドとは英語で「糸」を意味する単語であり、コンピュータ(特にCPU)処理の分割単位の1つです。似たような単語にプロセスやタスクがありますが、大雑把にいうとスレッドが1つ以上集まったのがプロセスであり、いくつかのプロセスが集まったのがタスクとなります。
その中でもメインスレッドとは、アプリケーションの開始時に最初に作られるスレッドのことです。つまりメインスレッド処理を最小化させることで、webアプリケーションの処理を高速化させることができます。
「メインスレッド処理の最小化」の改善方法
まずはpage speed insightsで診断しよう
メインスレッド処理を最小化させることは、webページの開発では重要な課題の1つです。そのためには、開発しようとするwebページにどのような問題があるかを診断しなければなりません。それができるのが「page speed insights」であります。
page speed insightsとは、Googleが提供するwebページ速度チェックツールのことです。webページにおける現状の表示スピードから問題点を指摘し、さらに具体的な改善方法まで提案してくれます。では何故webページの表示速度を改善させる必要があるかといえば、検索順位に影響があるからです。webページの表示速度の良し悪しは、webページ開発に関わる人にとって避けることができません。
JavaScript実行を最適化させるために、Javascriptファイルを圧縮する
page speed insightsで診断を行うと、JavaScript実行を最適化させるように指示が出るかもしれません。プログラミング言語の1つであるJavascriptは多くの処理を行えますが、その分スレッドを独占させる傾向にあります。そうするとメインスレッド上の処理に時間がかかるため、JavaScript実行を最適化させてメインスレッド処理の最小化を狙うと良いでしょう。
JavaScript実行を最適化させるためには、まずはJavascriptファイルを圧縮することです。具体的には空白やタブなどの余分な文字列や、コメントなどを削除させます。ファイルを圧縮できれば、その分サイズが軽くなるため、ダウンロードする時間が短縮されるかもしれません。ちなみにファイルを圧縮させるためには、インターネット上で提供される圧縮ツールを活用すると良いでしょう。
DOM操作を減らして、JavaScript実行を最適化させる
DOM操作とは、JavaScriptでhtmlの要素を操作することを指します。DOM操作はWebページを、どんな大きさの画面でも見やすく使いやすくするために行われます。しかしDOM操作を数多く行うと、リフローの時間が多発しWebページ表示時間が長くなってしまうのです。つまり、DOM操作を減らすことは、JavaScript実行を最適化させ、メインスレッド処理の最小化につながっていくでしょう。そのためにはDOM構造が簡潔になるようなJavaScriptを組む必要があるのです。
しかしDOM操作を数多く行うと、リフローの時間が多発しWebページ表示時間が長くなってしまうのです。
つまり、DOM操作を減らすことは、JavaScript実行を最適化させ、メインスレッド処理の最小化につながっていくでしょう。そのためにはDOM構造が簡潔になるようなJavaScriptを組む必要があるのです。
