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

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

图片[1]-网站优化思路在不到一秒的时间内加载网页-哈德森博客

什么会降低网站性能?

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

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

图片[2]-网站优化思路在不到一秒的时间内加载网页-哈德森博客

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

可以优化什么?

CSS的

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

图片[3]-网站优化思路在不到一秒的时间内加载网页-哈德森博客

脚本

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

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

字体

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

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

SVG的

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

图片[4]-网站优化思路在不到一秒的时间内加载网页-哈德森博客

图像

您可以做的第一件事是压缩所有图像。有些图片可以在不损失质量的情况下进行压缩。为此,我们可以使用在线服务 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);

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

总结

今天的网站已经变得更加复杂和多样化。但尽管如此,它们仍然可以在不到一秒的时间内启动。只需遵循所述的优化步骤即可。

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=5vbhp91f157x
THE END
喜欢就支持一下吧
点赞14 分享
评论 共1条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片
    • 头像Joey Hoppe0