RUMvision 如何將基準資訊與 RUM 資料整合。

瞭解 Ray-Ban 如何使用 Speculation Rules API 改善 LCP，以及這如何改善 Ray-Ban 的電子商務平台業務成效。

QuintoAndar 將 Interaction to Next Paint (INP) 縮短 80%，大幅改善網站成效，轉換量也因此年增 36%。

本個案研究說明 Netflix 採用容器查詢的好處。

瞭解東京市的鐵路公司 Tokyu 如何使用密碼金鑰快速登入 12 倍，每天協助數千名通勤者。

Google 試算表的計算程序最初是在伺服器上完成，再由用戶端以 JavaScript 執行，現在則改在 WebAssembly 垃圾收集機制中完成。此個案研究會說明做法和原因。

本個案研究說明 Google Meet 團隊如何改善權限，以及對使用者帶來的影響會議滿意度

瞭解網路如何實現沉浸式 3D 體驗，協助客戶瞭解及探索實體產品。

瞭解 Disney&#43；Hotstar 是智慧型電視與機上盒裝置適用的應用程式，如何大幅降低觀眾參與度，大幅提升觀眾參與度。

瞭解網路如何實現沉浸式 3D 體驗，協助客戶瞭解及探索實體產品。

PubTech' 同意聲明管理平台將客戶網站的 INP 減少多達 64%，同時使廣告可視度提升多達 1.5%

過去兩年來，Goodnotes 工程團隊正在進行一項專案，將這款成功的 iPad 筆記應用程式拓展至其他平台。本個案研究探討了該年度在 2022 年推出的 iPad 應用程式，如何使用網頁技術和 WebAssembly 開發網站、ChromeOS、Android 和 Windows，並重複使用該團隊所開發的相同 Swift 程式碼。

內容推薦供應商 Taboola 如何使用 LoAF，為發布商合作夥伴網站改善高達 36% 的 INP。

看看行動版目前市面上最熱門的影片編輯應用程式之一，如何打造出功能完備的網頁版。

pixiv 是專為插畫師和插畫愛好者打造的線上社群服務，讓他們透過內容彼此交流。讓使用者發布自己的插圖。截至 2023 年 5 月，他們在全球擁有超過 8400 萬名使用者 ，並發布超過 1 億 件藝術作品。 pixiv Sketch 是 pixiv 提供的服務之一。這項功能可讓使用者以手指或觸控筆在網站上繪製圖片。它支援多種功能，可繪製精彩的插圖，包括多種筆刷、圖層和桶塗工具，還可讓使用者直播繪圖過程。 在本案例研究中，我們將探討 pixiv Sketch 如何運用

本文說明 Mitra Tokopedia 如何運用機器學習技術改善賣家的網頁應用程式，進而降低營運成本。

本個案研究將逐步說明如何運用 PageSpeed Insights (PSI)、Chrome 開發人員工具和 scheduler.yield API，在 React 採用的 React 中，逐步偵錯及改善 INP。

本個案研究探討非營利組織 Kiwix 如何採用漸進式網頁應用程式技術和 File System Access API，讓使用者下載及儲存大型網際網路封存檔案供離線使用。

瞭解 Yahoo!JAPAN' 改善密碼金鑰採用率和使用者體驗的做法。

預先擷取是一種技術，可透過下載資源 (甚至是整個網頁) 加快網頁載入速度，不久後使用者可能會用到。研究顯示，載入時間越快，轉換率越高，轉換率就會越好。

Yahoo! JAPAN News 是日本最受歡迎的新聞平台之一，不但成功提高影格速率，也帶來了顯著的使用者體驗和企業改善成效。具體來說，他們執行的 A/B 測試結果顯示，使用 bfcache 的網頁廣告收益提升了 9%。

INP 最佳化措施讓 redBus 的銷售量增加了約 7%

將 TBT 減少 30 倍並遷移至 Next.js 之後，Ecomonic Times 的 INP 降低了將近四倍，跳出率則降低 50%，網頁瀏覽量則增加 43%。

透過這款休閒駕駛遊戲的無限程序化生成景觀，發掘 WebGL 的潛力。 Slow Roads 是一款休閒駕駛遊戲，重點是無限產生的程序化風景，全部以 WebGL 應用程式 形式在瀏覽器中代管。對許多人來說，這種密集的體驗在瀏覽器的有限環境中似乎不太合適，而修正這種態度正是我參與這個專案的目標之一。本文將說明我如何克服成效障礙，並凸顯網路中 3D 技術經常被忽略的潛力，以便達成目標。

這是第一系列的單元 1：打造更棒的 YouTube 網路。

透過評估實際使用者人數，Rakuten 24 也發現，大幅提升內容繪製 (LCP) 成效後，轉換率可提升 61.13%。

這份報告探討 GoDaddy 採取了哪些變更措施，改善數百萬個網站的網站效能，進而提升 PageSpeed Insights 和網站體驗核心指標的分數。

豪華零售商 Farfetch' 如何投資網站體驗核心指標來改善業務成果。

Yahoo! JAPAN 導入了無密碼的身分識別系統。瞭解他們的做法和付出的努力。

這份個案研究旨在評估網站體驗核心指標的整體成效分數及其整體影響與效益。

漸進式網頁應用程式可充分發揮新式網路的功能。Adobe 使用了 Workbox 將這類功能導入 Adobe Experience Manager。

瞭解 MishiPay's PWA 如何將交易次數提升 10 倍，並節省 2.5 年的佇列。

在 The Economic Times 網站上最佳化網站體驗核心指標，大幅提升了使用者體驗，並大幅降低整個網站的跳出率。

在本文中，我們將分析 Terra' 的流程，包括識別 "深色模式" 同類群組的大小、套用自訂深色主題，最後再評估這項實作對主要 KPI 的影響。

一項專案的重點是將網站體驗核心指標最佳化並遷移至 Next.js，轉換率提高 5%，單次工作階段頁數則增加 87%。

Kapwing 等公司運用強大的 API (例如 IndexedDB 和 WebCodecs) 和效能工具，讓使用者能夠直接在網路上製作所有影片內容。

