EC-CUBE 4 の PageSpeed を 20 点台から 97 まで上げた手順

酒類販売の EC-CUBE 4 サイトで、モバイルの PageSpeed Insights が20〜30点台という相談を受けました。デザインには手を入れない、テーマの構造も変えない、という前提での改善です。最終的にモバイル97点まで上がったので、何が効いたのかを順番に書きます。

最初にやるのは計測ではなく、読み込みの順番を見ること

スコアの内訳を見ると、ほぼすべてが First Contentful Paint と Largest Contentful Paint の遅さに起因していました。つまり画像の重さではなく、最初の描画が始まるまでに何を待たされているかが問題です。

DevTools のネットワークタブをウォーターフォール表示にして、先頭から順に何がブロックしているかを見ます。このサイトでは、CSS の読み込みが階段状に並んでいました。

テーマの sp.css の冒頭で、別の CSS を @import していました。

@import url("common.css");
@import url("slick.css");

@import はブラウザが親の CSS をパースし終えるまで子の取得を始めません。並列で取れるはずのファイルが直列になります。これを <link> タグに展開して並べ直すだけで、描画開始が目に見えて早くなりました。

ここが単体で一番効きました。CSS を1本にまとめるより先に、直列になっている箇所を潰すほうが優先度は高いです。

Google Fonts を CDN から読んでいたため、fonts.googleapis.com への接続、CSS の取得、そこから fonts.gstatic.com への接続、と往復が重なっていました。

フォントファイルを自サーバーに置き、@font-face を自前で書いて font-display: swap を付けます。サブセット化までやれば理想ですが、日本語フォントを使っていない構成だったのでファイルを置くだけで済みました。

チャットウィジェットと解析タグが、初期描画と同じタイミングで走っていました。これらは defer ないし遅延読み込みに変更します。ユーザーがページを見るより先に読み込む必要があるものは、ほとんどありません。

フッターの Instagram 埋め込みが、外部ドメインへの画像リクエストを大量に発生させていました。画像を自サーバー経由で取得・キャッシュする形に変えて、外部接続の数を減らしています。

項目	対応前	対応後
モバイルスコア	20〜30台	97

やらなかったことも書いておきます。テーマの作り直し、画像の一括 WebP 変換、キャッシュプラグインの導入は、いずれも見送りました。既存のデザインと運用を維持したままという前提があったからです。

表示速度の改善は、大がかりなリニューアルを提案されがちな領域です。ただ実際には、読み込みの順番を整理するだけで戻ってくる分がかなりあります。まずそこから見るのをおすすめします。