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

【スコア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点以上とっているので信頼性は担保されていると思います。

証拠画像

pagespeed insights

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

スポンサーリンク

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

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

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

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

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

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

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

画像の容量を小さくする

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

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

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

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

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

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

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

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

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

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

サイトのスピードを改善②: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分野でためになる情報を発信していきます。

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