【完全保存】ブログ・サイトのページ表示速度を改善する7つの高速化

はじめのアイコン画像はじめ

ブログ・サイトのページ表示速度が遅い…
ページの表示速度を改善したい。

本記事では上記の疑問にお答えしていきます。

ブログ・サイトのページ表示速度は、ユーザビリティ・SEOに関わる非常に重要な要素ですよね。

実際に私の運営しているこのブログは、この7つの高速化の施策によってページ表示速度が改善されました。

この記事を読めば、ブログ・サイトのページ表示速度を改善する7つの高速化を理解することができますよ。

アフィリエイトにおすすめです!

低価格の高速サーバー「mixhost」

  • 880円〜と月額料金が安いです。
  • 使用量が割当られている次世代型共用レンタルサーバーです。
  • WEBサーバーにnginxよリも速いLiteSpeedを採用。
  • 高性能なので初心者でも速い表示速度を実現できます。

\今なら30日間の返金保証付きです/

※私も実際に「mixhost」を利用してブログを運営しています。

この記事を書いてる人

溝口 剛
Tsuyoshi Mizoguchi

   

1986年生まれ 33歳 札幌在住
8年間会社員として働くも会社員としての生き方が嫌になり、フリーランスへ。現在はブログより年間1,000万円の収益を得ています。

この記事の内容

1. ブログ・サイトのページ表示速度を改善する7つの高速化

ブログ・サイトのページ表示速度を改善する7つの高速化の施策は以下の通りです。

7つの高速化
  1. 高性能レンタルサーバーに移行
  2. 画像を最適化・軽量化
  3. コード(HTML/CSS/JS)の最適化
  4. WordPressデータベースの最適化
  5. プラグインの見直し・削除
  6. テンプレートの変更
  7. キャッシュの導入

具体的に一つずつ解説していきますね。

1-1. 高性能レンタルサーバーに移行

まず、ブログ・サイトのページ表示速度が遅い根本的な原因である性能が低い(遅い)レンタルサーバーから高性能サーバーに移行しましょう。

理由は単純で、遅いレンタルサーバーを使っていては様々な高速化の施策を施したところで、限界があるからです。

具体的に言うとロリポップやさくらインターネットの格安プランでは限界があります。

遅いレンタルサーバーの問題点

性能が低い(遅い)レンタルサーバーの問題点をあげると以下の通りです。

  • ストレージがHDD
  • WEBサーバーの性能が低い
  • PHP動作方式の性能が低い
  • SSL化サイトの表示が低速(HTTP/2&QUIC未対応)

近年、サイトのSSL化は必要要素ですが、SSL化することによって情報処理は複雑になるので一般的に表示速度は遅くなります。

ですが、HTTP/2&QUICに対応しているサーバーの場合、SSL化されたページの表示速度は速くなると言われています。

つまり、利用するサーバーの性能によってブログ・サイトのページ表示速度は大きく変わってくるのです。

そして、このようなサーバーの処理速度を高めるための解決方法はサーバーを移行する以外方法はありません。

ブログ運営に向いている高性能サーバー

高性能サーバーとは、mixhostXSEREVRConohaWINGの3つです。

個人的には、mixhostが最もおすすめですよ。

※実際に私はXSERVERよりmixhostにサーバー移行し、表示速度が改善されました。

趣味ブログであれば、ロリポップなどの格安プランもありかもですが、アフィリエイト(稼ぐ・集客)を目的に運営するブログであれば、この3択以外はないかなと。

ブログで稼いでいるブロガー・アフィリエイターのほどんどがこの3つのどれかを使っていますからね。

サーバー移行と聞くと難しそうと思うかもしれませんが、それほど難しい作業はありませんので表示速度で悩んでいる方は、サーバーを移行を行うことをおすすめします。

サーバーのPHPバージョンを最新へ

既存のレンタルサーバーの高速化の設定として、「PHPバージョン」を最新のものに変更すれば現在のページ表示速度よりは改善が見込めます。

PHP7と以前のバージョン(PHP5)では、動作スピードが2倍程度変わるといわれています。

なので、サーバー移行を行いたくないと言うことであれば、まずはあなたが使っているレンタルサーバーのPHPバージョンが最新のもの(PHP7)になっているか確認しましょう。

1-2. 画像を最適化・軽量化

次にブログ・サイトのページ表示速度に大きな影響を与える「画像」の最適化・軽量化を行いましょう。

ページ容量の大半の割合を占めるのが「画像」になるため、画像の最適化・軽量化はかなり重要です。

画像の軽量化

