1秒加载的网站,你需要做到这些

Cover image for My website now loads in less than 1 sec! Here's how I did it! ⚡

网站加载的速度一直都是一个很值得研究的性能问题,这里我们提供一些小技巧,我们曾使用这些技巧让一个网站的加载速度只要0.8s,lighthouse的性能得分到97分。

技巧1 不要使用大的DOM tree

假如你的DOM tree非常大,那么显然性能是不会太好的。

Memory性能

使用一个通用的query选择器比如document.querySelectorAll(‘li’),这样能欧股使用memory来存储多个节点。

网络效率和加载性能

一个有很多节点的大的DOM tree(尤其包含很多开始并看不到的部分),必然会加大加载时间。

运行时的性能

当用户和网页交互的时候,浏览器需要不停计算节点的位置和style,那些复杂的style必然会导致rendering变慢。

技巧2 不要使用很多的网络加载

你的网页的总加载大小应该小于1600KB,为了达到这个效果,你可以做下面这些:

  • 在需要的地方才发请求
  • minify和压缩网络加载的内容
  • 把JPEG的压缩级别设置到85

技巧3 不用使用GIFs

假如你想使用动态的图,那么不要使用GIF,使用MPEG4/WebM格式吧。

假如你需要下面这些性能:

  • 自动播放
  • 不停循环
  • 没有声音

其实HTML5中<video>是可以实现这样的效果的

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

技巧4 预加载关键的请求

比如你的页面加载了一个js文件,这个js文件又需要加载别的JS和CSS文件,整个页面其实需要等到所有这些资源加载完成才能显示。我们可以通过以下代码让浏览器早一点加载,你可以通过preload来实现:

<link rel="preload" href="style.css" as="style">

技巧5 不要使用多页面的重定向

当浏览器请求了重定向的资源的时候,服务器会返回一个HTTP的response,这个时候,浏览器需要再使用一个HTTP到新的位置去请求资源,这样一来,因为网络的延迟必然会造成性能的下降。

技巧6 预连接到需要的内容

使用preconnect关键字,可以让浏览器今早地和一些重要的第三方建立连接:

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

有了这个关键字之后,浏览器就知道你是希望今早启动这个进程的。

技巧7 对图像进行有效编码

使用86级压缩JPEG就足够了,你还可以使用下面这些方法:

  • 压缩图片
  • 使用图片CDN
  • 避免GIF
  • 惰性加载图片

技巧8 Minify JS文件

所谓的minification就是把代码中的空格以及一些没有别要的代码去除掉,从而让文件的大小变小。有了minify之后,你文件的加载和解析时间都会变少。

技巧9 minify CSS文件

CSS文件中的空格其实比别的文件还要多,所以minify CSS文件,必然会节约很多空间。另外还有一些小的技巧,比如把颜色的值用一个小的值来替代,比如#000000和#000是一样的,但是大小则变小了。

技巧10 调整图像大小

众所周知,我们的网页其实最大的资源大概就是图像了,很多时候他比文字文件大多了。所以永远不要加载比屏幕上显示的还大的图片,你可以这样做:

  • 使用响应式图像
  • 使用图片CDN
  • 使用SVG而不是icon

好了,希望这篇文章能帮你在优化网站的道路上找到一些新的灵感。

参考文章:https://dev.to/cmcodes/my-website-now-loads-in-less-than-2-sec-here-s-how-i-did-it-hoj

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *