10个快速优化Web性能的手段

时间: 2020-09-03阅读: 141标签: 性能

优化网站的性能需要花费大量的时间,并且如果要根据自己的需求进行优化则花费的时间可能更多。

在本文中,我将向你展示 10 个快速优化 Web 性能的手段,能在 5 分钟内用于你自己的网站。这些捷径对你的代码库或服务器配置几乎没有什么影响。它们简单且容易实现,无需详细了解它们的原理,并且能够对你的性能产生重大影响。


1. 使用文本压缩

使用文本压缩,可以最大程度地减少通过网络传输的字节数。有几种压缩算法。 gzip 是最受欢迎的,但 Brotli 是一种更新甚至更好的压缩算法。如果要检查服务器是否支持Brotli,则可以使用 Brotli.pro 工具。

如果你的服务器不支持Brotli,则可以按照以下简单指南进行安装:

这是你能够免费得到的第一个优化手段,大多数托管平台或 CDN 默认都会提供压缩。


2. 图像压缩

未压缩的图像是潜在的巨大性能瓶颈。如果不对图像进行压缩,将会消耗很大的带宽。有几种有用的工具可用于快速压缩图像,而不会损失可见质量。我通常使用 Imagemin。它支持多种图像格式,你可以在命令行界面下使用或使用 npm 模块。

imagemin img/* --out-dir=dist/images

你可以将 npm 模块用到 webpack、gulp 或 grunt 等打包程序中。

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['img/*.jpg'],
      {
        destination: 'dist/img',
        plugins: [
          imageminMozjpeg({quality: 60}),
        ]
      }
  );
  console.log(files);
})();

一般情况下可将 4MB 大小的文件减小到 100kB。可以在 Github中查看演示代码

单位文件大小,无压缩压缩文件大小文件大小减少百分比
Bytes4156855 Bytes103273 Bytes-97%
MB/kB4MB103 kB-97%

3.图片格式

使用现代图像格式可以真正提高性能。 WebP 图像比 JPEG 和 PNG 都小,通常小 25%~35%。WebP 得到了浏览器的广泛支持。

我们使用 imagemin npm 包并为其添加WebP 插件。以下代码可将图像的 WebP 版本输出到 dist 文件夹中。

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async() => {
  const files = await imagemin(
      ['img/*.jpg'],
      {
        destination: 'dist/img',
        plugins: [
          imageminWebp({quality: 50})
        ]
      }
  );
  console.log(files);
})();

再看一下文件大小:

单位文件大小,无压缩压缩文件大小文件大小减少百分比
Bytes4156855 Bytes58940 Bytes-98%
MB/kB4MB59 kB-98%

结果表明,与原始图像相比,文件大小减少了 98%,并且与压缩的 JPG 文件相比,WebP 更加明显的压缩了图像。 WebP 版本比压缩的 JPEG 版本小 43%。


4. 图像惰性加载

图像惰性加载是一种在以后加载暂时不显示在屏幕上的图像的技术。当解析器遇到图像时立即加载的话会减慢初始页面的加载速度。使用惰性加载,可以加速页面加载过程并稍后加载图像。使用 lazysizes 可以轻松完成此操作。你可以把下面这样的代码

<img src="image.jpg" alt="">

改为:

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

lazysizes 库会处理其余的工作,可以使用浏览器进行验证。打开你的站点并找到图像标签。如果该 class 从 lazyload 变成了 lazyloaded,则意味着它可以正常工作。


5. 缓存你的资源:HTTP 缓存头

缓存是一种可以快速提高网站速度的方法。它减少了老用户的页面加载时间。如果你有权限访问服务器缓存,则用起来非常简单。

你可以使用以下API进行缓存:


6. 内联关键 css:推迟非关键 css

CSS 是渲染阻止的。这意味着浏览器必须先下载并处理所有 CSS 文件,然后才能绘制像素。通过内联关键的 CSS,可以大大加快此过程。

你可以按照以下步骤进行操作:

识别关键的 CSS

如果你不知道你的关键CSS是什么,则可以通过 CritcalCriticalCSSPenthouse 来帮忙。这些库都用来从给定视口中可见的 html 文件中提取 CSS。

下面是使用 criticalCSS 的例子。

var criticalcss = require("criticalcss");

var request = require('request');
var path = require( 'path' );
var criticalcss = require("criticalcss");
var fs = require('fs');
var tmpDir = require('os').tmpdir();

var cssUrl = 'https://web.dev/app.css';
var cssPath = path.join( tmpDir, 'app.css' );
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close', function() {
  criticalcss.getRules(cssPath, function(err, output) {
    if (err) {
      throw new Error(err);
    } else {
      criticalcss.findCritical("https://web.dev/", { rules: jsON.parse(output) }, function(err, output) {
        if (err) {
          throw new Error(err);
        } else {
          console.log(output);
          // 将其保存到文件以进行第 2 步
        }
      });
    }
  });
});

内联关键CSS

html 解析器遇到 style 标签时会立即处理关键的 CSS。

<head>
  <style>
  body {...}
  /* ... 其余的关键CSS */
  </style>
</head>

延迟不重要的CSS

非关键的 CSS 不需要立即进行处理。浏览器可以在 onload 事件之后再加载它,使用户不必等待。

<link rel="preload" href="/assets/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/styles.css"></noscript>


7. JavaScript 异步及延迟加载

