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

サイトの改善

【後編】売上を左右する「ページ表示速度」の改善方法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」を利用すれば、パフォーマンス分析と同時に改善のアドバイスがもらえる。
  • アドバイス通りにサイズ圧縮、レンダリングの改善、不要情報の削除を行う。
  • 上記で改善できない場合はインフラの問題を疑う必要があります。専門のエンジニアに相談してみてください。

以上となります。

GA4の移行に使える『必須マニュアル』販売中

現GA(UA版)の計測停止まで「5か月」を切り各社GA4へ移行中かと思います。
しかし現場からは「切り替えが追いつかない」との声が聞かれます。

そこで弊社は「広告運用のプロ」の視点から「GA4で見るべき指標・レポート10選」を整理し『必須マニュアル』を販売開始しました。※【100名】限定

「無料で試し読み」ができますので、詳細をご確認ください。

https://www.ecfs.jp/eckaizenlab/202207whitepaper/

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

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

弊社は、2004年の創業以来、19年にわたりECサイト・Webマーケティングを支援して参りました。
支援実績は、400社以上です。
個々に課題をお持ちの企業様は、以下より弊社サービスページをご確認ください。

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

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

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

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

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

関連記事

  1. 【後編】失敗しないECシステムのリプレイス方法~提案依頼書(RFP)のポイント9選~

    サイトの改善

    【後編】失敗しないECシステムのリプレイス方法~提案依頼書(RFP)のポイント9選~

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

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

    サイトの改善

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

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

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

    サイトの改善

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

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

【人気ランキング】今月のアクセス数TOP5

  1. GA4でパラメータを設定し、流入経路を分析する方法
  2. GA4で「流入経路別」に分析する方法<GA4の使い方:応用編…
  3. GA4で「ランディングページ別」に分析する方法<GA4の使い…
  4. GA4で「新規購入/リピート購入」を分析する方法<GA4の使…
  5. GA4で「イベント」「コンバージョン」「eコマース」の計測設…

【話題】Googleアナリティクス4(GA4)

  1. 【完全ガイド】GA4移行・設定時に「やる事」と「使い方」を目…
  2. GA4で「イベント」「コンバージョン」「eコマース」の計測設…
  3. GA4で「新規購入/リピート購入」を分析する方法<GA4の使…
  4. GA4で「ランディングページ別」に分析する方法<GA4の使い…
  5. GA4で「流入経路別」に分析する方法<GA4の使い方:応用編…

【連載】こんな状態の広告主はヤバい

  1. 【失敗事例】こんな広告主はヤバい①~「代理店」や「コンサル会…
  2. 【失敗事例】こんな広告主はヤバい②~「評価指標」の設定が甘い…
  3. 【失敗事例】こんな広告主はヤバい③~管理画面やレポートを「眺…
  4. 【失敗事例】こんな広告主はヤバい④~「新規顧客/既存顧客」の…

GA4の移行に使える『必須マニュアル』販売中

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

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

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

書籍のご案内

書籍のご案内
PAGE TOP