將色彩或單色點陣圖圖片 (PNG、JPG、JPEG、WEBP、AVIF、GIF ...) 轉換為彩色或單色向量圖片 (SVG)。

數個月努力改善 Mail.ru 首頁的網站體驗核心指標，使累計版面配置位移 (CLS) 的第 75 個百分位數提高 60%，平均工作階段時間提升了 2.7%，核心部分的轉換率也增加超過 10%。

這篇文章說明 Renault 及其全球資料合作夥伴如何評估及改善網站體驗核心指標。該團隊分析了 1,000 萬次造訪到達網頁上的資料，發現最大內容繪製和轉換次數之間有顯著的關聯性，使最佳化作業的成果倍增。我們會查看這些資料點，並瞭解各團隊如何安排進行最佳化。

本個案研究說明 Swappie 團隊如何針對 Core Web Vitals 最佳化網頁應用程式，進而提高轉換次數和收益。

本文說明網站體驗核心指標與關鍵業務指標之間的關聯性，本文將提供幾個已帶來正面影響的公司範例，協助您瞭解這些公司對使用者和業務帶來正面影響。

瞭解德國新聞發布商 Netzwelt 如何改善網站體驗核心指標，改善使用者體驗和廣告收益。

Blibli 如何將跳出率降低 42%、行動裝置轉換率提高 8 倍，以及單次工作階段頁數增加 2.5 倍。

英國頂尖新聞網站 Telegraph 將如何從 0.25 提高至 0.1，成功將 CLS 的第 75 個百分位數提升至 250%。

此外，新版 PWA 的平均載入時間比舊網站快了 30%，跳出率則提升 12%，工作階段深度達 18%。

Mainline Menswear 實作漸進式網頁應用程式 (PWA)，使用者將透過快取和離線功能安裝這個應用程式後，轉換率提升了 55%。

Zalando 的網路團隊發現，整合 Lighthouse CI 可主動改善效能，自動化狀態檢查功能則可比較目前的修訂版本與主要分支版本，避免發生效能迴歸問題。

Lowe's 網站速度團隊建立了自動化效能測試與監控系統，根據效能預算測試提取要求，並避免將效能迴歸到實際工作環境中。

Vodafone 進行 A/B 版本測試，著重於改善網站體驗指標，發現 LCP 提升 31% 之後，銷售量增加 8%、待開發客戶造訪率提升 15%，購物車造訪率也降低了 11%。

透過個案研究，瞭解 Wix 導入了一些重大異動，以改善數百萬個網站的網站載入速度，並設法讓這些網站獲得良好的 PageSpeed Insights 和網站體驗核心指標分數。

他們使用 Search Console 和 Lighthouse 監控網站體驗核心指標，發現 CLS 分數有改進的空間，讓單次工作階段網頁瀏覽量提高 15%、工作階段持續時間延長 13%，跳出率則降低 1.72 個百分點。

瞭解 Agrofy 如何運用網站體驗核心指標來提升負載放棄率。

Excalidraw 是虛擬的協作白板，可讓你透過手繪畫出圖表輕鬆素描。針對 Excalidraw 專案，我們決定淘汰 Excalidraw Desktop，這是適用於 Excalidraw 的 Electron 包裝函式，希望成為 excalidraw.com 能夠而且您能夠 (而且總是可以找到) 的網頁版本。經過仔細分析後，我們決定採用漸進式網頁應用程式 (PWA)，做為未來的開發目標。

此外，PWA 使用者的活躍使用人數比所有其他安裝類型高出 24%，新舊使用者的回訪者人數比所有其他平台高出 31%，更是如此。

PWA、WebAssembly 和 ChromeOS 如何協助網頁式影片編輯器，為 1,200 萬名使用者提供更出色的效能和更吸引人的體驗。

JD.ID 的整體行動轉換率 (mCVR) 提升了 53%，已安裝使用者的 mCVR 增加了 200%，每日活躍使用人數則增加了 26%。

讓客戶安裝網頁應用程式，可以提升流量、訪客留存率、每位客戶銷售量和轉換次數。

NDTV 團隊使用 PageSpeed Insights、web.dev/measure 和 WebPageTest 等工具分析可能的改善領域，並投入心力導入網站體驗核心指標，以便達成業務目標。

建立網站效能資訊主頁，並最佳化 JavaScript、資源和首頁，為業務取得成功。

瞭解 ZDF 如何利用離線支援、安裝性和深色模式等新型功能，打造漸進式網頁應用程式 (PWA)。

瞭解印度知名線上旅遊公司 Goibibo 如何在 PWA 和 iOS/Android 應用程式之間打造可靠的使用者體驗，將轉換量提高 60%。

Mercado Libre's 前端架構團隊完成 FID 最佳化作業的摘要，採用 TBT 做為 Proxy 指標。

4 速度指標提升 0.1 秒，可提高整個購物漏斗的進度率。

個案研究網站 BettyCrocker.com's 導入 Wake Lock API 的經驗。

本個案研究說明 Google 如何運用過時的重新驗證功能，最佳化第三方廣告指令碼的成效，進而提高主要廣告業務指標。

本個案研究說明 eBay 如何最佳化網站和應用程式體驗的成效，進而提高主要業務指標。

餐旅新創公司如何建構仰賴網頁內容的 Android 應用程式，大幅提高使用者參與度並降低檔案大小。

AirSHIFT 團隊如何使用資料表虛擬化、RUM 資料、延遲載入、網路作業人員、效能預算和黑客松，將 React 應用程式最佳化和#39 的執行階段效能最佳化。

本個案研究說明 Truebil 團隊如何最佳化網頁應用程式的速度和穩定性，進而增加轉換次數和參與度。

瞭解 OpenSooq 團隊如何運用最佳做法，建立可靠、吸引人的 Marketplace 網頁應用程式。

使用 WebAssembly 改善 Google 地球的跨瀏覽器存取功能

您只需在 Google 上搜尋任何主題，即可在網頁中發掘有意義的相關結果。您可能不知道，

日經擁有超過 140 年的出版史，是日本最具公信力的媒體業者之一。為提供更優質的使用者體驗，並加快推動網路業務成長，Nikkei 在 2017 年 11 月成功推出漸進式網頁應用程式，結果也從這個新平台獲得了驚人的成效。

