≫LINEにてブログ無料相談OKです。

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

はじめ

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

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

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

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

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

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ブログの表示速度が遅くて困っているという方参考にしみてください。