画像の軽量化には2種類があり、画像をWordPressにアップする前とアップした後に行う施策があります。

そして、より画像を軽量化するためには、画像をWordPressにアップする前の圧縮・リサイズを徹底することが最も大事です。

  • WPアップ前の軽量化:Optimizilla・TinyPNG・iLoveIMG
  • WPアップ後の軽量化:プラグイン「EWWW Image Optimizer」

基本、WordPressにアップする画像(記事に掲載する画像)は「リサイズ→圧縮→アップ→EWWW Image Optimizerで最適化」の手順で軽量化しましょう。

画像の軽量化のやり方については以下の記事で詳しく解説していますので、そちらをご参考に。

画像の読み込み遅延

表示速度測定サイト「PageSpeed Insights」の「画像の改善項目」でも挙げられているのが「画像の読み込み遅延」です。

画像の読み込み遅延とは、「スクロールされていない(まだ画面に表示されていない)画像を後から読み込む」ことです。

画面に表示されていない画像の読み込みを後回しにする事で、ブログ・サイトのページ表示速度は改善されます。

画像の読み込み遅延の設定は、WordPressプラグインで実装します。

  • a3 Lazy Load
  • Lazy Load
  • BJ Lazy Load

などのプラグインが代表的です。

その中でも継続的に更新されているプラグイン「a3 Lazy Load」が最もおすすめです。

画像の読み込み遅延を実装することで、画面に表示される部分を優先的に表示させるようになるので、ページ表示速度の改善につながりますよ。

1-3. コード(HTML/CSS/JS)の最適化

HTML/CSS/JS(JavaScript)のコードが増えると、ブログ・サイトのページ表示速度の低下させる原因になります。

そのため、HTML/CSS/JSのコードを圧縮・結合してあげることでページの表示速度を改善できます。

コードの最適化についてもWordPressのプラグインを使って簡単に設定することが可能です。

  • Autoptimize
  • Fast Velocity Minify

などのプラグインがあり、コード圧縮の定番プラグインは「Autoptimize」です。

「Autoptimize」でコード(HTML/CSS/JS)の最適化を行ってあげることで、読み込み時間の短縮につながり、ページ表示速度の改善につながりますよ。

ただし、WordPressのテンプレートによっては、HTML/CSS/JSのコードの最適化を行うことによって、表示が崩れるケースもあるので自身でチューニングを行いましょう。

1-4. WordPressデータベースの最適化

WordPressを長期運用しているとデータベースには、不要なリビジョンなどのデータが大量に残っている状態になります。

この不要なリビジョンがブログ・サイトのページ表示速度の低下の原因になるので、定期的に最適化・削除するのがおすすめ。

ちなみにWordPressのリビジョンとは、記事のバックアップデータのことです。

具体的には、こちら↓

リビジョンはありがたい機能ですが、ブログ運営が長くなり、データベースを最適化しないでいると記事数が増えれば増えるほどリビジョンも増えて、データベースを肥大化させていきます。

そんなリビジョンを最適化させるにはWordPressのプラグインを使いましょう。

  • WP-Optimize
  • WP-DBManager

などのプラグインがあり、データベース最適化の定番のプラグインは「WP-Optimize」です。

定期的にリビジョンの削除などデータベースを最適化することでページ表示速度の改善につながります。

1-5. プラグインの見直し・削除

WordPressのプラグインによっては、ブログ・サイトのページ表示速度の低下の原因となるものも存在しています。

また、不要なプラグインを多く有効化していることもページ表示速度低下の原因です。

なので、ページ表示速度の低下の原因となるプラグインの見直し・削除を行いましょう。

代表的な重いプラグインは、以下のプラグインです。

  • All in One SEO Pack
  • WordPress Popular Posts
  • WP PostViews
  • Broken Link Chechker

特に「WordPress Popular Posts」は重いプラグインとして有名ですので、表示速度を改善するのであれば見直しの検討が必要です。

ぶっちゃけ、人気記事投稿って必要なのかな?と個人的には疑問です。

また、不要なプラグインがインストールされていないかどうかを確認し、使っていないプラグインであれば削除し、プラグインの整理することをおすすめします。

不要なプラグインを削除することでCSS/JSコードの削減につながり、ページ表示速度の改善につながりますよ。

1-6. テンプレートの変更

テンプレートによってもブログ・サイトのページ表示速度の低下をもたらします。

ただし、テンプレートによるページ表示速度への影響は他の要素に比べて小さいと個人的には感じています。

なので、こちらの高速化については予備的な施策であると考えてOKです。

