ブログの表示速度が遅い！！簡単に改善できる6つの方法！

この記事では「ブログの表示速度を改善する方法」について紹介しています。

・ブログの表示が遅くて困ってる

・難しいことはわからないけど、表示速度早くしたい

・簡単に改善できる方法を探してる

そんなあなたに向けた記事になります。

自分のブログを客観的にみたときに「あれ？なんか遅くない？」って思ったことがありませんか？

実は当ブログの「脱・お小遣い制」はスマートフォンで見たらかなり遅かったです。こんなに遅いと記事読む前にイライラして違うサイトに行っちゃう可能性が高いです。(自分だったらそうする)

なので何とかブログの表示速度を早くする方法を探しました。インターネットの世界は本当にすごいので、いろんな情報がたくさんありますね。

簡単にできるものから、サーバやHTML、CSS、Javaなどをわかっていないとできないものなど本当にいろいろありました。

ぶっちゃけサーバの知識なんてないし、コードだっていじれません。なので今回は「初心者」でも簡単に出来る方法のみご紹介します。

自分のブログの表示速度を知ろう
改善する6つの方法とは？
結果
まとめ

自分のブログの表示速度を知ろう

まずは自分のブログの表示速度を把握しましょう。

以下のサイトで自分のブログ全体の読み込み速度がわかります。

Pagespeed Insights

ちなみに表示速度が速いと「Google」の評価が上がって自分のブログが上位表示されやすくなります。

当ブログの分析結果は次のようになりました。

モバイル：31

PC：72

「100」に近いほど表示速度が速くていいサイトになります。

なのでモバイルの「31」という結果はかなり遅くてよくない結果です。

はたして改善はできたのか？

改善する6つの方法とは？

ここからは初心者でも簡単に出来る改善方法を紹介します。

その前にまずは当ブログの設定状況をご紹介。

・エックスサーバ

・ワードプレス

・テーマは「JIN」

いくら改善するといってもブログが「アメーバブログ」や「はてなブログ」であったり、テーマがことなると同等の結果が得られない可能性があります。

①【テーマ】最新版にアップデートする

自分の使っているブログのテーマを最新版にアップデートするのが意外と大事です。

テーマ作成者の方々はより良いものを提供しようと頑張ってくれています。

それこそ上位に表示されやすいようにとか、使いやすいように改善してくれているんです。

なのでテーマの更新はこまめにしましょう。

通常は新バージョンがあるとワードプレスの「ダッシュボード」上から2つ目の「更新」にてアップデートできます。

ですがごくまれに更新されないことがあるので、そういった場合は手動で更新しましょう。

JINの手動アップデート方法はコチラ

②【プラグイン】EWWW Image Optimizer

「EWWW Image Optimize」をインストールして有効化します。

これだけで画像を最適化してくれる優れものです。新しく使う画像からは最適化されるのでご安心ください。

今まで使っていた画像の最適化は以下の手順で実施します。

[ダッシュボード] → [メディア] → [一括最適化] → [最適化されていない画像をスキャンする] → [最適化を開始]

この作業をするだけでだいぶ画像が軽くなります。

③【プラグイン】WP Super Cache

「WP Super Cache」をインストールして有効化します。

当サイトはブログテーマが「JIN」なのでこのキャッシュプラグインを利用していますが、キャッシュプラグインはテーマとの相性があるので推奨のプラグインを使うようにしましょう。

キャッシュプラグインを入れるとなんで表示速度が速くなるのか？「キャッシュ」という言葉自体がよく分からない人の為に簡単に説明しますね！

キャッシュは一度アクセスしたサイトのデータを一時的に保管し、次にアクセスしたときは表示を速くすることのできる仕組みです。初めてきてくれた人には遅いけど、2回目からは早く表示しますよーってことです。

「WP Super Cache」を有効化したら以下の手順で設定を確認します。

[ダッシュボード] → [設定] → [WP Super Cache] → [簡単] → [キャッシング利用(推奨)にチェック] → [ステータス更新]

すでに「推奨」になっていた場合は特にいじる必要はありません。

有効化してみたら必ずブログを確認してください。たまにうまく表示されていない場合があります。その場合は他のプラグインとの相性が悪い可能性があるので、一個ずつ「無効化」して相性の悪いプラグインを削除するか違うキャッシュプラグインにしてください。

④【プラグイン】Lazy Load

「Lazy Load」をインストールして有効化します。

「Lazy Load」は画像の読み込み範囲を一部にしぼってくれるプラグインです。どういうことかというと、通常は一気に全部の画像を読み込もうとして表示速度が遅くなります。ですが「Lazy Load」を入れると一部だけ画像の読み込みをするのでその分早くブログが表示されるというものです。

基本は有効化したらすぐ使えるものなんですが、表示範囲が狭すぎてスマートフォンのスクロールについてこれない!!という場合は以下の手順で範囲を「200」から「400」、「500」と自分の好きなように変えてみてください。

[ダッシュボード] → [プラグイン] → [プラグインエディター]

[①Lazy Loadに変更] → [②選択をクリック] → [③lazy-load.jsをクリック] → [④distanceの数値を変更] → [⑤ファイルを更新をクリック]

数値以外の部分は決して変更とかしないようにしてください

⑤【エックスサーバ】高速化設定

「エックスサーバ」にはなんと高速化という項目があり、高速化に対応してます。エックスサーバを利用していて高速化の設定をしていない人は本当にもったいない！

今すぐ設定しましょう。設定は「サーバパネル」から可能です。

[サーバパネル] → [Xアクセラレータ] → [Xアクセラレータver.1] → [確認画面へ進む] →　[変更する]

ついでに「ブラウザキャッシュ」設定もしてしまいましょう。

[サーバパネル] → [ブラウザキャッシュ] → [ON[全ての静的ファイル]※推奨設定を選択] → [変更する]

ボタンをポチポチしているだけなので全然難しくないですね!!

⑥【プラグイン＆エックスサーバ】WebP設定

WebPの設定はちょっと初心者にはハードルが高いかもしれません(自分も含めて)

前述したプラグインの「EWWW Image Optimize」と「エックスサーバ」の合わせ技になります。

そもそも「WebP」ってなんだよ？って思うかもしれないですが、これは「Google」が作った新しい画像フォーマットです。PNGやJPGよりも軽いのでより画像表示が早くなり、ブログが軽くなります。

では設定していきましょう!!

まずは「EWWW Image Optimize」の設定から。

[ダッシュボード] → [設定] → [EWWW Image Optimize] → [①WebP] → [②チェックをつける] → [③変更を保存]

変更を保存すると以下のような場面が下方に出てきます。赤枠内のコマンドをエックスサーバの「.htaccess 」に追加します。(うまくWebPに変換されてない場合は画像右下のように「PNG」と表示されています)

それではエックスサーバの「.htaccess 」に追加していきましょう。

[サーバパネル] → [.htaccess] → [.htaccess編集] → [一番上に追記] →　[確認画面へ進む] → [実行する]

.htaccessを編集する前に必ずバックアップをとっておいてください。うまくいかないとブログにアクセスできなくなります。もとに戻せるようにして追いましょう！！

「.htaccess」に追記ができたら一度前述している画像の「一括最適化」を実施してみてください。実施後にもう一度「EWWW Image Optimize」に行き、以下の画像のように緑枠で「WebP」となっていればOKです!!(WebPが対応しているブラウザからじゃないとWebPの表示が出てきません。IEやFireFoxではずっと「PNG」なのでクロームで確認しましょう)