月3万円稼ぐ方法

サイトの表示速度を改善

サイトの表示速度を改善

う~ん、なんかブログの読み込み遅い気がする
いなり
いなり
きゃな
きゃな
読み込み遅い真っ白サイトってすぐ離脱するよね

表示速度について

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

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

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

 

表示速度を知ろう

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

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

 

▼ブックマーク推奨

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を圧縮してくれるので、これを入れるだけでかなり速度が改善できます。

 

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

 

画像を圧縮する

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

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

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

 

改善しなかったこと

私が無視した項目です。

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

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

 

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

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

 

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

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

 

キャッシュ

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

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

 

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

 

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

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

 

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

 

Webフォント

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

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

 

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

 

表示速度改善でSEO対策

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

 

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

 

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