【スコア95点以上!?】サイトのスピードを改善する方法【具体的です】

サイトのスピードを改善してSEOの評価を上げたいんだけど、どうやってサイトのスピードを改善すればいいですか？教えてほしいです！

悩んでる人

ゆうが

こういった疑問に答えます！

記事を読むメリット

あなたのサイトのスピードを改善できます
直帰率や離脱率を下げられ、SEOの評価が上がるようになります

こんにちはゆうがです。

今回は、サイトのスピード改善の方法を解説していきます。
以前こちら【手順は2つ】WordPressサイトを高速化する方法【結論：画像サイズを小さくする】でも解説したのですが、追加でもっと簡単に改善する方法を解説します。

この部分は超大事でして、なぜならサイトのスピードが遅いとユーザーとGoogleのどちらにも嫌われてしまうからです。

※すぐにサイトのスピード改善の方法を知りたい方は、こちらのサイトのスピードを改善する方法をクリックしてスキップしてください。

ページ速度を上げることが超大事な理由

理由として、有名ですがSEOの本質である「Googleが掲げる10の事実」では、

遅いより速いほうがいい。

Googleが掲げる10の事実

このように書いてありますし、さらにはサイトの表示時間が、

1秒→3秒になると直帰率が32%増える
1秒→5秒になると直帰率が90%増える

Find out how you stack up to new industry benchmarks for mobile page speed

このようにGoogleとユーザーのどちらからも嫌われます。

つまり、サイトのスピード改善をしないと

SEOの評価は悪くなる
ユーザーは来なくなりPVやCVが下がる

と悪いことしかありません。

なので改善する方法を解説していきます。

本記事のもくじ

サイトのスピードを改善する方法
サイトのスピードが改善されたか測定しよう

本記事の信頼性として、ぼくは実際にGoogleの公式ツールPageSpeed Insightsでモバイルとデスクトップ共に95点以上とっているので信頼性は担保されていると思います。

証拠画像

前置きが長くなっていまい申し訳ないです。。。
それではいきましょう！

サイトのスピードを改善する方法

具体的には、下記の3つをやることでサイトのスピードを改善することができます。

画像のサイズと、大きさを小さくする
CSSの非同期読み込みをする
使用していないCSSを削除する

それぞれ解説していきます。
※事前にPageSpeed Insightsで改善する前の結果をとっておくと、変化がわかりやすいです。

サイトのスピードを改善①：画像のサイズと、大きさを小さくする

こちらは2つの意味がありまして、1つ目の意味は画像の容量を小さくするということです。

画像の容量を小さくする

やり方としては、こちらの記事【手順は2つ】WordPressサイトを高速化する方法【結論：画像サイズを小さくする】に詳しく書いていますので読んでみてください。

少しだけ解説すると、jpegminiという画像軽量化アプリを使い、容量を軽くするということです。
JPEGmini

たとえば、もともと1.5MBある画像を100KBにするみたいな感じです。
これだけでだいぶページの速度が速くなります。

そして2つ目の意味は、そもそもの画像を小さくするということです。

画像自体のサイズを小さくする

どういうことかと言うと、シンプルにwidthとheightの値を小さくするということです。

たとえば、ぼくの場合ですと、

上記の画像のように画像を左に持っていき小さくしています。

こんな感じで、そもそものサイズを小さくすれば読み込みも速くなるので、ページの速度も上がります。

サイトのスピードを改善②：CSSの非同期読み込みをする

CSS非同期読み込みとは、「1の処理が終わったら2を実行する」みたいな感じでサイトを読み込んでくれることを指します。

これを実装することで、サイトへのアクセススピードが上がります。

しかし一つ注意点としては、スマホで見る場合にほんとに一瞬ですがデザインが崩れるときがあります。

たとえば、こんな感じです。

主にFontAwesomeのデザインが崩れますね。

とはいっても、ほんとに一瞬ですしそれ以上にメリットがあるので実装しましょう。

CSSの非同期読み込みの実装方法

やり方としては、LION BLOG(media)を使っている方でしたら「外観→カスタマイズ→SEO設定」にいきCSS非同期読込設定を「有効」ににすればOKです。

LION BLOG以外の方は

LION BLOGの方以外は、こちらの記事がマジで参考になるので見ながら設定してみてください。
CSSを非同期で読み込む方法【多分これが1番いいはず！】

一応コードをお借りすると、下記です。

code

requestAnimationFrame(function(e) {
  e = document.createElement('link');
  e.rel = 'stylesheet';
  e.href = 'ここにcssのパス';
  document.head.appendChild(e);
});

そしたら、このコードをfooter.phpの</body>の直上にコピペすればOKです。

これで実装できます。

サイトのスピードを改善③：使用していないCSSを削除する

そもそもページを読み込む際にはCSSを全て読み込むので、その時に使用していないCSSも読み込みます。

その結果、わずかですが時間を食います。
これが意外とやっかいです。

なので使用していないCSSは削除しましょう。

やり方としては、まずどのCSSが不要なのかを割り出す必要があります。

不要なCSSを見つける方法

やり方としては、自分のサイトを開き右クリックを押して「検証→縦の・・・→More tools→Coverage」を選択します。

そしたら、「click the record button ● to start capturing coverage.」とあるのでクリックする

そうすると下記の画像のように、赤いグラフとCSSが出てくるのでそれが使用していない不要なCSSです。

あとは、URLをみつつ不要なCSSをテーマから削除すればOKです。

以上3つがサイトのスピードを改善する方法でした！

サイトのスピードが改善されたか測定しよう

最後にサイトのスピードが改善されたかを測定してみてください。
PageSpeed Insights

おそらくですが、10%以上は上がったかなと思います。

もし、「上がってないやんけ！」という方がいましたら、お問い合わせフォームよりご連絡ください。できる限りの対応をいたします。

それでは今回は以上です！
今後もSEO分野でためになる情報を発信していきます。

最後までみてくださり、本当にありがとうございました！