国内&海外SEO情報ウォッチ 「海外SEO情報ブログ」の鈴木 謙一氏が、日本と海外の検索マーケティング情報をさらっとまとめて毎週金曜日にお届け。
海外&国内SEO情報ウォッチ

「アニGIF使ってる人は、意識低すぎ」グーグルのエンジニアがダメ出し🙅

ページ

Web担当者に役立つ最新情報

「アニGIF使ってる人は、意識低すぎ」グーグルのエンジニアがダメ出し🙅
表示速度を激遅にする (Addy Osmani on Twitter) 海外情報

アニメーションGIF(アニGIF)は、(場合によっては)使うべきではない

グーグルのエンジニアが、このように警告している。理由は、アニメーションGIFのファイルサイズだ。油断すると非常にファイルサイズが大きくなりがちで、そうなると、ページの表示時間を著しく遅くしてしまうのだ。

アニメーションGIFではなくMP4動画形式を使えば、同じ内容でもファイルサイズを80%~90%ほど減らせる。ページ表示がずっと軽くなるのは間違いないし、「ギガが減る」と嫌われることも少なくなるだろう。

※Web担編注 ツイートしているオスマニ氏は、前述のような表現ではなく、「大きなサイズのアニメーションGIFをvideo要素に変えると、表示が早くなるよ」ということを穏当に提言している。ここで少し過激に表現しているのは編集部の判断による。

TwitterやFacebookは、ユーザーがアップロードしたのがアニメーションGIFでも、表示時には自動変換して<video>にするという処理を昔から採用している。

それが実際にどれほど効果的なのかを確認してみよう。

グーグルの公式ブログでは、重いアニメーションGIFを使っていることが多い。たとえばこちらの記事だ。このページで使われているアニメーションGIFのファイルサイズは22.9Mバイトもある。

アニメーションGIF

これを筆者がMP4に変換したところ、2.9Mバイトに縮小できた(87%も削減!)。

ファイルサイズ比較

こちらは、アニメーションGIFから変換したMP4だ。元記事のアニメーションGIFと同じように動いているはずだ。

次の<video>タグで動画ファイルを設置している。タグの設定でアニメーションGIFのように自動再生かつループ再生にもできる。

<video autoplay loop muted playsinline>

アニメーションGIFからMP4への変換方法や<video>タグの構成については技術ドキュメントを参照してほしい。

ドキュメントではコマンドラインで変換しているが、「gif mp4 変換」などで検索すれば、オンラインでブラウザから変換できる無料サービスもたくさんみつかる(変換するデータの扱いなどに関しては各サービスの解説をしっかりと確認してほしい)。

ちなみに、MP4よりもWebM(ウェブエム)形式の動画はさらにサイズを削減できるのだが、まだWebM形式をサポートしていないブラウザもあるのが欠点だ。とはいえ、<video>タグで<source>要素をうまく使えば、

  • WebM形式をサポートしているブラウザにはWebMを読み込ませ
  • WebM形式をサポートしていないブラウザにはMP4を読み込ませる

ということも可能だ。こちらの設定も詳しくはドキュメントに書かれている。

★★★★☆
  • 高速化がんばってる人用(ふつうの人は気にしなくていい)
  • 技術がわかる人に伝えましょう

PC画像検索で、レシピ/商品/動画にバッジアイコン表示へ
構造化データで表示できる (金谷 武明 on ツイッター) 国内情報

PC版のグーグル画像検索で、検索結果画面に表示される画像に、

  • レシピ
  • 商品
  • 動画

を示すバッジが表示されるようになった。2017年8月にモバイル画像検索に導入されたのと同等の機能だ。

バッジアイコンにマウスカーソルを当てると、レシピと動画ではテキストでの説明が出てくる。動画では再生時間が出てくる。

バッジアイコン
左側が通常の状態で、マウスカーソルをhoverすると右のようになる

レシピと商品のバッジは、その画像が設置されているページに構造化データが追加されていれば出てくる。構造化データを実装しているサイトはバッジが出ているか確かめてみるといい。クリック率アップに貢献してくれるかもしれない。

