[事例]ECサイト「自然食品・オーガニック食品販売「りんや」様」PageSpeed Insights改善例

制作実績・対応事例

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

りんや

▼りんや
http://rinya.jp

対策前(モバイル)
対策前(PC)

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

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

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

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

その結果がこちら。

対策後(モバイル)
対策後(PC)

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

りんやHP
DATA
施策内容 システム開発/PageSpeed Insights対応
HP http://rinya.jp
事業内容 自然食品・オーガニック食品販売
西部俊宏
執筆者:西部俊宏
株式会社Webの間代表取締役。上場企業でのSEOの実績やWebサイト構築実績多数。SEO・Web制作の経験からクローラビリティ改善・最適化サービスを提供している。

クローラー解析ツールを導入すると各種検索エンジンのクローラーのアクセス状況がGoogle Analyticsで把握できます。

※当ブログはブログ村に参加しております。
にほんブログ村