【Simplicity2】読み込み遅い?ブログ表示速度の高速化にチャレンジ!【WordPress】

良かったらシェアをお願いします!

wordpress高速化

WordPressで記事を書いたときは、自分のパソコンやスマホで表示のチェックをしているのですが、最近ちょっと気になったことがあります。

それは・・・

あれ?ページが表示されるの遅くない??

そうなんです。

なんか引っかかる感じというんでしょうか、ページがなかなか読み込まれないんですよね。

最初はネットの通信状態が悪いのかなーくらいにしか思っていたのですが、他の人のブログやサイトを開くとスムーズに表示されるので、原因は通信状態ではなく、当ブログにあると気付いたわけです。

サイトの表示速度が遅いのはユーザーにストレスを与えることになりますので、改善すべき点です。当然、Googleの評価にも影響を与えるようです。

そこで、今回いくつか高速化のための施策を講じてみましたので、紹介したいと思います。

どれも(私ができるくらい)簡単なことですので、表示速度の高速化の施策をまだ何もやったことがない初心者の方は、ぜひこの記事を見ながら試してみてはいかがでしょうか。

スポンサーリンク

表示速度を計測してみよう!

まずは現状を知るところからスタートです。

ブログの表示速度を測る方法はたくさんあるようですが、今回はGoogleが提供する「PageSpeed Insights」と、いろんなサイトで紹介されていた「GTmetrix」を使います。

PageSpeed Insights

PageSpeed Insightsにアクセスしたら、ブログのURLを入力して「分析」をクリックするだけです。

こちらがパソコンで当ブログを表示した場合のGoogleの評価です。

WordPress高速化01

100点満点中の57点で「Poor」・・・。

続いてこちらがスマホで当ブログを表示した場合のGoogleの評価です。

WordPress高速化02

100点満点中の48点で「Poor」・・・。

何点くらいが平均的な値かはわかりませんが、真っ赤にPoorとか書かれると「あぁ、ダメなんだな・・・」ってことはわかります。笑

GTmetrix

PageSpeed Insightsの結果だけ見れば十分な気もしますが、念のためもうひとつツールを利用してみます。

実はPoorじゃないかもしれないし!

使い方はさきほどと同じで、GTmetrixにアクセスしたら、ブログのURLを入力して「Analyze」をクリックするだけです。

結果がこちら。

WordPress高速化03

ページスコアが「E(50%)」だそうです。

ダメだこりゃ!次行ってみよう!

WordPress高速化のためにやったこと

当ブログの表示速度が遅いことが数値的にも証明されましたので、さっそく高速化のための施策を行っていきます!

と、その前に、WordPressのバックアップをとっておくことをオススメします。

バックアップなんてやったことがないよ!という方は次の記事を参考にしてくださいね。

初心者でも簡単♪WordPressのバックアップをとる方法~FileZillaの使い方も解説~
今回は、FTPソフト『FileZilla』を使ったWordPressのバックアップについて解説します。写真つきで解説しますので、初心者の方でも安心して作業を進められると思います。

Simplicity使いなら「.htaccess」にコピペするだけで一発高速化!

WordPressの無料テーマ「Simplicity」や「Simplicity2」を使っている人がまずやるべきなのがこちらの施策です。

Simplicityの公式ページで紹介されている方法です。

Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。たったこれだけのことですが、かなりの高速化が図れます。例、Simplicityに今回

「.htaccess」にコードをコピペしよう!

やることは単純で、「.htaccess」というファイルにコードをコピペするだけです。

上記リンク先でも説明はありますが、私は一部手間取ってしまったので、念のため作業内容をこちらでも解説しておきます。

当ブログはレンタルサーバー「ロリポップ」を使っていますので、ロリポップを例に話を進めます。

ロリポップにログイン>「ロリポップ!FTP」をクリック

WordPress高速化04

・「.htaccess」をクリック

WordPress高速化05

・最終行にコードを貼り付け>「保存する」をクリック

WordPress高速化06

「.htaccess」を開くとすでに色々書いてありますが、消さないように注意してください。書いてあるものの最終行に追記する形でコードを貼り付けます。

貼り付けるコードは下記のサイトに紹介されていますので、参照してください。

参考[改訂版].htaccess の見直しでWebページ高速化

「.htaccess」にコピペした結果

さて、やったことはコピペだけですが、表示速度は改善されたのか早速チェックしてみました。

GoogleのPageSpeed Insightsの結果がこちら。

WordPress高速化07

WordPress高速化08

パソコン表示が79点、スマホ表示が68点で、いずれも「Needs Work」という結果になりました。

Beforeが57点・48点の「Poor」だったので、かなり改善されたと言って良いのではないでしょうか!

一方、GTmetrixの結果がこちら。

WordPress高速化09

ページスコアが「E(57%)」という結果になりました。

Beforeが「E(50%)」だったので、少し改善されたといったところでしょうか。

PageSpeed InsightsとGTmetrixとでスコアの改善具合が違うように感じられますが、両者で評価基準が異なっていることが原因なんですかね?

この辺はよくわかりませんが、どちらの数値を見ても表示速度が改善されたことは間違いなさそうです。

プラグインでレンダリングをブロックしている JavaScript/CSS を排除

PageSpeed Insights の診断結果に最適化案が列挙されるのですが、その中に「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という事項がありました。

ハッキリ言って「なんのこっちゃ??」なのですが、どうやらプラグインで解決できそうなのでやってみました。

なお、こちらの記事を参考にさせていただきました。ありがとうございます。

Simplicity 2で運営している当ブログの表示速度を高速化した方法を紹介。GTmetrixでダブルAA、GoogleのPageSpeed Insightsでもモバイル、PCともに90点以上をマークしました。

プラグイン「Speed Up – JavaScript To Footer」を導入しよう!

インストールするのは、「Speed Up – JavaScript To Footer」というプラグインです。

・WordPress管理画面>「プラグイン」>「新規追加」>「speed up javascript to

 footer」で検索>「今すぐインストール」

WordPress高速化10

・「有効化」をクリック

WordPress高速化11

これでプラグインが有効化できました!

プラグインを有効化した結果

1つプラグインを入れただけですが、表示速度は改善されたのか早速チェックしてみました。

GoogleのPageSpeed Insightsの結果がこちら。

パソコン表示が78点、スマホ表示が69点で、いずれも「Needs Work」という結果になりました。

Beforeが79点・68点の「Needs Word」だったので、まさかの変化なしでした。笑

一方、GTmetrixの結果がこちら。

WordPress高速化14

ページスコアが「C(77%)」という結果になりました。

Beforeが「E(57%)」だったので、かなり改善されたと言って良いのではないでしょうか!

またまたPageSpeed Insights とGTmetrixとで結果に差がでました。

とはいえ、GTmetrixのスコアがかなり良くなったので、プラグインの導入により表示速度が改善されたことは間違いなさそうです。

さいごに

今回は、WordPressの高速化にチャレンジしました。

やったことは「コピペ」と「プラグイン導入」というめちゃくちゃ簡単なことだけなのですが、それでもツールの診断結果を見る限りではかなり表示速度が改善されたといえます。

Before After
PageSpeed Insights PC:57
スマホ:48
PC:78
スマホ:69
GTmetrix E50% C77%

ネットで調べてみると、他にもWordPress高速化のためにやれることはたくさんありそうなので、できそうなところからチャレンジしてみたいと思います。

やったら報告しますね!

それではまた!

スポンサーリンク

良かったらシェアをお願いします!

フォローする