一般論では見つからないページスピードのボトルネック

「ネットで調べた改善策を一通り試したのに、うちのサイトだけ速くならない」──そんな経験はないでしょうか。セオリー通りのことはやっているはずなのに、期待した効果が出ない。それはやり方が間違っていたのではなく、一般論では届かないサイト固有のボトルネックが存在している可能性が高いのです。

一般論は外側からの診断に過ぎない ​

PageSpeed Insightsやネット上のアドバイスは、外側から体の状態を観察しているようなものです。しかし本当の原因が体の内部にあれば、外側からの観察だけでは限界があります。正確な診断には、メスを入れて内部を直接確認する外科手術のようなアプローチが必要です。

ページスピード改善においてこの外科手術にあたる代表的なアプローチが、パフォーマンスタイムラインの分析です。ブラウザがページを読み込んで表示するまでの全過程がミリ秒単位で記録されており、どこで処理が詰まり、どこで待ち時間が発生しているかを正確に映し出します。

サイト固有のボトルネックは、このタイムラインの中でしか見えないことがほとんどです。しかし、これを正確に読み解ける人が非常に少ないというのが、ページスピード改善が難しい根本的な理由の一つです。

ブラウザの表と裏は別の技術 ​

ブラウザの表現力を活かす技術と、ブラウザが内部でどう動いているかを理解する技術は、まったく別の体系です。フロントエンドのエンジニアやデザイナーは表現力に長けていますが、パフォーマンスタイムラインを読み解くには、レンダリングエンジンの動作原理やメインスレッドのスケジューリングといった裏側の知識が求められます。

一般論のアドバイスとは、このタイムラインの情報を表現側の人にも伝わる形に丸めたものです。わかりやすい反面、本質に踏み込んでいません。

スタートダッシュにあたるHTMLとCSS ​

タイムラインに潜ると、まず見えてくるのがHTMLとCSSに関する問題です。

HTMLは言うまでもありませんが、CSSもまたページ表示の最初期に読み込まれ、解析が完了するまで描画が始まりません。いわば100m走のスタートダッシュにあたる部分であり、ここでの遅れは表示全体の遅延に直結します。たとえばCSSの中で@importを使って別のCSSファイルを読み込んでいると、本来並列で処理できるはずが直列になり、スタートダッシュの段階で大きなタイムロスが発生します。

また地味ですが、HTMLとCSSを異なるドメインから配信している場合にも注意が必要です。ドメインが異なると新たにSSLハンドシェイク（暗号通信の準備プロセス）が発生し、たとえ数十ミリ秒であっても表示の初期段階での遅延につながります。

こうした問題は一般論のアドバイスからは大した問題に見えません。しかしタイムラインを見ると、スタートダッシュでの遅れが後続処理全体に波及している様子がはっきりと確認できます。

JSのメインスレッド占有 ​

もう一つ、タイムラインで明らかになる深刻な問題がJavaScriptです。

「画像が重いのでは？」と考える方は多いのですが、Webページの構成リソースの中で最も重いのは実はJavaScriptです。画像はデータ量こそ大きいものの、ブラウザがGPUの力なども借りながら並行して処理できるため、表示速度への影響は案外限定的です。

一方、JavaScriptの影響は甚大です。ブラウザは非常に高機能なソフトウェアですが、案外不器用なところがあり、多くの処理を1本のメインスレッドで消化する、つまり本質的にはシングルタスクという性質を持っています。描画もユーザー操作の応答も、JavaScriptの実行も、この1本のスレッドで処理されます。つまりJavaScriptが動いている間、他のすべてが止まるのです。

しかしJavaScriptの動作は目に見えません。この 「目に見えない＝重くない」という先入観 が、多くの現場でJavaScriptのボトルネックを見過ごす原因になっています。jQueryのようなDOM操作ライブラリは記述が手軽なぶん、無造作に使うとメインスレッドを長時間占有する処理を量産してしまいます。タイムラインを見ればどの処理がどれだけメインスレッドを消費しているか一目瞭然ですが、潜らなければ決して見つかりません。

先入観が一般論の効果をさらに下げる ​

一般論のアドバイスを読んだとき、人はどうしても先入観に引っ張られます。「画像を最適化しましょう」と書いてあれば「やっぱり画像が原因だ」と納得し、JavaScriptの優先度は下がる。本当に効果が大きい施策ではなく、直感的に納得しやすい施策にリソースを集中させてしまいます。この心理的バイアスも、一般論だけではページスピード改善がうまく進まない構造的な原因です。

パフォーマンスタイムラインという客観的なデータがあれば、先入観に左右されず、実際に最も影響の大きいボトルネックから対処できます。

タイムラインの分析は専門家に任せる ​

とはいえ、フロントエンドのエンジニアやデザイナーに、表現力とパフォーマンス分析の両方を求めるのは酷な話です。一人の野球選手に長打力も走力も両方同時に求めるようなもので、大谷選手のような例外中の例外はさておき、スキルセットとしてのハードルが非常に高い。表現力を追求する人には、表現力を伸ばすことに集中してもらうのが本来のあり方です。

パフォーマンスの問題は、無理に社内や既存の協力先に技能を求めるより、専門家に相談して解決する方が近道です。

弊社の「ページスピード改善リハーサル」は、パフォーマンスタイムラインの深い分析を通じて、サイト固有のボトルネックを特定する専門サービスです。CSSの読み込み構造やJavaScriptのメインスレッド占有状況まで踏み込み、改善効果をシミュレーション環境で事前に実証します。十分な改善が見込めない場合は料金をいただきません。

ページスピード改善リハーサル

実装前に効果を証明。数値と動画で改善結果を見せてから、安心して実装に進めるスピード改善提案サービス