読み込みが遅い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)- 利用サービスの選定における3つのポイント

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

  2. Server

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

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

  3. Server

    レンタルサーバーを選ぶ際の3つのポイント

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

  4. 初心者向けWordPressサイトのバックアップ、リストア手順の解説

    Server

    (初心者向け)WordPressサイトのバックアップ、リストア(復旧)手順の詳細解説

    ぺんです。 Wordpressサイトを運営していて、気になるのがサイト…

  5. Server

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

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

  6. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡単に構築する方法

    ぺんです。Wordpressサイトのカスタマイズをするは、細心…

コメント

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

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




最近の記事

  1. Twitterアカウントの登録方法
  2. マイクロソフトアカウントの登録方法
  3. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  4. WordPressのローカル環境を簡単に構築する方法
  1. WordPressのローカル環境を簡単に構築する方法

    Server

    Local by Flywheelを使って、WordPressのローカル環境を簡…
  2. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法
  3. Server

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

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

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズ…
PAGE TOP