当前位置: 西安网站设计优化网 > SEO观点>

用Google Lighthouse检查移动网站速度和SEO

用Google Lighthouse检查移动网站速度和SEO

时间:2024-05-14  作者:网站优化师

用Google Lighthouse检查移动网站速度和SEO

您经常听到的两个词是移动速度和网站速度。这并不是没有道理的,因为这两个因素是并存的。移动友好性和网站速度是我们必须处理的最紧迫的问题。测量页面速度一直以来都是一门黑手艺。我们今天使用的网站速度工具已经足够了,但是通过使用新的Web Vitals指标,Google尝试从网页的体验角度出发,从另一个更现实的角度来解决这个问题。在这里,我将仔细研究如何使用Google Lighthouse检查您的移动网站速度和SEO。

Lighthouse是Google构建的页面体验工具,最初旨在审核Progressive Web Apps(PWA)。该工具执行五项审核,以检查可访问性,性能,SEO,渐进式Web Apps和最佳实践的扩展列表。在新的Core Web Vitals的支持下,这些审核共同为您提供了有关移动网站以及桌面网站或Web应用程序的质量和性能的出色概述。

网站速度完全取决于感知和用户体验。如果您的网站仍然感觉很慢,那么数字速度就没有任何意义。3G或更小巧的移动连接在世界范围内吸引着大量用户。即使使用闪电般的5G连接,站点也可能会感到缓慢而缓慢。我们都知道,缓慢的网站可能会对您的转化带来毁灭性影响。缩短加载网站所需的时间(毫秒)可能会有所不同。更不用说当加载缓慢的广告按下您只想单击的按钮时发生的挫败感。

在测试过程中,Google Lighthouse模拟通过功率稍有下降的设备通过不稳定的3G连接访问您的移动网站。为了尽可能真实地模拟现实情况,数据包会丢失。这些见解与其他数据结合在一起。运行测试后,您将获得一份包含分数的报告以及可解决问题的可行建议。

PageSpeed Insights可能是最常用的网站速度分析工具。它为您提供了不错的分数,并列出了可能的改进,并且使您对网站的感知加载速度有了一个了解。另外,PageSpeed Insights会提供建议并确定改善页面性能的机会。其中有些确实很难实现,因此对于大多数网站而言,获得100/100的梦想是不二之选。

PageSpeed Insights和Lighthouse曾经是完成这项工作的两种不同工具。他们俩都提供了宝贵的见解,但很难合并。随着Web Vitals的出现和页面体验的更新,Google全面改善了指标。它们不仅变得更易于理解,而且还成为共享指标。当然,每种工具都是针对特定的子任务制作的,并提供特定的指标。这些指标来自不同的环境。

Web Vitals引入了确定性能的新方法。可以说,其中一些指标可以在实验室环境中进行模拟计算,也就是说,其他指标仅在经过现场测试和收集后才有意义。此外,某些指标在这两种设置中均能正常工作。Google页面体验工具使用各种指标为您提供改善网站所需的数据。

如果仔细观察,您会发现某些指标仅在开发人员工具和Lighthouse等实验室工具中有效。字段指标显示在诸如Search Console和PageSpeed Insights中的“ Web Vitals”报告之类的工具中。诸如LCP,FID和CLS之类的核心Web生命将随处可用。

全新的Core Web Vitals将出现在所有衡量网站速度,性能和体验的Google工具中,甚至出现在Search Console中的新Web Vitals报告中。现在,您只需要了解三个基本指标就可以了解您的网站或特定页面的效果。这些核心网络生命力是:

  • LCP或最大内容绘画:或者,您在视口中看到的最大内容元素加载需要多长时间。

  • FID或“首次输入延迟”:或者,浏览器响应用户首次触发的互动需要多长时间(例如,单击按钮)

  • CLS或“累积布局偏移”:或者,屏幕的多少受移动影响-即,东西在屏幕上跳来跳去吗?

这些新的Web Vitals采用更实用的方法,并将用户体验放在首位。这些工具会通过普通设备上的限制连接来访问您的站点,因此它可以模拟现实世界中真正的访问者可能会遇到的情况。这些由Web Vitals驱动的工具不仅可以像过去使用的经典速度工具那样加载您的网站,还可以检查它如何以及何时响应输入-以及是否在初始加载后发生了事情。它会找到您的内容准备就绪的确切时间,因此您可以在感觉太慢时尝试对其进行优化。另外,您会发现妨碍良好页面体验的烦恼。