George.com 是英國首屈一指的服飾品牌，也是 ASDA Walmart 的一部分。將網站升級為漸進式網頁應用程式 (PWA) 後，該品牌的行動轉換率提高了 31%。 Asda George 對行動購物體驗的期望有望提高，因此 Asda George 認為他們必須改進過時的行動解決方案，為消費者提供更優質的服務。該團隊嘗試以行動裝置優先的做法 將重心放在設計、速度和功能上，以促成行動裝置轉換。 George.com 團隊發現，他們必須打造漸進式網頁應用程式，才能改善行動裝置體驗。他們與

BookMyShow 是印度最大的售票公司，每月吸引 50% 到 430 萬人次造訪。他們運用漸進式網頁應用程式 (PWA) 開發出更完善的行動版網站、改善速度及消除資料限制，結果轉換量升幅達到 80&#43；%。

Ele.me 是中國大陸最大的訂餐和外送公司。他們將漸進式網頁應用程式 (PWA) 建構為多頁應用程式，藉此改善行動版網站體驗，在網路不穩定時更快又可靠，同時配合營運需求來為客戶提供最佳服務。

Dance Tonite 與樂團 LCD Soundsystem 樂團及粉絲一起在 VR 領域不斷變化，本專案內建 WebVR 技術，不論使用或未使用 VR 平台，都能為使用者提供不同的體驗。專案創作者 Jonathan Puckey、Moniker 和 Google 的資料藝術團隊在廣告素材決策和進階最佳化技術，成功帶來出色成效。這些技術讓 3DoF 的 60 FPS 和 90FPS 達到 60 FPS，而 6DoF 的每秒要求數更是如此。此外，這些專案創作者還使用單一程式碼集，在所有平台上獲得極具吸引力的使用者體驗。

為了同時吸引流量和再參與客戶，奢華美妝品牌 Lancôme 推出了漸進式網頁應用程式 (PWA)，在行動版網站上提供與應用程式類似的快速體驗

Infobae 利用 Service Worker，在不穩定的網路中提供穩定效能。這家業界一流的 PWA 在 Lighthouse 上獲得 93/100 的成效分數，這項自動化工具可評估網頁品質。

推出漸進式網頁應用程式後，MakeMyTrip.com's 行動版網站的轉換率提升了三倍，網頁載入速度則提升了 38%。

傳送至 Jumia&#39 的流量比其原生應用程式更驚人 12 倍，且仍在成長中。此外，Jumia 的跳出率也下降了 50%

Mynet 每月為自家網站提供超過 3,400 萬名訪客，提供新聞、影片、遊戲、財務、資訊娛樂內容和娛樂內容。推出採用 Accelerated Mobile Pages (AMP) 的漸進式網頁應用程式 (PWA) 後，平均網頁載入時間縮短 4 倍。此外，Mynet 的使用者參與度大幅提升，平均停留時間增加了 43%。 由於有超過 85% 的行動流量來自行動版網站，Mynet 的行動版網站是他們策略不可或缺的一環。然而，該公司發現使用者在行動版網站上花的時間比原生應用程式少 2 倍。 Mynet

Twitter Lite 漸進式網頁應用程式結合現代網頁和原生功能的優勢，提供更加完善的體驗，明確目標是立即載入、吸引使用者參與並降低數據用量

0h h1 是一款適合行動裝置的趣味遊戲。 我向來非常喜歡網路技術的無窮可能，多年前能夠採納這項技術，我覺得很幸運，因為在電腦版和行動版上，近年來體驗到令人振奮的強化功能，讓網路蓬勃發展。 以及 JavaScript。天啊！對幼兒來說用 Play-Doh 吧！大致上來說，Play-Doh 和 JavaScript 都可讓你做小小的分頁;) 但這也讓它看起來很棒。 但其實您可以立即將規模從 0 降至 88 英里，在 Dropbox

OLX 的漸進式網頁應用程式讓讀者參與度提升 250%，互動網頁互動時間也縮短了 23%

Ola 是印度首屈一指的計程車集結網站，其使命是為數十億印度人推動行動性這間公司旗下擁有約 60 萬名司機合作夥伴，涵蓋超過 100 個印度城市。身為印度最具價值的新創公司之一，Ola 每天完成超過 100 萬趟行程，為贏得獅子在國內預估每日 3 億趟計程車的載客而奮鬥。 第 2 層和第 3 級城市 (人口有 20,000 到 99,000 的城市) 為 Ola

Voot.com 在印度推出自家的媒體漸進式網頁應用程式。在導入後的幾天內，每位使用者的工作階段時間增加 39%，每位使用者的每日觀看次數則提升了 15%。 Voot 是印度最熱門的隨選影片產品之一，同時是原生應用程式和行動網路應用程式，提供近 35,000 小時的線上付費內容，包括來自 Colors 和 MTV 等聯播網的獨家節目、Voot Originals 內容，以及超過 8,000 部兒童影片。Voot 是由 Viacom18 經營，這是 Viacom 和 Network18 Group

查看網站 聖誕老人追蹤器，在 2016 年節慶季節順利升級至離線漸進式網頁應用程式， 這都要歸功於現有場景設計 聖誕老人追蹤器 是 Google 的節慶傳統。 每年 12 月都有遊戲和教育體驗，歡迎踴躍參加！ 當聖誕老人休息片刻時，小精靈們努力將聖誕老人追蹤器 包括 網路 和 Android ： 網路上的「聖誕老人追蹤器」是一個大型的互動式網站，擁有許多獨特的「場景」， 聚合物：支援大部分新式瀏覽器。 評估使用者的瀏覽器是否為「現代化」會經由特徵偵測決定： 聖誕老人需要 Set 和 Web

「內部」平台可讓使用者在虛擬實境中述說故事，而且在 VR 環境中也沒問題，包括網路在內。使用 WebVR 後，觀眾只要造訪網站並點選連結，就能立即透過 VR 技術 (包括高階頭戴式螢幕) 觀賞內部影片。在開發過程中，我們的團隊發現在這個新環境中轉譯文字並不容易，他們利用著色器建立了範例，讓文字流程更順暢。

