SEOでどんどん高まってきている表示スピードの重要性。

今回はモバイルファーストインデックスで大切になるモバイルの表示スピードを高める方法をご紹介します。

主に遅くなる原因は画像とJS

表示スピードを上げるには、処理量を減らすということです。つまり、webサーバーが読み込む情報量を減らす⇒ファイルを軽くするということになります。

そのファイルデータを重くしている原因は、画像とJSが大半を占めます。

これら画像やJSを軽くできるかで表示スピードを決まるといっても過言ではありません。

因みに、他の原因にはフォント、CSS、HTML、その他があります。

 

画像のデータ量を減らす方法

画像のデータ量を減らす方法として次の4点があります。

  • フォーマット
  • 圧縮
  • 画像サイズ
  • lazy-load

フォーマット

画像のフォーマット（拡張子）の種類でかなりバイト数を減らすことが可能です。

アニメーションGIF

例えば、アニメーションGIFはMP4にすると5分の1～20分の１ほどに小さくすることができます。アニメーションGIFはFFmpegというサイトでMP4に変換できます。

なお、mp4を使う場合、imgタグではなくvideoタグにすることを忘れてはいけません。

動画

動画であれば、AV1を推奨します。MP4を50%近く小さくできます。chrome70からサポートするようになりました。

WebP

WebP（ウェッピー）というものをご存知でしょうか。ウェブサイトのトラフィック量軽と表示速度の短縮を目的とした規格です。Googleのchromeのみの適用だったのですが、今ではいろいろなブラウザーで使えるようになりました。

Googleの示した事例によると、JPEGと比べて25%~34%にファイルサイズを圧縮でき、PNGなら28%小さくできます。ただし、2013年にMozillaが行った比較調査では、旧来のJPEGと大して変わらないという結果も出ています。

注意点として、未だに使えないブラウザーも存在しています。よってWebPとJPEGとブラウザーによって使い分けるようにHTMLには記載する必要があります。

圧縮

圧縮方法としてLossless圧縮とLossy圧縮があります。前者は可逆圧縮で、後者は非可逆圧縮です。主にLosslessは、ソースコード等データが一つでも変わるとまずいもの、Lossy圧縮は、人間が知覚できない領域（音域や色調）の再現に割り当てられているデータを削減するために使われています。

よってLossless圧縮のほうが見た目がきれいになります。Lossyだとかなり荒い画像となることもあるので、お勧めできません。圧縮ツールとしては今現在いろいろなものがあります。

画像サイズ

多くのサイトでできていないのが、デバイスのスクリーンサイズに合わせた大きさの画像を表示させる方法です。多くのサイトが同じ大きさの画像を配信してしまっています。ちゃんと大きさの違う画像を３～５種類用意しましょう。

データの転送量も抑えられて、CPUの使用も抑えら、表示スピードも速くできる前者の方法をお勧めします。

lazy-load

lazy-loadとは必要になるまでリソースを読み込みを遅らせる技術のことを言います。つまり、一気にそのファイルを全部読み込むよりも、必要部分のみとすることで表示スピードを上げる方法です。

ニュースメディアなどで、下に行くと画像が出てくるサイトとかあると思いますが、それはlazy-loadを使っています。

画像に使うのは結構普及していますが、これはJSを読み込むのにも使えます。

まとめ

ページの表示速度チェックにはPSI（ページスピードインサイト）を使うのが一般的です。ツールで出てくる改善方法は実施するものの、上記の方法も対応するとさらに改善できるはずです。

ページスピードの改善をチェックするならORRで

※もっと詳しくスピードアップ方法を知りたい方は、海外SEO情報ブログをご確認ください。

Post Views: 156