ちなみに、私がページ表示速度改善におすすめのWordPressテーマ(テンプレート)だと感じているものは以下の3つです。

SWALLOWとSANGOは表示速度には定評があるWordPressテーマですので個人的にはおすすめですよ。

1-7. キャッシュの導入

キャッシュの設定はブログ・サイトのページ表示速度の大幅な表示速度の改善してくれます。

さらに、1ページ当たりの容量が大幅に削減されることから、転送量の節約につながり、より多くのアクセスに対応できるようになるというメリットがあります。

なので、ブログ・サイトのページ表示速度の本格的な改善にキャッシュ導入は、非常に有効的な高速化の施策であるといえます。

※キャッシュの導入についてはバズ部でも推奨されており、さらにはmixhostでも推奨されています。

キャッシュプラグインは、トラブルが起きやすい事でも有名です。なので、導入する際はしっかりとバックアップを取っておきましょう。

サーバーキャッシュの導入

サーバー上にキャッシュを作成し、同じページにアクセスがあった場合、そのキャッシュを使いページをユーザーに表示させる方式です。

このサーバーキャッシュ導入で最も定番なのが「キャッシュプラグイン」による導入です。

定番のキャッシュプラグインは以下の3つです。

  • W3 Total Cache
  • WP Super Cache
  • LiteSpeed Cache(※私が利用。しかし、使用制限あり)

個人的には、WordPress.comが提供する「WP Super Cache」か「LiteSpeed Cache」がおすすめです。

LiteSpeed Cacheは、LiteSpeed Technologiesが提供しているプラグインで、レンタルサーバーのWEBサーバーに「LiteSpeed」が採用されていないと使えません。

「LiteSpeed」を採用しているレンタルサーバーは、mixhostConoHa WINGColorfulBoxFutokaJETBOYの5つだけです。

つまり、この他のレンタルサーバーを使っている方は残念ながら「LiteSpeed Cache」が使えません。

LiteSpeed Cacheはとてもおすすめ!

この「LiteSpeed Cache」はサーバーと連携したキャッシュプラグインなのでトラブルも非常に少なく、ブログ・サイトのページ表示速度の高速化を一つで完結できちゃうとても優秀なプラグインです。

LiteSpeed Cache一つで以下の機能が全て使えます。

LiteSpeed Cacheの機能
  1. サーバーキャッシュ
  2. CSSファイルの圧縮・最適化
  3. 画像遅延機能(レイジーロード)
  4. 画像の最適化・WebP自動変換
  5. CDNの簡単設定

この記事で紹介している高速化の施策の半分以上をこのプラグイン一つで施すことが可能です。

普通であれば、上記の機能をWordPressに入れるためには、プラグインが3~4つはインストールしなければいけません。

それが一つでできちゃう「LiteSpeed Cache」は高速化の万能プラグインであるといえます。

mixhostは「LiteSpeed Cache」が使えるので、XSERVERよりもおすすめする理由の一つです。

ブラウザキャッシュ設定

ブログやサイトを閲覧しているユーザーのブラウザにキャッシュさせることでも、ページ表示速度の改善を図ることが可能です。

サーバーキャッシュとは異なり、ユーザーそれぞれのブラウザにキャッシュさせる高速化の方法です。

サーバーキャッシュよりは、効果は薄いですが、複数ページ閲覧してくれるユーザーに対しては効果があるのがブラウザキャッシュ。

ブラウザキャッシュの導入方法は以下のコードを.htaccessファイルに追記すればOKです。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/svg+xml "access plus 14 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
</ifModule>

参考:サルワカ(ブラウザキャッシュの設定方法)

ブラウザキャッシュを設定すると自分自身のブラウザにもキャッシュが残るようになるので、ブログのデザインのカスタマイズの際にはキャッシュの削除を行わないとカスタマイズの変化が確認できません。

別に大きな問題ではありませんが、その点だけは理解しておきましょう。

2. ページ表示速度の分析・計測ツール

はじめのアイコン画像はじめ

ブログ・サイトのページ表示速度はどうやって計測するの?

ブログ・サイトのページ表示速度を改善するためには、現状の表示速度を把握し、高速化の施策を行うことによってどれだけ速度が改善されたかを分析・計測する必要があります。

ページ表示速度の分析・計測ツールは以下の4つを使えばOKです。

表示速度の分析・計測ツール

この中でも、基本はGoogleが提供している「PageSpeed Insights」をメインでページの表示速度の分析・計測すればOKです。

2-1. PageSpeed Insights