觀看紀錄片 WebVR 是內建的 API ，結合立體轉譯與即時頭部追蹤功能，讓使用者可輕鬆快速地在線上觀看 VR 內容。內容創作者可使用 WebVR 製作身歷其境的 VR 內容，並在各種 VR 硬體上執行。 Bear 71 是加拿大國家電影委員會 (NFB) 製作的互動式紀錄片。最初內建於 Flash， Bear 71 最初是在 2011 年推出，廣受重大消費者青睞。此體驗的骨幹是 23

瀏覽網站 Matterport 支援 WebVR 支援功能，讓使用者在沉浸式虛擬實境中探索現實世界中的地點。WebVR 無須下載任何應用程式，就能降低訪客流失率，並讓合作夥伴能在自家網站中留住使用者。 WebVR 是 Matter 策略中重要的一環 ，能夠提高 VR 內容的使用率和曝光率。 Matterport VR 可讓您在互動式虛擬實境中體驗數千個真實地點。Matter 的 3D 媒體系統結合自動化 3D 室內對應技術和強大的視覺處理演算法，可讓任何人從實際地點建立沉浸式虛擬環境。與 360

查看研究室 網站設計人員很熟悉回應式設計的概念，也就是建立可在各種裝置上運作的網站，例如手機、平板電腦和電腦，以及不同的螢幕解析度和像素比例。 WebVR 針對回應式設計帶來更多挑戰。 我們可以根據兩項指標 (沉浸式程度和輸入程度) 將 WebVR 體驗分類。這些層級是依據「自由程度」(DOF) 區分。6 DOF 是指追蹤位置和方向，3 DOF 僅用於追蹤方向和 0 DOF 軌道，兩者都不會追蹤位置和方向。 如您所見，單一應用程式可能會支援非 VR

Land Lines 實驗功能可讓你透過手勢探索 Google 地球衛星影像。結合機器學習技術、最佳化演算法和顯示卡效能，在手機上不需使用後端伺服器，就能在手機上有效率地執行實驗。#39。這將檢視我們的開發程序，以及嘗試引領我們最終達到最終成果的各種方法。

氣象公司 (IBM Business) 是 IBM，每天平均提供 400 億個預測要求，協助使用者規劃每天的生活，並根據天氣做出更明智的決定。

Carnival Cruise Line (嘉年華遊輪) 可透過推播通知為客戶提供具吸引力的個人化通訊服務。 下載 PDF 個案研究 嘉年華遊輪公司 (Carnival Cruise Line) 是全球最大的休閒旅遊公司之一，他們希望改善重新接觸顧客的方式。我們的目標是及時傳送自訂資訊，而無需在客戶的收件匣中爭奪消費者關注、使用所有裝置，也能輕鬆採取行動。與 Mobify 合作後，Carnival 採用了 Android 行動裝置和 Chrome

下載 PDF 個案研究 Guardian News & Media (GNM) 發布了 theguardian.com ，這是全球規模最大的英語優質新聞網站之一。自 2011 年和 2013 年分別推出美國和澳洲的數位版本以來，來自英國境外的流量現在佔了監護人數位目標對象總數的三分之二以上。英國，GNM 每週都會發布《衛報》報紙，第六天，首次發布於 1821 年，《守護者》更是全球最古老的週日報紙。

下載 PDF 個案研究 AliExpress 於 2010 年 4 月推出，這個全球零售市場是以全球消費者為目標。這個平台可讓世界各地的消費者直接透過中國批發商和製造商購買，AliExpress 是阿里巴巴集團內的商家。 超過 200 個國家/地區的購物者已下載 AliExpress

下載 PDF 個案研究 Housing.com 是印度的頂尖新創公司之一。今年可說是擁有 5, 000 萬次造訪，已成為印度首屈一指的線上房地產平台之一。建構 Housing Go 這個漸進式網頁應用程式 (PWA) 後，各瀏覽器的轉換總數提高了 38%。新的 PWA 還能為價值更高的使用者帶來價值，訪客單次工作階段的停留時間增加 10%，回訪者也更常回訪。 Housing.com

評估服務工作站的實際效能影響

AMP 讓《Washington Post》透過行動搜尋結果的回訪者增加 23% 下載 PDF 個案研究 根據近 55% 的流量來自行動裝置，《華盛頓郵報》瞭解在行動裝置上提供優質的閱讀體驗，是長期成功的關鍵。 請特別注意，這篇貼文的重點是盡可能加快行動版內容載入速度，因為資料顯示，如果內容載入速度不夠，使用者會在三秒後放棄網站。 2015 年 6 月，《華盛頓郵報》加入一群發布者與技術公司，共同建立 Accelerated Mobile Pagess 專案

使用網路元件建構 Google I/O 2016 PWA

United eXtra Electronics 運用網路推播通知使電子商務銷售量成長 100% 下載 PDF 個案研究 eXtra 是沙烏地阿拉伯境內成長速度最快的消費性電子產品和家電零售商。這家公司在沙烏地阿拉伯、阿曼和巴林共有 40 多家商店，為超過 1,200 萬名購物者提供服務。 沙烏地阿拉伯是全球最大的智慧型手機市場之一。eXtra 每個月透過 eXtra.com 探索、研究和購物的消費者已有超過 250 萬人，其中 100% 的行動成長率來自行動版網站。在 2016

推播通知可協助 Jumia 撤銷購物車放棄率，並讓轉換次數提高 9 倍 下載 PDF 個案研究 小賈是非洲首屈一指的電子商務網站，他們大多數客戶都使用行動裝置，而這類裝置帶來的流量和使用者成長也最為龐大。 在 Jumia 的行動版網站上，每天有將近四分之一的購物車放棄。為解決這個問題，客戶會透過電子郵件提醒客戶完成交易。然而，讓使用者提供電子郵件地址並不容易，而電子郵件開信率卻很低。由於有超過 65% 的行動瀏覽器網頁流量，Jumia

