0人評分過此書

打造高速網站從網站指標開始:全方位提升使用者體驗與流量的關鍵

出版日期
2021/12/09
閱讀格式
PDF
書籍分類
學科分類
ISBN
9789864349609

文化部計次

借閱規則
借閱天數 14
選擇分享方式

推薦本館採購書籍

您可以將喜歡的電子書推薦給圖書館,圖書館會參考讀者意見進行採購

讀者資料
圖書館 桃園市立圖書館
* 姓名
* 身分
系所
* E-mail
※ 我們會寄送一份副本至您填寫的Email中
電話
※ 電話格式為 區碼+電話號碼(ex. 0229235151)/ 手機格式為 0900111111
* 請輸入驗證碼
• 以淺顯易懂的圖文說明如何改善效能、可重現問題和動手操作的範例程式碼,便於學習與演練。
• 以使用者的角度解釋效能、改善效能,不再讓優化效能這件事霧裡看花、改了卻沒感受到任何效果。
• 以實際的網站說明如何改善效能,便於評估自身產品的優化成本。

目標讀者:
• 想要優化網站效能,卻不知從何著手的前端工程師。
• 已具備優化網站效能知識與技能,卻不知如何從使用者的觀點改善效能的前端工程師。
• 想要了解前端工程師如何優化網站效能、學習基本概念與技術的非前端工程師。
• 想要評估優化網站的成本、參考業界範例的管理者。


專業推薦:

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 中英文名詞索引

評分與評論

請登入後再留言與評分
幫助
您好,請問需要甚麼幫助呢?
使用指南

客服專線:0800-000-747

服務時間:週一至週五 AM 09:00~PM 06:00

loading