Google 跟 Facebook都想讓手機上的網頁變成閃電

這年頭許多人都把內容放在網路上，但瀏覽時有許多問題，
– 資料在手機或某些裝置上看起來很不舒服
– 各種惱人的蓋板廣告
– 網頁上掛的插件太多，影響網頁開啟速度
– 網頁的載入時間比人看完網頁資料的時間還久

人們每天獲取資料的兩大地方，Google 和臉書，則各提出了別種解決方案，他們從網頁「打開」的流程就開始處理…

上方有一份 ppt ，如果看不到，請點 Google 跟 Facebook 都想讓手機上的網頁變成閃電 // Speaker Deck

內文摘要

一、體驗 AMP 神蹟

• https://www.ampproject.org/
• AMP 為什麼可以這麼快?
  • 先討論為什麼網頁會慢? 因為網頁上太多降低效能的雜物，或是 code 寫得不好
  • AMP html 標準格式減少錯誤發生
• 如果你用 WordPress ，恭喜你!
• AMP 自己的網頁自己改
• 一開始跟一般現代網頁差不多
• 先了解什麼叫 AMP HTML 規範
• AMP HTML 規範 – css 範例
• AMP HTML 規範 – 圖片範例
• AMP HTML 規範 – 放 Youtube 範例
• 那「我們的優酷」要怎麼放在 AMP 網頁內呢?
• AMP 製作流程 – 等待審核
• 看到這裡，也許開發人員會說…
  • 做兩套方案 (一般網頁做一頁，AMP網頁做一頁)
  • 和合為一方案 (一個網頁同時符合複雜的客戶需求與AMP標準)
• AMP 學習流程 – 偷吃步

二、體驗 Facebook Instant Articles 神蹟

• https://developers.facebook.com/docs/instant-articles
• 舒適的閱讀版面
• Facebook 廣告會出現在即時文章裡面
• 相關文章功能(人氣文章與地區人氣文章)
• FB 即時文章為什麼可以這麼快?
• FB 的互動功能屬性
• 申請 Facebook 即時文章
• 如何將文章提交給 FB 即時文章?
• 有 RSS 了，為什麼文章還是出不來? 慎選 CMS 平台
• 標記語言與瀏覽內容優化大戰，微軟跟 YAHOO 又缺席了…
  • 百度 MIP，和AMP技術是相通的，兩者的協議層面和規範層面完全一致，但發現谷歌的AMP有些服務在中國大陸境內用不了，於是才做了自己的MIP。
  • Apple News，Apple 出品的 App，媒體與出版者可申請在上面發布內容，資料為 json 格式。目前此 app 僅限美國地區的使用者使用。

三、要做與不做的理由

• 要做的理由
  • AMP 自稱能夠提高 15%~85% 的網頁下載速度
  • 華盛頓郵報使用了 AMP 之後增加了 23% 的行動用戶量
  • Facebook 推出 Instant Article後，為文章增加 20% 點擊率，減少 70% 跳出率，增加30%分享
  • 時代趨勢、提早佈局、增加經驗
  • 號稱產品有採用最新酷炫技術 (永遠把資源分去做新東西，舊的洞都不補起來)
• 不要做 AMP 的理由 – 技術理由
  • 不是只有 Google Chrome 才看得到，但官方號稱支援最新兩版的各種現代瀏覽器
  • 要另外研究 AMP 的資料格式規範，把網頁內容轉成對應格式
    • 會員登入/購買 的 AMP 相關規範還在開發中，所以購物網站或會員網站暫時無法實做。
    • 今天把 code 寫好，明天就可以看到閃電了? 不行。
    • 把 code 寫好一次，就一輩子不用再去維護了? 才怪。
    • 產品需求是要在網頁上放不符合 AMP 標準的內容，那就破功了。
    • 現在大部分的 AMP 網站都是部落格、字典、百科、新聞網之類的網站
  • 又回到電腦做一套、手機做一套，後端工程師維護兩份程式的老路?
  • 速度慢是因為資料庫跟伺服器的問題? AMP 也難救。
• 不要做 AMP 的理由 – SEO
  • 不像 HTTPS 或 RWD ，AMP 不是 Google 的搜尋排序指標
  • 依照 Google  搜尋引擎最佳化入門指南，使用者體驗好的網頁是有機會提高排名的。
  • 事實上…還是有很多沒有 AMP 的網頁排在第一頁。
  • 事實上…有許多 AMP 網頁排在第二頁之後。
• 不要做的理由 – 從使用者面來評估
  • 客群 / 網站狀況適合嗎?
  • 負能量
    • FB 跟 Google 的東西在”大中華市場”預設都是被封鎖的。
    • 目標客戶只會用 Yahoo，你做的這些通通沒用。
    • 花很多時間跟心力，覺得幫使用者省下開網頁的幾秒，但大部分人都看不出來差異在哪。
    • 大家都有聽過網頁三秒原則，但實際上就是有很多又慢又難用的網頁很多人看。
  • FB即時文章
    • 只會在手機的 FB App 顯示，
    • 用臉書手機版網頁、平板 FB App、電腦，是看不到的。
  • Google AMP
    • Google APP 跟手機網頁瀏覽器都可以看到
    • 平板看不到。

• 不要做 AMP 的理由 – 網路上的論點

四、其他相關參考資料

• 開發人員看 AMP
• 導入 AMP 的 10 大迷思
• Google 官方相關 AMP 說明
• 百度MIP技術強勢來襲 帶你的網頁飈起來
• 行銷利器多一項，來看FB Instant Articles怎麼應用
• 2016/2 有位 Google 主管宣稱 AMP 還不是排名的主要指標
• 網路行銷達人介紹這兩項技術
• 【教學文】如何在 WordPress 設定 Instant Articles | 企業號航行網誌 幾乎是 step by step 的教學 ，雖然才距離幾個月，臉書有些地方的設定位置已經不同了。