type
status
date
slug
summary
tags
category
icon
password
Does not use passive listeners to improve scrolling performance
📝 主旨内容
最近在使用Google提供的PageSpeed Insights(Lighthouse)进行WordPress的优化，希望在网页的访问速度以及访问体验上，能够做到更好。同时也发现不少坑可以填，也改变了我一些关于写博客的想法，这篇文章就主要用来记录填坑的记录。目前我在使用的WordPress版本为6.1.1版本。目前的优化情况如下：
总体来说情况还不错。但是在使用Google Adsense的Auto Ads之后，Performance分数有所下降，在将Auto Ads的<script>放在footer之后，依旧会存在js加载耗时长以及CLS偏移问题，之后一段时间的重心就放在如何优化Google Adsense的代码以及Google Fonts字体上。另外值得注意的是，在浏览器的开发者工具中，使用lighthouse所得的分数，相比PageSpeed Insights会高，最终应该是以PageSpeed Insights为准，毕竟更接近Google以及搜索引擎的视角。
单纯在系统层面与网络的层面的优化就不在本篇文章里面进行叙述了，例如使用CDN内容分发网络进行加速，使用Redis等持久化缓存，通过sysctl.conf优化服务器吞吐性能，以及nginx优化等等。以下的操作内容，在完成代码修改之后，记得清空WordPress以及Cloudflare的缓存后再重新进行跑分，避免缓存影响。Cloudflare的清空缓存位置位于：
今天我们就面向PageSpeed Insights优化！
1. Does not use passive listeners to improve scrolling performance
这种情况一方面是因为在Cloudflare打开了Rocket Loader的功能（因为我在使用Cloudflare的CDN提供网站的加速）。可以在Speed选项卡中关掉。
Quote:So that notice is being triggered for the Cloudflare Rocket Loader feature - you can disable this in the Speed tab of your Cloudflare dashboard.
另一方面，这个问题也来源于WordPress的自带评论功能存在移动端访问的缺陷，没有使用Passive Listeners。通过将如下代码添加至主题的js文件中可以解决，代码已经经过压缩：
但是需要注意，修复这个问题后，评分并不会上升，仅仅是减少一个红色报错。
2. Largest contentful paint image was lazily loaded.
一般这种问题都是出现在首页中的banner图，或者首页的轮播图。通过使用浏览器开发者工具，对主题代码定位，可以找到对应的图片使用了loading= “lazy”标签。解决方式也很简单，对引用图片the_post_thumbnail()的funtion添加指定loading参数，这样既可以不完全关闭WordPress默认的lazy加载策略，又可以让首屏大图直接进行加载。
代码的意思就是在调用文章缩略图的同时，赋予loading一个空值，替代WordPress默认提供的lazy值。
3. Serve images in next-gen formats
一般PageSpeed Insights的这个提示，都是由于使用了png、jpg、jpeg、bmp等旧格式图片，需要将图片格式修改为.webp格式。
也就是需要将网站所使用的传统png、jpg、jpeg、gif等格式图片，更换为.webp或者.avif格式文件，因为后面两者能够提供更好的压缩率以及更好的质量，从而缩小整体页面大小，提高加载速度。
什么是WebP格式：WebP是一种同时提供失真与无失真压缩的图片档案格式，目的在于减少图片的档案大小、提高图片档案在网路上的传送时间，但同时又能和JPG与PNG等格式相同的图片品质。根据维基百科的资料显示，WebP的档案大小比PNG档少了45%，即使PNG档已经使用压缩工具进行压缩处理过，WrbP仍可以减少28%的档案大小。
转换格式的事情，我们通过插件解决。我现在在使用的是Plus WebP这个插件，可以通过ajax批量将已经上传媒体库的图片进行格式转换，同时支持质量选择，并替换掉旧文章中的媒体链接，而且难能可贵的是，没有花哨的界面，也不收费。
当然，Smush也是一个不错的选择。
4. Links do not have a discernible name
这个问题不是Performance（性能）问题，是一个Accessibility（易用性）问题，原因在于对于部分链接，未添加有效的说明。
通过PageSpeed Insights查看出现问题的<a href=""></a>的位置，定位之后，在<a>标签内增加：
5. Buttons Do Not Have Accessible Names
同样是一个Accessibility（易用性）问题，原因在于对于<button>，也就是按钮没有进行有效的描述。
通过PageSpeed Insights查看出现问题的<button></button>的位置，定位之后，在<button>标签内增加：
6. Serve static assets with an efficient cache policy
这个问题是由于缓存策略引起的，每个站点的缓存策略不同，处理方式也不同。但是需要注意，修复这个问题后，评分并不会上升。
例如在Moby这里，缓存的时间是由Cloudflare进行控制，那么就需要在Cloudflare的控制台中进行缓存时间（TTL）的修改。不用担心修改后无法及时更新内容，这个缓存策略主要是针对字体等静态内容。
具体位置：Caching - Configuration - Browser Cache TTL
在缓存时间的选择上，目前最低选择5天的情况下，是不会在PageSpeed Insights报错。
同时，在网站运行趋于稳定之后，对CSS以及JS修改减少，5天的缓存期也不会影响网站或博客的样式呈现。如果真的需要修改CSS样式或者JS，那么完成之后记得在Cloudflare清空一次缓存。
7. <code></code>标签内容太长，CSS不折行或样式错误问题
我在修改整个主题的过程中，发现code标签存在样式错误的问题。解决办法为找到<code>对应的样式，增加：
8. 尽量不要使用Google Adsense的Auto ads
周末时候，我需要抽出一些时间重新规划一下Google Adsense的位置。自动广告很简单，但是会严重影响页面的加载速度以及页面偏移量，体验非常差。