此外,请记住,Lighthouse不仅会衡量性能,而且还会检查SEO,各种最佳做法和可访问性。它是一个完整的工具,可以帮助您从整体上改善您的网站。

加快移动网站速度的整个思路是两方面的:您的网站必须快,而且它必须感觉  快。因此,您需要尽快将内容显示在屏幕上。不要让人们等待。此外,用户必须能够尽快与您的内容进行交互。由于Google宣布页面速度和页面体验是SEO的排名因素,因此您需要解决这些问题。

您应该优先考虑什么?首先加载您的内容。令人敬畏的图形和杀手级动画可以等待。您的信息以及人们正在寻找的内容很可能出现在内容中。您可以将其余的内容加载到后台,稍后再放到屏幕上。

在衡量网站的性能时,Lighthouse 6.0使用以下指标:

  • 首次内容绘制时间:FCP测量用户浏览到您的页面后浏览器呈现第一段DOM内容所花费的时间。这包括图像,非白色   元素和SVG,但不包括iframe中的内容。

  • 速度索引:速度索引用于衡量页面加载过程中内容可视化显示的速度。 

  • 最大内容渲染 :LCP是关于最大内容对象(例如,图像或文本块)加载需要多长时间的信息。这是最重要的新指标之一。在这里,获得高分意味着用户将您的网站视为快速加载。

  • 可交互前的耗时 :TTI测量从加载页面到能够快速可靠地响应用户输入所花费的时间。该页面看起来加载起来很快,只是发现按下某些按钮还没有任何作用。

  • 总阻塞时间:TBT测量FCP和TTI之间可能发生阻塞的时间,从而阻止响应。

  • 累积布局偏移:CLS查看页面的整个加载过程中发生的版式移位次数。每次元素在屏幕上从一帧跳到另一帧时,这都算作布局偏移。还记得那些在最后一刻加载的讨厌的广告吗?

灯塔报告还提供了一些机会来提高移动网站的网站速度,包括节省多少加载时间。其中包括减少渲染阻止样式表,渲染阻止脚本,适当调整图像大小以及修复屏幕外图像。

总而言之,Lighthouse为您提供了有关页面性能的大量见解。利用这些见解来发挥自己的优势。

Lighthouse不仅能提供性能,而且还具有可访问性测试,基于最佳实践和PWA分析来改善网站的建议。Lighthouse的另一个很酷的功能是基本的SEO检查。通过此检查,您可以运行简单的SEO审核以发现网站可能存在的基本SEO问题。它还为您提供了修复建议。由于Lighthouse在浏览器中本地运行,因此您也可以在登台环境中运行检查。

