如何提高网站页面的速度?

加半个网页就是加载代码,各种文件和一些因素,所以要考虑这些因素:

1.合并Js文件和CSS。

将JS代码和CSS样式合并到一个文件中,不仅可以简化代码,还可以在执行JS文件时进行多次“Get”请求,从而延长加载速度。合并JS文件后,Get请求的数量自然会减少,加载速度也会提高。

2.精灵图片技术

Spriting是一种网页图片应用处理方法,将一个页面中涉及到的所有零散图片都包含到一个大图中,然后通过CSS技术显示出来。这样在访问页面的时候,加载的图片就不会像以前那样一张一张地显示,可以减少整个页面的图片大小,CSSSprites可以很好地减少页面的http请求,从而大大提高页面的性能。国内很多人称之为cssSprites,已经存在很久了,很多大型网站都在使用,尤其是一些所有页面都存在的图标用的比较多,大大提高了加载速度。

3.压缩文本和图片

gzip等压缩技术可以有效减少页面加载时间。包括HTML、XML、JSON(JavaScript对象符号)、JavaScript和CSS等。,压缩率可以在70%左右。文字压缩用的比较多,一般直接在空间打开就行了,图像压缩比较随意,很多都是直接上传的,但是压缩的空间还是很大的。

4.延迟显示可视区域之外的内容。

为了确保用户可以更快地看到可见区域中的网页,并延迟加载或显示可见区域之外的内容,以及避免页面变形,可以使用占位符标签来设置正确的高度和宽度。比如WP的jQueryImage LazyLoad插件,当用户停留在折叠上方时,无法加载折叠上方下方的任何图片信息,只有当用户向下滚动鼠标时,这些图片才会开始加载。这明显提高了可视区域的加载速度,改善了用户体验。

5.确保首先加载功能图片。

网站主要考虑可用性的重要性。要提前加载一个功能按钮,用户进入下载页面。一个只需要8s的下载,需要5s等待,找到下载按钮图片。谁能受得了?

6、重新排列行动号召按钮

其实这个和上面那个差不多,从用户体验速度出发,跳过网页整体加载速度。速度没变,只是让一些动作按钮提前了。行动号召按钮通常设计在页面的底部,这对用户来说并不总是好的。买家需要等到底部加载后再点击下一步操作。您可以调整CTA按钮的位置或使用滑动图片按钮。很多大型购物网站都把购物车加入这种类型。

7.图像格式优化

不恰当的图像格式是导致加载速度变慢的常见原因。正确的图片格式可以让图片缩小几倍,如果用最好的格式保存的话。它可以节省大量的带宽,减少处理时间,并大大加快页面加载速度,这是一个非常常见的做法。

8.使用渐进式JPEGs

ProgressiveJPEGs图片是JPEG格式的一种特殊变体,名为“高级JPEG”。创建高级JPEG文件时,数据是这样排列的:加载图像时,一开始只显示模糊的图像,随着数据的加载,图像逐渐变得清晰。相当于GIF格式的交织图。高级JPEG主要是为使用调制解调器的慢速网络设计的,快速网络的用户通常不会意识到它和普通JPEG图像的区别。对于网速慢的用户来说,这无疑有着不错的体验。

9.简化代码

这可以说是最直接的方法,也用的很多。要把网页代码瘦身,删除不必要的重码,比如不必要的空格、换行符、注释等。,包括JS代码中没用的代码。其中可能有人对移除评论码有误解,甚至有人在里面堆砌关键词。

10,延迟加载和执行不必要的脚本

web页面中有许多脚本在页面完全加载之前不需要执行,因此您可以延迟加载和执行不必要的脚本。这些脚本可以在onload事件之后执行,以避免影响网页上重要内容的显示。这些脚本可能是自己网页的甲苯,往往更多的是第三方脚本。这样的脚本有很多,比如评论、广告、智能推荐、百度云图片、分享等。这些脚本可以在主要内容加载后执行。

11,使用AJAX

AJAX,即“异步Javascript +XML”,指的是一种创建交互式web应用的web开发技术。AJAX可以通过在后台与服务器交换少量数据,使网页异步更新。这意味着您可以更新网页的一部分,而无需重新加载整个网页。如果需要更新内容,传统网页(没有AJAX)必须重新加载整个网页。

12,自动页面性能优化

自动化页面性能优化意味着使用工具。有很多工具可以加快网站的速度。这里Radware推荐了自己的RadwareFastView,算是给自己打了个广告。这里不多说了。