★★★☆☆
  • 画像SEOがんばってる人用(ふつうの人は気にしなくていい)

クロールの統計情報にはご注意を。検索以外のクローラの情報も含まれている
新SCにクロールの統計情報レポートは移植されるのだろうか? (Google Webmaster Central office-hours) 海外情報

もうほとんど見ることがなくなってきた旧Search Consoleだが、まだ新Search Consoleに移植されていない「クロールの統計情報」というレポートがある。Googlebotがクロールしたページ数や転送量などを知ることができるものだ。

クロールの統計情報

たまに調べておきたくなるこのレポートだが、注意しておきたい点があるようだ。というのも、ここに表示されているデータには、

  • ウェブ検索用のGooglebot(PC版Googlebotやスマートフォン版Googlebot)の活動

だけではなく、

  • グーグル広告用など他のクローラの活動

も含まれているとのことなのだ。したがって、ウェブ検索用のGooglebotの活動を正確に監視したければ、サーバーログを見るほうがいいだろう。

ところで、新しいSearch Consoleには「クロールの統計情報」はまだ移植されていない。利用価値があるレポートなのだが、どちらかというと玄人向けだ。個人的には移植されないような気がする。

★★☆☆☆
  • SEOがんばってる人用(ふつうの人は気にしなくていい)

AMPのCSSサイズ上限が5割増しで75KBに
わずか25KBでもAMPでは価値ある増量 (The AMP Blog) 海外情報

AMPで利用できるCSSのデータサイズ上限が50Kバイトから75Kバイトに増加した。率にして150%への増量だ。

AMPではページで使うCSSをドキュメント内にインラインで記述することになっており、そのサイズにも厳しい制限がかけられている。

これは、ページの高速な読み込みを実現するためなのだが、そのせいで、非AMPページと同様のデザインやレイアウトにしづらいこともあった。今回増えたのはわずか25Kバイトではあるが、AMPでは価値のある増加のはずだ。

制限がゆるくなっただけなので、すでに公開済みのAMPページをわざわざ修正する必要はない。またWordPress向けの公式AMPプラグインも最新バージョンでは75KバイトまでのCSSが使えるようになっている

★★★★☆
  • AMP導入しているすべてのWeb担当者 必見!
  • 技術がわかる人に伝えましょう

AMP公式サイトはどのようにしてサイト内検索機能を実装しているのか
通常サイトに勝るとも劣らない性能 (Google Developers Japan) 国内情報

AMP公式サイトが実装しているサイト内検索の仕組みを公式ブログが解説した。

AMP公式サイトはすべてAMPで構築されている。にもかかわらず、通常のサイトに勝るとも劣らないサイト内検索を提供している。

ご存知のとおり、通常のウェブサイトと比べてAMPは利用できる技術に制限がある。しかし、今のAMPをうまく使えばここまでできるということを示している。

AMPの技術だけでここまでUXの高いサイト内検索を実現している(ブログ記事で紹介している動画)

実装に際しては次の3項目を目標にしたとのことである。

  1. すべてのページで専用のレイヤーから検索できること
  2. AMP デベロッパー エクスペリエンスの中核をなす AMP コンポーネントの検索に最適化されていること
  3. 有効な AMP 機能を使って実装すること

活用したAMPコンポーネントは次のとおりだ。

技術的な詳細は参照元の解説記事を見てほしい。AMP対応していて、現在設置しているサイト内検索に満足できていなかったとしたら参考にするといい。

★★★☆☆
  • AMPがんばってる人用(ふつうの人は気にしなくていい)
  • 技術がわかる人に伝えましょう

海外SEO情報ブログ海外SEO情報ブログの
掲載記事からピックアップ

グーグル検索の試験機能とアフィリエイトに対するグーグル社員のコメントをピックアップ。

ページ

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

人気記事トップ10(過去7日間)

今日の用語

SEO
検索エンジンからサイトに訪れる人を増やすことで、Webサイトの成果を向上させる施 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]