提升网站速度的实用技巧:图片优化与用户行为分析

2024-11-22
来源:网络整理

3、针对用户行为分析,可以在当前页面加载下一页资源,提高速度。

8. 压缩图片

图片是占流量最多的资源,尽量避免使用。使用它们的时候,选择最合适的格式(根据满足要求的前提来判断大小),合适的大小,然后使用智图压缩,同时在代码中使用,以按需要显示。

1.使用智能地图

2.使用其他方法替换图片(使用CSS3;使用SVG;使用)

3. 使用

4.选择合适的图片(webP优于JPG;PNG8优于GIF)

5.选择合适的尺寸(不大于第一次加载;根据手机屏幕,一般宽度不宽于640)

另外,马海翔提醒大家:图像尺寸过度压缩影响图像显示效果。

9. 减少

会影响加载速度,所以不使用静态资源域名。

10.避免重定向

重定向会影响加载速度,因此请正确设置服务器以避免重定向。

11.异步加载第三方资源

不可控的第三方资源会影响页面的加载和显示,所以第三方资源必须异步加载。

脚本执行优化

脚本处理不当会阻塞页面加载和渲染,因此使用时需要注意以下几点:

1、CSS写在头部,写在尾部或者异步。

2. 避免图像和其他内容的源代码为空。空Srcs会重新加载当前页面,影响速度和效率。

3. 尽量避免调整图像大小。调整图片大小是指在页面、CSS等中多次调整图片大小,多次调整图片大小会导致图片多次重绘,影响性能。

4.尽量避免使用图像。如果图像没有使用图像压缩算法,文件大小会变大,渲染前必须进行解码。加载速度慢并且需要很长时间。

CSS优化

1.尽量避免在HTML标签中写入属性。

2.避免CSS表达式。 CSS表达式的执行需要跳出CSS树的渲染,所以请避免使用CSS表达式。

3. 删除空的 CSS 规则。空的CSS规则会增加CSS文件的大小并影响CSS树的执行,因此需要删除空的CSS规则。

4.正确使用属性。属性会影响页面的渲染,所以马海翔建议站长合理使用。

(1),, 不应该用在:,,, 和之后

(2),不应在以下情况后使用:-

(3), 不应在以下情况后使用:-

(4), 不应在:-* 或之后使用

5.请勿滥用。渲染时计算量比较大,尽量少用。

6.不要滥用Web字体。 Web字体需要下载、解析并在当前页面上重绘。尽可能少地使用它们。

7.不要声明太多的Font-size。 Font-size太大会导致CSS树的效率下降。

8. 当值为0时,不需要单位。为了浏览器兼容性和性能,值为 0 时不需要单位。

9.标准化各种浏览器前缀

(1).末尾不应放置前缀。

(2) 只能使用两种类型的 CSS 动画(-- 无前缀)。

(3)还有另外四个前缀:“-- -moz- -ms-no前缀”(-o- 使用内核代替,所以被淘汰)。

10. 避免让选择器看起来像正则表达式。

高级选择器需要很长时间执行并且难以阅读,因此请避免使用它们。

执行优化

1.减少重绘和回流焊

(1)避免不必要的Dom操作

(2) 尝试以变代用

(3)避免使用。

(4)、减少

2.缓存Dom的选择和计算。每次选择Dom时,都必须对其进行计算并缓存。

3.缓存列表。每次都要计算,并用一个变量来保存这个值。

4、尽量使用事件代理,避免批量绑定事件。

5. 尝试使用ID选择器,ID选择器是最快的。

6.事件优化、使用和替换,由于影响速度快,请注意响应太快容易导致误操作。

渲染优化

HTML 文档以包含文档编码信息的数据流通过网络传输。页面编码信息通常在 HTTP 响应的标头信息中或在文档内的 HTML 标记中指定。客户端浏览器只能确定页面编码。只有绘制页面后才能正确渲染页面,因此在绘制页面或执行任何代码之前,大多数浏览器(ie6、ie7、ie8除外)都会缓冲一定数量字节的数据来查找编码信息。不同的浏览器预先缓冲的字节数是不同的。

1.HTML的使用

为了加快页面渲染速度,请使用以下代码:

 

2.减少Dom节点

Dom节点过多会影响页面渲染,因此应尽量减少Dom节点。

3.动画优化

(1)尝试使用CSS3动画。

(2)合理使用电子动画代替。

(3)适当使用动画。 5个元素以内使用CSS动画,5个以上元素使用动画(iOS8中可以使用)。

4.高频事件优化

,事件可能会导致多次渲染。

(1)使用e监视帧变化,以便在正确的时间进行渲染。

(2)增加响应变化的时间间隔,减少重绘次数。

5.GPU加速

CSS中的以下属性(CSS3、CSS3 3D、、、、)用于触发GPU渲染,请合理使用。

另外,过度使用还会导致手机电量消耗过多。

它只是一种方法和手段,并不是万能的。尤其是思考如何适应移动设备是对的,但前提必须是基于PC网站框架结构和内容。保证内容的一致性是解决痛点的唯一途径。这个时候,大家去了解“所有适合在移动终端上展示的网站”,并不是从高处去了解,而是从最低处去了解,如何展示一个满足部分移动用户体验和需求的移动界面。

总结

一个好的产品不仅仅在于它的外表,“内在的东西”也很重要。兼具内在和外在品质的产品才是最好的,你觉得呢?

分享