買這商品的人也買了...
-
人月神話:軟體專案管理之道 (20 週年紀念版)(The Mythical Man-Month: Essays on Software Engineering, Anniversary Edition, 2/e)$480$379 -
無瑕的程式碼 - 敏捷軟體開發技巧守則 (Clean Code: A Handbook of Agile Software Craftsmanship)$580$452 -
無瑕的程式碼 番外篇-專業程式設計師的生存之道 (The Clean Coder: A Code of Conduct for Professional Programmers)
$360$281 -
你所不知道的 JS|範疇與 Closures,this 與物件原型 (You Don't Know JS: this & Object Prototypes)$520$411 -
你所不知道的 JS|非同步處理與效能 (You Don't Know JS: Async & Performance)$520$411 -
演算法圖鑑:26種演算法 + 7種資料結構,人工智慧、數據分析、邏輯思考的原理和應用 step by step 全圖解$450$356 -
無瑕的程式碼-整潔的軟體設計與架構篇 (Clean Architecture: A Craftsman's Guide to Software Structure and Design)$580$452 -
金魚都能懂的 CSS 選取器:金魚都能懂了你還怕學不會嗎(iT邦幫忙鐵人賽系列書)$560$437 -
重新認識 Vue.js:008天絕對看不完的 Vue.js 3 指南$600$468 -
前端三十:從 HTML 到瀏覽器渲染的前端開發者必備心法(iT邦幫忙鐵人賽系列書)$550$429 -
頂級網站技術長高度:前端工程進階大師指南$880$695 -
React 學習手冊, 2/e (Learning React: Modern Patterns for Developing React Apps, 2/e)$580$458 -
資料密集型應用系統設計 (Designing Data-Intensive Applications: The Big Ideas Behind Reliable, Scalable, and Maintainable Systems)$980$774 -
React 思考模式: 從 hook 入門到開發實戰(限門市銷售)$500$395 -
跟著 Docker 隊長,修練 22天就精通 - 搭配 20小時作者線上教學,無縫接軌 Microservices、Cloud-native、Serverless、DevOps 開發架構$880$695 -
你所不知道的必學前端 Debug 技巧:即學即用!讓你 Debug 不求人 (iT邦幫忙鐵人賽系列書)$620$484 -
TypeScript 邁向專家之路:零基礎 JavaScript 打通 Angular、React 與 Vue.js 前端框架實戰 (Essential TypeScript: From Beginner to Pro)$880$695 -
資安這條路:領航新手的 Web Security 指南,以自建漏洞環境學習網站安全(iT邦幫忙鐵人賽系列書)$680$578 -
Web 應用系統安全|現代 Web 應用程式開發的資安對策 (Web Application Security)$580$458 -
圖像 Angular 開發入門:打造高靈活度的網頁應用程式 (iT邦幫忙鐵人賽系列書)$600$468 -
金魚都能懂的 CSS 必學屬性:網頁設計必備寶典(iT邦幫忙鐵人賽系列書)$720$562 -
今晚來點 Web 前端效能優化大補帖:一次搞定指標 × 工具 × 技巧,打造超高速網站(iThome鐵人賽系列書)$650$507 -
哎呀!早知道就不會破版的 CSS 設計技巧:前端工程師防止佈局意外的必學密技(iThome鐵人賽系列書)【軟精裝】$660$515 -
React 思維進化:一次打破常見的觀念誤解,躍升專業前端開發者(iThome鐵人賽系列書)【軟精裝】$790$616 -
前端測試指南:策略與實踐$650$507
超有料 AI 工作術 2書75折 詳見活動內容 »
-
79折
AI 加持!Google Sheets 超級工作流$599$473 -
79折
最強 AI 組合技!NotebookLM / Gemini / Nano Banana / Veo 3 【影音生成進化版】$499$394 -
79折
Google BI 解決方案:Looker Studio × AI 數據驅動行銷實作,完美整合 Google Analytics 4、Google Ads、ChatGPT、Gemini$630$498 -
79折
AI 超神筆記術:NotebookLM 高效資料整理與分析 250技$480$379 -
79折
AI 提問 X 學習 X 應用:ChatGPT、NotebookLM、Gemini、GitHub Copilot從零到完全實戰$390$308 -
79折
NVIDIA 輝達之道:第一本輝達詳解!從 AI 教父黃仁勳的登頂之路,看全球科技投資前景$450$356 -
79折
AI 工具使用手冊:學會 AI 魔法讓你變身超人不再當麻瓜, 2/e$690$545 -
79折
AI 超神活用術:Felo 搜尋、筆記、簡報、網頁、知識庫、心智圖與視覺圖表全能助手$490$387 -
79折
AI 時代的 Python 高效學習書 - ChatGPT 程式助理新思維$550$435 -
79折
圖像生成 AI Stable Diffusion 實作技法書:從設定、生成到調整,全面掌握 AI 繪圖實戰技!$550$435 -
79折
邊緣 AI - 使用 NVIDIA Jetson Orin Nano 開發具備深度學習、電腦視覺與生成式 AI 功能的 ROS2 機器人$580$458 -
79折
手機感測器也上 AI – 人工智慧邊緣運算實作開發教戰手冊$1,080$853 -
78折
重構:改善 .NET 與 C# 應用程式的設計,償還欠下的技術債 (使用 GitHub Copilot 與 Visual Studio) (Refactoring with C#: Safely improve .NET applications and pay down technical debt with Visual Studio, .NET 8, and C# 12)$850$663 -
78折
AI × Excel × Tableau 資料分析語法指南$680$530 -
79折
ChatGPT 開發手冊 Turbo × Vision 進化版 — 用 OpenAI Chat/Assistants API‧Function calling 設計 GPTs action‧LINE/Discord bot‧股市分析/自動助理$820$648 -
78折
AIGC 全能實作教科書:一次學會 ChatGPT、簡報、設計與影音繪圖,打造你的 AI 創作工作術$680$530 -
79折
Canva + AI 創意設計與品牌應用 300招:從商業技巧、社群祕技到AI圖文影音特效, 2/e$560$442 -
78折
ChatGPT × Ionic × Angular 全方位技術整合實戰:輕鬆打造跨平台 AI 英語口說導師 APP(iThome鐵人賽系列書)$680$530 -
79折
人人都會 AI 繪圖:開啟斜槓人生金鑰匙,2000件生成作品 + 完整提示詞(全書中英文提示詞,立即下載使用)$780$616 -
78折
資安密碼-隱形帝國:AI數位鑑識、社交工程攻防與現代密碼技術實戰$550$429 -
79折
AI 繪圖邁向視覺設計$720$569 -
79折
圖解雲端運算|概念、技術、安全與架構, 2/e$760$600 -
79折
敏捷開發實踐指南|讓團隊取得亮麗成果$550$435 -
79折
Python X ChatGPT:零基礎 AI 聊天用流程圖學 Python 程式設計$490$387 -
79折
LLM 串接所有服務 - LangChain 原型到產品全面開發$680$537
相關主題
商品描述
書籍特色:
• 以淺顯易懂的圖文說明如何改善效能、可重現問題和動手操作的範例程式碼,便於學習與演練。
• 以使用者的角度解釋效能、改善效能,不再讓優化效能這件事霧裡看花、改了卻沒感受到任何效果。
• 以實際的網站說明如何改善效能,便於評估自身產品的優化成本。
目標讀者:
• 想要優化網站效能,卻不知從何著手的前端工程師。
• 已具備優化網站效能知識與技能,卻不知如何從使用者的觀點改善效能的前端工程師。
• 想要了解前端工程師如何優化網站效能、學習基本概念與技術的非前端工程師。
• 想要評估優化網站的成本、參考業界範例的管理者。
專業推薦:
Summer 結合了自身實際工作經驗,在本書的後半段直接針對幾個知名網站來做案例研討,透過實際案例,讓讀者在看完書後不會出現 「道理我都懂,但我還是不會改...」 的隔靴搔癢之感。還在為效能改善苦惱嗎? 當老闆或是客戶對你說「網站怎麼這麼慢,能不能再快一點」你卻束手無策嗎? 那麼這本【打造高速網站從網站指標開始:全方位提升使用者體驗與流量的關鍵】一書正是各位開發者不可或缺的一帖良藥。
Vue.js Taiwan社群主辦人
《重新認識 Vue.js:008天絕對看不完的Vue.js 3指南》作者 ── Kuro
作者簡介
唐心皓(Summer)
現為趨勢科技的資深工程師,熱愛前端技術,是知名部落格「Summer。桑莫。夏天」的作者。致力於技術的傳播,相信分享能打破知識的隔閡,讓不同領域的人們都能有所連結。
• Facebook: https://www.facebook.com/cythilya
• Twitter: @cythilya
• Email: cythilya@gmail.com
• 歡迎至部落格留言 https://cythilya.github.io
目錄大綱
01 使用者怎麼看待「速度快」?
本章回顧
02 RAIL
RAIL
Response
Animation
Idle
Load
範例
本章回顧
03 網站指標(Web Vitals)
核心網站指標(Core Web Vitals)
載入速度(Load Speed)
載入互動性(Load Responsiveness)
視覺穩定性(Stability)與流暢性(Smoothness)
如何評估網站指標
本章回顧
04 工具
模擬測量與實地測量
合成監控與真實用戶監控
Lighthouse
PageSpeed Insights (PIS)
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 中英文名詞索引
