网站优化思路在不到一秒的时间内加载网页

哈德森sir

发布于 2024-05-17 09:48:31

790

发布于 2024-05-17 09:48:31

文章被收录于专栏：哈德森博客哈德森博客

如何毫不费力地提高网站加载时间？哪些优化和改进可以帮助加快页面加载速度？以网页为例，证明可以在不到一秒的时间内下载。

什么会降低网站性能？

页面加载时间过长的主要原因是下载第三方文件（样式、脚本、图片、字体）。

让我们来看看当您访问该页面时会发生什么：

在页面加载时，在头部或正文处连接的每个文件都需要宝贵的毫秒，有时甚至需要几秒钟的时间。页面上使用的图片是一次性加载的，尽管我们还没有滚动到它们。

可以优化什么？

CSS的

将压缩样式表，并将它们直接内联插入到 HTML 文档中。

脚本

尝试使用尽可能少的第三方 JavaScript 库，但如果离不开它们，请使用缩小版本。

    <script src="/assets/slick.min-72c6a94....js"></script>

字体

您还应该了解，您连接的任何自定义字体都会使页面加载时间增加半秒。因此，强烈建议默认使用字体。

但是，如果您无法使用默认字体，则最好在页面加载后上传它们。您可以在 *Font Face Observer 的帮助下执行此操作。

SVG的

您可以将页面上的所有 SVG 文件指定为 HTML 元素，并将它们内联粘贴到 HTML 文档中。

图像

您可以做的第一件事是压缩所有图像。有些图片可以在不损失质量的情况下进行压缩。为此，我们可以使用在线服务 TinyPNG。

无需一次下载所有图像。当用户滚动页面并且图像出现在页面上时，我们可以上传图像。让我们为此编写一个简单的脚本：

只是获取带有类名 .lazy 的页面的所有图像

    var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));

Our function is to substitute data attributes

    var lazyLoad = function() {
        if (active === false) {
          active = true;

    setTimeout(function() {
            lazyImages.forEach(function(lazyImage) {
              lazyImage.src = lazyImage.dataset.src;
              lazyImage.srcset = lazyImage.dataset.srcset;
              lazyImage.classList.remove('lazy');

    document.removeEventListener('scroll', lazyLoad);
              window.removeEventListener('resize', lazyLoad);
              window.removeEventListener('orientationchange', lazyLoad);
            });

    active = false;
          }, 500);
        }
      };

添加用于滚动、调整大小和方向更改的 addEventListener

    document.addEventListener('scroll', lazyLoad);
    window.addEventListener('resize', lazyLoad);
    window.addEventListener('orientationchange', lazyLoad);

现在，当您转到该页面时，您将不会浪费时间下载不在用户视野中的所有图片。但是当用户滚动我们的页面时，图片将被加载而不会丢失加载时间。