【後編】売上を左右する「ページ表示速度」の改善方法5選

EC・Webサイトの改善

【後編】売上を左右する「ページ表示速度」の改善方法5選

SEO対策だけではなく、サイトのCVRを改善するためには、「Webページ表示速度・読み込み速度」の存在を無視できません。前回コラム(計測方法)に続きまして、本コラムではWebページ表示速度・読み込み速度の改善方法について解説します。

【目次】
1.今すぐ実践できる改善方法5選
2.まとめ(前編・後編の総括)

1.今すぐ実践できる改善方法5選

今すぐ実践できる改善方法5選

ここでは、前編で紹介した「Google PageSpeed Insights」をベースに解説します。
※コラム:【前編】売上を左右する「ページ表示速度」の計測方法3選 第3章

同ツール内の「改善できる項目」を確認のうえ、参考にしてください。(※下図参照)

「改善できる項目」を確認

Webページの読み込み速度・表示速度を改善する方法として、以下5パターンを紹介します。

1) コンテンツのサイズを縮小化(圧縮)
2) ブラウザ上の描画プロセス(レンダリング)の最適化
3) 使用していないJavaScriptの削減
4) テキスト圧縮の有効化
5) その他の改善方法

1つ1つ確認していきましょう。

 

【改善方法➀:コンテンツのサイズを縮小化(圧縮)】
サイト訪問者の回線および帯域は必ずしも十分ではないケースがあります。
そこで、読み込みサイズを縮小化(圧縮)することで読み込み速度を改善できます。

コンテンツのサイズを縮小化(圧縮)

※補足)
メジャーな「Adobe PhotoShop」以外にも、画像圧縮に役立つ無料ツールがいくつか提供されています。
ex.Optimizilla

 

【改善方法②:ブラウザ上の描画プロセス(レンダリング)の最適化】
HTMLの記述によりブラウザの処理に遅延が生じてしまうケースがあります。

原因の1つとして、CSSファイル、JavaScriptファイルの読み込みなどのレンダリングブロックによる表示の遅延があります。

「Google PageSpeed Insights」の「改善できる項目」より、「レンダリングを妨げるリソースの除外」を押下することで、改善対象として優先度の高い画像を一覧で確認できます。

ブラウザ上の描画プロセス(レンダリング)の最適化

レンダリングのブロックを発生させているファイルの読み込みを最適化させ、ブロックしているファイルを非同期で読み込ませる方法で解決するのが一般的です。

 

【改善方法③:使用していないJavaScriptの削減】
表示対象のWebページに使用していないJavaScriptがHTMLに残っているケースがあります。
表示に不要なJavaScriptを読み込んでいることで、無駄なレンダリング時間が発生してしまいます。

不要なファイルの記述は省くなどの改善が適切です。

「Google PageSpeed Insights」の「改善できる項目」より、「使用していないJavaScriptの削減」を押下することで改善対象の候補となるJavaScriptを確認できます。

使用していないJavaScriptの削減

なお、Wordpressを利用しているサイトではプラグイン「Flying Scripts」を利用することで任意のJavaScriptの読み込みをスキップできます。

また、上記対策後はページの表示に異常がないことを目視確認するようにしましょう。

 

【改善方法④:テキスト圧縮の有効化】
テキストベースのリソースを圧縮することで、通信量を削減できます。

「Google PageSpeed Insights」の「改善できる項目」より、「テキスト圧縮の有効化」を押下することで改善対象の候補となるテキストファイルを確認できます。

テキスト圧縮の有効化

 

【改善方法⑤:その他の改善方法】
その他、細かい改善方法は色々ありますが、技術的な解決方法をもう少しご紹介します。

● ブラウザキャッシュの活用
 ・表示頻度の高いページ、共通で読み込まれることが多いエリア(ヘッダーなど)の一部コンテンツ(画像、CSS、JSなど)をキャッシュするように設定します。

 ・一般的なサーバー環境、ユーザー環境ではキャッシュが有効活用されているのですが、意図的にキャッシュが有効化されていない、もしくはキャッシュ保持期間を短く設定しているケースがあります。

 ・そこで、Webサーバー側で.htaccessが設定可能な場合、ExpiresヘッダーやCache-Control ヘッダーを使って、キャッシュの有効期限を設定するのが望ましいです。

 ・Expiresヘッダーでは有効期限を年月日時で指定します。一方Cache-Controlヘッダーの場合は、日時指定ではなく、サーバーがレスポンスを受け取ってからキャッシュを削除するまでの期間を秒数で指定します。

 ・また、「.htaccess」ファイルで設定せずとも、HTMLソースのhead内にmetaタグとしてcache-controlやexpireを設定することで、有効期限を設定することもできます。

● サーバー・ネットワークの遅延
 ・上記で紹介した問題以外に、インフラがボトルネックになっている場合があります。Webサーバー、ネットワーク回線、アプリケーションなど、ボトルネックの場所は様々です。この問題をきちんと調査し、解決するのはかなり大変です。

 ・社内の担当技術者か専門の対策会社に相談することをおススメします。

 ※なお、共用レンタルサーバーを格安で利用している場合、アクセス数が多い時間帯に同居している他社の影響でトラフィック制限(帯域制限)がかかることがあります。