多くの方がブログ・サイトのページ表示速度の分析・計測に使用しているのがGoogleが提供している「PageSpeed Insights」です。

モバイル・PCの両方の表示速度を計測することができるのが特徴。

PageSpeed Insightsで提供される高速化の提案についても、インターネット上に多くの情報があふれていますので、改善にもとても取り組みやすいです。

また、Googleアナリティクスとも連動しているので、アナリティクスから遅いページを直接確認することが可能です。

基本、ブログ・サイトのページ表示速度の分析・計測は「PageSpeed Insights」を使っていればOKです。

2-2. testmysite.withgoogle

Googleが提供しているもう一つのページ表示速度を分析・計測できるツールが「testmysite.withgoogle」です。

こちらの分析・計測ツールは「モバイルのみ」となっており、さらに読込時間にかかる時間とユーザーの離脱率を計測してくれます。

PageSpeed Insightsと合わせて、サブ的な要素で使えばOKでしょう。

2-3. GTmetrix

上記のGoogle以外のページ表示速度の分析・計測ツールでよく使われるのが「GTmetrix」です。

こちらは、読み込み時間・ページ容量を計測してくれるため、キャッシュプラグイン導入などによるページ容量の削減効果を見たい時などに使えます。

こちらも「PageSpeed Insights」のサブとして使えばOKです。

2-4. pingdom

私はほとんど使いませんが、他にもページの表示速度の分析・計測ツールとして「pingdom」があります。

こちらは、コンテンツで容量を多く占めている要素をパーセンテージ表示してくれるなど便利な点もありますが、基本は上記の3つで事足りるかなと言うのが印象です。

なので、基本は「PageSpeed Insights」を使ってブログのページ表示速度を分析・計測するのがおすすめです。

まとめ

今回は、ブログ・サイトのページ表示速度を改善する7つの高速化についてお話してきました。

7つの高速化
  1. 高性能レンタルサーバーに移行
  2. 画像を最適化・軽量化
  3. コード(HTML/CSS/JS)の最適化
  4. WordPressデータベースの最適化
  5. プラグインの見直し・削除
  6. テンプレートの変更
  7. キャッシュの導入

上記の7つの項目を改善すれば、ブログ・サイトのページ表示速度の高速化することが可能ですよ。

是非、WordPressブログの表示速度が遅くて困っているという方参考にしみてください。

アフィリエイトにおすすめのレンタルサーバー3選

アフィリエイトで稼ぐためには「ブログの表示速度」はとても重要です。なぜなら、3秒以上ブログの読み込みに時間がかかると約40%以上のユーザーが離脱すると言われており、Googleは「表示速度は収益に等しい」との見解を示しているからです。

そのため「ブログの表示速度」を向上させるために、速いレンタルサーバーを選ぶことがとても重要だという事です。そして具体的には、以下の3つのレンタルサーバーから選ぶのがおすすめです。

アフィリエイトにおすすめです!

低価格の高速サーバー「mixhost」

 (4.5)

  • 最安880円〜/月とコスパ最強です。
  • 使用量が割当られている次世代型共用レンタルサーバーです。
  • WEBサーバーにnginxよリも速いLiteSpeedを採用。
  • 高性能なので初心者でも速い表示速度を実現できます。

\今なら30日間の返金保証付きです/

※私も実際に「mixhost」を利用してブログを運営しています。

低価格の高速サーバー「mixhost」

 (4.5)

  • 最安880円〜/月とコスパ最強です。
  • 使用量が割当られている次世代型共用レンタルサーバーです。
  • WEBサーバーにnginxよリも速いLiteSpeedを採用。
  • 高性能なので初心者でも速い表示速度を実現できます。

\今なら30日間の返金保証付きです/

※私も実際に「mixhost」を利用してブログを運営しています。

GMOの高性能サーバー「ConoHa WING」

 (4.5)

  • ドメインとセットで最安800円〜/月で利用可能です。
  • サーバー速度性能が高いです。
  • mixhostと同じ使用量が割り当てられている「リザーブドプラン」がある。
  • 東証一部上場企業GMOが運営する安心感。

\今ならドメインセットで初月無料/

※有名なブロガーも多く利用しています。

ブログ入門の定番サーバー「Xserver」

 (4.0)

  • 最安900円〜利用する事が可能です。
  • サーバーの安定性に定評があります。
  • 初心者にも使いやすい管理パネルが魅力です。
  • 独自のサイト高速化システムがあります。

\今なら10日間お試し利用が可能です/

※私も実際に「mixhost」の前に利用していました!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
この記事の内容
閉じる