Docusaurus 網站開發技術指南 Part 1
Docusaurus 客製化實務:CSS 類別來源、Hero 區塊設計與響應式、Google 字體引入、Footer 社交圖標、SEO 標題設計、Open Graph 與 Twitter Card 完整配置。
Docusaurus 客製化實務:CSS 類別來源、Hero 區塊設計與響應式、Google 字體引入、Footer 社交圖標、SEO 標題設計、Open Graph 與 Twitter Card 完整配置。
避免手機端載入超大圖片拖慢 FCP/LCP 的兩種正確方案:JavaScript 動態載入(完全跳過)vs `<picture>` 元素搭配 media query(載入縮小版),附 React 範例與錯誤做法辨識。
SVG 效能原理、SVGOMG/SVGO 工具全部選項解析(低風險/中度/功能性影響/路徑優化四類)、不同用途 SVG 的最佳設定、SVG vs WebP 的選擇決策與混合內容拆分策略。
解析 Gutenberg 區塊編輯器的設計限制與 Group/Columns 巢狀結構,提供四種突破寬高限制的方案(CSS 類別、進階區塊外掛、HTML 區塊、專業頁面編輯器)與最佳實踐建議。
解析影片 streaming/lazy-load 機制 vs 圖片完整下載對首屏渲染的本質差異,說明 PageSpeed Insights 的 FCP/LCP 評分邏輯為何對 PNG 大圖嚴苛,並提供圖片效能優化建議。