目前,灯塔检查:

  • 页面的移动友好性

  • 如果结构化数据是有效的

  • 它是否带有带有width或的标签initial-scale

  • 文件中有元素吗?</li></p> <p> <li></p> <p> 有中继描述吗?</li></p> <p> <li></p> <p> 该页面是否具有成功的HTTP状态代码?</li></p> <p> <li></p> <p> 链接是否具有描述性锚文本?</li></p> <p> <li></p> <p> 文档是否使用清晰的字体大小?</li></p> <p> <li></p> <p> 页面没有被阻止建立索引吗?</li></p> <p> <li></p> <p> robots.txt是否有效?</li></p> <p> <li></p> <p> 图像是否具有alt属性?</li></p> <p> <li></p> <p> 该文档是否具有有效的hreflang实现?</li></p> <p> <li></p> <p> 文档是否具有有效的rel = canonical设置?</li></p> <p> <li></p> <p> 是否有不需要的插件,例如Java或Flash?</li></p> <p></ul></p> <p><p></p> <p> 虽然是基本的,但是Lighthouse检查将提醒您任何要解决的SEO问题。</p></p> <p><p></p> <p> 借助Chrome的“开发人员工具审核”面板(Mac:Shift + Cmd + I; Win:Ctrl <strong>+</strong> Shift + J或F12),可以轻松入门Google Lighthouse 。从那里,您可以运行测试并获得完整的报告。此外,还有一个用于Lighthouse的单独的Chrome插件,它在您的工具栏中添加了一个按钮,尽管使用该按钮时仍保持不变,但有一些限制:您无法验证本地服务器上的网站,并且经过身份验证的页面也无法正常工作。</p></p> <p><p></p> <p> 您也可以将Lighthouse作为Node程序包运行。这样,您可以将测试合并到构建过程中。使用Node软件包时,您还将看到只有在Node环境中可以运行的一些审核,而在DevTools的Audits面板中却没有。</p></p> <p><p></p> <p> 要从命令行全局安装Lighthouse,请使用:</p></p> <p><p></p> <p> npm install -g lighthouse</p></p> <p><p></p> <p> 如果要对https://example.com运行测试,请使用:</p></p> <p><p></p> <p> lighthouse https://example.com</p></p> <p><p></p> <p> 审核的全部结果将在终端中可用,但也可以在单独的HTML文件中使用。</p></p> <p><p></p> <p> 您可以采取许多措施来提高网站速度。尽管解释所有修补程序超出了本文的范围,但可以在关键渲染路径中找到许多优化。关键的渲染路径由对象(例如CSS和JavaScript)形成,这些对象必须先加载,然后内容才能显示在屏幕上。如果此内容被阻止,则您的页面将呈现缓慢或完全不呈现。请注意这一点,并使路径无障碍。</p></p> <p><p></p> <p> Google Lighthouse不是唯一一个可以将其全部规则化的站点加速工具,但是它是您工具箱中非常有价值的补充。SEO检查是基本的,但是仍然重要。Lighthouse更精确和具体,并根据实际使用情况为您提供即时反馈。你一定要伴随着其他网页速度测试工具使用它,就像PageSpeed Insights的WebPageTest和GTmetrix。</p></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div style="color: #999;">特别声明:以上内容来源于编辑整理发布,如有不妥之处,请与我方联系删除处理。</div> <ul class="rd_ot"> <li><span>上一篇:</span><a href='/a/seogd/2024/0514/yhssmbwyd6gjq.html'>优化搜索目标网页的6个技巧</a></li> <li><span>下一篇:没有了</span></li> </ul> </div> <div class="line10"></div> </div> <div class="rbar"> <div class="rb_sale"> <div class="cm_head1"> <img class="ico" src="/static/picture/icon-zxsp.png"> <div class="tit">猜你喜欢</div> </div> <a class="rbs_item" href="/a/seogd/2024/0514/SEOjcqwzyhtysSEOyhdgj.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131I90-L.jpg"> </div> <div class="inf"> <div class="name">SEO基础七:网站用户体验是SEO优化的关键</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/wzyhnrcSEOgzd6grw.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141315340-L.jpg"> </div> <div class="inf"> <div class="name">网站优化:您日常SEO工作的6个任务</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/gzlnrhPPChbdwzfs.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131P50-L.jpg"> </div> <div class="inf"> <div class="name">高质量内容和PPC互补的五种方式</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/nclbzdzjyd10gSEOwt.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141315250-L.jpg"> </div> <div class="inf"> <div class="name">您从来不知道自己有的 10 个 SEO 问题</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/smsUXyhtyrhtst.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131J20-L.jpg"> </div> <div class="inf"> <div class="name">什么是UX(用户体验)?如何提升它?</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/nryhdhxwwztggyjzdnr.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141315190-L.jpg"> </div> <div class="inf"> <div class="name">内容优化的核心:为网站提供更有价值的内容</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/bxybmdwdwzjgcw.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131A90-L.jpg"> </div> <div class="inf"> <div class="name">必须要避免的五大网站结构错误</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/hlhgzSEOyhdcg.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141316490-L.jpg"> </div> <div class="inf"> <div class="name">衡量和跟踪SEO优化的成功</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/rhyhwzjgtgSEOpm.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131K80-L.jpg"> </div> <div class="inf"> <div class="name">如何优化网站结构提高SEO排名?</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/yGoogleLighthousejcydwzsdhSEO.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131S40-L.jpg"> </div> <div class="inf"> <div class="name">用Google Lighthouse检查移动网站速度和SEO</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> </div> <div class="line10"></div> <div class="rb_sale"> <div class="cm_head1"> <img class="ico" src="/static/picture/icon_tuijian.png"> <div class="tit">热门资讯</div> </div> <a class="rbs_item" href="/a/seogd/2024/0514/fhSEOdqblldsgbz.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131H40-L.jpg"> </div> <div class="inf"> <div class="name">发挥SEO的全部力量的四个步骤</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/syyhtyyhltsndSEO.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131Q90-L.jpg"> </div> <div class="inf"> <div class="name">使用用户体验优化来提升您的SEO</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/smsUXyhtyrhtst.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131J20-L.jpg"> </div> <div class="inf"> <div class="name">什么是UX(用户体验)?如何提升它?</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/rhydssyqyhbg.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141315120-L.jpg"> </div> <div class="inf"> <div class="name">如何阅读搜索引擎优化报告?</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/2021nrhzzndwzjg.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141316330-L.jpg"> </div> <div class="inf"> <div class="name">2021年如何重组您的网站结构?</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/smsztqzyjtsrhgzd.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141315030-L.jpg"> </div> <div class="inf"> <div class="name">什么是主题权重以及它是如何工作的?</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/wzyhnrcSEOgzd6grw.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141315340-L.jpg"> </div> <div class="inf"> <div class="name">网站优化:您日常SEO工作的6个任务</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/10gkbznzqwznrdjq.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141316060-L.jpg"> </div> <div class="inf"> <div class="name">10个可帮助您增强网站内容的技巧</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/gzlnrhPPChbdwzfs.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-240514131P50-L.jpg"> </div> <div class="inf"> <div class="name">高质量内容和PPC互补的五种方式</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> <a class="rbs_item" href="/a/seogd/2024/0514/nclbzdzjyd10gSEOwt.html"> <div class="photo"> <img src="/uploads/allimg/240514/1-2405141315250-L.jpg"> </div> <div class="inf"> <div class="name">您从来不知道自己有的 10 个 SEO 问题</div> <div class="price"> 2024-05-14 发布 </div> </div> <div class="clear"></div> </a> </div> <div class="line10"></div> <div class="line10"></div> </div> <div class="clear"></div> </div> <div class="line20"></div> <div class="line20"></div> <div class="footer"> <div class="wrapin"> <div class="ft_nav"> <a href="/">首页</a> <em>|</em> <a href="/a/seogd/" title="SEO观点">SEO观点</a> <em>|</em><a href="/a/seogj/" title="SEO工具">SEO工具</a> <em>|</em><a href="/a/seojq/" title="SEO技巧">SEO技巧</a> <em>|</em><a href="/a/seoal/" title="SEO案例">SEO案例</a> <em>|</em> </div> <style> .ft_nav li{ list-style:none; } </style> <div class="ft_nav" style="height: auto;display: flex; justify-content: center; align-items: center; flex-wrap: wrap;"> <li>友情链接</li> <li><a href='http://xinle8.com/' target='_blank'>第一作文网</a> </li><li><a href='http://sh-zdqp.com/' target='_blank'>车讯网</a> </li><li><a href='http://115007.com/' target='_blank'>鲅鱼圈房产</a> </li><li><a href='http://xuehuahua.net/' target='_blank'>学画画网</a> </li><li><a href='http://office-vip.com/' target='_blank'>先锋办公</a> </li><li><a href='http://youyax.com/' target='_blank'>php中文网</a> </li><li><a href='http://lnrcw.com/' target='_blank'>招聘</a> </li><li><a href='https://www.wanshiruyi.net/' target='_blank'>万事如意手</a> </li><li><a href='http://cd-wine.com/' target='_blank'>成都红酒网</a> </li><li><a href='http://liangqicn.com/' target='_blank'>粮食网</a> </li><li><a href='http://www.chunyun.cn/' target='_blank'>汽车时刻表</a> </li><li><a href='http://joomlagate.com/' target='_blank'>游戏资讯网</a> </li><li><a href='http://035400.com/' target='_blank'>热门旅游网</a> </li> </div> <p> 版权所有 西安网站设计优化网 Copyright © 2024-2030 备案编号:<a href="http://beian.miit.gov.cn/"></a></p> </div> </div> <script src="/static/js/commontj.js" type="text/javascript"></script> <script src="/static/js/jquery-1.7.2.min.js"></script> <script src="/static/js/jquery-ui.js"></script> <script src="/static/js/jquery.qrcode.min.js"></script> <script src="/static/js/jquery.caroufredsel.js"></script> <script src="/static/js/jquery.jqzoom.js"></script> <script src="/static/js/jquery.textslider.js"></script> <script src="/static/js/jquery.lazyload.min.js"></script> <script src="/static/js/dropload.min.js"></script> <script src="/static/js/main.js"></script> </body> </html>