提高網站性能的有效技巧

如今，快速的網站加載速度對於提升用戶體驗和SEO排名都至關重要。在這篇文章中，我們將深入探討如何提高網站性能，包括以下幾個方面：

一、優化圖片

對於大多數網站來說，圖片是頁面大小的最大貢獻者。通過以下幾種優化技巧，您可以顯著減少頁面加載時間:

1、壓縮圖片

/**
 * 圖片壓縮
 * @param img 需要壓縮的圖片
 * @param width 壓縮後的圖像寬度
 * @param height 壓縮後的圖像高度
 * @param quality 壓縮質量（0-1之間）
 * @param type 壓縮類型（png或jpg）
 * @returns Promise
 */
 function compressImage(img, width, height, quality, type) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const imgWidth = img.naturalWidth;
    const imgHeight = img.naturalHeight;

    const imgRatio = imgWidth / imgHeight;
    const ratio = width / height;

    let resizeWidth = width;
    let resizeHeight = height;
    let offsetX = 0;
    let offsetY = 0;

    if (imgWidth > width || imgHeight > height) {
      // 按照長寬比等比縮放
      if (imgRatio > ratio) {
        resizeHeight = width / imgRatio;
        offsetY = (height - resizeHeight) / 2;
      } else {
        resizeWidth = height * imgRatio;
        offsetX = (width - resizeWidth) / 2;
      }
    } else {
      resizeWidth = imgWidth;
      resizeHeight = imgHeight;
      offsetX = (width - imgWidth) / 2;
      offsetY = (height - imgHeight) / 2;
    }

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, offsetX, offsetY, resizeWidth, resizeHeight);

    canvas.toBlob(
      (blob) => {
        resolve(blob);
      },
      type,
      quality
    );
  });
}

2、使用響應式圖片

針對不同設備，使用不同大小的圖片，減少不必要的頁面流量，可以使用以下所示HTML/CSS代碼實現響應式圖片。

<picture>
  <source media="(min-width: 768px)" srcset="large-image.jpg">
  <source media="(min-width: 576px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="橙色花">
</picture>

img { max-width: 100%; height: auto; }

3、使用WebP格式

WebP是一種新型圖像格式，由Google開發。相對於JPG和PNG格式，WebP圖片體積更小，加載速度更快。以下是使用WebP格式的代碼：

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="橙色花">
</picture>

二、 使用CSS和JavaScript技巧

1、使用CDN

使用CDN可以通過將腳本文件保存在分布式網絡上，加快加載速度。以下是使用CDN的例子：

<script src="https://cdn.example.com/javascript.js">

2、減少HTTP請求

HTTP請求是加載時間最長的因素，可以減少頁面中的HTTP請求次數來加速加載時間。以下是如何減少HTTP請求：

• 合併文件：通過將CSS和JavaScript文件合併，可以減少HTTP請求
• 使用CSS雪碧圖：通過將多張小圖合併成一張大圖，可以減少HTTP請求

3、延遲加載

將不必要的或較重的資源延遲加載，優化首次渲染的加載時間。以下是延遲加載的例子：

<img class="lazyload" data-src="image.jpg" alt="橙色花">

<script>
  // 使用IntersectionObserver實現圖片懶加載
  var options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.1,
  };

  var observer = new IntersectionObserver(function (entries, observer) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        var lazyImage = entry.target;
        lazyImage.src = lazyImage.dataset.src;
        observer.unobserve(lazyImage);
      }
    });
  }, options);

  document.querySelectorAll(".lazyload").forEach(function (lazyImage) {
    observer.observe(lazyImage);
  });
</script>

三、優化服務器/後台

1、啟用HTTP/2協議

HTTP/2協議可以顯著減少頁面加載時間，HTTP/2協議可以同時對多個文件進行傳輸。因此，可以減少HTTP請求和提高服務器響應速度。

2、啟用Gzip壓縮

啟用Gzip壓縮可以減少網頁的傳輸時間。如下代碼所示，可以通過修改Web服務器配置來啟用文件Gzip壓縮。

// Apache服務器Gzip壓縮
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>

// Nginx服務器Gzip壓縮
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

3、啟用緩存

啟用緩存可以減少從服務器上獲取文件的次數。以下是如何啟用緩存的代碼。

// Apache服務器緩存
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/png "access plus 1 year"

// Nginx服務器緩存
location / {
  root /path/to/root;
  expires 1h;
}

四、結語

通過上述的技巧，您可以提高網站性能，提升用戶體驗，同時增加SEO排名。在實際項目中，我們可以根據實際情況綜合使用各項技巧，來達到最佳的性能和用戶體驗。