はじめに：サイトの表示速度が気になり始めた理由
「ワダイバ」を立ち上げてしばらく経ち、デザインもある程度形になってきたところで、ふと気になったのが表示速度でした。せっかく2ch風の掲示板デザインに仕上げても、表示が遅くて途中で離脱されてしまっては元も子もありません。
そこで試しにGoogleの「PageSpeed Insights」でスコアを測ってみたところ、想像していたよりもかなり低い数値が出てきてしまいました。特にスマホでのスコアが厳しく、画像の最適化やレンダリングのブロックに関する指摘がずらりと並んでいるのを見て、これは本腰を入れて改善しなければと思い立ちました。今回はその高速化の試行錯誤と、途中でやらかしてしまった失敗談も含めて正直にレポートします。
実際に試した高速化施策
画像のWebP化
まず手をつけたのが画像です。それまで何も考えずにJPEGやPNGのままアップロードしていた画像を、WebP形式に変換するプラグインを導入しました。既存のメディアライブラリの画像も一括で変換できるタイプのものを選び、アップロード時に自動でWebPに変換される設定にしたところ、画像まわりの読み込み時間だけでもかなり短縮された印象があります。
遅延読み込み（Lazy Load）の設定
次に取り組んだのが、画像の遅延読み込みです。ファーストビューに表示されない画像は、ユーザーがスクロールして近づくまで読み込みを後回しにする仕組みで、初期表示の負荷を大きく減らせます。プラグインの設定画面から有効化するだけで手軽に試せる点も良かったです。
キャッシュプラグインの導入
そして最後に導入したのが、キャッシュ系プラグインです。一度生成したページのHTMLを保存しておき、次回以降のアクセスではその静的なファイルを返すことで、サーバー側の処理負荷を減らす仕組みです。導入直後にPageSpeed Insightsで再計測したところ、数値がはっきりと改善しているのが確認でき、地道な作業がようやく報われた気がしました。
【失敗談】設定を攻めすぎてサイトのレイアウトが崩壊した話
CSS/JSの遅延読み込みをやりすぎた結果
ここで調子に乗ってしまったのが失敗のはじまりでした。スコアをもっと上げたい一心で、CSSやJavaScriptについても「レンダリングをブロックするリソースの除外」という項目にチェックを入れ、片っ端から遅延読み込みの設定を有効にしていったのです。
すると案の定、サイトの表示が崩れました。掲示板デザインのために調整していたレス欄のスタイルが一瞬崩れた状態で表示され、その後にCSSが読み込まれてガタッとレイアウトが変わる、いわゆるレイアウトシフトが頻発するようになってしまったのです。スコア上の数字は良くなったのに、実際に画面を見るとチカチカと崩れる、本末転倒な状態でした。
解決策：優先度の高いCSSだけは遅延させない
そこで、全部のCSSを一律で遅延させるのをやめ、サイトの骨格に関わる最低限のスタイル（ヘッダーやレス欄の基本デザインなど）だけは通常通り読み込ませ、装飾的なCSSやページ下部でしか使わないJavaScriptだけを遅延読み込みの対象にするよう設定を見直しました。あわせてキャッシュプラグインの除外設定も確認し、必要なファイルまで巻き込んで遅延させていないかを一つずつチェックする作業を行いました。地味な作業でしたが、これでようやくレイアウトの崩れが収まり、スコアと見た目の両方を両立できる状態に落ち着きました。
まとめ：高速化で一番大切だと感じたポイント
今回の一連の作業を通して痛感したのは、PageSpeed Insightsのスコアはあくまで目安であって、それ自体がゴールではないということです。数字を追いかけるあまり設定を攻めすぎると、今回のようにユーザーにとって読みにくいサイトになってしまっては本末転倒です。
これから高速化に取り組む方には、スコアの数値を見ながらも、必ず実際の画面を自分の目で確認しながら一つずつ設定を進めることをおすすめします。「ワダイバ」もまだ始まったばかりのサイトですが、こうした地道な改善を積み重ねながら、読みやすく、快適に使ってもらえる場所を育てていきたいと思っています。
コメント