Web 前端性能优化技巧

📅 2024-12-20 | ⏱️ 6分钟 | 👁 312 次阅读

前言

首屏加载从8秒优化到1.5秒的实战记录。

一、资源优化

图片优化

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="图片">
</picture>

二、网络优化

<link rel="preconnect" href="https://api.example.com">

三、效果对比

首屏：8.2s → 1.5s

页面大小：5.8MB → 850KB