BaBe 的跨瀏覽器漸進式網頁應用程式，與原生應用程式相比更卓越。 下載 PDF 個案研究 BaBe 於 2013 年推出，是印尼規模最大的新聞集結網站應用程式。目前已有超過一百萬人下載這部影片。這項純應用程式業務在 2016 年初首次遷移至網頁版，打造具備相同功能、外觀及風格與原生應用程式幾乎相同的跨瀏覽器漸進式網頁應用程式。

Konga 推出全新的漸進式網頁應用程式，讓數據用量降低 92% 下載 PDF 個案研究 香港於 2012 年推出，是奈及利亞首屈一指的電子商務網站，販售書籍、冰箱和手機等各種商品。行動裝置是帶來最多流量和使用者成長的來源。

使用新的漸進式網頁應用程式後，跳出率降低 50%，轉換量則提高 60% 下載 PDF 個案研究 「銷售商品並購買您想要的產品！」這個總部位於達拉斯的新創公司，在北京，擁有研發中心，目前已下載超過七百萬個應用程式。 超過半數的新購物者透過行動版網站發現了 5

日本的主要房地產網站利用網頁推播通知增加新的產品資訊，並使通知開啟率達 31%。 下載 PDF 個案研究 SUUMO 是日本的熱門房地產網站，服務是該國近 11% 的人口。每月都有 1400 萬名不重複使用者，其中許多人使用智慧型手機 搜尋了 SUUMO 的新住宅。 越來越多使用者仰賴搜尋引擎掌握越來越多的房產資訊。這表示 SUUMO

共有六位藝術家受邀使用 VR 繪製、設計及雕塑品。

Net-A-Porter 透過 Google 的 Polymer 程式庫節省開發時間 NET-A-PORTER 使用 Google 的 Polymer 程式庫，在他們的線上屬性中實作以元件為基礎的設計。最終能大幅縮短開發時間，在網站上全面整合程式碼，而使用結構化資料也提升了 SEO 成效。 下載 PDF 個案研究 NET-A-PORTER 於 2000 年 6 月推出，是全球豪華時尚領域的全球領導品牌，匯集了來自全球 350 多個最美味的設計師系列。

印度最大的電子商務網站 Flipkart 在 2015 年採用單純應用程式策略，並暫時關閉行動版網站。該公司發現，提供與行動應用程式一樣快速、互動性高的使用者體驗並不容易，但後來 Flipkart 決定重新思考他們的開發方式。因為他們問世後，行動網頁得以即時運作、離線運作及再次接觸使用者，因而回流於行動網路上。

如何使用 Polymer 設定高 FPS WebGL 專案。

我們的目標是隨時下載超過 6 萬的 HTML、6 萬的 JavaScript 以及 6 萬的 CSS！

Beyond the Rack 運用推播通知重新接觸行動網頁的使用者，將單次造訪收益提高 26%。

AirHorner 是簡單但功能強大的漸進式網頁應用程式，不但可展現 Service Worker 的強大功能，還能透過 Web Audio API 提供你專屬的空氣槍。無論你在線上、離線或處於容易斷線的 2G 網路，都能使用這項服務引發好友或同事的困擾

瞭解我們如何使用服務工作者程式庫，讓 Google I/O 2015 網頁應用程式快速且以離線為優先。 今年的 Google I/O 2015 網頁應用程式 是由 Google 的開發人員關係團隊撰寫，設計則由 Instrument 的夥伴負責，他們撰寫了實用的 音訊/視訊實驗 。我們的團隊致力於確保 I/O 網路應用程式 (我會以其代號 IOWA 稱之) 能展示現代網路的所有功能。完整的離線優先體驗是我們必備功能清單中的首要項目。 如果您最近曾閱讀本網站上的其他文章，那麼您肯定曾遇到

