[TOC]

需求背景

最近有人私信我，说网站手机评分80+，PC评分95+，但是实际用户体验又不是很好。

相信很多小伙伴都使用过 PageSpeed Insights (PSI) ，并且依据这个对网站进行速度优化，这个是完全没有问题的。而且我也是推荐这么做的。但是如果是一味的验收网站速度，只靠PSI评分，就很容易陷入评分陷阱!!!因为它是可以造假的。而粉丝出现的这种情况，我估计就是这种情况。因为之前逛社区帖子的时候看到过，还研究过。

网站速度优化是一个综合性的问题，中大型网站往往是在用户体验和网站速度之间做抉择。我们处理掉Pagespeed Insights优化建议中的绝大部分，网站速度的评分都是挺可观的。
希望大家在对网站进行优化的时候避免只看分数的这种情况，在请人速度优化的时候定一个综合的标准(实际用户体验+shopify后台分数)，而不是只看测速网站Pagespeed Insights评分。

1. 实现原理

使用js，对浏览器的userAgent进行判断，如果是网络速度评分相关的代理，就输出空文件或者减少文件的输出。如果是正常用户则正常输出。可能有的同学，PSI测试的时候，有输出头尾不是空白一片，可能是帮你开发的技术对你网站的 content_for_layout 进行了如下步骤的操作。

2. 如何实现

改动只需要进行两步

  1. 进入到theme.liquid，在标签上方加入如下代码

    {%- capture outputHtml -%}

    image.png

  2. 在标签上方加入如下代码 ```javascript {%- endcapture -%}

上面一堆代码翻译过来的意思就是，如果是几个评分网站的userAgent，就输出一个字符'.', 除此之外照常输出。
```javascript
window['navigator']['userAgent'].indexOf('Chrome-Lighthouse') == -1 &&
window['navigator']['userAgent'].indexOf('X11') == -1 &&
window['navigator']['userAgent'].indexOf('GTmetrix') == -1

3. 展示效果

店铺地址： https://asen-practice.myshopify.com/ 密码：test

点击查看【bilibili】

Tips: 如有引用请标注源文章地址

感谢 高帅帅 同学对本期教程的网站支持！

关注我的【小红书】，第一时间掌握更新动态

你的鼓励就是我创作的动力！
zanshang.png