2.まとめ(前編・後編の総括)

まとめ(前編・後編の総括)

いかがでしたか?最後に、ポイントを整理します。

  • 売上に影響するWebページの『読み込み速度』、『表示速度』は改善する。
  • Google提供の「PageSpeed Insights」を利用すれば、パフォーマンス分析と同時に改善のアドバイスがもらえる。
  • アドバイス通りにサイズ圧縮、レンダリングの改善、不要情報の削除を行う。
  • 上記で改善できない場合はインフラの問題を疑う必要があります。専門のエンジニアに相談してみてください。

以上となります。

【無料】EC・Web売上「100億円」を突破するためのお役立ち資料

弊社は今年で20年目を迎えます、EC・デジタルマーケティングの支援会社です 。

ZOZOタウン様、ドクターシーラボ様、その他グローバル企業など、
各業界を牽引する企業を400社以上支援して参りました。

ご支援する過程で、成功する企業に共通する点を多く学ばせて頂きました。
その知見をもとに、「100億円企業」が実践しているポイントをまとめ、お役立ち資料にしました。

本資料を手に入れる事で、御社のEC・Web売上が100億円を突破する”ヒント”を見つけられます。

【無料】GA4移行を機に「広告投資」を見直すためのお役立ち資料

「旧GA(UA)」は2023年6月30日で計測停止となり、今後は「新GA(GA4)」での計測が必須となります。

GA4では、分析軸が「セッション」から「ユーザー」に変わり、AI・機械学習の精度も高まりました。
つまり、UAと比較して、GA4ではより高度な分析ができるようになりました。

ですが、どんなに優れたツールも、結局は「使い手」次第です。
GA4移行の機会に、広告運用者なら絶対に外せない、「広告投資の秘訣」をお伝えします。

自社ECサイトの「集客」を改善し、売上・利益拡大を支援します!

自社ECサイトの「集客」を改善し、売上・利益拡大を支援します!

弊社は今年で20年目を迎えます、EC・デジタルマーケティングの支援会社です 。

ZOZOタウン様、ドクターシーラボ様、その他グローバル企業など、
各業界を牽引する企業を400社以上支援して参りました。

個々に課題をお持ちの企業様は、以下より弊社サービスページをご確認ください。

▼ EC専門のネット広告コンサルタントが支援する「PDCA強化型 運用代行」支援サービス
https://www.ecfs.jp/service/promotion.html

▼ 集客・広告運用への投資を「売上up」に直結させるための「コンサルティング」支援サービス
https://www.ecfs.jp/service/consulting4.html

【前編】売上を左右する「ページ表示速度」の計測方法3選【前編】売上を左右する「ページ表示速度」の計測方法3選前のページ

【失敗事例】こんな広告主はヤバい①~「代理店」や「コンサル会社」に丸投げ~次のページ【失敗事例】こんな広告主はヤバい①~「代理店」や「コンサル会社」に丸投げ~

売上を最大化する広告効果改善サービス『DATAD(データード)』

関連記事

  1. 【前編】失敗しないECシステムのリプレイス方法~よくある失敗事例と理由~

    EC・Webサイトの改善

    【前編】失敗しないECシステムのリプレイス方法~よくある失敗事例と理由~

    本コラム(前編)は、多くのECシステムのリプレイスを経験してきたコン…

  2. 【成功事例】LPのCVRを「2.19%改善」したABテストの舞台裏

    EC・Webサイトの改善

    【成功事例】LPのCVRを「2.19%改善」したABテストの舞台裏

    今回紹介する検証テーマは、LPの「ファーストビュー直下」で使用するパ…

  3. 本当に大丈夫?絶対に外せないABテストの「やり方・進め方」

    EC・Webサイトの改善

    本当に大丈夫?絶対に外せないABテストの「やり方・進め方」

    ABテストを進めるにあたり、スタート地点で最も重視したいのは「伝える…

  4. 【書評】デジタルマーケティングとは?基礎知識から実践スキルまでを一冊で学べる本を紹介
  5. 【無料ツール】GoogleオプティマイズでABテストをする方法

    EC・Webサイトの改善

    【無料ツール】GoogleオプティマイズでABテストをする方法

    今回ご紹介するABテストツールは『Googleオプティマイズ』です。…

  6. 【前編】売上を左右する「ページ表示速度」の計測方法3選

    EC・Webサイトの改善

    【前編】売上を左右する「ページ表示速度」の計測方法3選

    SEO対策だけではなく、サイトのCVRを改善するためには、「Webペ…

【pickup】編集部のおすすめコラム

  1. EC・広告担当者必見!ステマ規制完全ガイド:要点+具体例+違…
  2. 【EC・広告担当者向け】ChatGPTをマーケティング現場で…
  3. Meta広告のAdvantage+ ショッピングキャンペーン…
  4. 【重版決定】『手にとるようにわかる デジタルマーケティング入…
  5. GA4で「イベント」「コンバージョン」「eコマース」の計測設…

【無料資料】100億円企業の共通点

【無料資料】GA4時代を生き抜く秘訣

デジタル人材を育成できる「広告効果改善サービス」

ECサイト総合支援『ECフルサポート』

ECフルサポートの横長バナー

書籍のご案内

書籍のご案内
PAGE TOP