
0人評分過此書
• 以淺顯易懂的圖文說明如何改善效能、可重現問題和動手操作的範例程式碼,便於學習與演練。
• 以使用者的角度解釋效能、改善效能,不再讓優化效能這件事霧裡看花、改了卻沒感受到任何效果。
• 以實際的網站說明如何改善效能,便於評估自身產品的優化成本。
目標讀者:
• 想要優化網站效能,卻不知從何著手的前端工程師。
• 已具備優化網站效能知識與技能,卻不知如何從使用者的觀點改善效能的前端工程師。
• 想要了解前端工程師如何優化網站效能、學習基本概念與技術的非前端工程師。
• 想要評估優化網站的成本、參考業界範例的管理者。
專業推薦:
Summer 結合了自身實際工作經驗,在本書的後半段直接針對幾個知名網站來做案例研討,透過實際案例,讓讀者在看完書後不會出現 「道理我都懂,但我還是不會改...」 的隔靴搔癢之感。還在為效能改善苦惱嗎? 當老闆或是客戶對你說「網站怎麼這麼慢,能不能再快一點」你卻束手無策嗎? 那麼這本【打造高速網站從網站指標開始:全方位提升使用者體驗與流量的關鍵】一書正是各位開發者不可或缺的一帖良藥。
Vue.js Taiwan社群主辦人
《重新認識 Vue.js:008天絕對看不完的Vue.js 3指南》作者 ── Kuro
• 以使用者的角度解釋效能、改善效能,不再讓優化效能這件事霧裡看花、改了卻沒感受到任何效果。
• 以實際的網站說明如何改善效能,便於評估自身產品的優化成本。
目標讀者:
• 想要優化網站效能,卻不知從何著手的前端工程師。
• 已具備優化網站效能知識與技能,卻不知如何從使用者的觀點改善效能的前端工程師。
• 想要了解前端工程師如何優化網站效能、學習基本概念與技術的非前端工程師。
• 想要評估優化網站的成本、參考業界範例的管理者。
專業推薦:
Summer 結合了自身實際工作經驗,在本書的後半段直接針對幾個知名網站來做案例研討,透過實際案例,讓讀者在看完書後不會出現 「道理我都懂,但我還是不會改...」 的隔靴搔癢之感。還在為效能改善苦惱嗎? 當老闆或是客戶對你說「網站怎麼這麼慢,能不能再快一點」你卻束手無策嗎? 那麼這本【打造高速網站從網站指標開始:全方位提升使用者體驗與流量的關鍵】一書正是各位開發者不可或缺的一帖良藥。
Vue.js Taiwan社群主辦人
《重新認識 Vue.js:008天絕對看不完的Vue.js 3指南》作者 ── Kuro
-
01 使用者怎麼看待「速度快」?
-
本章回顧
-
-
02 RAIL
-
RAIL
-
Response
-
Animation
-
Idle
-
Load
-
範例
-
本章回顧
-
-
03 網站指標(Web Vitals)
-
核心網站指標(Core Web Vitals)
-
載入速度(Load Speed)
-
載入互動性(Load Responsiveness)
-
視覺穩定性(Stability)與流暢性(Smoothness)
-
如何評估網站指標
-
本章回顧
-
-
04 工具
-
模擬測量與實地測量
-
合成監控與真實用戶監控
-
Lighthouse
-
PageSpeed Insights(PSI)
-
Chrome DevTools Performance Timeline
-
Search Console
-
Chrome User Experience Report (CrUX)
-
Web Vitals Chrome Extension
-
JavaScript 函式庫
-
工作流程
-
本章回顧
-
-
05 首次顯示內容(First Contentful Paint)
-
測量與檢視工具
-
評估標準
-
範例:比較不同渲染方式的 FCP 和 TTFB
-
本章回顧
-
-
06 最大內容繪製(Largest Contentful Paint)
-
測量與檢視工具
-
評估標準
-
優化方向
-
在瀏覽器輸入網址並送出後,到底發生了什麼事?
-
伺服器回應速度過慢
-
禁止轉譯的資源
-
資源載入速度過慢
-
範例
-
本章回顧
-
-
07 互動準備時間(Time to Interactive)
-
測量與檢視工具
-
評估標準
-
優化方向
-
本章回顧
-
-
08 總阻塞時間(Total Blocking Time)
-
測量與檢視工具
-
評估標準
-
優化方向
-
本章回顧
-
-
09 首次輸入延遲(First Input Delay)
-
測量與檢視工具
-
評估標準
-
優化方向
-
減少 JavaScript 程式碼的執行時間
-
使用 Web Worker 處理與使用者介面無關的複雜運算
-
範例
-
網站具有良好的 FID,而 TBT 卻十分的糟糕?
-
本章回顧
-
-
10 速度指數(Speed Index)
-
基本概念
-
測量與檢視工具
-
評估標準
-
優化方向
-
利用 Speedline 來計算 SI
-
本章回顧
-
-
11 累計版位配置位移(Cumulative Layout Shift).
-
測量與檢視工具
-
評估標準
-
優化方向
-
範例:為圖檔設定明確的尺寸比例
-
範例:FOIT / FOUT
-
範例:無限滾動
-
本章回顧
-
-
12 搜尋引擎優化(SEO)與網站指標
-
利用 Search Console 檢視核心網站指標
-
流量來自於具有良好品質的網頁
-
範例:改善核心網站指標
-
範例:改善行動裝置易用性
-
工作流程
-
總結
-
-
13 案例研討:趨勢科技(Trend Micro)Deep Discovery Director
-
背景
-
現況
-
基於路由的方式拆分程式碼
-
利用 react-loadable 實作動態載入
-
成效
-
將效能改善加入工作流程
-
-
14 案例研討:Mixtini
-
背景
-
現況
-
儘早建立網路連線
-
響應式圖檔
-
使用 CDN 服務存放圖檔
-
預先載入重要資源
-
FOIT / FOUT
-
圖檔設定明確尺寸
-
成效
-
總結
-
-
15 案例研討:露天拍賣-手機版網站商品頁問與答
-
背景與現況
-
避免元素移動大量的距離
-
加快使用者能輸入提問問題的時間點
-
成效
-
總結
-
-
16 未來方向與總結
-
未來方向
-
總結
-
- A 中英文名詞索引
- 出版地 : 臺灣
- 語言 : 繁體中文
評分與評論
請登入後再留言與評分