Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
スタンドアロンAMPのすゝめ
Search
t32k
March 20, 2017
Technology
3
13k
スタンドアロンAMPのすゝめ
FRONTEND CONFERENCE 2017 | 関西フロントエンドUG
http://kfug.jp/frontconf2017/
t32k
March 20, 2017
Tweet
Share
More Decks by t32k
See All by t32k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
Evaluating your stylesheets
t32k
0
800
Evaluating CSS
t32k
10
2.2k
Modern Development Workflow with Grunt
t32k
22
36k
WebPagetest in 5 minutes
t32k
12
2.6k
Introduction to Sass Compass for Sencha Touch
t32k
6
1.9k
var Gurator = Gist + Curator;
t32k
0
360
Sublime Text and Grunt for Titanium Development
t32k
5
3.3k
3 secrets for optimizing Web application
t32k
6
210
Other Decks in Technology
See All in Technology
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
480
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
210
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
KotlinConf 2025_イベントレポート
sony
1
140
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
440
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
270
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
Modern Linux
oracle4engineer
PRO
0
150
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
BBQ
matthewcrist
89
9.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
KATA
mclloyd
32
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to train your dragon (web standard)
notwaldorf
96
6.2k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Transcript
スタンドアロンAMPのすゝめ FRONTEND CONFERENCE 2017 - @t32k - 2017/03/18
• Koji Ishimoto • id: t32k • Front-end Developer •
Mercari, Inc. / Souzoh, Inc. 自己紹介
なんでも募集できる地域コミュニティアプリ https://www.mercariatte.com/jp/ メルカリアッテとは
1. AMPのメリット 2. 表現力について 3. テンプレート分散について 4. 構造化データについて 5. まとめ
アジェンダ
AMP Accelerated Mobile Pages
AMPとは? AMPはオープンな仕様に沿って作成されたWebページです。検証 された AMP ページは Google の AMP キャッシュに保存されま す。キャッシュに保存することでページをこれまで以上にすばやく
表示できるようになります。 AMP ページの Google 検索ガイドライン - Search Console ヘルプ
AMPを支える3本柱 - AMP HTML(amp-imgとかamp-***とか) - AMP JS(最適化処理されたJavaScript) - Google AMP
Cache(Google CDNからの配信)
None
裏側で<iframe>を読み込んでいる... AMPビューワーURL オリジナルAMPソースURL ATFのリソースしか読み込んでいない AMPキャッシュURLから配信されたコンテンツ
AMPのメリット - 検索ランキングが上がるわけではない(SEO忘れて!) - SERP*上でキャッシュが効いた状態でアクセスできる - ユーザー体験向上ヽ(=´▽`=)ノ * Search Engine
Result Page 検索結果ページ
広がるAMPパートナー - Yahoo Japanが対応(導入時期未定、2017/03現在) - BaiduやSogouも! - CloudflareはAccelerated Mobile Links
利用可能
AMPキャッシュの更新 AMPドキュメントが表示されると、更新リクエストがされます。その ため、次のユーザーは更新されたAMPドキュメントにアクセスする ことになります。 任意のタイミングで更新したい場合は、下記のようなAMPキャッ シュURLに直接アクセスることで、更新できます。 https://example-com.cdn.ampproject.org/c/s/amp_document.html Google AMP Cache
Overview | Google Developers
Breaking the 1000ms Mobile Barrier PageSpeed Insights でのモバイル解析 | Google
Developers
無理じゃん!
- No bit is faster than one that is not
sent; send fewer bits. - We can’t make the bits travel faster, but we can move the bits closer. High Performance Browser Networking Ilya Grigorik
16 Cash is King
17 Cash is King Cache is King
Use AMP!
Problem:1
The New York Times Mercari The Guardian
iモードサイト?
AMPの速さの理由 - 非同期スクリプトしか認めない(野良JSの使用禁止) - リソースは予めサイズ指定する - 拡張コンポーネントに描画をブロックさせない - Third-Party JavaScript
はクリティカルパスにいれない - CSSは全てインラインに記述し50KBまでに制限する - フォントの読み込みは適切に - スタイルの再計算は最小限に - GPUアニメーションしか認めない - リソース読み込みの優先づけ
AMPコンポーネントって知ってる?
https://www.ampproject.org/docs/reference/components
使えそうなコンポーネント - amp-carousel - amp-accordion - amp-sidebar - amp-iframe -
amp-analytics - amp-social-share - amp-youtube
In development - 2017.03.18
AMPでもリッチインタラクションが可能
Problem:2
None
30 www.example.com/article.html mobile.example.com/article.html mobile.example.com/amp/article.html Paired
CSSって知ってる?
Media Queriesって知ってる?
33 www.example.com/article.html Standalone(AMP) Responsive Layout
モバイルで速いということはデスクトップでも速い
AMP isn’t mobile only , it’s mobile first. About that ‘mobile’
in Accelerated Mobile Pages – Medium Paul Bakaus
AMPはモバイル『専用』ではない
https://www.ampproject.org/
https://ampstart.com/
https://webmaster-ja.googleblog.com/2016/11/mobile-first-indexing.html
https://www.mercariatte.com/jp/
Problem:3
構造化データむずい
SERP上でAMPコンテンツとして表示するために - ValidなAMPで実装する - 適切な構造化データマークアップする - @type: Article or NewsArticle
or BlogPosting
https://search.google.com/structured-data/testing-tool
https://offer.mercariatte.com/jp/6898226402064232/
これって『記事』?
最近『レシピ』に対応したとか
『プロダクト』はよ!
Wrap Up
None
None
(ms)
まとめ - ビジュアル表現を制限するものではない - RuleはあるがLimitではない - テンプレートの分散は避けるべき - AMPでResponsiveでFastサイトを作ろう -
とはいえ、しんどい(Schema.orgの対応など) - 簡単なドキュメントサイトなら一考あり
Thank you! https://t32k.me/