Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
Google AMP Cache、AMP Lite、そして高速化のニーズ
2017年1月19日木曜日
[この記事は Huibao Lin、Eyal Peled、Google ソフトウェア エンジニアによる Google Developers Blog の記事 "
Google AMP Cache, AMP Lite, and the need for speed
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
Google は、基本方針として高速なサービスの設計を追求しています。Accelerated Mobile Pages（AMP）形式を使うと、コンテンツを確実かつ高速に読み込むことができますが、これだけではありません。
Google 検索や Google ニュースと天気などでは、ほぼ瞬時にユーザーに画面が表示される AMP が使われています。その鍵となる技術のひとつがスマート キャッシュです。一般的に、キャッシュを活用すると、コンテンツとそれをリクエストするユーザーを物理的に近づけることができ、コンテンツのデータがユーザーのもとに届くまでに移動する距離が短くなります。さらに、キャッシュのような単一の共通インフラを使うことで、ページの提供時間の一貫性が高まります。一方、多くのホストから配信されるコンテンツは、キャッシュに比べるとコンテンツを提供するレイテンシが大幅に異なり、かなり長くなります。
Google 検索では、
Google AMP Cache
から AMP ページを提供しています。その大きな理由は、一貫した高速のコンテンツ配信にあります。このキャッシュの統合コンテンツ提供インフラは、数億件の規模でドキュメント提供を改善し、最適化を図れるというすばらしい可能性をもたらしています。Google AMP Cache は誰でも無料で使うことができます。その主な理由の 1 つは、すべてのドキュメントがこのようなメリットを受けられるようにするためです。
本投稿では、最近導入された 2 つの改善点、（1）イメージ配信の最適化と（2）「AMP Lite」プロジェクトによる帯域幅が限られた状態でのコンテンツ提供の実現について取り上げます。
Google AMP Cache によるイメージの最適化
ウェブ全体の平均で、イメージはページの
全データ量の 64%
を占めています。つまり、効果的に最適化するには、イメージを対象にするとよいということになります。
イメージの最適化は、通信に必要なデータ量を削減する効果的な方法です。Google AMP Cache は、
PageSpeed モジュール
と
Chrome データ圧縮
で利用されているイメージ最適化スタックを使っています（この変換を行うために、Google AMP Cache は「Cache-Control: no-transform」ヘッダーを無視している点に注意してください）。サーバーに
PageSpeed
をインストールすると、サイトは元のイメージに対して同じ最適化を行うことができます。
以下に、私たちが行った最適化の概要を示します。
1）見えない、または見えにくいデータを削除する
サムネイルや位置情報メタデータなど、ユーザーに見えないイメージデータを削除します。画質とカラーサンプルが必要以上に高い JPEG イメージでは、そのレベルを下げます。厳密に言えば、JPEG 画質を 85、カラーサンプルを 4:2:0（4 ピクセルごとに 1 つのカラーサンプル）に減らします。JPEG 圧縮イメージでは、これより画質が高い、またはカラーサンプルが多い場合、データ量は増えますが目視ではほとんど違いがわかりません。
データ量を減らしたイメージデータは大幅に圧縮されます。以上の最適化によって、ユーザーの見た目には影響を与えずに 40% 以上のデータ量を削減できることがわかりました。
2）イメージを WebP 形式に変換する
特定の画像形式では、モバイルと親和性が高まります。
WebP
がサポートされているブラウザの場合、JPEG を WebP に変換します。この変換によって、画質を変えずにさらに 25% 以上のデータ量を削減できます。
3）srcset を追加する
「srcset」が含まれていない場合は追加します。これは、「src」属性が存在し、「srcset」属性が存在しない「amp-img」タグに適用されます。この操作では、「amp-img」タグを拡張するとともに、イメージを複数のサイズに変更しています。これによって、画面が小さい端末でさらにデータ量が削減されます。
4）状況によって画質の低いイメージを利用する
ユーザーが望む場合や、ネットワークが非常に遅い場合には、（後述の AMP Lite の一環として）JPEG イメージの画質を下げます。たとえば、
データセーバー
をオンにしている Chrome ユーザーに対して、JPEG イメージの画質を 50 に下げます。この変換によって、さらに JPEG イメージのデータ量を 40% 以上削減できます。
次の例は、
最適化前
（左）と
最適化後
（右）のイメージを示しています。元のイメージは 241,260 バイトでしたが、1、2、4 の最適化を行った後は、25,760 バイトになっています。最適化後もイメージはほとんど同じに見えますが、データ量の 89% が削減されています。
低速ネットワーク向けの AMP Lite
世界では、多くのユーザーが低速な接続や RAM の少ない端末でインターネットにアクセスしています。しかし、AMP ページの中には、このように帯域幅が厳しく制限されたユーザー向けに最適化されていないものもありました。そのため、Google は AMP Lite を立ち上げ、このようなユーザーのためにさらに AMP ページのデータ量を削減することにしました。
AMP Lite では、イメージに対して前述のすべての最適化を行います。特に、画質レベルは常に低いものを使用します（上記の 4 つ目の項目を参照）。
さらに、
amp-font
タグを使って外部フォントを最適化し、外部フォントがキャッシュ済みかどうかにかかわらずページが即座に表示されるように、フォント読み込みタイムアウトを 0 秒に設定します。
AMP Lite は、ベトナムやマレーシアなど、いくつかの国の帯域幅が限られたユーザーや、全世界の RAM が少ない端末所有者のために提供されています。イメージによっては、これらの最適化によって細部が変わってしまう場合もある点に注意してください。ただし、広告など、ページの他の部分には影響しません。
* * *
上記のすべての最適化を組み合わせると、
合計 45% のデータ量を削減
できます。
私たちは、今まで以上に高速な AMP を提供するために、ユーザーがさらにデータを効率的に利用できるようにしたいと考えています。
Posted by
Yoshifumi Yamaguchi - Developer Relations Team
コメントを投稿
ラベル
#DevFest16
1
#hack4jp
3
Action on Google
1
Addy Osmani
1
ADK
2
AdMob
14
Ads
7
Agency
1
ALPN
1
AMP
21
Analytics
9
Andorid
9
Android
196
Android Auto
1
Android Design Support Library
1
Android Developer Story
3
Android N
18
Android Pay
1
Android Studio
17
Android Support Library
3
Android Things
1
Android TV
8
Android Wear
22
androidmarket
3
Angular 2
2
AngularJS
2
API
22
APIExpert
45
apk
2
app engine
21
App Indexing
7
App Invites
6
AppCompat
2
Apps Script
6
aprilfool
3
ArtTech
1
Audio
3
Auth Code
1
Authentication
7
AuthSub
2
Autotrack
2
Awareness API
1
Beacons
6
BigQuery
9
Billing
1
BLE
4
Blink
1
blogger
1
Brillo
1
Brotli
1
Budou
1
Calendar
1
Cardboard
4
Career
1
Case Study
1
chrome
64
Chrome Custom Tab
1
Chrome Dev Summit
1
chrome extension
4
Chrome for Android
2
Chrome for iOS
1
Chrome OS
2
Chromebook
2
Chromecast
7
chromewebstore
6
Chromium
5
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
8
Cloud Test Lab
2
CocoaPods
1
codejam
5
codelab
2
compute engine
3
Context
1
Crash Reporting
1
Dart
2
DataCenter
1
Daydream
4
Deep Learning
1
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
4
Developer Preview
3
Developer Relations
2
DevFest
7
DevFestX
3
devtools
3
DirectShare
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
Dynamic Links
1
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
57
Firebase Admin SDK
1
Firebase Analytics
3
Firebase Cloud Messaging
3
Firebase Database
4
Firebase Libraries
1
Firebase Remote Config
2
Flash
1
font
3
G Suite
3
game
17
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
11
Geo
34
Gingerbread
1
GLIDE
5
Gmail
1
Gmail API
1
Go
1
golang
4
goo.gl
1
Google
5
Google Apps
6
Google Apps Script
3
Google Assistant
1
Google Cast
8
Google Cloud Messaging
10
Google Cloud Platform
6
Google Code-in
1
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
1
Google Drive
3
Google Fit
2
Google for Mobile
1
Google for Work
1
Google Maps
39
Google Play
38
Google Play Game Services
7
Google Play Services
19
Google Plus
14
Google Search
5
Google Sheets API
1
Google Sign-In
12
Google Slides API
2
Google Summer of Code
1
Google Tag Manager
1
Google+
2
Googleapps
10
GoogleGames
1
GoogleI/O
27
GoogleLabs
1
GoogleTV
1
Gradle
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
6
Hosting
2
HTML5
17
HTML5Rocks
1
HTTP/2
4
HTTPS
5
ID Token
1
Identity
12
Identity Toolkit
1
Ignite
4
IME
10
Instant Apps
1
intern
2
Invites
1
iOS
13
IoT
2
IPv6
1
Japanese Input
1
JavaScript
5
K-12
1
Knowledge Graph
1
l10n
8
LINE
1
Lollipop
10
Machine Learning
1
Marshmallow
10
Material
1
Material Design
19
MDL
1
MIDI
2
Mobile
11
Mobile Bootcamp
4
Mobile Vision
3
mod_pagespeed
1
monetize
3
Mozc
14
Music
1
NativeDriver
2
NativeScript
1
Nearby
4
Nexus
2
Nexus S
1
NFC
1
Node.js
1
NPAPI
2
NPN
1
oauth
8
OpenGL
4
OpenID
3
OpenID Connect
2
OpenSocial
1
opensource
13
Optimization
1
Payment
2
People API
1
Performance
6
PersonFinder
1
Physical Web
3
Place Picker
1
Player Analytics
4
Policy
2
Polymer
7
Progressive Web Apps
8
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
publicdata
1
Push API
1
Push Notification
3
QUIC
1
RAIL
1
React
1
React Native
2
Realtime Database
2
Redux
1
Remote Config
2
Remote Display API
1
Runtime Permission
1
Sample Code
2
schema.org
1
security
18
Service Worker
3
sketchup
1
SmartLock for Passwords
4
social
4
SPDY
3
speak2tweet
1
Spreadsheet
1
startup
3
Storage
2
streetview
3
Study Jams
3
Swift
1
SwiftShader
1
Task
4
techtalk
12
TensorFlow
2
test
3
Test Lab
2
ToS
1
Transliteration
1
Twitter
1
Udacity
16
Unity
3
UX
1
V8
2
VP9
1
VR
7
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
6
Web Animations
1
Web Components
5
Web Manifest
1
WebAssembly
1
WebMusic
4
WTM
2
Xcode
1
YouTube
15
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2017
1
2016
12
11
10
9
8
7
6
5
4
3
2
1
2015
12
11
10
9
8
7
6
5
4
3
2
2014
12
11
10
9
8
7
6
5
4
3
2
1
2013
12
11
10
9
8
7
6
5
4
3
2
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
7
6
5
4
3
2
1
2010
12
11
Feed
Google
on
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"
