效能調校

從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

Sentry Cypress Web Vitals Memori Loading Performance Rendering Performance Core Web Vitals 效能監控 Real User Monitoring GitHub Actions CI/CD Chrome DevTools End-to-End Testing Google Analytics Lighthouse Synthetic Monitoring active monitoring cypress.io passive monitoring 加載效能 效能調校 端對端測試 自動化測試 轉譯效能 sharing WebConf Taiwan 前端效能 系列文 · 留言


利用 Cypress 和 Sentry 測試前端效能

在自動化測試前端效能時,可能會考慮的解法有:(1) Lighthouse CI Action 或 web-vitals library + 丟到某個地方做資料儲存和 dashboard;另一個解法是 (2) 利用 Cypress + Sentry 來取得相關資訊並做呈現。這篇文章會針對 Cypress + Sentry 這個解法做說明,並比較兩種解法。

Sentry Cypress End-to-End Testing GitHub Actions Lighthouse Loading Performance Rendering Performance Synthetic Monitoring active monitoring Web Vitals Memori 轉譯效能 加載效能 效能監控 效能調校 CI/CD Core Web Vitals cypress.io lighthouse-cli 端對端測試 自動化測試 前端效能 系列文 · 留言


利用 Sentry 進行效能監控

剛好最近在找個能進行效能監控的工具,在考量是否能有效記錄與追蹤特定指標和錯誤、整合、即時通知與 self-hosted 後,決定使用 Sentry 來協助團隊進行效能與錯誤的監控。

Sentry Loading Performance Real User Monitoring Web Vitals passive monitoring Memori 加載效能 效能監控 效能調校 前端效能 系列文 · 留言


利用 React Context API + useReducer 實作 Redux

要選 Redux 還是 context API + useReducer 來做狀態管理呢?context API + useReducer 能完全取代 Redux 嗎?

react hooks react.js redux Web Vitals Loading Performance Rendering Performance front-end architecture Core Web Vitals 加載效能 效能調校 sharing · 留言


2021 年度回顧

這是我在 2021 年最值得聊聊的幾件事 (*´∀`)~♥

年度回顧 MOPCON 公路車 健身 高蛋白料理 旅遊 讀書會 閱讀 職涯 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Web Vitals Core Web Vitals SEO 搜尋引擎優化 效能調校 健身女孩安安 甜點 減醣 減糖 DIY 生活 Netflix Testable JavaScript 可測試的 JavaScript WorldGym · 留言


導讀《打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵》逐字稿@新竹敏捷

導讀《打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵》逐字稿@新竹敏捷

Web Vitals 效能調校 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 趨勢科技 Trend Micro · 留言


關於「打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵」這本書的點滴

關於這本書「打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵」的點點滴滴。

Web Vitals 效能調校 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 MOPCON 趨勢科技 Trend Micro · 留言


打造高速網站,從網站指標開始!(Speed Up Your App with Web Vitals) MOPCON 2021 逐字稿

MOPCON 逐字稿

MOPCON Web Vitals 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 Core Web Vitals SEO 搜尋引擎優化 效能調校 Firebase Performance Firebase Image Optimization Lighthouse Loading Performance lighthouse-cli sharing 加載效能 圖片最佳化 趨勢科技 Trend Micro Real User Monitoring Synthetic Monitoring Mixtini 前端效能 系列文 · 留言


2020 年度回顧

這是我在 2020 年最值得聊聊的幾件事 (*´∀`)~♥

年度回顧 Postcrossing 寶可夢 WorldGym Netflix 生活 旅遊 職涯 效能調校 DIY 閱讀筆記 · 留言


利用 Firebase Performance 來做 Real User Monitoring

利用 Firebase Performance 來做 Real User Monitoring。

Firebase Performance 效能調校 加載效能 Firebase Loading Performance Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言


利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring

利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring。

