# Building a seamless web (Google I/O '18)
- https://www.youtube.com/watch?v=Wi_PhaFdjlo

- Speaker
- [Dru Knox](https://twitter.com/drufball)
- [Stephan Somogyi](https://twitter.com/thinkpanzer)
- 筆記撰寫：https://about.me/afutseng
---
- Google 發現使用者期待網站能立刻載入。
- 研究指出，53% 的使用者等待超過三秒時會離開網頁，但這實在相當困難，因此 Chrome 官方推薦值是五秒內。

- Chrome 內部資料顯示，所有 Android 裝置的網頁，有 20% 的頁面被放棄瀏覽。
- 優質的使用者體驗三要素：5 秒內可以對頁面互動操作、0.05 秒的回應時間、60 FPS 級別的流暢動畫

- Pinterest 在改善網站效能以及轉換成 PWA 後，核心互動參與行為成長 60%
- BookMyShow 的 PWA 網站比自家的 iOS app 體積小 180 倍，使新訪客更容易在三秒內載入網站
- MakeMyTrip 的新訪客轉換率達三倍

- PWA 四大特色：
- (1) Service Worker
- (2) 增加至裝置主畫面 -- 佔領使用者的行動裝置桌面！
- (3) 推播通知
- (4) PRPL loading pattern (Push, Render, Pre-cache, Lazy-load)

## Web packaging
- http://bit.ly/webpackaging
- 這段看不太懂，似乎是外來可以打包網站的靜態資源，建立在白名單信任基礎上，方便站跟站之間交換？

## Feature Policy
- 以下實驗性質功能必須在 Chrome beta / dev 版本打開 experimental-productivity-features flag 啟用。
- iframe 的 allow 屬性支援 "syncxhr none" 的值，可禁止 iframe 內發出同步的 XMLHttpRequest。（拋出例外)
- 25% 的網站沒有優化圖片，經測試可以節省超過 250 KB


- 四大政策
- 圖片必須指定尺寸，避免使用者瀏覽時頁面跳躍影響體驗
- 現代的圖片格式 (WebP)，有更好的壓縮率，達 25% 以上
- 不在行動裝置使用大尺寸的圖片，避免瀏覽器執行圖片縮小的工作
- 必須有足夠好的圖片優化率

- 限制 iframe 的 CSS 最多 50 KB，影音資源最多 1 MB，以及 ontransferexceeded 指定超出資源預算的 callback 事件

<iframe ontransferexceeded="onBigResource(event)"
        transfersize="style:50, video: 10240"
        src="..."></iframe>

- https://bit.ly/fp-best-practices

## Layered APIs
- 有鑑於每個 Web 新功能都得污染瀏覽器命名空間與增加 JS 啟動成本，Layered APIs 提出新的語法供指定新功能，同時也提供 fallback 指定 polyfill 的資源位置
- 目前想體驗必須在 Chrome Canary 啟用實驗功能： #enable-experimental-productivity-features flag
- https://bit.ly/layered-apis

- 目前實驗中的無限清單 Prototype，virtual-list
- 線上 demo: https://valdrinkoshi.github.io/virtual-list/demo/

<script type="module"
        src="std:virtual-list|https://some.cdn.com/virtual-list.js">
</script>

<virtual-list>...</virtual-list>

<script type="module">
import { storage } from "std:async-local-storage|https://other.cdn.com/async-local-storage.js";

storage.get("key").then(...);
</script>