読み込みが遅いWebサイト

Server

mod_pagespeed設定で、ウェブのパフォーマンスを大幅に向上する方法

ぺんです。

あなたのウェブサイトの描画速度が2秒遅くなると、直帰率が50%増加してしまうそうです。
WordPressを使っていると、知らない間にプラグインが増えてしまい、サイトの描画速度も低下してしまいますね。

今回は、ウェブサイトの描画速度を大幅に向上する「mod_pagespeed」の設定方法についてご紹介します。

現状のサイトの描画速度を知る

まずは、ウェブサイトの描画速度を計測するGoogle Toolsを使います。

PageSpeed Insights

ウェブサイトのURLを入れて「分析」ボタンをクリックすると、PCとモバイルそれぞれのスコアが表示されます。このウェブサイトのパフォーマンスを計測してみました。

モバイルサイトの結果

BEFORE

モバイル結果 Before圧縮が第一の改善案として表示されています。

AFTER

モバイル結果 Afterあとは、外部CSSファイルなどの圧縮が課題でしょうか。

PCサイトの結果

BEFORE

PC結果 BeforePCの場合は圧縮が2位でした。

AFTER

PC結果 Afterかなり改善しました。

絶大な効果があったmod_pagespeed設定とは

mod_pagespeedとは、Googleが開発したウェブサイトの描画を高速化するモジュールです。

複数のCSSファイルをまとめてダウンロードする

これにより複数のCSSファイルを個別にダウンロードするよりも高速に処理が可能になります。

HTMLのスペースを自動的に削除する

HTMLの中の改行やタブ、スペースは、人間が見やすくするためにつけられていますが、これらをサーバー側で自動的に削除することで、データ量を減らすことができます。

キャッシング処理を行う

キャッシングとは、一度読み込んだデータをメモリ上に蓄えておいて、次にアクセスのリクエストが来た際にメモリ上のデータを返すしくみの事です。キャッシングを効率的に行うことで、データ読み込みの頻度を少なくしてパフォーマンスを向上させることができます。

画像を自動的に最適化してくれる

mod_pagespeedは、自動的にサイト上の画像ファイルのデータ容量を小さくしてくれます。イメージとしては、下記の記事で紹介したCompressor-ioと同じ処理をリアルタイムで行っているわけですね。

詳しくはこちらのサイトに記載がありました。

エックスサーバーでのmod_pagespeed設定方法

エックスサーバーでのmod_pagespeedの設定方法が超絶的に簡単でした。なんとボタンをクリックするだけです!

エックスサーバー:mod_pagespeed設定について

あまりにも簡単すぎて拍子抜けしてしまいました。

まとめ

今回は、mod_pagespeedの導入効果についてご紹介しました。
更なるパフォーマンス向上のためには、CSS等の最適化が必要な様子ですが、今回のmod_pagespeedの設定は対費用効果としてかなり高いものがありますので是非お試しください。

また、レンタルサーバーを選ぶときは、mod_pagespeedに対応しているサービスを選んだ方がSEO上も有利になりますね。その意味ではエックスサーバーはおすすめできます。

関連記事

  1. Server

    本気のアフィリエイトに必要なレンタルサーバーは?

    ぺんです。前回、下記の記事でレンタルサーバーと無料ブログを併用…

  2. Server

    アフィリエイト環境に無料ブログサイトは使えるのか?

    ぺんです。アフィリエイトを行うにあたって、どこでサイトを公開す…

  3. Server

    アフィリエイト収益ブログの始め方(1)- ブログのテーマを決定する方法

    ぺんです。では早速アフィリエイト収益を目指すブログを立ち上げま…

  4. Server

    アフィリエイト収益ブログの始め方(2)- 利用サービスの選定における3つのポイント

    ぺんです。アフィリエイト収益を目指すブログを運用する環境につい…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ve…
  2. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投…
  3. 読み込みが遅いWebサイト

    Server

    mod_pagespeed設定で、ウェブのパフォーマンスを大幅に向上する方法
  4. データ圧縮

    ツール

    Compressor.io (圧倒的に使いやすい画像ファイルのオンライン圧縮ツー…
  5. いらすと素材

    ツール

    サムネイル画像を作成してくれるサービス
PAGE TOP