最佳化網頁資產載入 (preload, prefetch, dns-prefetch, preconnect)

先前面試時被問到早期製作的一個 SPA 網站在換頁後圖片載入體驗不太好的問題，當時把腦袋能想的所有答案都提出來了 😅，最終有答到一點，但太少用所以回答的不是很確定，當時回答：

• 圖片應設定寬高以避免 CLS （累積布局偏移）
• 圖片可以添加 Skeleton 或 Loader 示意加載中
• 首先顯示較小的圖，適當時機再替換實際大張的圖
• 圖片可以使用 fetchpriority 安排資源載入優先程度
• 圖片內嵌使用 inline SVG 或 data URI
• 使用 Preload 預先加載關鍵圖片……？

所以重新翻了一下相關文件，了解瀏覽器如何透過以下方法來最佳化資源的加載：

• preload
• prefetch
• dns-prefetch
• preconnect

延伸閱讀：

• 使用 preload、prefetch、dns-prefetch、preconnect 最佳化資源載入順序！🔗
• 圖片是效能的重災區，先前寫過圖片的效能最佳化研究也可以看看：所有最佳化網頁圖片的技巧都寫在這了！🔗