我用這些前端魔術讓我的網站更快

嘿，開發者們！ ？

是否有用戶抱怨過您的網站速度緩慢？或者，也許您已經驚恐地看著您的 Lighthouse 效能分數隨著每個新功能而逐漸下降？相信我，我去過那裡。今天，讓我們深入探討前端優化技術，這些技術將使您的網站快如閃電。

為什麼要關心性能？

讓我們面對現實吧。據 Google 稱，53% 的行動用戶會放棄載入時間超過 3 秒的網站。那是巨大的！此外，自 2021 年以來，Google 一直使用 Core Web Vitals 作為排名因素。因此，如果您希望您的網站排名良好並讓用戶滿意，效能就不是可有可無的，而是必不可少的。

1. 影像優化：您的第一個重大勝利

圖片通常是網頁上最重的資產。以下是如何像專業人士一樣處理它們：

使用現代圖像格式

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="A fallback image">
</source></source></picture>

始終壓縮您的影像！ Sharp、ImageOptim 或 Squoosh 等工具可以幫助您實現這一目標，而不會造成明顯的品質損失。

實施延遲載入

<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" loading="lazy" alt="Lazy loaded image">

2. JavaScript 優化技術

JavaScript 可以決定網站的效能，也可以破壞網站的效能。以下是一些經過實戰檢驗的策略：

程式碼分割

不要發送一大堆程式碼，而是將程式碼分成更小的區塊：

// Before
import { heavyFeature } from './heavyFeature';

// After
const heavyFeature = () => import('./heavyFeature');

使用績效預算

將其新增至您的 webpack 配置：

module.exports = {
  performance: {
    maxAssetSize: 244000, // bytes
    maxEntrypointSize: 244000,
    hints: 'error'
  }
};

3.CSS優化

關鍵CSS

內嵌關鍵 CSS 並延後非關鍵樣式：

  <!-- Critical CSS inline -->
  <style>
    /* Your critical styles here */
  </style>

  <!-- Non-critical CSS deferred -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

清除未使用的 CSS

使用 PurgeCSS 刪除未使用的樣式：

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.js']
    })
  ]
};

4. 現代裝載技術

資源提示

<link rel="preconnect" href="https://api.example.com">
<link rel="preload" href="critical-font.woff2" as="font" crossorigin>

使用路口觀察器

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Load your content
      loadContent();
    }
  });
});

observer.observe(document.querySelector('.lazy-section'));

5. 監控績效

不要只是優化然後忘記！設定監控：

1. 在部署管道中使用 Lighthouse CI
2. 透過 Google Search Console 監控核心網路生命
3. 使用 web-vitals 等工具設定真實使用者監控 (RUM)：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="A fallback image">
</source></source></picture>

速勝清單

• [ ] 啟用 Gzip/Brotli 壓縮
• [ ] 設定正確的快取標頭
• [ ] 縮小 HTML、CSS 與 JavaScript
• [ ] 最佳化網頁字體載入
• [ ] 刪除未使用的依賴項
• [ ] 使用框架的生產版本

結論

請記住，效能最佳化不是一項一次性任務－而是持續的過程。從影像優化和適當的載入技術等容易實現的目標開始，然後根據需要進行更複雜的最佳化。

哪些效能最佳化技術最適合您？在下面的評論中分享您的經驗！

編碼愉快！ ？

以上是我用這些前端魔術讓我的網站更快的詳細內容。更多資訊請關注PHP中文網其他相關文章！