不知道大家有没有注意到,有时候在优化了一个WooCommerce商店后,在查看源代码时,每个页面的开头都会出现以下HTML注释:
Alter HTML was skipped because the HTML is too big to process!
为什么会有这个注释提示呢,强迫症的小伙伴会觉得很多余。其中它的意思是:因为HTML太大无法处理被跳过。能不能把这个注释删掉呢,其实是可以的。这里搬主题就分享一下解决办法。
在排除了这个问题后,它似乎是由WebP Express WordPress插件引起的,当启用了Alter HTML功能,并设置了Replace image URLs for pages that have a huge number of DOM elements:
除了评论标签之外,这也意味着WebP Express插件并没有取代图片链接,对于支持它的浏览器来说,基本上没有做任何性能提升。
要解决这个问题,你可以调整服务器上的系统设置,或者简单地切换到用<picture>标签替换< img >标签,将网页添加到srcset.设置。
差异:
方法1:替换 <img> 标签为 <picture> 标签 |
方法2:替换图像URLs | |
---|---|---|
它是如何工作的 | 它用<picture> 标签取代了<img> 标签,增加了两个< source >标签–一个用于原始图片,一个用于webp图片。支持webp的浏览器会选择类型属性设置为 “image/webp “的< source >标签。 |
它取代了它能找到的任何图像网址。 |
页面缓存 | 与页面缓存配合得很好,因为所有的浏览器都被提供相同的HTML。 | 不能与页面缓存一起使用–除非你使用的是Cache Enabler插件,它能够维护每个页面的两个缓存版本。 |
样式设计和javascript | 可能会因为HTML结构的改变而中断。像 “div > img “这样的选择器将不再与图片相匹配,因为现在的直接父级是 “图片”。 | 没有问题 |
全面性 | 只替换<img> 标签 – 其他图像不受影响 |
非常全面。替换内联样式中的图像,在懒加载属性中设置的图像URL <div> 或<li>标签,等等。 |
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容