SEO优化知识
首页 > SEO优化 > SEO优化知识 > 3.优化建议Lighthouse比较人性化的点在于他既提出了问题

3.优化建议Lighthouse比较人性化的点在于他既提出了问题

发布时间:2021-04-07    来源:广州网站优化公司     浏览次数:

3.优化建议

灯塔更加人性化,因为他不仅提出了问题,而且提出了解决方案。

三、 PageSpeed

1.使用PageSpeed

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

2.分析报告

四、 Chrome DevTools-Network

1.关于网络,我们重点关注3个标记点

2.计时也是优化的必不可少的工具:

另外:TTFB:等待初始响应所花费的时间网站优化公司,也称为第一个字节的时间,是我们判断服务器和网络状况的重要指标。

这次将捕获服务器的往返延迟以及等待服务器传递响应所花费的时间。

五、 Chrome DevTools-性能

1.概述

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

3.概述详细说明

需要特别注意。实际上网站优化公司企业网站建设,“效果”工具中的每种颜色都有其自己的含义。

提示:

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

4.火焰图

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

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

注意红色警告:

六、 Chrome开发者工具-显示第三方徽章

在许多情况下,这不是我们网站本身的问题。您使用的第三方资源可能会拖累网站的性能。因此,我们需要使用“显示第三方徽章”来进行故障排除。

1.测试站点:

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

3.开放网络,请注意资源前面的彩色标志

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

七、 Chrome DevTools阻止请求网址

对于不确定在项目中是否有用的资源,我们可以使用“阻止请求URL”将其排除。

1.选择资源右键单击阻止请求URL

防止加载某些资源,并使用变量控制方法来解决页面性能问题。

八、 Chrome DevTools-Coverage

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

2.输入:显示覆盖范围

3.找到相应的文件,您可以看到该文件的左侧已经使用了一些代码

解决方案也非常简单:使用Webpack尽可能地解压缩,将大小控制在40KB以下,并删除那些未使用的代码。

九、 Chrome DevTools-DOM

我们经常谈论优化Dom,那么什么范围的节点控制是合理的?

查看所有DOM节点的数量:

document.querySelectorAll('*').length

查看子元素的数量:

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

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

十、 Chrome DevTools-呈现

关于页面重新渲染的影响,我们不会说太多。那么您如何知道页面的渲染过程呢?我们可以通过渲染直观地查看它。

1.打开“渲染”选项

2.刷新页面

绿色区域越重,渲染越重复,并且对DOM进行了优化以减少无效渲染。

十一、 Chrome DevTools-Layer

您可能很好奇,为什么要查看图层?

这是因为我们经常在不知不觉中搞乱了图层关系或添加了不适当的图层。

1.打开控制面板:Command + Shift + P 2.选择“图层”选项

对吗?分层问题显然在我们面前〜

十二、摘要

通过优化工具,我们可以轻松分析网站的位置。之后,您可以快速开始优化以使网站以高性能运行。优化无非就是如此。

在后续工作中,我们将对一些与优化相关的原理和细节有深入的了解。如果您遇到与优化相关的问题,欢迎一起讨论并取得进展。

版权声明:该文章首次发布在Jartto的博客上:,在转载该文章时,请务必以超链接的形式指明该文章的来源,作者信息和此版权声明。

“观看和转发”是最大的支持

上一篇:为什么要为企业的关键组成部分承担性能和安全性问题

下一篇:广州网站优化如何提高网站对百度友好的友好性?

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x