サイトの表示速度を改善

う～ん、なんかブログの読み込み遅い気がする

いなり

きゃな

読み込み遅い真っ白サイトってすぐ離脱するよね

表示速度について

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

そうなると検索の順位も下がってしまうので、自分のサイトの表示速度を測り、もし遅い場合は改善しましょう。

改善することでSEO対策になります。

表示速度を知ろう

先程紹介したツールです。

こちらはGoogleが提供しています。

▼ブックマーク推奨

PageSpeed Insights

使い方は簡単。

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

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

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

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

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

表示速度が遅い原因を知る

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

表示速度の改善方法

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

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

javaScriptとcssの圧縮

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

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

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

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

画像を圧縮する

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

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

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

改善しなかったこと

私が無視した項目です。

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

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

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

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

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

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

キャッシュ

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

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

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

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

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

Webフォント

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

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

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

表示速度改善でSEO対策

初心者がすぐにできる対策の一つが表示速度の改善です。

まずは上記のプラグインをインストールすることからやってみてください(*ﾟ∀ﾟ)