效能調校 Perfume.js Google Analytics Loading Performance 加載效能 Real User Monitoring passive monitoring 吃什麼 前端效能 系列文 · 留言


Lighthouse Metrics:以使用者為出發點來探討效能的指標

本文說明 Lighthouse 以使用者為出發點來探討效能的指標。

Lighthouse RAIL Web Vitals 效能調校 Core Web Vitals Loading Performance 加載效能 sharing Synthetic Monitoring active monitoring Real User Monitoring passive monitoring 趨勢科技 Trend Micro 前端效能 系列文 · 留言


利用 Lighthouse 與 Puppeteer 對全站網頁做效能檢測並產生報表

本文主要是記錄如何在專案中簡易下指令來自動執行 Lighthouse 與 Puppeteer 做全站網頁的效能檢測、產生報表與其目錄。

Lighthouse Puppeteer End-to-End Testing 端對端測試 lighthouse-cli 自動化測試 效能調校 吃什麼 前端效能 系列文 · 留言


利用 Styled System 建立一個更好的 UI 元件庫!

利用 Styled System 建立一個更好的 UI 元件庫!

styled-system styled-components CSS Modules CSS in JS OOCSS BEM SMACSS css Bootstrap Critical Rendering Path End-to-End Testing 端對端測試 Loading Performance Media Query Modern Web Rendering Performance Responsive Web Design react.js webpack 加載效能 效能調校 自動化測試 轉譯效能 關鍵轉譯路徑 響應式網頁 sharing 趨勢科技 Trend Micro · 留言


在瀏覽器輸入網址並送出後,到底發生了什麼事?

