提高网站性能的有效技巧

如今，快速的网站加载速度对于提升用户体验和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排名。在实际项目中，我们可以根据实际情况综合使用各项技巧，来达到最佳的性能和用户体验。