簡介與會 AMP Roadshow Taipei 的心得 PIXNET 與 Google 的會論

1. AMP Roadshow
Taipei
PIXNET - Win Yu
https://kylinyu.win
2018/05/30

2. Accelerated
Mobile
Pages

3. AMP KEY POINT

4. 對 CSS/JS 有嚴格限制
➤ 基本上禁⽤用 JS，有需求要使⽤用 AMP Library 做實踐
https://ampbyexample.com
➤ CSS ⼤大⼩小有 50kb 限制

5. Pre-render via AMP Cache
It is available for anyone to use. Google products, including
Google Search, serve valid AMP documents and their
resources from the cache to provide a fast user experience
across the mobile web.

6. EXAMPLE IN GOOGLE
⽤用⼿手機 Google: `CDN 選擇` or `Yahoo 拍賣 macbook`

7. PIXNET Q&A with GOOGLE

8. PIXNET 想創造⾃自⼰己的
流量量，導入 AMP 流量量
會在 Google 或者是
PIXNET ?
Question ❶
PIXNET

9. Google 只是幫你做 Cache，
不會影響到你原本流量量
Answer ❶
GOOGLE

10. PIXNET 的第三⽅方廣告很多
(e.g. Falcon)，但廣告必須
通過 Google 規範認證，
這部分有沒有解決⽅方案?
Question ❷
PIXNET

11. Google 有提供 (amp-pixel)
模組，可以發送基本的
Tracking 訊息，但無法使⽤用⾃自
家 Falcon SDK
Answer ❷
GOOGLE

12. PIXNET 允許部落落客⾃自塞
CSS/JS，iframe 有沒
有數量量上的限制？
Question ❸
PIXNET

13. 有⼀一定的限制。建議實踐
iframe 內建議只放單純
的內容。超過⼀一定的數量量，
那就不建議使⽤用 AMP
Answer ❸
GOOGLE

14. SPA 轉換成 AMP 有什什
麼建議的⽅方向或做法？
Question ❹
PIXNET

15. 評估⾴頁⾯面上的互動需要牽
涉到多少邏輯
若若過於複雜，或許需要組
合 AMP components
Answer ❹
GOOGLE
> 學習 combine AMP Components
> Yahoo 拍賣 (老⽊木⼤大師的案例例

16. New To AMP
1. Create your first AMP Page
goo.gl/BP7ZV1
2. Conver HTML to AMP
goo.gl/5jUR45
https://kylinyu.win/simple_amp_tutorial 📌
3. Add Advanced AMP features
goo.gl/249SJc

17. Advancing with AMP
1. Beautiful, interactive, canonical AMP pages.
goo.gl/kRrkWZ
2. Create interactive AMP pages.
goo.gl/TR5U63
3. Progressive Web AMPs.
goo.gl/xn56di

18. 「
個⼈人結語
Backend Win
1. AMP 其實也是基於 `關鍵渲染路路徑` 做良好實踐
2. `快` 來來⾃自於 **限制**
3. 容易易實作於 Landing Page 及內⽂文⾴頁
4. AMP Library 學習⾨門檻⾼高
5. 真的很快，快體驗就是好

19. THANK YOU.