［HP制作実績］ECサイト「自然食品・オーガニック食品販売「りんや」様」システム開発・PageSpeed Insights改善例

先日ECサイトの速度改善に取り組みました。担当者のご好意でその実例を公開させていただきます。対応したのは自然食品やスキンケア商品を販売しているショップ「りんや」様です。

▼りんや
http://rinya.jp

こちらのサイトのトップページのPageSpeed Insightsスコアはモバイルが42点、PCが50点と赤点の状態でした。ここから施策を開始します。

まずはサイトの設定を見直しました。サーバーの圧縮を有効にし、ブラウザのキャッシュを設定しました。
次にWebページの施策です。サイトの構造を変更、CSSとJavaScriptの読み込み位置を変えて、かつ非同期化しました。そしてHTML・CSS・JavaScriptから余分なコードを取り除きます。この作業も結構ボリュームがありました。
最後に画像を最適化です。JpgとPng画像を全て圧縮して再アップしました。

ここまでの対応でもある程度の点数になりました。減点部分は4つ、「サーバーの応答時間を短縮する」「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」「ブラウザのキャッシュを活用する」「画像を最適化する」です。「ブラウザのキャッシュを活用する」「画像を最適化する」はページ上で外部ファイルを読み込んでいる部分で、その点はこちらでは対応できません。また、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」は作業ボリュームが大きかったので今回は未対応となりました。

しかし、「サーバーの応答時間を短縮する」は何とか対応したいところです。こちらのECサイトは商品情報をDBから直接読み込んでおり、そのため若干遅延が発生していました。今回速度改善の目的も踏まえて商品情報をキャッシュ化しました。商品情報が頻繁に変わる訳ではないのでリアルタイムに情報を提供する必要性がないことも実施できた理由です。

その結果がこちら。

モバイル・PC共に90点です。赤字のエラーはなくなりました。速度改善によりユーザーエクスペリエンスも向上し、喜んでいただけました。

DATA

施策内容	システム開発／PageSpeed Insights対応／レスポシンブ対応
HP	http://rinya.jp
事業内容	自然食品・オーガニック食品販売