DevTools调试WordPress前端页面的教程（二）

在前文中已经介绍了浏览器的DevTools工具以及WordPress前端页面包含的资源项，本文将开始进入到实践内容，以及如何通过DevTools工具找出页面中的错误、加载缓慢的原因等。未阅读第一篇教程的，建议先阅读：《DevTools调试WordPress前端页面的教程（一） 》。

调试前的准备工作

首先打开DevTools（本文依旧以Microsoft Edge为例）：在浏览器中，按Ctrl+Shift+I或F12。

然后勾选“禁用缓存”，如下图：

这时候，在浏览器地址栏输入需要调试的网页URL即可。

检查是否有程序错误

在DevTools开启的状态下，它会记录下任何URL访问时候的日志，假设有错误的话，也会有相应的提示，如下图：

当右上角红色图标有显示数字话，代表该网页有相应的错误，上例中，提示有2处错误。

具体的错误信息在下方的控制台中会显示详情，可以根据详细提示排查和修复错误。

GET https://googlecm.hit.gemius.pl/googleredir?rid=tknhntsqez&id=ndBK6L_fzwx7rssCbe8.iLes3yi8eMbF6r2JE6Xu.b7.N7&google_gid=CAESEIS8uUJOx-nIf_1EA1M9NvE&google_cver=1&google_push=AehlK4CPF8hjHKVbKzMrm2Id2SkEfPcyAs0TvjG0Yk0pO07GEUziuN4BVd2DHceHADY3TIwYWhKcFrnoaj8C9xOz9YjQ4udS3jgs net::ERR_ADDRESS_INVALID

这个错误是因为Google AdSense广告需要加载的部分JS代码在中国地区无法访问造成的。

“net::ERR_ADDRESS_INVALID”是“网络错误地址无效”的意思。

该案例中，除了AdSense引发的两处JS错误之外（此错误是我们无法修复的），没有其它错误消息。

在此处提示的错误，是指前端程序的错误，不包括服务器端程序（PHP、ASP.net等均属于服务器端程序）。

检查静态资源加载情况

在“网络”视图中，可以查看各项资源的加载情况，包括：HTML、CSS、JS与图像视频等。

如果状态码是200的话，说明加载成功，而404或40x之类的则加载失败。

可以通过筛选器选择不同种类的资源进行查看。

• 如果CSS样式文件或字体文件加载失败，可能会导致网页排版错乱。
• 如果JS文件加载失败，可能会导致网页部分功能错误。
• 如果图片或视频等媒体文件加载失败，则会导致图像无法显示。

检查网页加载速度

使用DevTools工具，可以精准的分析出网页加载速度慢的原因，以便于找到解决方法。

在上图检查静态资源加载情况的例图中，可以看到所有资源文件行的右侧有时间值，该值单位为ms（毫秒），如果发现某个资源加载时间较长，则需引起重视。

• 一般一个网页的总请求数不宜超过30个，总加载时间最好少于1500毫秒（1.5秒）。
• DOMContentLoaded 时间也是越少越佳，JavaScript执行时间也会影响它。当初始的 HTML 文档被完全加载和解析完成之后，**DOMContentLoaded **事件被触发，而无需等待样式表、图像和子框架的完全加载。
• HTML页面通常是第一个加载的资源（document类型），影响它速度的因素较多，包括服务器响应速度、WordPress后端运行速度、网络传输速度等。
  • WordPress自身没有任何静态的HTML文件，所有HTML网页均由PHP程序生成，在默认情况下，每次访问都会有服务器端的程序结合数据库中内容生成HTML代码。
  • 如果HTML页面或document类型资源加载时间较长，而其它资源加载较快的话，有可能是HTML页面生成速度较慢，可通过WordPress静态缓存的方式减少加载时长，例如使用WP Rocket、W3 Total Cache、WP Fastest Cache Premium等插件，将HTML代码以文件形式缓存在磁盘上。
  • 如果所有资源加载速度较慢，则可能是服务器网络状况不佳或带宽不够造成的。
• 如果媒体资源加载时间较长，则应考虑压缩图片。

如果要深入分析速度情况，则可以借助TTFB指标来判断到底是服务器响应速度较慢，还是网络传输较慢。

提示：TTFB是发出页面请求到接收到应答数据第一个字节所花费的毫秒数 。Google建议TTFB时间应少于200ms。

上文提到WordPress所有的HTML页面都是靠服务器端的程序生成的，那么如果TTFB等待时间非常久，则说明服务器繁忙或是性能不佳。反之如下载时间较久，则应考虑使用CDN或增加网络带宽。

检查文件资源的响应头

在加载的所有资源文件列表中，单击任何一项，可以查看其标头信息。

在响应头信息中，可以检查几个关键数据：

• 是否开启了Gzip或Brotli压缩：示例：content-encoding: gzip（开启了Gzip）
• 是否开启了浏览器缓存：一般CSS与JS文件不经常修改，建议设置较长的浏览器缓存时间，这可以节约服务器资源及带宽，另外可以大幅提高用户的浏览速度。
  • cache-control: max-age=31536000 说明缓存时间为1年。
  • max-age的值为缓存时间，单位秒。max-age=604800则说明缓存时间为1周。

总结

找出问题所在，是解决问题的第一步。本文所介绍的方法可以快速排查下列常见的前端网页问题：

• 排查除服务器端外，所有前端页面与程序的错误。
• 排查网页加载速度较慢的问题
• 排查网页排版错乱的问题

如果熟练掌握了本教程的方法，那么恭喜您！已成为了一位初级合格的站长。

扩展阅读：

• 一文看懂什么是CDN？CDN适合什么场景？
• WordPress使用CDN加速，动静分离教程（腾讯云CDN）
• WordPress使用CDN加速，动静分离教程（又拍云）
• Nginx与Apache设置静态资源缓存
• WordPress 网站优化神器 Perfmatters 使用指南

原文地址：https://www.zhanzhangb.com/4264.html