全网AI资源网站搭建

电脑端+手机端+微信端=数据同步管理

免费咨询热线:13114099110

网站优化实战:工欲善其事,必先利其器

发布时间:2023-11-09 10:03   浏览次数:次   作者:派坤优化

工欲善其事,必先利其器。 在《网站优化实践:》中我们提到了一些优化相关的经验,并没有讨论优化工具。 本节就让我们一起开始练习吧!

一、总结

关于优化工具,我们主要从“性能评估工具”和“优化工具”两个方面入手。

1. 绩效评估工具

2、优化工具我们主要依靠“ ”,大致如下:

二,

1. 安装

- 更多工具 - 扩展 - 打开在线商店 -

2.插件-生成报告

报告对于我们来说是一个重要的参考指标,是网站评估的常用方法。

当然,网站也会有不同的类别网站优化软件,侧重不同的指标。 今后我们将继续讨论“如何制定合理的网站优化绩效指标”。

3、优化建议

更人性化的是,他不仅提出问题,还提出解决方案的建议。

三,

1.使用

我们可以在“ ”菜单栏找到并打开它:

2.分析报告

四、-

1. 关于我们关注标签的三件事

2、也是优化不可或缺的工具:

补充说明: TTFB:等待初始响应所花费的时间,也称为到达第一个字节的时间,是我们判断服务器和网络状态的重要指标。

该时间将捕获到服务器的往返延迟,以及等待服务器传送响应所花费的时间。

五, -

一、概述

2.布局主要由4部分组成

3. 详细说明

需要注意的是,工具中的每种颜色实际上都有其自己的含义。

尖端:

使用隐身模式可以减少扩展程序的干扰。

4. 火焰图

Main:显示主线程的运行状态。 X 轴代表时间,每个条代表一个事件。 条形越长,事件花费的时间就越长。 Y 轴表示调用堆栈。

在堆栈中,上面的事件调用下面的事件。

注意红色警告:

6.-显示第三方

很多时候,并不是我们网站本身的问题。 您使用的第三方资源可能会降低网站性能。 因此网站优化软件,我们需要使用Show Third Party来排查问题。

1、测试地点:

2. 打开控制面板:+ Shift + P

3.打开并注意资源前面的彩色标识

标记第三方资源,删除或替换影响性能的资源。

7. - 阻止 URL

对于项目中不确定是否有用的资源,我们可以使用Block URL将其排除。

1.选择资源-右键-屏蔽URL

阻止某些资源加载并控制变量以解决页面性能问题。

八, -

1. 打开控制面板:+ Shift + P

2. 输入:显示

3.找到对应的文件,可以看到文件左侧已经标注了一些代码的用法。

解决办法也很简单:尽可能解压,大小控制在40KB以下,去掉不用的代码。

9.-DOM

我们经常提到优化Dom,那么节点控制的合理范围是多少呢?

查看所有DOM节点的数量:

document.querySelectorAll('*').length

检查子元素的数量:

document.querySelectorAll('body > *').length

通常,寻找仅在需要时创建 DOM 节点并在不再需要时销毁它们的方法。

十、-

关于重新渲染对页面的影响我们就不多说了。 那么如何知道页面的渲染过程呢? 我们可以通过肉眼观察。

1.打开选项

2.刷新页面

绿色区域越重,重复渲染的次数就越多,可以通过优化DOM来减少无效渲染。

11.-层

您可能想知道,为什么要查看图层?

这是因为我们经常在没有意识到的情况下搞乱图层关系,或者添加不适当的图层。

1. 打开控制面板:+Shift+P2。 选择图层选项

图层问题清晰地摆在你的面前吗?

12. 总结

通过优化工具,我们可以轻松地对网站进行定位分析。 之后可以快速进行优化,使网站高性能运行。 优化无非就是这样。

我们以后会详细了解一些优化相关的原理细节。 如果您有优化相关的问题,欢迎大家讨论,共同进步。

版权声明:文章首发于博客:。 转载文章时,请务必以超链接的形式注明文章出处、作者信息及本版权声明。

结尾

如果你觉得这篇文章不错

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。