ブログやページの読み込み速度をわずか15分程度で高速化する5つの方法

【この記事の所要時間:約 7 分】

webpage-speed-up

ウェブサイトのページ表示速度はとても重要です。それは、ページの読み込み速度が遅いだけで、訪問者にストレスを与え、離脱を招く原因になるからです。

そのため、最低でも2秒以内に表示されることを目標にし、ウェブサイトを改善する必要があります。

また、ページ表示速度については、2012年6月にシアトルで開催されたSearch Marketing Expoで、以下のように言っています。

  • Googleではページスピードが検索の1%に影響している
  • ユーザーがページ表示に待てるのは2秒まで
  • 3秒以上かかると40%以上のユーザーは離脱する
  • 表示が1秒遅れるごとにコンバージョン率は7%落ちる

このことからもページ表示速度の重要性はご理解頂けるかと思います。

下図は、ページ表示速度を解析するGTmetrixの解析結果で、今回、紹介する方法を行った結果です。

1. 改善前

GTmetrix

2. 改善後

GTmetrix3

ページ表示速度(Page load time)がおよそ3分の1(5.74秒から1.81秒)に改善されていることが分かると思います。ページ速度に影響する主な原因は以下の3つです。

  1. パソコンやスマートフォンなどの性能の問題
  2. インターネットの回線速度の問題
  3. ウェブサイトの容量の問題

パソコンやスマートフォンなどの性能やインターネットの回線速度の問題は、ユーザー側の問題になりますので、今回は3つ目のウェブサイトの容量の問題を改善するための5つの方法を紹介します。

それでは、一つずつ見て行きましょう。

1. 画像ファイルの圧縮

ページの読み込み速度を大きく左右するのは画像の容量です。そこで、画像をキレイに圧縮できるサービスを2つ紹介します。いずれのサービスも無料で使えるWebサービスとなります。

1-1. TinyPNG:PNGファイルを圧縮

1つ目は、PNGファイルを圧縮するTinyPNGというサービスです。使い方は、下図の「Drop your .png files here!」に圧縮したいPNGファイルをドラッグ・アンド・ドロップするだけになります。

TinyPNG

圧縮が完了しますと、下図のような画面が表示されますので、「Download」より圧縮されたファイルをダウンロードします。

TinyPNG2

上図の場合、画像容量が70%(225.4KB → 68.1KB)減少した形になります。

1-2. JPEGmini:JPEGファイルを圧縮

2つ目は、JPEGファイルを圧縮するJPEGminiというサービスです。使い方は、まず、下図の「Try It Now」をクリックします。

JPEGmini1

次のページに表示される「Upload Your Photo」より、圧縮したいJPEGファイルをアップロードします。

JPEGmini2

圧縮が完了すると下図のような画面が表示されますので、「Download Photo」よりファイルをダウンロードします。

JPEGmini3

上図の場合、画像容量が63%(149KB → 94KB)減少した形になります。

以上が画像ファイルを圧縮する2つのサービスになります。画像ファイルはページ表示速度に大きく影響するので、出来る限り圧縮することをおすすめします。

2. 無料CDNサーバー:ClOUDFLAREの導入

CDNとは、「Contents Delivery Network」の略で、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことを言います。

端的に説明すると、下図のように画像や動画、音声などのコンテンツを別のサーバーから配信し、サーバーの負担を分散させる仕組みになります。

CDN

この仕組みにより、サーバーの負荷を分散してページの表示速読を速くすることができます。代表的なサービスはAmazon CloudFrontなどがありますが、今回は無料で使えるClOUDFLAREの導入方法を解説します。※日本語対応してますが、日本語がおかしい箇所があります。

2-1. アカウント登録

まず、始めにClOUDFLAREへアクセスし、トップページにある「今すぐ登録」をクリックします。

cloudflare1

メールアドレスやパスワードなどのアカウント登録フォームが表示されますので、必須項目を入力し、「今すぐアカウント作成」をクリックします。

cloudflare2

次にWebサイトを追加する画面に移りますので、ドメイン名を入力し、「+Webサイトを追加します」をクリックします。

cloudflare3

すると、ClOUDFLAREがWebサイトのスキャンしますので、スキャン完了(30秒程度)まで待機し、セットアップスキャンが完了しましたら、「継続」をクリックします。

cloudflare4

次に追加したWebサイトのDNSコード詳細画面に移りますので、そのまま、「私はすべての不明のレコードを追加した、継続」をクリックします。

cloudflare5

そうしますと、下図のように新しいネームサーバ情報が表示されますので、ドメインのネームサーバを変更します。※メモすることをおすすめします。

cloudflare6

2-2. ネームサーバ変更

リッチマーケティングでは、ムームードメインを使用してますので、下図はムームードメインのキャプチャになります。

ムームードメインの場合、「コントロールパネル > ドメイン管理 > ネームサーバ設定変更」より変更するドメインを指定し、ネームサーバの変更を行います。

