別部署のECサイト担当者から表示速度改善をしたいと相談を受け、提案してきました。そもそもなぜ高速化するのか？と私が提案した内容を共有します。今回の内容はフロント側のみの対応で高速化することを前提としています。
WEBサイトを高速化することのメリット
Amazonが2006年に公表しているデータによるとページの読み込み時間が1秒増えると、コンバージョンが7％減少、PVが11％減少、ユーザー満足度が16％減少となっています。逆に読み込み時間が0.1秒減ると売上が1％増加すると公表しています。
その他、SEO対策としても有効とされています。 Googleの200以上ある指標の中のひとつにサイトの表示速度が追加されています。
高速化→コンテンツの通信量が減るとなればサーバーの負荷低減、費用削減の効果があります。
表示を高速化するとメリットがたくさんあります。ブランディング用のサイトを平均で1.2秒読み込み速度を改善した際は、PV数が8％増えました。スマホが主流になっているので、電車乗っている時間だけスマホを使う、待ち合わせ時間までスマホを使うユーザーが増えています。そのため、表示速度が改善することで、今まで5PVで時間がきていた人が6PV見れるようになったのじゃないかなと考えています。
表示速度が遅い原因は？
まずは現状の分析から行いました。主要なページのトップページ、商品ページ、検索ページをそれぞれディベロッパーツールを使いながら、それぞれのページでの通信量、通信回数、画像の拡張子やサイズを調べました。下記問題点がわかりました。
- PC/SPで画像の表示を分けているが、display:noneで隠しているだけなので通信は行なっている
- 画面外の画像も一括で表示している。スクロールで後読みをしていない
- 約40個のアイコンをダウンロードしてきている。CSSスプライトを使っていない
- CSS、JSが追加はされているけど削除されていないので各ページ20ファイルほど読み込んでいる
- jsファイルをheadタグ内で読み込んでいる
- CDNを使っていない
- 画像のフォーマットが最適化されていない
表示速度改善のために提案したこと
問題点1と2はlazy-loadにPC/SPでコンテンツを出し分ける処理を追加したjsを追加して、各imgタグを変更すれば解決します。各imgタグを変更しないといけないので修正範囲が広く大変ですが、確実に効果は現れます。
3,4は少し似ています。cssとjsの最適化です。jsに関してはpackされているのもあるので解明が大変です。なんのためにそのjsを追加しているのかわからないものも多々あり、アクセス解析やMAツールとの連携などの表示以外の可能性もあるため厄介です。そのため後回しにしました。
5番は簡単です。jsファイル読み込みを最下部に移動するだけで大丈夫です。問題がないかのテストが少し大変です。こちらは通信量・通信回数は変わらないので表示速度は変わりませんが、体感表示速度が改善されます。
6はCDNを利用していないため、WEBサーバーの場所に物理的に近い人は表示速度に問題がありませんが、物理的に遠い人は表示速度が遅くなります。CDNを導入することでWEBサーバーの負荷低減にもつながります。
また、CDNの機能によっては7の画像の最適化も一緒に行うことができます。
7はjpgでいい画像をpngで作ってサイズが大きくなっていたり、表示は横100pxなのに画像は500pxと無駄に大きく作っていたりしています。システムで全てを解決することは難しいため、サイズと拡張子の教育と運用フローにSquoosh を使用して画像容量を減らすようにしました。
webpという画像拡張子を導入をしようとしてCloudFront + Lambda Edgeでプログラムを作ったのでそれは次回に共有します。
提案を行いましたが、結局htmlを自由に書き換えられない、js、cssもベンダーが管理しているので変更できないと言われたため全て実行できませんでした。じゃあ、なんで相談してきたんだよって話ですが・・・ベンダーとの力関係は大事だなと学びました。