启新网站SEO优化一、概要关于优化工具，我们主要从两个方面入手：「性能评估工具」和「优化工具」。1.性能评估工具LighthousePageSpeedYSlow2.我们主要依赖优化工具「ChromeDevTools」，大致如下：NetworkPerformanceShowThirdPartyBadgesBlockRequestURLCoverageDOMRenderingLayer二、Lighthouse1.Lighthouse安装ChromeSetting-打开更多工具-扩展程序-打开Chrome网上应用店-Lighthouse2.插件-生成报告报告是我们的重要参考指标，这是网站评估的常用方法。当然，网站会有不同的类别，关注指标也会不同。我们将继续讨论后续工作「如何制定合理的网站优化性能指标」。当然，网站会有不同的类别，关注指标也会不同。我们将继续讨论后续工作「如何制定合理的网站优化性能指标」。3.优化建议Lighthouse更人性化的一点是，他不仅提出了问题，还提出了解决方案。三、PageSpeed1.使用PageSpeed2.分析报告四、ChromeDevTools-Network1.关于Network我们重点关注三个标记2.Timing也是优化不可缺少的工具:补充说明:TTFB：等待初始响应所用的时间，又称第一字节时间，这是我们判断服务器和网络状况的重要指标。此时将捕捉到服务器往返的延迟时间，以及等待服务器传输响应的时间。五、ChromeDevTools-Performance1.概览2.布局主要由四部分组成控制面板：记录、清除、配置记录过程中需要捕获的信息Overview：高级总结页面性能，页面加载火焰图：CPU堆叠跟踪的可视化总结:饼图记录各部分的耗时情况3.Overview详解FPS每秒帧数。绿色竖线越高，FPS越高。绿色竖线越高，FPS越高。FPS图表上的红色块表示长时间帧，很可能会出现卡顿。CPUCPU资源。该面积图表示消耗CPU资源事件类型。NET每个彩色横杠都表示一种资源。横杠越长，检索资源的时间越长。每个横杠的浅色部分表示等待时间(从请求资源到第一字节下载时间)。深色部分表示传输时间(下载第一个和最后一个字节之间的时间)。需要特别注意，Performance工具中的每种颜色实际上都有自己的含义。HTML蓝色的文件。脚本是黄色的。款式表为紫色。绿色媒体文件。灰色是其它资源。小技巧：减少无痕模式Chrome扩展程序会干扰应用。4.火焰图NetworkNetwork在这里，我们可以看到我们资源加载的顺序。什么时间加载了什么资源，通过这些，我们更直观的知道资源是否并行加载。Frames上述页面帧情况。InteractionsTimings以下五个指标是我们优化的方向FirstPaintDOMContentLoadedEventOnloadEventFirstContentfulPaintFirstMeaningfulPaintMain：展示主线程的运行状态。X轴代表时间，每个长条代表一个event。长条越长代表这个event时间越长。Y轴代表调用栈callstack。在栈里，上面event调用以下内容event。JSHeapJavaScript大部分数据都存储在运行过程中Heap中，所以JavaScript性能分析另一个比较重要的方面是内存，也就是堆的分析。打开Performance监视器六、ChromeDevTools-ShowThirdPartyBadges在很多情况下，这不是我们网站本身的问题。您使用的三方资源可能会拖累网站的性能。因此，我们需要使用它ShowThirdPartyBadges进行调查。1.测试站：https://techcrunch.com/2.打开控制面板：CommandShiftP3.打开Network，注意资源前的彩色标志标记了三方资源，删除或替换影响性能的东西。七、ChromeDevTools-BlockRequestURL我们可以使用项目中不确定是否有用的资源BlockRequestURL来排除。1.选择资源-右键-BlockRequestURL防止一些资源加载，控制变量法来调查页面性能。八、ChromeDevTools-Coverage1.打开控制面板：CommandShiftP2.输入：ShowCoverage3.找到相应的文件，可以看到文件左侧标记了一些代码的使用解决方案也很简单:尽量通过Webpack拆包，控制大小40KB以下，删除未使用的代码。九、ChromeDevTools-DOM我们经常提到优化Dom，那么节点控制的合理范围是什么呢？总共于1500个节点最大深度为32个节点不要有子节点超过60个节点的父节点查看所有DOM节点数：document.querySelectorAll('*').length检查子元素数：document.querySelectorAll('body>*').length通常，只有在需要时才能找到创建DOM当不再需要时，节点的方法会被销毁。十、ChromeDevTools-Rendering我们就不多说重渲对页面的影响了。十、ChromeDevTools-Rendering我们就不多说重渲对页面的影响了。那么如何知道页面的渲染过程呢？我们可以通过Rendering可视化查看。1.打开Rendering选项2.刷新页面通过优化，绿色区域越重，重复渲染的次数就越多DOM减少无效渲染。十一、ChromeDevTools-Layer你可能很好奇，为什么要检查图层？这是因为我们经常在不知不觉中混淆图层关系，或者增加不合适的图层。1.打开控制面板：CommandShiftP2.选择Layer选项图层问题是否清晰地摆在眼前~十二、总结通过优化工具，我们可以很容易地定位和分析网站。之后可以快速优化，让网站高性能运行。优化就是这样。
网站建设公司" />
