hwyzw 发表于 前天 17:23

谷歌开源 SEO 工具 Lighthouse:前端性能分析神器

    SEO Zen 今天要跟大家分享的是开源的 SEO 工具:说它是 SEO 工具并不是很准确。它实际上是一个前端性能分析工具。有两种使用方式,一种是插件形式,另一种是命令行形式。本文主要以插件的形式来介绍。如果你想体验一下命令行,就去官网看看介绍。

    首先我们来一张SEO Zen的审核报告截图(国外网络测试):

    可以看到性能分数只有86,如果一个月前我没记错的话,应该是93。有一个不合格的项目,速度指数,达到了10秒。这个问题主要是因为测试网络在国外,服务器在国内,服务器带宽速度比较低,所以我使用国内外网络做了速度测试。以下是本地测试的结果:

    一开始我以为是服务器优化不好的原因,其实不然。这个问题很容易解决。要么换一台更好、带宽更大的服务器,要么加个CDN。添加CDN是一个更好的解决方案,但现在没有必要。因为访问量不是很大,而且谷歌的收录基本都是当天,百度最近没有关注,因为不是SEO Zen网站的问题导致收录不理想,所以在这时候不如“敌不动,我不动”,以下是用来优化SEO禅宗网站的。

    安装

    访问扩展界面并安装插件。安装完成后,你会在右上角看到一个小灯塔图标。进入您要查看的网页,点击 图标,然后点击右上角的设置图标,根据您的需要勾选设置:

    四大指标

    作为SEOer,在使用网站性能分析时,主要看前四个指标:、Best、SEO,还有一个在国内基本不用,主要讲网站的性能,比如打开率速度。交互时间点、JS代码阻塞时间等

    SEO优化实例

    向下滚动查看报告,可以看到红色提示:

    这意味着没有合适的缓存策略。这里SEO Zen会添加一个-缓存策略并将以下代码插入到.网站根目录下的文件:

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'>    <pre class="EnlighterJSRAW" data-enlighter-language="generic"># 开始Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</filesMatch>
</ifModule>
# 结束Cache-Control Headers</pre></p>
    重启服务器并再次检查:

    本文就先介绍到这里。具体用途大家可以先自己研究一下。 SEO Zen会继续写文章来介绍。工具是用来发现问题的,解决问题还是需要自己动手。
页: [1]
查看完整版本: 谷歌开源 SEO 工具 Lighthouse:前端性能分析神器