WordPress 网站分析及优化工具 Google Lighthouse

      WordPress 网站分析及优化工具 Google Lighthouse已关闭评论

用WordPress把网站搭建起来以后,要对网站进行分析和优化,通过 WordPress 网站分析及优化工具 Google Lighthouse 可以充分了解网站存在的问题,以及搜索引擎如Google等对网站的评价,谷歌对网站的分析和评价工具很多,经常找不到链接位置,这里做一下记录,方便以后使用,分成三大板块来说

使用我的引荐链接购买特斯拉Tesla产品可获得积分,用于兑换超级充电里程、服饰精品、车辆配件等奖品,点击此处前往官方了解详情。

一、Google 面向开发者的搜索服务

Google搜索里面有一些网站测试工具,针对不同方面有相应的测试,并且会生成测试报告,提出相应的改进建议,有些工具同时针对网页和代码测试,这里是官网链接

WordPress 网站分析及优化工具 Google Lighthouse
Google 面向开发者的搜索服务

下面将每一个工具的链接单独记下来,方面有针对性的使用,官网链接放在图片上,点击图片可以到达

移动设备适合性测试工具,测试网站对移动设备的适配性,网页在移动设备上是否易于浏览

WordPress 网站分析及优化工具 Google Lighthouse
移动设备适合性测试工具

富媒体搜索结果测试工具,这个是测试版,测试该网页上的所有结构化数据是否都能生成富媒体搜索结果

WordPress 网站分析及优化工具 Google Lighthouse
富媒体搜索结果测试工具

PageSpeed Insights网页加载速度测试工具,可以对网页加载速度进行测试,并且提出问题所在,指导改正,速度得分是根据 Lighthouse 所分析的实验室数据得出的,Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量,本文后面第三板块单独记录这个开源工具,很好用

PageSpeed Insights网页加载速度测试工具

AMP测试工具,测试网页是否符合在 Google 搜索结果中使用 AMP 搜索功能的条件

AMP测试工具

Google Search Console,这里可以向 Google 提交搜索收录请求,按网域和网址两种方式可以根据自己的需求选择,有中文解释,清楚明白

Google Search Console

Google 结构化数据测试工具,构建、测试和发布结构化数据,可以发现错误代码,自己进行相应修正

Google 结构化数据测试工具

二、Google 的官方 WordPress 插件

Google 官方打造的插件,插件名称:Site Kit,可以在 WordPress 后台搜索安装,此插件是一个网站套件,可以轻松在网站上设置 Google 工具,并在 WordPress 中的单个仪表板中查看所有内容,无需代码编辑。网站工具包可以轻松设置和配置主要的Google产品,并向您提供有关如何在网络上成功的权威和最新建议,官方介绍网址

WordPress 网站分析及优化工具 Google Lighthouse
Google 的官方 WordPress 插件 Site Kit
Google 的官方 WordPress 插件 Site Kit
Google 的官方 WordPress 插件 Site Kit

三、通过 Lighthouse 进行测试分析

Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量。目前每次测试同时包括以下几项:Performance(性能)、Accessibility(辅助功能)、Best Practices(最佳实践)、SEO(搜索引擎优化)、Progressive Web APP(渐进式Web应用)

Lighthouse

Google 的网页加载速度测试也是从 Lighthouse 获得的数据,谷歌官方对Lighthouse的介绍

您可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。

您为 Lighthouse 提供一个您要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。

从此处,您可以失败的测试为指示器,看看可以采取哪些措施来改进您的应用。

Lighthouse 的使用方式

  • 从 Chrome 网上应用店安装 Lighthouse 扩展程序
  • 在 Chrome 网页检查里直接运行 Lighthouse 程序
  • 从命令行运行

以上三种方式可以适用于不同的用途,上面两种方式记录如下,从命令行运行就没有去研究了

从 Chrome 网上应用店安装 Lighthouse 扩展程序,官网地址

WordPress 网站分析及优化工具 Google Lighthouse
Lighthouse 扩展程序

在 Chrome 网页检查里直接运行 Lighthouse 程序,在需要测试的网页空白处点击右键,选择“检查”即可调出使用,此方法使用起来最方便快捷

在 Chrome 网页检查里运行 Lighthouse 程序
在 Chrome 网页检查里运行 Lighthouse 程序得到的报告
在 Chrome 网页检查里运行 Lighthouse 程序得到的报告

得益于通过查看 Lighthouse 测试结果里面提出的问题,把各项指标尽量进行优化,以达到理想的运行效果。包括字体与背景颜色对比不够,不易于阅读这种问题都会在报告里提出。

用了 Lighthouse 感觉比 Google 家零散的测试工具更有效率,更容易调试出理想的效果,当然 Google 的测试工具更齐全,各有所长。