【SEO】モバイルサイトのスピードアップ化⇒画像・JS・フォントの最適化
モバイルサイトのスピードアップ化についての情報です。
モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ）
【1】画像 (約 500 KB)
【2】JavaScript (約 380 KB)
【3】フォント (約 80 KB)
【4】CSS
【5】HTMLこの 3 つは Performance Budget（パフォーマンス バジェット）においても、最も考慮すべき要因になっている。
画像の最適化
画像はパフォーマンス最適化で一番重要。最適化できていないサイトが実に多い。
画像を最適化する手段には次のようなものがある。
適切なフォーマット
適切な圧縮
適切なサイズ・密集度
必要なときだけ読み込む (Lazy-load)
これらの施策は、時間と労力を削減するために自動化してシステム的に実行すべき。画像フォーマット
画像のフォーマットは目的に応じて選択する。アニメーション GIF
アニメーション GIF はサイズが大きいので、MPEG-4 (MP4) を使う――アニメーション GIF は MP 4 の 5 ? 20 倍サイズが大きくなる（実は Twitter では、アニメーション GIF をアップロードすると MP 4 に自動的に変換されている）
たとえば、ffmeg を使うとコマンドラインでアニメーション GIF を MP 4 に変換できる。
画像の圧縮
画像の圧縮には 2 種類ある。
Lossless: データを損失しない
Lossy: データを失うが、より高い圧縮が可能少なくとも Lossless で圧縮するべき。ほとんどのサイトにとっては、より高圧縮するために Lossy を使うのもいい。
Lossy 圧縮は、0 ? 100 のスケールで圧縮率を設定できる。ゼロに近づくほど高圧縮。ただし画像のクオリティも落ちる。
ほとんどの画像では、80 ? 85 で圧縮すれば、ファイルサイズを 30 ? 40 % 削減しつつ、クオリティの劣化は最低限に抑えられる。圧縮ツールは、Imagemin がポピュラー。webpack や node.js、gulp などさまざまな技術から利用できる。JPG や PNG、GIF など主だった画像フォーマットのプラグインがある。
画像のサイズ
すべてのデバイスに対して同じ大きさの画像を配信するのではなく、デバイスのスクリーンサイズに合わせた大きさの画像を配信する。データの転送量を抑えられるだけではなく、CPU の使用も抑えられる。
ほとんどのサイトでは、3 ? 5 種類のサイズの画像を準備しておくといい。Instagram は実際にそうしている。複数サイズの画像を配信することで、Instagram は 平均して 20 % ほどデータの転送量を削減できた。
画像サイズ変更のツールとして、npmパッケージの次を利用できる。
Sharp
Jimp
Lazy Loading
Lazy Loading/Lazyload は必要になるまでリソースの読み込みを遅らせる技術。画像によく使われるが、ほかのリソース、たとえば JavaScript にも利用できる。Lazyload は最初の読み込みのパフォーマンスを上げることができる。
またすぐに使用しないリソースをダウンロードしないので、データ転送量を抑えることもできる。
Spotify は Lazyload を有効に使っている。ページの表示とともにそのページにあるすべての画像を読み込んだとすると 18 MB になる。Lazyload を使ってスクリーンに入る画像だけを読み込ませると 1 MBに減る。
Lazyload は JavaScript で実装するのが一般的。しかし、Chrome がブラウザの機能として Lazyload をネイティブサポートするようになる。サードパーティ製のスクリプトは不要。
フォント
外部からダウンロードするウェブフォントもスピードを遅くする要因になる。
Flash of Invisible Text (FOIT) と呼ぶ現象がある。ブラウザがウェブフォントを読み込むまで、文字が現れない。
Speed Essentials: Key Techniques for Fast Websites (Chrome Dev Summit 2018)
https://www.youtube.com/watch?v=reztLS3vomE
SEOコンサルタントの感想
詳細は元記事参照。
このブログもモバイルではかなり遅いので修正が必要です。
やはり画像をいかに軽量化するか、ですね。
SEO・IT漫画「ウェブマブ！」
マンガボックスインディーズ
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
「ウェブマブ！」6話(11P)「対策キーワードは？」
LINEマンガインディーズ
「ウェブマブ！」TOP
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
「ウェブマブ！」6話(11P)「対策キーワードは？」
少年ジャンプルーキー
「ウェブマブ！」TOP
「ウェブマブ！」 第5話（9-10P）「面白いマンガとは？」
「ウェブマブ！」6話(11P)「対策キーワードは？」
SEO情報アンテナ