cloudflare7

「上記以外のネームサーバを使用する」を選択し、ClOUDFLAREで表示されたネームサーバを入力し、下部にある「ネームサーバ設定変更」をクリックします。

ネームサーバの反映まで、サイトが正しく表示されなかったりしますが、反映が完了すると正常に表示されるようになります。※私の場合、反映まで4時間ほどかかりました。

cloudflare8

ネームサーバの設定が完了しましたら、「続け、私は私のネームサーバを更新しました」をクリックします。正常にセットアップが完了すると、下図のような画面が表示され、設定は完了します。

cloudflare9

XSERVERの場合、ClOUDFLAREを使用すると、管理画面(/wp-admin)にアクセスすることが出来なくなります。管理画面にアクセス出来なくなった場合、「サーバーパネル > アクセス拒否設定 >  WordPress国外IPアクセス制限 > 無効化する」の手順でアクセス拒否設定を変更します。

3. 高速化プラグインの導入

リッチマーケティングで導入しているWordPress高速化プラグインは以下になります。

  1. DB Cache Reloaded Fix
  2. W3 Total Cache
  3. MO Cache
  4. Head Cleaner

それでは1つずつ見て行きましょう。

3-1. DB Cache Reloaded Fix

DB Cache Reloaded Fixはブログの表示速度を高速化してくれるプラグインです。

WordPressはページを作成するときに、頻繁にデータベースにアクセスします。クエリ数(データベースへのアクセスする命令した回数)が多いと、データベースへの負荷が大きくなりパフォーマンスに影響します。

DB Cache Reloaded Fixは、データベースのクエリの出力結果など、 データベースとのやり取りをキャッシュしますのでデータベースとの直接のアクセスが減り、クエリ数を減らす効果があります。

導入方法に関しては、TECHMEMOさんの『WordPressを高速化するプラグイン「DB Cache Reloaded Fix」』で紹介されているので、参考にしてみよう。

3-2. W3 Total Cache

W3 Total Cacheは、Wordpressを高速化する上で必須のプラグインになります。W3 Total Cacheは、非常に多機能なキャッシュプラグインなので、ぜひとも、導入を検討して頂きたい。

導入方法に関しては、Webと人とアマモ場さんの『WordPressのキャッシュ系プラグイン「W3 Total Cache」の設定の一例!』で紹介されているので、参考に導入してみよう。

3-3. MO Cache

MO Cacheは、前項のW3 Total Cacheと併用して使うことで、効果を発揮するプラグインになります。MO Cacheをインストールして有効化するだけで高速化することができます。

3-4. Head Cleaner

Head Cleanerは、WebブラウザとWebサーバのやり取りの回数や送るデータ量を減らすことで、ページの表示速度を早くすることが出来るプラグインです。簡単な設定で、CSSやJavaScriptを最適化できます。

導入方法に関しては、たなブログさんの『WordPressが早くなるプラグイン Head Cleaner』で紹介されているので、参考に設定してみよう。

4. 余計なプラグインやウィジェットの削除

ウィジットを利用していると、その分だけデータベースへのアクセスが発生するため、負荷になってしまいます。リッチマーケティングでは、余計なプラグインとウィジェットを削除している他、フッターなども排除しています。

また、プラグインの削除に関しては、高速化プラグインを導入するのと同じくらい効果的です。未使用プラグインがないか、またはプラグインを使用せずに、他の代替方法がないかを一度、検討しましょう。

ウィジェットやプラグインを導入することで、何かしらの結果やメリットがもたらされているであれば、問題はありません。しかし、そうでないのであれば、削除することをおすすめします。

5. Lazy Loadの導入

Lazy Loadとは、スクロールに合わせて、画像の読み込みを行い、ページ表示速度を高速化するjQueryプラグインです。とくに画像が多いようなサイトには有効的なのでぜひとも、導入を検討して頂きたい。

WordPressの場合、Lazy Loadをインストールし、有効化するだけ簡単に導入することができます。

WordPress以外の導入方法に関しては、WEB SHOWZINEさんの『画像の読み込みを遅延ロードさせるjQueryプラグイン「Lazy Load」』で紹介しているので、ぜひ、参考にして頂きたい。

最後に

冒頭でもお話しましたが、ページ表示速度はとても重要です。ページの読み込み速度が遅いだけで離脱されてしまうのは、勿体無いことです。

そうならないためにも、ぜひ、今回、紹介した方法を参考にウェブサイトを改善して頂ければ幸いです。


シェアする

最新情報の受け取り方法

わざわざブログに訪問しなくても、リッチマーケティングの更新情報を自動で受け取ることができます。一番、便利な受け取り方法をお選びください。

Trackbacks

  1. […] ブログやページの読み込み速度をわずか15分程度で高速化する5つの方法』でも詳しく解説しているのでチェックしておこう。 […]

Speak Your Mind

*