我用這些前端魔術讓我的網站更快-js教程-PHP中文網

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

Susan Sarandon

發布： 2024-12-07 05:06:15

原創

570 人瀏覽過

I Made My Website Faster With These Frontend Magic Tricks

嘿，開發者們！？

是否有用戶抱怨過您的網站速度緩慢？或者，也許您已經驚恐地看著您的 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="image.jpg" alt="A fallback image">
</picture>

登入後複製

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

實施延遲載入

<img src="image.jpg" 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 並延後非關鍵樣式：

<head>
  <!-- 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'">
</head>

登入後複製

清除未使用的 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. 監控績效

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

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

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="A fallback image">
</picture>

登入後複製