サイトの表示速度をプラグインを入れるだけで速くする方法

サイトの表示速度をプラグインを入れるだけで速くする方法

サイトやブログを訪問したとき、すごく重くて白い画面のまま…

そんなイライラサイトになっていませんか?

この記事では初心者向けに、表示速度の改善方法をご紹介します。

 

表示速度について

重くてなかなか表示されないサイトは訪問者をイライラさせてしまい、結果離れてしまう原因になります。

次に紹介するサイトで表示速度を測り、もし遅い場合は改善しましょう。

 

 

表示速度を知ろう

自分のサイトの表示速度を調べられるサイトがあります。

>>PageSpeed Insights

ブックマーク推奨

 

使い方は簡単。

自分のサイトやブログのURLを貼って「分析」をクリックするだけ。

URLを貼って分析をクリックする

 

「モバイル」と「パソコン」というタブがあります。

普段、パソコンで作業をする方が多いと思うので、モバイルでの速度に気付かなかったりします。

 

このブログもモバイルの方が少し表示速度が遅いです。

 

 

実は最初は「遅い」数値でしたが、いくつかのプラグインを導入したり改善をして「平均」の速度にしました。

 

 

原因を知る

改善できる項目

速度スコアを出して、下にスクロールしていくとこういうのが出てきます。

 

  1. キー リクエストのプリロード
    必要なリソースを優先的に読み込ませる。
  2. オフスクリーン画像の遅延読み込み
    画像を一度にすべて読み込むのではなく、遅らせて表示させる
  3. レンダリングを妨げるリソースの除外
    必要な js や css 以外は遅らせて読み込ませる
  4. 使用していない css の遅延読み込み
    使用していないルールは削除する
  5. サーバー応答時間の短縮(TTFB)
    最初の1バイトが到着するまでの時間を減らす
  6. css の最小化

 

表示速度を速める方法

まず、簡単に改善できるものからやっていきます。

私は「javaScriptとcssの圧縮」と「画像の圧縮」をプラグインを使って行っただけで、パソコンでの表示速度が「速い」になりました。

 

javaScriptとcssの圧縮

上記の6番目の項目「cssの最小化」と、もし「JavaScript の最小化」というのが出ていたら、この2つはプラグインで解決できます。

 

私が使っているのは「Autoptimize」というプラグインです。

javaScriptやHTMLを圧縮してくれるので、これを入れるだけでかなり速度が改善できます。

 

実際私もこのプラグインを入れて設定しただけで、表示速度の判定が「遅い」から「標準」まで改善されました。

 

詳しく設定方法が書いているサイトがあるので、こちらを参考にしてみてください。

 

参考 WordPressならAutoptimizeプラグインでコードの最適化をするべきPasolack

 

画像を圧縮する

プラグイン「EWWW Image Optimizer」を使用しています。

これは画像をメディアに追加するときに自動圧縮して画像の容量を抑えてくれます。

すでにアップロードされた画像も圧縮できるのでおすすめです。

 

 

改善しなかったこと

私が無視した項目です。

先述した通り、無視していてもパソコン表示で速度が「速い」になっています。

なので他の項目を優先的に改善して、どうしてもまだ速度を上げたいというときに改善方法を考えるのでも良いと思います。

 

 

オフスクリーン画像の遅延読み込み

これもプラグインを使用すればすぐに改善できますが、私は使用をやめました。

 

私が使ったのは「Lazy Load」というプラグインです。

私の場合スマホでこのブログを見ると、スクロールしてアイキャッチ画像が表示されたとき、ずっと読み込みのマークが出てなかなか表示されませんでした。

 

設定をいじったりすれば改善するのかもしれませんが、わからなかったので諦めました。

 

調べるのも面倒くさいし、速度が「速い」ならもういいかなぁって…。

ラムネ

 

キャッシュ

静的なアセットと効率的なキャッシュ ポリシーの配信

「診断」の「静的なアセットと効率的なキャッシュ ポリシーの配信」という項目があります。

 

これは簡単に言うと、「キャッシュの有効期間を長くして再訪問したときに前に読み込んだものを表示させよう!」という意味です。

 

確かに毎回読み込むより前に読み込んだものを表示させる方が早く表示できるのですが、キャッシュの期間が長くなると前のキャッシュが残っているせいで、表示崩れを直しても反映されなかったりするのです。

私は結構頻繁にブログの表示方法を変えたりするので、この項目は無視しています。

 

ちなみにこのプラグイン「WP Super Cache」を使うと、キャッシュの有効期間を長くして表示速度を改善することができます。

 

 

Webフォント

日本語のフォントは、漢字・ひらがな・カタカナとあるのでデータが大きく、その分読み込みに時間がかかってしまいます。

本当は使わないのが一番良いのでしょうが、私は使いたいのでWebフォントを使っています。

 

Webフォントを「<link rel=preload>」を追加して優先的に読み込ませることで速度が改善できるようですが、私はcssから読み込ませているのでこの手は使えませんでした。

 

 

まとめ

 

  • Autoptimize」をインストールしてjavaScriptやcssを圧縮する
  • EWWW Image Optimizer」をインストールして画像を圧縮する

 

私は技術的なことはわからないので、速度が遅くなければそれでいいかなと思っています。

同じような初心者さんは、まず上記のプラグインをインストールすることからやってみてください(*゚∀゚)