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

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

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

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

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

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

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

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

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

これを筆者が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すると右のようになる

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

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

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

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

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

だけではなく、

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

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

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

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公式サイトはどのようにしてサイト内検索機能を実装しているのか
通常サイトに勝るとも劣らない性能 （Google Developers Japan） 国内情報

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

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

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

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

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

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

• <amp-lightbox>
• <amp-list>
• <amp-autocomplete>
• <amp-mustache>
• <amp-bind>

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

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

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

• ECサイトで試してみたいGoogleモバイル検索の3D&AR機能

  近未来的な機能

  ★★★☆☆

  • SEOがんばってる人用（ふつうの人は気にしなくていい）
• Google社員がコメント「アフィリエイトサイトであることをGoogleに隠す必要はない」

  隠しても品質は上がらない

  ★★★★☆

  • すべてのアフィリエイター必見！