這道題目涵蓋前端技術範圍很廣,很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼,就讓我來檢視一下自己的狀態吧 d(`・∀・)b

效能調校 關鍵轉譯路徑 圖片最佳化 轉譯效能 你懂JavaScript嗎? 你所不知道的JS 加載效能 快取 Rendering Performance Critical Rendering Path Resource Hints Web Workers Worker requestAnimationFrame Gzip HTTP Caching Loading Performance You-Dont-Know-JS cache javascript javascript prototype undefined 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言


從內部來看瀏覽器到底在做什麼?(Inside look at modern web browser)

從內部來看瀏覽器到底在做什麼?

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Lighthouse Resource Hints Web Workers Worker requestAnimationFrame 前端效能 系列文 · 留言


你懂 JavaScript 嗎?#27 基準化分析與微調(Benchmarking and Tuning)- 使用 Benchmark.js 和 jsPerf 分析程式碼效能

本文主要會談到如何使用工具來做基準化分析。

You-Dont-Know-JS 效能調校 javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 You-Dont-Know-JS-Async-and-Performance 你懂 JavaScript 嗎?2019 iT 邦幫忙鐵人賽 系列文 前端效能 系列文 · 留言


你懂 JavaScript 嗎?#26 程式效能(Program Performance)

本文主要會談到 web worker、SIMD 與 asm.js。到目前為止我們只談論了如何有效的運用非同步處理模式,現在就來探討為什麼非同步處理對 JavaScript 來說這麼重要,其中最明顯的理由就是效能,本文主要探討的是更整體的程式層級的效能。

You-Dont-Know-JS Web Workers 效能調校 javascript 2019鐵人賽 你所不知道的JS 你懂JavaScript嗎? 鐵人賽 Worker You-Dont-Know-JS-Async-and-Performance 你懂 JavaScript 嗎?2019 iT 邦幫忙鐵人賽 系列文 前端效能 系列文 · 留言


什麼是以使用者為中心的效能測量指標?

說明常用的效能測量指標。

Web Vitals 效能調校 加載效能 Loading Performance 前端效能 系列文 · 留言


加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例

針對網站進行各種工具的測試並做優化。

效能調校 加載效能 Lighthouse Loading Performance 吃什麼 Gzip 前端效能 系列文 · 留言


快取

本文主要探討記憶體快取、Service Worker 快取、HTTP 快取和 Push 快取。

快取 Service Worker 效能調校 cache HTTP Caching 加載效能 Loading Performance 前端效能 系列文 · 留言


如何減少 HTTP Requests 的數量?

網頁上所有的文字、圖片、樣式和腳本都需要經由發送 HTTP Requests 從伺服器下載來取得,網頁大部份的時間大都花在下載資源上,只有少少的時間是花在渲染上。本文主要探討如何減少 HTTP Requests 的數量。

效能調校 加載效能 base-64 Loading Performance 前端效能 系列文 · 留言


加載效能檢測工具

在檢測加載效能時,我們會使用一些工具做測量,而使用這些工具的目的是為了量化效能優劣狀況(來做比較),找出潛在問題並改善,例如:圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。

效能調校 圖片最佳化 Lighthouse 加載效能 Loading Performance 吃什麼 Image Optimization 前端效能 系列文 · 留言


文字資源優化

文字資源(Text Content)的優化,以下列出加快從伺服器下載的有效方法。

效能調校 加載效能 Gzip Loading Performance 吃什麼 前端效能 系列文 · 留言


Debounce Input Handlers

處理輸入的函式可能會造成效能問題,例如:阻礙幀(Frame)的繪製,導致畫面無法順利繪製;還有可能造成額外的版面配置(Recaculate Layout / Reflow)工作。

效能調校 關鍵轉譯路徑 requestAnimationFrame 轉譯效能 Rendering Performance Critical Rendering Path 前端效能 系列文 · 留言


響應式圖片(Responsive Images)

在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題,這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決,本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。

圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance 響應式網頁 Responsive Web Design Media Query Core Web Vitals Web Vitals 前端效能 系列文 · 留言


如何做圖片壓縮?

記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。

圖片最佳化 效能調校 Responsive Web Design 加載效能 Image Optimization Loading Performance gulp Lighthouse 響應式網頁 吃什麼 前端效能 系列文 · 留言


SVG Sprites

小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites,到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites,來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位;後半段說明各種 SVG Icon 的使用方式和優缺比較。

SVG 圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp react.js 吃什麼 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言


Preload vs Prefetch

比較 Preload 與 Prefetch 的異同。

Resource Hints 效能調校 加載效能 圖片最佳化 HTTP Caching Loading Performance Image Optimization 吃什麼 前端效能 系列文 · 留言


圖片最佳化(Image Optimization)

實作「圖片最佳化(Image Optimization)」的第一個問題是「真的需要這個圖檔嗎?」,去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代,可以做哪些優化?」。

圖片最佳化 效能調校 加載效能 SVG Resource Hints Lighthouse Base64 Images Image Optimization Loading Performance Gzip 編碼 解碼 encode decode base-64 前端效能 系列文 · 留言


HTTP Caching

HTTP Caching。

HTTP Caching ETag 快取 效能調校 加載效能 Loading Performance cache 前端效能 系列文 · 留言


Base64 Images

將圖片轉為編碼字串,讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼,以減少 HTTP Request。適合較少更新的小圖,例如 icon 等。

Base64 Images 效能調校 加載效能 Loading Performance 圖片最佳化 Image Optimization base-64 Gzip 編碼 解碼 encode decode 前端效能 系列文 · 留言


瀏覽器渲染效能(Browser Rendering Performance)總整理 (ゝ∀・)

瀏覽器渲染效能(Browser Rendering Performance)總整理 (ゝ∀・)

關鍵轉譯路徑 效能調校 轉譯效能 Critical Rendering Path Rendering Performance Chrome DevTools Web Workers RAIL css3 animations 前端效能 系列文 · 留言


改進渲染效能範例 2 - Newsticker

使用 Newsticker 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。

關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言


改進渲染效能範例 1 - News Aggregator

使用 News Aggregator 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Forced Synchronous Layout Layout Thrashing Chrome DevTools will-change requestAnimationFrame css css3 animations 前端效能 系列文 · 留言


如何優化像素管道的 Paint 和 Composite?

更詳細探討如何優化像素管道(Browser Rendering Pipeline)的繪製(Paint)和合成(Composite)這兩個階段。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Chrome DevTools will-change css css3 animations 前端效能 系列文 · 留言


如何優化像素管道的 Styles 和 Layout?

更詳細探討如何優化像素管道(Browser Rendering Pipeline)的樣式計算(Recalculate Styles)和版面配置(Recaculate Layout / Reflow)這兩個階段。

Layout Thrashing Forced Synchronous Layout 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path BEM Chrome DevTools css css3 animations 前端效能 系列文 · 留言


從 JavaScript 著手優化渲染效能

避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。

requestAnimationFrame 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Critical Rendering Path Chrome DevTools javascript css3 animations css 前端效能 系列文 · 留言


Web Workers

JavaScript 通常在作業系統的 Main Thread 執行,但若把程式碼放在 Web Workers 就可另闢戰場-Worker Thread,兩條線互不影響,讓 JavaScript 在背景執行,並且兩線可由訊息溝通-使用 postMessage 發送訊息、onmessage 接收訊息。通常我們會將需要長時間運算且不含 Window 或 DOM Element 操作的程式碼放在 Web Workers,好處是不阻塞 Main Thread 而讓速度變快。

Web Workers 效能調校 轉譯效能 Rendering Performance Chrome DevTools javascript Worker 前端效能 系列文 · 留言


從 App 的生命週期來看瀏覽器渲染效能優化

以更高階的角度來看如何優化效能-App 的生命週期,讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。

RAIL 效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance css3 animations css 前端效能 系列文 · 留言


關鍵轉譯路徑 Critical Rendering Path

現今裝置更新畫面的頻率是每秒 60 幀(60Hz 或稱 60fps),意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面,還有很多事情要忙,因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面,就會產生顫動(Juddering)。想提高更新畫面的頻率、避免顫動,就要了解瀏覽器如何渲染畫面。

關鍵轉譯路徑 轉譯效能 效能調校 Critical Rendering Path Rendering Performance Chrome DevTools Layout Thrashing Forced Synchronous Layout css3 animations css will-change flexbox BEM 前端效能 系列文 · 留言


如何提升動畫效能?

動畫效能優化筆記。這裡提供三個方向:使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。

requestAnimationFrame will-change 關鍵轉譯路徑 效能調校 轉譯效能 css3 animations Rendering Performance Critical Rendering Path javascript css 前端效能 系列文 · 留言


Why did you update: 檢測 React 元件是否需要重新渲染的工具

「Why did you update」是一個用來檢測 React 元件是否需要重新渲染的工具。若被判定不需要重新渲染,會 console 出這個元件先前與目前的 props 和 state 資訊和建議,作為開發者調整的依據。

react.js Rendering Performance 效能調校 轉譯效能 前端效能 系列文 · 留言


CSS3 Animation

使用 CSS3 Transition 和 Animation 製作動畫、效能優化。

css3 animations will-change Critical Rendering Path 關鍵轉譯路徑 效能調校 轉譯效能 Rendering Performance Chrome DevTools css · 留言


DNS Prefetching:預先做 DNS 解析,幫助網頁載入速度更快

預先做 DNS 解析(domain name resolution),將人類可理解的 domain name,轉為 IP address。瀏覽器載入頁面和資源時需做 DNS 解析,但若等到瀏覽該頁或要下載資源時才做 DNS 解析就太遲了(使用者需要等待一段時間),因此可預先執行。

Resource Hints 效能調校 前端效能 系列文 · 留言


Icon Fonts 教學

以往我們都是將小圖示(icon)用切圖的方式放入網頁,而我們也可以將這些 icon 用 CSS「畫」出來。

icon fonts Loading Performance 效能調校 css 加載效能 SVG · 留言