ZoyaPatel

PageSpeed 对比lighthouse不同点介绍

SohaniSharma

PageSpeed lighthouse 通用都是作为基本的SEO工具,不同点呢?本文将会对 PageSpeed 以及与 lighthouse 的关注的侧重点进行介绍。

访问PageSpeed

PageSpeed重点的关注的是网站的性能SEO,也就是说,他侧重的点在提高网站性能,也就是访问速度,而不是所谓其他各个方面,只要是阻碍了访问性能,那么PageSpeed 就会展示。

与lighthouse的关系

ligthhouse作为Chrome浏览器内置的工具,他的作用就是针对开发者,提供更加底层的网站优化,提供的比PageSpeed更多的页面内容。

当然,PageSpeed会调用的Lighthouse的部分功能作为自己报告的支持。

展示结果

PageSpeed 就是一件分析工具,当然用户需要仔细分析结果,确保网站的性能不受影响。支持一件分享链接给其他人,用户可以直接观看。

此网站的桌面结果:https://pagespeed.web.dev/analysis/https-www-lksr-net/rq2gc16pt5?form_factor=desktop

移动端结果:https://pagespeed.web.dev/analysis/https-www-lksr-net/rq2gc16pt5?form_factor=mobile


PageSpeed 截图
PageSpeed 介绍


Lighthouse用法

Lighthouse 是一款自动化的开源工具,可帮助您提升网页质量。您可以在任何网页(公开网页或需要身份验证的网页)上运行该脚本。该工具可针对性能、无障碍、渐进式 Web 应用、搜索引擎优化 (SEO) 等方面进行评估。

lighthouse 是有谷歌进行维护的,因此对于他的水平完全可以放心使用。

用法

打开 Chrome 浏览器 > F12 > Lighthouse,点击 分析lighthouse 会分析你的网页。

请在你的所在的页面打开 F12 ,建议在隐私模式下进行测试。

  • 导航模式

    会分析单次页面加载。这个模式应该很熟悉,

    获取 Lighthouse 性能评分和所有性能指标

    评估渐进式 Web 应用的功能。

    页面加载后立即分析可访问性。

    局限性

    无法分析表单提交或单页应用的转换。

    无法分析页面加载后无法立即显示的内容。

  • 时间跨度模式

    分析任意时间段,通常包含用户交互。

    测量一定时间范围内(包括交互)的布局变化和 JavaScript 执行时间。

    发现性能提升机会,以提升长生命周期页面和 SPA 的体验。

    局限性

    不提供整体性能得分。

    无法分析基于时刻的性能指标(例如最大内容绘制)。

    无法分析页面状态问题(例如,缺少可访问性类别)。

  • 快照模式

    分析特定状态下的页面。

    分析页面的当前状态。

    发现 SPA 或复杂表单深处的可访问性问题。

    评估隐藏在交互背后的菜单和 UI 元素的最佳实践。

    局限性

    不提供整体性能得分或指标

    无法分析当前 DOM 之外的任何问题(例如,无法进行网络、主线程或性能分析)。

报告主要包括:

  • 性能

  • SEO

  • 最佳实践

  • 可访问性

每一个包含桌面和移动端。

编码用法

https://github.com/GoogleChrome/lighthouse/blob/1f06b0f71a1435f934b9eb9f594ffee5200ec85f/docs/user-flows.md

编码测试流程

用户可以直接交给Chatgpt 让他协助帮你完成,已经不在以前的时代了。任何情况下请请求chatgpt进行协助。

注意事项

  • 尽量在隐私模式下执行

  • 在网络稳定情况下测试

总结

对比PageSpeeds ,Lighthouse更加侧重于底层提供详细的诊断建议和优化提示。PageSpeeds核心指标侧重于网页的性能指标。Lighthouse 则是一个更底层的、更全面的网站审计工具,涵盖了性能以外的更多方面。

Ahmedabad
Kolkata
Hyderabad
后一页 Bangalore 前一页

Random Manga

Ads

نموذج الاتصال