这篇文章主要介绍了Web性能优化的技巧有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Web性能优化的技巧有哪些文章都会有所收获,下面我们一起来看看吧。
1. 使用文本压缩
使用文本压缩,可以最大程度地减少通过网络传输的字节数。有几种压缩算法。gzip[1] 是最受欢迎的,但Brotli[2] 是一种更新甚至更好的压缩算法。如果要检查服务器是否支持Brotli,则可以使用 Brotli.pro[3] 工具。
如果你的服务器不支持 Brotli ,则可以按照以下简单指南进行安装:
Nginx on Linux[4]
Apache[5]
NodeJs - Express[6]
这是你能够免费得到的第一个优化手段,大多数托管平台或 CDN 默认都会提供压缩。
2. 图像压缩
未压缩的图像是潜在的巨大性能瓶颈。如果不对图像进行压缩,将会消耗很大的带宽。有几种有用的工具可用于快速压缩图像,而不会损失可见质量。我通常使用 Imagemin[7]。它支持多种图像格式,你可以在命令行界面下使用[8]或使用 npm 模块[9]。
imagemin img
延迟不重要的CSS
非关键的 CSS 不需要立即进行处理。浏览器可以在 onload 事件之后再加载它,使用户不必等待。
7. JavaScript 异步及延迟加载
JavaScript 是 HTML 解析器阻止的。浏览器必须等待 JavaScript 执行才能完成对 HTML 的解析。但是你可以告诉浏览器等待 JavaScript 执行。
异步加载 JavaScript
通过 async
属性,你可以告诉浏览器异步加载脚本。
Defer JavaScript
defer
属性告诉浏览器在 HTML 解析器完成文档解析之后再运行脚本,但在事件发生之前,将会触发DOMContentLoaded。
调整内联脚本的位置
内联脚本会立即执行,浏览器对其进行解析。因此,你可以将它们放在 HTML 的末尾,紧接在 body 标记之前。
8. 使用资源提示加快交付速度。
资源提示[20]能够诉浏览器以后可能加载什么页面。该规范定义了四个原语:
preconnect(预连接)
dns-prefetch(DNS预取)
prefetch(预取)
prerender(预渲染)
另外,关于资源提示,我们将 preload[21] 关键字用于 link
属性。
preconnect
下面的代码告诉浏览器你要建立与另一个域的连接。浏览器将为此连接做准备。使用预连接链接标签可以将加载时间缩短 100–500 ms。那么什么时候应该用它呢?直白的说:当你知道在哪里拿东西但不知道该怎么拿。比如哈希样式文件(styles.2f2k1kd.css
)这类的东西。
dns-prefetch
如果你想告诉浏览器将要建立与非关键域的连接,则可以用 dns-prefetch
进行预连接。这大约能够为你节省 20–120 毫秒。
prefetch
使用预取,你可以告诉浏览器下载链接标记中所指的整个网站。你可以预取页面或资源。预取在加快网站速度方面非常有用,但是要注意有可能降低网站速度的情况。
低端设备或网速较慢的情况下可能会遇到问题,因为浏览器会一直忙于预取。你可以考虑将预取与自适应加载结合使用,也可以将智能预取与 quicklink[22] 和 Guess.js[23] 结合使用:
prerender
使用预渲染时,将会先加载内容,然后在后台渲染。当用户导航到预渲染的内容时,内容会立即显示。
preload
借助预加载功能,浏览器会得到引用的资源很重要的提示,应尽快获取。现代浏览器很擅长于对资源进行优先级排序,所以应该只对关键资源使用预加载。可考虑用预连接和预取代替,或者尝试使用instant.page[24]。
9. 使用 Google Fonts
Google Fonts 很不错。他们提供了优质的服务,并且应用广泛。如果你不想自己托管字体,那么 Google 字体是一个很不错的选择。但是你应该注意如何实现它们。Harry Roberts[25] 写了一篇非常出色的文章,内容涉及怎样用 Google Fonts 来为网站加速[26]。强烈建议阅读。
如果你只想知道怎样用,可以通过下面的代码段进行 Google 字体集成,但功劳归功于 Harry。
10. 用 service worker 来缓存你的资源
service worker 是浏览器在后台运行的脚本。缓存是最常用的功能之一,也是你最应该使用的功能。我认为这不是选择问题。通过 service worker 实施缓存,可以使用户与你的站点之间的交互速度更快,而且即使用户断网也可以访问你的网站。
关于“Web性能优化的技巧有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Web性能优化的技巧有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。