Madeon Adventure Machine 是 Madeon 新專輯的 巧妙宣傳內容，是一款趣味鼓機。 Adventure Machine 是一款簡單的應用程式，但效能相當優異。 利用網路音訊和選用的 Web Midi (是的，您可以連接自己的合成器！)，輕觸按鈕顯示的新建立的迴圈就能完美同步，而且介面在行動裝置上可正常運作，尤其是安裝在主畫面時。 如果所有節拍和迴圈的預先快取作業已經移除或採取更聰明的做法，則可大幅改善行動版 3G 的載入時間 (請參閱 WebPageTest

Hummingbird Library ：對 Hummingbird 是一個全新的前端，這是一款熱門的動漫手錶追蹤工具和探索網站。 動畫迷 (就像我一樣，螢幕截圖上的觀看次數確實很真實！)這個空間中的熱門網站包括 AniDB 和 MyAnimeList，但 Hummingbird 是其中最受歡迎的網站。 不過， Hummingbird 程式庫 位於現有的 Hummingbird API 上方，並進一步使用 Angular 和 Material Design 從頭開始建構。 主題顏色 和 資訊清單

Adsy.me 可讓您以超快速的方式輕鬆建構行動裝置微網站。 Adsy.me 提供一項工具，讓任何人都能建立行動版 (微型) 網站，而他們會參加自己的 Dogfood 測試，立即贏得我的信任：整個工具都是一個速度飛快、回應直覺的行動網頁應用程式。 利用更多延遲載入技術，應用程式可以更快載入，並且利用全螢幕 API，以及 ServiceWorker 離線來提供的好處。 促使我們做出選擇的三大原因：提供開放性、跨平台支援，以及為使用者提供即時更新。 開放性 =

Little Alchem ：這款有趣的行動裝置友善組合遊戲，靈感來自其前身 Alchemy。 Little Alchemy 就是一個很好的例子，它充分運用了網路平台的所有最新功能。在安裝時，它會使用 網頁應用程式資訊清單 以全螢幕模式啟動，並在 theme-color 的協助下與 Android 融合。 初次載入的回應速度極快，並立即顯示預先載入器。此外，您還可以透過 AppCache 完全離線玩遊戲。太棒了！ 在電腦上，封鎖右鍵點選功能通常會被視為禁忌 (但這讓我可以透過輸入錯誤的

Hacker News Reader ：適用於 Hacker News 最佳化的優質讀者。 這款應用程式提供精美、高度最佳化的 Hacker News 閱讀體驗，無論在行動裝置、平板電腦和電腦上都能順暢瀏覽。速度飛快，在行動裝置上測試時，您可能會看到流暢順暢的轉場效果。它使用了主題顏色來整合至 Android 中，並且使用 網頁應用程式資訊清單 ，因此可安裝。安裝完成後，看起來就像原生 HN 新聞閱讀器應用程式。

2014 年 Chrome 開發人員高峰會網站是由 Google 自家的 Paul Lewis 公司內部製作，內容涵蓋了美國教育部 (CDS) 網站，向來說明如何為會議訪客打造優質的行動版網站體驗。

Merry Pixmas ：運用 3D CSS 變形服務歡慶聖誕佳節。 適合在電腦和行動裝置上順利運作的聖誕節主題示範。甚至提供全新的主題色彩支援，以及啟動全螢幕模式的主畫面體驗。 專家級提示：搖動手機即可下雪！ 雖然我知道這是試用版，但針對資產和非算繪禁止 JavaScript 指定的快取標頭，或許可以改善感知的載入時間。 在 東京 ，我們長期以來一直致力於倡導回應式和行動版網站，而不是基於原生的理由。Pixmas 在專案之間停機期間的成果 來自 HTML5 和 CSS3

SVGOMG ：適用於 SVGO 的漂亮、材質感、響應式前端。 SVGOMG 是由我們自己的 Jake Archibald 建構，幾乎是使用網路技術編寫的完全回應式且功能強大的工具的完美範例。這款應用程式採用精美的 Material Design 外觀，ServiceWorker 可確保應用程式快速載入且可離線使用，並在行動裝置上提供流暢的轉場效果。 我們唯一的疑慮是，由於主要 UI 缺少，初始使用者體驗令人困惑。除此之外，你做得很好！ 懶惰。完全懶惰。我不是開發 Windows

網路篩選器 ：快速、快速又髒污的相機濾鏡。 是一款功能強大的網頁式相機應用程式，可讓您即時套用濾鏡。系統會自動將圖片儲存至本機裝置，這表示圖片通常會與選擇的雲端儲存空間供應商 (例如 G+) 保持同步，方便分享閉幕。 應用程式可以安裝在主畫面，但至少在 Android 上，應用程式每次啟動時，系統會要求使用者授予相機使用權限。這顯然不是開發人員端的問題，而是 Chrome/Android 上的問題，並向我們提供修正通知的備忘錄。 我自 Netscape 4

在《霍比特人》體驗中加入 WebRTC 遊戲 為了配合《霍比特人：五軍之戰》上映，我們延續去年的 Chrome 實驗，推出了 《霍比特人：五軍之戰》 的全新內容。隨著越來越多瀏覽器和裝置能查看內容，並支援 Chrome 和 Firefox 的 WebRTC 功能，這次的重點是擴大 WebGL 的使用範圍。今年的實驗共有三個目標：

將 LEGO® 積木帶入跨裝置網頁 Build with Chrome 是針對 Chrome 電腦版使用者推出的有趣實驗， 最初在澳洲推出 ，2014 年重新推出後，已在全球推出，並與《LEGO® MOVIE™》合作，且新增支援行動裝置。本文將分享我們從這項專案中學到的幾點，特別是從僅限於電腦的體驗，轉移到同時支援滑鼠和觸控輸入的多螢幕解決方案。 第一版「用 Chrome 建構」計畫於 2012 年在澳洲推出。我們希望以全新方式展示網路的強大功能，並讓更多使用者認識 Chrome。

多裝置開發功能的逐步操作說明 在 第一篇文章 中，我們介紹了 Chrome 實驗「穿越中土世界」 的開發作業，並著重於行動裝置的 WebGL 開發作業。本文將討論在建立其他 HTML5 前端時遇到的挑戰、問題和解決方法。 首先，我們來談談如何從螢幕大小和裝置功能的角度，調整這項實驗，讓它同時適用於電腦和行動裝置。 整個專案採用「電影」風格，我們希望在設計上維持橫向固定框架，保留電影的魔幻效果。由於專案的大部分內容都由互動式迷你「遊戲」組成，因此讓這些內容溢出畫面也不合理。

透過行動 WebGL 呈現中土世界 以往，要將互動式、以網頁為基礎、多媒體內容豐富的體驗帶入行動裝置和平板電腦，一直是項挑戰。主要限制包括效能、API 可用性、裝置上的 HTML5 音訊限制，以及缺乏無縫內嵌影片播放功能。 今年稍早，我們與 Google 和華納兄弟的夥伴合作，為新版《魔戒世界：霍比特人》 The Hobbit: The Desolation of Smaug 建立行動版內容優先的網路體驗。建立多媒體重重的行動版 Chrome 實驗，是一項非常有趣且具有挑戰性的任務。

Racer 是 Active Theory 開發的行動版 Chrome 實驗，以網路為基礎。最多可邀請 5 位好友連線，在每部螢幕上進行比賽。我們以 Google Creative Lab 提供的概念、設計和原型，以及 Plan8 提供的音效為基礎，在 2013 年 I/O 大會推出前，歷經 8 週的迭代，完成了這部影片。遊戲推出幾週後，我們有幸有機會回答開發人員社群提出的幾個有關遊戲運作方式的問題。以下是主要功能的詳細說明，以及常見問題的解答。

Racer 是一項多玩家、多裝置的 Chrome 實驗。復古風格的軌道賽車遊戲，可在多個螢幕上遊玩。在 Android 或 iOS 手機或平板電腦上。任何人皆可加入。沒有應用程式。沒有已下載的內容。僅限行動版網頁。 Plan8 與 14islands 合作，以喬吉歐莫洛德 (Giorgio Moroder) 的原創曲目為基礎，打造動態音樂和音效體驗。Racer

World Wide Maze 是一款遊戲，玩家需要使用智慧型手機，透過由網站建立的 3D 迷宮，引導滾動球前往目標點。 遊戲大量使用 HTML5 功能。舉例來說， DeviceOrientation 事件會從智慧型手機擷取傾斜資料，然後透過 WebSocket 傳送至電腦，讓玩家在由 WebGL 和 Web Workers 建構的 3D 空間中找到方向。 本文將詳細說明這些功能的使用方式、整體開發程序，以及最佳化重點。 DeviceOrientation 事件 ( 範例 )

Roll It 是 Chrome 實驗 ，只需使用手機和電腦上的瀏覽器，即可重新體驗經典的木板遊戲。手機上的瀏覽器可讓您輕鬆瞄準並滾動球，而電腦上的瀏覽器則可透過 WebGL 和 Canvas 即時算繪 Roll It 街道的圖形。兩部裝置會透過 Websockets 進行通訊。沒有應用程式。沒有已下載的內容。沒有符記。只要有新式瀏覽器即可使用。 在 Google Creative Lab 的指導下， Legwork 開發了使用者體驗、介面和遊戲環境，然後與開發合作夥伴 Mode Set

運用 CSS 和瀏覽器版面配置的工具，就能為網頁內容提供精彩的視覺效果。使用 CSS 濾鏡、WebGL、HTML5 影片、SVG、畫布等網路功能，以及 CSS 區域、CSS 形狀和 CSS 自訂濾鏡等新興技術，可大幅擴展創意空間。Adobe 長期與熱愛版面配置和設計的內容創作者合作，因此積極將這項知識應用於網路，並為許多不斷演進的網路標準做出貢獻。

為了在 Google I/O 2013 大會註冊開放前，讓開發人員對該網站產生興趣，我們開發了一系列以行動裝置為優先的實驗和遊戲，重點是觸控互動、生成式音訊和探索樂趣。這類互動體驗的靈感來自程式碼的潛力和遊戲的力量，因此在輕觸新 I/O 標誌時，一開始會依序播放「I」和「O」的簡單音效。 我們決定以 HTML5 互動中不常見到的搖晃自然效果，實作 I 和 O 動畫。我們花了一些時間調整選項，讓使用者能感受到有趣的互動體驗。

2010 年夏天，我們製作了「Sand Trap」遊戲，並參加行動裝置 HTML5 遊戲競賽。但大多數手機都只顯示部分遊戲畫面，或是將遊戲縮小到無法操作的程度。因此，我們決定自行調整遊戲，讓遊戲能流暢地調整至任何解析度。經過一些重新編寫程式和運用本文所述的構想後，我們製作的遊戲便可在任何新式瀏覽器中執行，無論是桌上型電腦或行動裝置皆可。 這項做法在《Sand

「Find Your Way to Oz」 是 Disney 在網路上推出的全新 Google Chrome 實驗。你可以透過互動式旅程，在堪薩斯州馬戲團中展開冒險，並在遭到大風暴捲入後，前往奧茲國。 我們的目標是結合電影的豐富內容和瀏覽器的技術能力，打造有趣的沉浸式體驗，讓使用者能與內容建立強烈連結。 這項工作內容太龐大，無法在本篇文章中完整呈現，因此我們深入研究，並挑選出一些我們認為有趣的技術故事章節。我們也從中擷取了一些難度逐漸增加的專門教學課程。

如何讓 UI 更出色 JAM with Chrome 是 Google 推出的網路音樂專案，透過 Chrome 進行 JAM 時，來自世界各地的使用者可以組成樂團，並在瀏覽器中即時進行 JAM。 DinahMoe 團隊突破了 Chrome 的 Web Audio API 的限制， Tool of North America 團隊打造了這個介面，讓使用者可以彈撥、敲打和演奏電腦，就像是樂器一樣。 在 Google Creative Lab 的創意指導下，插畫家 Rob Bailey 為 JAM

你好！我是 Google 資料藝術團隊的 Michael Chang，我們最近完成了 100,000 Stars Chrome 實驗 ，以圖像呈現附近的星星。這個專案是使用 THREE.js 和 CSS3D 建構而成。在本個案研究中，我將概略說明發現過程、分享一些程式設計技巧，並在最後分享一些未來改善方向。 這裡討論的主題相當廣泛，而且需要具備一些 THREE.js

如何製作出精彩的音訊 JAM with Chrome 是 Google 推出的網路音樂專案，透過 JAM with Chrome，來自世界各地的使用者可以組成樂團，並在瀏覽器中即時即興創作音樂。我們 DinahMoe 很榮幸參與這個專案。我們的角色是為應用程式製作音樂，以及設計及開發音樂元件。開發工作分為三個主要領域： 音樂工作站 ，包括 MIDI

Movi.Kanti.Revo 是 Cirque du Soleil 打造、Subatomic Systems 開發的新感官 Chrome 實驗，透過新式網路技術將 Cirque du Soleil 的奇幻世界帶到網路上。 實驗是使用 HTML5 建立的，環境則完全採用標記和 CSS 建構而成。就像舞台上的布景一樣， div 、 img 、小型 video 和其他元素會使用 CSS 定位在 3D 空間中。使用新的 getUserMedia API

去年夏天，我擔任商業 WebGL 遊戲 SONAR 的技術主管。這個專案花了約三個月的時間完成，而且是從頭開始在 JavaScript 中完成。在開發 SONAR 的過程中，我們必須為許多問題找到創新的解決方案，以便在未經測試的 HTML5 新環境中運作。特別是，我們需要解決一個看似簡單的問題：如何在玩家啟動遊戲時，下載及快取超過 70 MB 的遊戲資料？ 其他平台有現成的解決方案可解決這個問題。大多數的遊戲主機和電腦遊戲會從本機 CD/DVD 或硬碟載入資源。Flash

Technitone.com 融合了 WebGL、Canvas、Web Sockets、CSS3、Javascript、Flash 和 Chrome 中的新 Web Audio API 。 本文將介紹製作過程的各個面向：企劃、伺服器、音效、視覺效果，以及我們用於互動式設計的部分工作流程。大部分的章節都包含程式碼片段、示範和下載項目。文章結尾處有下載連結，您可以將所有檔案下載為一個 ZIP 檔案。 我們絕非 gskinner.com 的音訊工程師，但如果有挑戰，我們會想辦法解決：

在去年年底在 iOS 和 Android 上發布 Bouncy Mouse 後，我學到了幾個非常重要的教訓。其中最重要的一點是，要打入成熟市場並不容易。在競爭激烈的 iPhone 市場，要吸引消費者的注意非常困難；在競爭較不激烈的 Android 市集，雖然進展較為順利，但仍不容易。有了這次經驗，我發現 Chrome 線上應用程式商店有個有趣的商機。雖然 Web 商店並非空無一物，但其高品質 HTML5

iPad 版 MathBoard 是 PalaSoftware 應用程式，是一款經過精心設計的應用程式，提供許多細緻但自然的動畫，以及獨特的逼真外觀和感受。目標是將 iPad 應用程式以最高保真度移植至 HTML5。 N2N-Apps 是一家軟體開發公司，專注於運用 HTML5 技術建構新一代的網頁和行動應用程式。該公司在 2010 年由 Jeremy Chone 創立，他曾在 Netscape、Oracle 和 Adobe 累積 11

Google 首頁是很引人入勝的環境，方便你在當中編寫程式碼。但其中包含許多具挑戰性的限制：我們特別重視速度與延遲時間，才能滿足各種瀏覽器的需求和各種情況，...沒錯，就是帶來驚喜與樂趣。 我正在討論 Google Doodle ，這是一種會不定期取代 Google 標誌的特殊插圖。 儘管我與筆和筆刷的關係長久以來 對重新訓練的定律產生了強烈的轉變 但我常常會促成互動才算互動 我和許多人共同編寫的互動式 Doodle ( Pac-Man 、 Jules Verne 、 World’s Fair

開發人員可透過 WebSockets 和 EventSource ，建立能夠與伺服器即時通訊的網頁應用程式。 Stream Congress (可在 Chrome 線上應用程式商店 中取得) 會即時更新美國國會的運作情形。它能串流播放 House 和參議院的樓層更新、相關新聞快報、美國國會成員的推文，以及其他社群媒體動態。這個應用程式會記錄國會的業務，因此應全天開啟。 WebSockets 規格因其可在瀏覽器和伺服器之間建立穩定的雙向 TCP 套接字 ，而受到相當程度的關注。TCP

當我們將 Wordico 填字遊戲從 Flash 轉換為 HTML5 時，第一個任務就是忘掉所有關於在瀏覽器中打造豐富使用者體驗的知識。雖然 Flash 提供單一且全面的 API，可用於所有應用程式開發作業 (從向量繪圖到多邊形命中偵測，再到 XML 剖析)，但 HTML5 則提供一堆規格，並支援各種瀏覽器。我們也想知道，HTML 這類文件專用語言，以及 CSS 這類以方塊為主的語言，是否適合用於建構遊戲。遊戲是否會在各瀏覽器中顯示一致的內容，就像在 Flash

我們在 2010 年 6 月得知，當地出版「雜誌」 Boing Boing 舉辦 遊戲開發競賽 。我們認為這是一個絕佳的理由，可以使用 JavaScript 和 <canvas> 快速製作簡單的遊戲，因此就開始著手製作。比賽結束後，我們仍有許多想法，希望能完成我們開始的計畫。以下是個案研究的結果，這是一款名為「Onslaught」的小遊戲！ 競技場 。 由於 比賽宗旨 是開發以 芯片音樂 為主題的遊戲，因此我們的遊戲必須具有復古 Nintendo Entertainment

2010 年， F-i.com 與 Google Chrome 團隊合作，共同開發一款以 HTML5 為基礎的教育性網路應用程式，名為「20 Things I Learned about Browsers and the Web」( www.20thingsilearned.com )。這個專案的其中一個重要概念，就是最好以 書籍的形式 呈現。由於本書內容主要講述開放式網路技術，我們認為，讓容器本身成為這些技術可協助我們達成的現今成就範例，是保持一致性的關鍵。

在 2010 年春季，我對 HTML5 和相關技術的支援快速增加感到興趣。當時，我和朋友在為期兩週的遊戲開發競賽中互相較勁，藉此磨練程式設計和開發技能，並將我們不斷拋出來討論的遊戲構想付諸實現。因此，我自然而然地開始在競賽作品中加入 HTML5 元素，以便進一步瞭解這些元素的運作方式，並執行先前 HTML 規格幾乎無法執行的操作。 在 HTML5 的眾多新功能中，對畫布標記的支援日益增加，讓我有機會使用 JavaScript 實作互動式藝術，進而嘗試實作現在稱為「Entanglement」

2010 年 8 月 7 日，deviantART 迎來了 10 週年。我們推出了名為 deviantART muro 的 HTML5 繪圖工具，慶祝生日。這項工具可做為獨立的網路應用程式使用，也可以做為輕量繪圖工具，用於在論壇留言中加入圖片。 在 deviantART 社群中，這項全新繪圖工具受到熱烈歡迎，目前的流量也與一些規模不錯的網站資源相當。自推出以來，每 5 秒就會透過 deviantART muro 提交一張新圖。這只是完成的圖表數量，還有許多圖表是開始繪製但未儲存。

拖曳放置 (DnD) 是 HTML 5 的眾多優異功能之一，並且受到 Firefox 3.5、Safari、Chrome 和 IE 的支援。Google 最近推出了 新功能 ，讓 Google Chrome 使用者可以將檔案從瀏覽器拖曳至電腦桌面。這項功能非常方便，但直到 Ryan Seddon 發布一篇文章，說明他對這項新功能的 發現 ，這項功能才廣為人知。 在 Box.net，我們很高興這些新功能可協助我們改善雲端內容管理解決方案，並為開發人員社群做出更多貢獻。很高興在此宣布，我們已將

Using the Media Capabilities API lets you better target video codecs, frame rates, and resolutions based on the capabilities of your users' devices.

Forbes is re-defining modern web development with Progressive Web App technology.

There's a new way to deliver amazing user experiences on the web. Travel company Wego has built a successful AMP based Progressive Web App (PWA).

Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions. After upgrading their site to a Progressive Web App (PWA), they saw a 76 percent increase in total conversions across browsers.

AliExpress increases conversion rate for new users by 104% with new Progressive Web App Download PDF Case study "Smarter shopping, better living!" is the motto of AliExpress, a website where shoppers can buy everything from baby clothes to