JavaScript 是 HTML 解析器阻止的。浏览器必须等待 JavaScript 执行才能完成对 HTML 的解析。但是你可以告诉浏览器等待 JavaScript 执行。

异步加载 JavaScript

通过 async 属性,你可以告诉浏览器异步加载脚本。

<script src="app.js" async></script>

Defer JavaScript

defer 属性告诉浏览器在 HTML 解析器完成文档解析之后再运行脚本,但在事件发生之前,将会触发DOMContentLoaded。

<script src="app.js" defer></script>

调整内联脚本的位置

内联脚本会立即执行,浏览器对其进行解析。因此,你可以将它们放在 HTML 的末尾,紧接在 body 标记之前。


8. 使用资源提示加快交付速度。

资源提示能够诉浏览器以后可能加载什么页面。该规范定义了四个原语:

  • preconnect(预连接)
  • dns-prefetch(DNS预取)
  • prefetch(预取)
  • prerender(预渲染)

另外,关于资源提示,我们将 preload 关键字用于 link 属性。

preconnect

下面的代码告诉浏览器你要建立与另一个域的连接。浏览器将为此连接做准备。使用预连接链接标签可以将加载时间缩短 100–500 ms。那么什么时候应该用它呢?直白的说:当你知道在哪里拿东西但不知道该怎么拿。比如哈希样式文件(styles.2f2k1kd.css)这类的东西。

 <link rel="preconnect" href="https://example.com">

dns-prefetch

如果你想告诉浏览器将要建立与非关键域的连接,则可以用 dns-prefetch 进行预连接。这大约能够为你节省 20–120 毫秒。

 <link rel="dns-prefetch" href="http://example.com">

prefetch

使用预取,你可以告诉浏览器下载链接标记中所指的整个网站。你可以预取页面或资源。预取在加快网站速度方面非常有用,但是要注意有可能降低网站速度的情况。

低端设备或网速较慢的情况下可能会遇到问题,因为浏览器会一直忙于预取。你可以考虑将预取与自适应加载结合使用,也可以将智能预取与 quicklinkGuess.js 结合使用:

<link rel="prefetch" href="index.html" as="document">
<link rel="prefetch" href="main.js" as="script">
<link rel="prefetch" href="main.css" as="style">
<link rel="prefetch" href="font.woff" as="font">
<link rel="prefetch" href="image.webp" as="image">

prerender

<link rel="prerender" href="https://example.com/content/to/prerender">

使用预渲染时,将会先加载内容,然后在后台渲染。当用户导航到预渲染的内容时,内容会立即显示。

preload

借助预加载功能,浏览器会得到引用的资源很重要的提示,应尽快获取。现代浏览器很擅长于对资源进行优先级排序,所以应该只对关键资源使用预加载。可考虑用预连接和预取代替,或者尝试使用 instant.page

<link rel="preload" as="script" href="critical.js">


9. 使用 Google Fonts

Google Fonts 很不错。他们提供了优质的服务,并且应用广泛。如果你不想自己托管字体,那么 Google 字体是一个很不错的选择。但是你应该注意如何实现它们。 Harry Roberts 写了一篇非常出色的文章,内容涉及怎样用 Google Fonts 来为网站加速。强烈建议阅读。

如果你只想知道怎样用,可以通过下面的代码段进行 Google 字体集成,但功劳归功于 Harry。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=...&display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap" media="print" onload="this.media='all'"/>
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap"/></noscript>


10. 用 service worker 来缓存你的资源

service worker 是浏览器在后台运行的脚本。缓存是最常用的功能之一,也是你最应该使用的功能。我认为这不是选择问题。通过 service worker 实施缓存,可以使用户与你的站点之间的交互速度更快,而且即使用户断网也可以访问你的网站。

原文来自:https://dev.to/marcradziwill/10-web-performance-quick-wins-you-can-and-should-apply-in-under-5-minutes-1dj2


    站长推荐

    1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

    2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

    链接: http://www.fly63.com/article/detial/9643

    关闭

    BigPipe_高性能流水线页面技术

    BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。

    window.performance_前端性能监控

    HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析

    PHP性能优化总结

    在循环中判断时,数值判断使用恒等要比等于高效。在数组中,数组下标是字母时一定要加上单引号或双引号。因为$row[‘id‘]的效率是$row[id]的7倍。尽量不要在for循环中使用函数

    前端性能的本质是什么?

    性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限

    让你的 React 组件跑得再快一点

    React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新。大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能

    前端性能优化_css加载会造成哪些阻塞现象?

    css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

    JS如何提高展开运算符的性能?

    展开运算符或三个点,接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解,并使用这些分解部分构造一个新数组。展开运算符可以放在数组中的任何位置:

    怎样测试 JavaScript 的函数性能

    通过衡量执行某个函数所花费的时间,以“证明”某些实现比另一些实现更高效始终是一个很好的主意。这也是确保性能在进行一些修改后不受影响并找出瓶颈的好方法。良好的性能有助于获得良好的用户体验。良好的用户体验能够留住用户

    CSS优化,提高性能的方法有哪些?

    首推的是合并css文件,如果页面加载10个css文件,每个文件1k;减少css嵌套,最好不要套三层以上。不要在ID选择器前面进行嵌套;建立公共样式类

    PHP性能优化

    性能是网站运行是否良好的关键因素, 网站的性能与效率影响着公司的运营成本及长远发展,编写出高质高效的代码是我们每个开发人员必备的素质,也是我们良好的职业素养。

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!