AMPとやらにたどり着いた。
高速でレンダリングできる！と謳うものの、
いまいちピンとこないので調べてみた。
AMPとは@AMP公式
https://www.ampproject.org/ja/learn/about-amp/
これによると、
AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。なにやら結構な勢いで今後主流となりそうなニオイがプンプンしますぞ！
AMPとは@SEO HACKS
実際どう変わるの？ってことで、
AMP エンジニアリング リーダーの Malte Ubl さんによる解説動画を見てみよう。
ってことでやっぱりちゃんとまとめてみます。
AMPが早くなる11の手段
Javascriptをちょっと制限する
JavaScriptは何でもできる代わりに、DOM構築を遅らせる原因になるとか。
とっくにhtmlは読み終わってるのに、
いろいろと計算しているせいで表示が遅れるー！なんてことを防ぐらしい。
代わりにカスタムAMP要素というものを用意するようにして、
必要な動作はこっちで再現できるみたい。
また、非同期のJavaScriptなら普通に使えるとか。
全てのサイズを静的に決定する
表示を早めるためには、htmlの段階で表示サイズが決まっていればいい。確かに一度htmlで出したものをJSで再配置するのは無駄なプロセスだよね。
AMP公式では、
「たった 1 回の HTTP リクエストで、すべてのドキュメント （とフォント）を配置できます。」
と豪語している。
拡張機能による描画遅延をなくす
これも上記と似ているね。
AMPの方で一般的な機能を内包させることで、
jQueryプラグインとか手配しなくて済むみたい。
カスタムスクリプトで拡張可能。
あらかじめAMPシステムに通知しておくことでボックス等を生成させる。
つまり、中身を読むより先に配置を決定させて、とにかく早く表示させることを優先させてる。
サードパーティのJavaScriptを全て外す
これまでは広告を読み込む時とか、それぞれで同期読み込みして、それぞれの遅延がページ全体の表示にも影響していた。
こういったものをiframe内に制限することで、描画を分離する。
外したJavaScriptは、サンドボックス化されたiframe内においやっておけばいいみたい。
中身を待たないと配置できない＝その要素に続く要素も配置できない
なんて渋滞みたいな状態をスッキリさせる発想。
なるほどなあ。
CSSをインラインに置く
配置・描画において、CSSはかかせない。
かかせないのに外部ファイルにしてたら、htmlリクエストの他にCSSもリクエストしなきゃってなる。
両方揃うのをじっと待つなら、1回にまとめちゃえばいい。
というわけかどうかはわからないけど、
CSSはインライン スタイルで記述するように決められている。
CSSも再配置とまではいかないけど、優先度をうまく使って上書きすることって結構あるし、
そこら辺はまだまだ変わらないだろうけど、
「そりゃ早くなるわ」と納得。
ウェブフォントの最適化
ウェブフォントって出始めの頃は重たかったもんなあ。
今ではだいぶ早くなったけど、まだまだあの頃の重さがトラウマになってたりする。
AMPでは、フォントのダウンロードが始まるまでHTTPリクエストを行わない。
しかも上述の仕様から、そのダウンロードを妨げるHTTPリクエストは皆無。
すごいなあ。
DOMを読んでから描画
スタイルの再計算は多くのリソースを消費する。
動的処理するページだとたまに重いところもあるもんね。
アコーディオンリストとか、ソートとか。
ひどいと再読込みたいな挙動をしちゃってたり。
具体的な技術はよくわからないけど、
1フレームあたりのスタイル再計算は最大でも1回になるらしい。
すごいな。
GPUを最大活用するアニメーション処理
これまでレイヤーの更新処理はブラウザに任されていた。
そこらへんの描画処理、特にアニメーションはGPUアクセラレーションを使うようにすればずっと早いし、メインの処理を邪魔しない。
AMPのルールに沿えば、transformとopacityだけでアニメーションさせるから、
レイアウトは必要ないのだとか。
適材適所なアイデアだね。
読み込みに優先順位をつける
これだよこれ！
重要なリソースから先にダウンロードするようにすれば速い。
あたりまえだけどこれまで実現できてなかった。
今まではとにかくリクエストされた順に読み込んでたから、
表示するまでの間をプリロード画像とか出してごまかしてたもんね。
プリレンダリングの最適化
ユーザーがページを開く前にレンダリングもできちゃうのだとか。
超能力かと思うけど、どうやら
「スクロールせずに見える範囲のリソースのみが実際にダウンロードされます。」
ってことらしい。
見えてるとこしかタップ（クリック）できないのに、
見えてないページまでダウンロードしてたらアホだもんな。
しかもその時、CPUに負荷のかかりそうなもの（広告とか動画とか？）は保留しておくとか、なんて賢い子！
オープンソース
出ましたオープンソース。
より早くするためのノウハウを広く共有している。
これでいつも新鮮！最速！ってわけだ。
恩恵
「ニュース系の検索クエリに対して、カルーセルでAMP対応の検索結果ページを返すようになった」
なによりコレだろうなあ。
SEOからMEO（検索結果に出る地図を使った最適化）ときて、
こんどは情報、つまりニュースの最適化としてAMPは使えると判断してよさそうだね。
要は新たなGoogleの広告枠ってわけだ。
問題点
・これまでのノウハウ・リソースを一旦捨てなきゃならない。
・JavaScriptやjQueryプラグイン大好きっ子にはちょっと痛い。
・絶賛継続中だから突然の仕様変更とか不確定要素が多い。
・情報（特に日本語の）が少ない！！！！
まとめ
Googleが旗ふってるのもあって、
検索結果にはすでにAMP対応のマークが搭載されてる。
まずはこれらの動きを見ておくのが良いのかも。
実装するにあたって、お試しなページじゃ効果も実感しづらい。
読み込み短縮の恩恵はなにより直帰率を抑えられること。
そしたら、ある程度継続的に利用されてるサービスでないと意味ないよね。
特にニュースを主軸に置いてる側面もあるから、情報の遅れは命取り。
まずは色々ためしておいて、
新規立ち上げの時に採用してみるのが良さそうだね。
市場としてはニュース検索のカルーセル表示に注目が集まるだろうけど、
本来の「もっと早く表示させたい」ってハートは、愛撫したくなる要素に満ちていると思わないかい？
Googleが旗ふってるのもあって、
検索結果にはすでにAMP対応のマークが搭載されてる。
まずはこれらの動きを見ておくのが良いのかも。
実装するにあたって、お試しなページじゃ効果も実感しづらい。
読み込み短縮の恩恵はなにより直帰率を抑えられること。
そしたら、ある程度継続的に利用されてるサービスでないと意味ないよね。
特にニュースを主軸に置いてる側面もあるから、情報の遅れは命取り。
まずは色々ためしておいて、
新規立ち上げの時に採用してみるのが良さそうだね。
市場としてはニュース検索のカルーセル表示に注目が集まるだろうけど、
本来の「もっと早く表示させたい」ってハートは、愛撫したくなる要素に満ちていると思わないかい？
0 コメント:
コメントを投稿