サイトスピードテストは最速で攻略すべき【遅くなると面倒】 | hayablog  
動画を無料で見たい方はこちらをどうぞ

サイトスピードテストは最速で攻略すべき【遅くなると面倒】

  • サイトスピードって何?

 

  • 知ってるけど攻略していない

 

  • ここ最近自分のブログの立上りが遅い

 

このような方向けに、今日から即実践すべき記事を用意しました。

 

当記事では、サイトスピードテストとその攻略法についてまとめております。
これを読み終えると、自分のブログのスピードを知りたい、速くしなきゃなと思えるものとなっております。

 

ぜひご覧ください。

 

 

サイトスピードテストは最速で攻略すべき

 

サイトスピードテストは最速で攻略すべきです。

 

なぜなら、遅いとGoogleも読者も嫌がるからです。



サイトスピードの重要性

 

まずGoogle

モバイルページの読み込みが1秒速くなると、コンバージョン率が27%増える、と言っています。

 

Google’s slides began by stating that “mobile pages that load 1s faster see up to +27% CvR
引用元:Mobile speed and experience – Google’s 2.4 second sweet spot

 

 

そして読者

読み込みが遅いページは見たくないですよね。
あまりに遅いとせっかく訪ねてきてくれた読者の方が離脱してしまいます。

 

最速を極めるというよりは、遅すぎるのを防ぐという考え方でOK。

 

 

サイトスピードテスト

 

調べるといくつもでてきますが、Page Speed Insightsを使えば問題ないですよ。

 

確認方法は以下。

  1. 自身のサイトのURLを貼り付ける
  2. 分析をクリック

 

簡単ですよね。
調べてみると分かりますが「モバイル」と「パソコン」でそれぞれ点数がでてきます。

 

よい点数がほしいモバイルの方が点数がでないですね。それが一般的。

 

 

サイトスピードテストの点数目安

 

目安としては50点を目指しましょう。黄色の点数ですね。

 

サイトスピードを意識する前の僕のサイトは以下の点数でした。

 

モバイルが51点、パソコンは96点でギリギリ合格点。
ですが今後の運営を考えると、スピードを上げる方法を知り実践しておく必要があると考えてました。

 

 

みなさんも実践するのが遅くなると面倒ですよ。

 

 

サイトスピードが遅くなる主要因

 

 

サイトスピードが遅くなる主要因は以下。

  1. 使用していないCSSを削除してください
  2. テキスト圧縮の有効化
  3. 次世代フォーマットでの画像の配信
  4. オフスクリーン画像の遅延読み込み

 

詳しくみていきましょう。



1.使用していないCSSを削除してください

 

言葉どおりですが、使用していないCSSの記述を少なくしてください、ということ。

 

当然といえば当然ですよね。
これは自身のブログのcss設定画面ですが、不要なものは一切無し

 

2.テキスト圧縮の有効化

 

簡単に言うと、テキストを圧縮し容量を小さくしてからダウンロードするべき、ということ。

 

意味は分かると思いますが、やり方が分からないと思うので以下を参考にしてください。

 

 

①Xserverの.htaccess編集をクリック。

 

 

②自身のサイトを選択する。

③.htaccess編集をクリック。

④.htaaccessの画面を確認し、一番下までスクロール。

 

 

⑤.htaccessの一番下に下記を追記すればOK。

 

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

 

意味が分からない方でも、手順どおりやっていただければ問題ないかと。

 

 

3.次世代フォーマットでの画像の配信

 

簡単に言うと、JPEG 2000、JPEG XR、WebPなど、従来のJPEGやPNGより圧縮効率の高い画像フォーマットを使うべき、ということ。

 

ですが現状は、次世代画像フォーマットに対応していないブラウザが多いです。GoogleのChromeですら JPEG 2000 に未対応

 

なのでここは言われたとおりの対応はしないのがよいですね。

 

代わりに画像のリサイズと圧縮を徹底するのが吉

 

 

 

画像のリサイズ:BULK RESIZE

 

画像の圧縮:TinyPNG

 

特にやり方は難しくないです。イメージは対象の画像を選択してドラッグ、これだけ。
画像サイズを小さくして容量を減らしましょ、ということ。

 

 

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

 

簡単に言うと、見えている画像以外の画像は、見える位置までスクロールされてから読み込むようにすべき、ということ。

 

これはプラグインで解決a3 Lazy Loadをインストールしてみましょう。

 

設定はほぼデフォルトでOK。1箇所のみ変更してほしいです。

 

 

・Image Load Thresholdの値を0から400に変更

 

 

特に問題なさそうですよね。

 

 

主要因を対策した結果

 

 

ここまでの対策をしたことでの点数変化はこれです。

 

 

【対策前】モバイル51点、パソコン96点

【対策後】モバイル64点、パソコン99点

 

 

かなり点数が伸びましたね。
みなさまのサイト毎でサーバーの種類、画像の枚数、プラグインの数などが違いますので、
一概に同じ結果になるとは限りませんが試す価値はアリ

 

 

さいごに

 

まとめますと、

 

サイトスピードテストはGoogleと読者が嫌がらないよう最速で攻略すべき

 

サイトスピードテストの攻略箇所は以下

 

  1. 使用していないCSSを削除してください
  2. テキスト圧縮の有効化
  3. 次世代フォーマットでの画像の配信
  4. オフスクリーン画像の遅延読み込み

 

サイトスピードテストを早い段階で攻略し、Googleにやさしく、読者を待たせないようにしましょう。
ちょっとした気遣いがあなたのサイトを見てくれるキッカケになったりしますよ。

 

以上、「サイトスピードテストは最速で攻略すべき【遅くなると面倒】」でした。