当前位置: 首页> 优化经验> Web加载性能优化方法
Web加载性能优化方法
发布日期:2020-05-16 08:00:00

减少网站加载时间的最有效方法如下:

一、减少HTTP请求的数量:可以使用CSS sprite(也称为CSS sprite)将多个图片集成到一个图片中,并使用CSS来定位和显示它们。页面加载时,一次加载整个图形,有效降低了服务器的压力。同时,它缩短了悬停和加载图片所需的时间延迟,使用户的浏览行为更加流畅而不停顿。

二、优化图片:建议使用PNG8格式。一般来说,PNG8格式对于所有浏览器的卷压缩比和透明度兼容性都非常好。图像优化也可以从另外两个方面进行:色盘范围和压缩算法。首先,通过输出时精确的色标设置,再加上输出后的二次优化,可以达到图像质量和尺寸的极大优势。第二个优化工具是:当然,最新的格式是Google推出的webp格式。有关webp的更多信息,请参阅36kr本报告

具有以下条件的图像更适合以PNG8格式存储:1。图像上的颜色较少,主要由纯色或平滑渐变填充。2。具有较大亮度差异和强烈对比度的简单图像(如“立即购买”按钮中的背景和文本)。根据经验,通常采用Photoshop或其它软件中的矢量工具绘制出上述条件下的图像,然后保存为位图图像。

对于真实感图像或具有丰富色彩层的图像,使用JPG图像格式可以获得最佳的压缩效果。

在存储图像时,JPG或PNG主要是根据图像的颜色级别和颜色数目来选择的。一般来说,JPG用于存储色彩丰富的图像,而PNG用于存储色彩简单、对比度强的图像。但也有一些特殊情况。例如,当一些图像有丰富的颜色层,但图像的大小和包含的颜色数量有限时,PNG也可以用于存储。由于使用了更多的过滤效果,一些矢量工具也可以形成丰富的颜色层。此时,存储需要JPG。另一个原则是页面结构使用的基本视觉元素,如容器的背景、按钮、导航等,应尽量以PNG格式存储,以更好地保证设计质量。虽然其他一些内容元素,如广告横幅、产品图像等,对质量要求不是特别高,但它们可以存储在JPG中以减小文件大小。

对于图像压缩,最常见的是次有损、无损压缩。无损压缩,如去除EXIF信息、重新排列像素存储模式等;有损压缩,如合并相似像素、减少可见像素等。现在这些压缩算法可以用现成的成熟库来实现。以PHP为例,pngcrush可以用于PNG的无损压缩,pngquant可以用于PNG的有损压缩。JPEG可以使用ImageMagick和JPEG tran。这里推荐使用ImageMagick。与其他图像处理库相比,该库具有更多的可控功能,支持多种编程语言。

三、合并和压缩脚本:合并和压缩CSS和JavaScript。脚本分割可以使维护人员更容易找到相应的内容,但同时,它增加了页面链接的数量,因此可以适当地合并脚本。

使用minify压缩JS和cssmify压缩和减少CSS和JS(minify:remove space carry return等),并将多个CSS和JS文件集成到一个文件中。不要认为你的带宽不需要这样优化。合并文件比压缩文件更重要。文件合并可以减少从浏览器端连续发送新连接请求的次数。就像FTP服务器一样,多个小文件和一个大文件需要不同的时间。用PHP编写的Minify,项目地址

CSS联机压缩:

CSS﹣compressorcompressable代码段、url、文件

Cssdrive:csscompressor直观易用

JS压缩工具:

Yuicompressor Yuicompressor是一个用Java编写的压缩工具。它是由雅虎发布的。压缩是100%安全的,并且比大多数其他工具具有更高的压缩比。通用码的压缩率达到40%-60%。Yuicompressor还可以压缩CSS文件。国内的互联网公司,阿里巴巴,淘宝,百度等都使用yuicompressor内核来压缩和发布代码。

Jspackerjspacker是一个由PHP编写的压缩工具,它可以混淆代码以保护知识产权。生成的代码与ie、Firefox和其他常用浏览器兼容。国内大部分的在线工具网站都使用这种算法进行压缩,因为这种算法是用PHP编写的,正则表达式代替语句,没有语法分析内核,环境建设成本低,压缩率远低于上述两个内核,并且混淆代码页不符合开源精神。

Jsminjsmin是一个用C语言编写的轻量级JS压缩程序,它从JavaScript文件中删除注释和不必要的空格。它通常会将文件大小减少一半,从而加快下载速度。

其他方法不是为了提高性能,而是通过其他加载方法来提高用户体验:

·使用缓存的缓存可以减少对服务器的请求数并节省加载时间。因此,应在服务器端缓存所有静态资源,并尝试使用长缓存(使用时间戳更新长缓存资源)a)缓存所有可缓存资源b)使用长缓存(使用时间戳更新缓存)C)使用对CSS和JavaScript的外部引用

·按需加载将不影响第一个屏幕的资源和当前屏幕未使用的资源加载到用户需要的位置,可以大大提高重要资源的显示速度,降低总体流量PS:按需加载会导致大量重绘,影响渲染性能a)lazylodb)滚动加载C)通过mediaquery加载

·预加载大型重资源页面(如游戏)可以采用添加加载的方式,加载资源后页面会显示出来。但是,如果加载时间过长,会造成用户的流失和用户行为的分析。您可以在当前页的下一页加载资源以提高速度。A) 可感知加载(如加载到空间游戏中)b)不可感知加载(如提前加载下一页)

·减少cookie将影响加载速度,因此静态资源域名不使用cookie

·避免重定向将影响加载速度,因此通过在服务器上正确设置重定向来避免重定向

·异步加载第三方资源不可控制的第三方资源会影响页面的加载和显示,因此有必要异步加载第三方资源

参考资源:

在线咨询 电话咨询