Loading Performance

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

這道題目涵蓋前端技術範圍很廣,很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼,就讓我來檢視一下自己的狀態吧 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 · 留言


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

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

效能調校 加載效能 Loading Performance · 留言


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

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

效能調校 加載效能 Loading Performance 吃什麼 Lighthouse Gzip · 留言


快取

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

快取 cache HTTP Caching Service Worker 效能調校 加載效能 Loading Performance · 留言


如何減少 HTTP Requests 的數量?

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

效能調校 加載效能 Loading Performance · 留言


加載效能檢測工具

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

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


文字資源優化

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

效能調校 加載效能 Loading Performance Gzip 吃什麼 · 留言


響應式圖片(Responsive Images)

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

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


如何做圖片壓縮?

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

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


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 吃什麼 · 留言


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 · 留言


HTTP Caching

HTTP Caching。

HTTP Caching 效能調校 加載效能 Loading Performance 快取 cache · 留言


Base64 Images

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

效能調校 加載效能 Loading Performance 圖片最佳化 Image Optimization Base64 Images Gzip · 留言


Icon Fonts 教學

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

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