推56论坛

 找回密码
 立即注册(限中文)

QQ登录

只需一步,快速开始

    查看: 1368|回复: 0

    [WordPress教程] WordPress网站速度优化:WP加速图文教程(四)

    [复制链接]
    发表于 2019-9-20 11:45:53 | 显示全部楼层 |阅读模式
    十、有针对性地排查网站速度问题如果你对技术有一点兴趣,可以尝试学着使用 F12 Developer Tool。会用基本的 Console、Networks 就差不多了,基本可以很有针对性地排查网站速度问题了。

    其它的部分如 Audits 和 Application 也很有用,但是暂时用不到,以后再讲解吧。
    十一:手动设置预解析(DNS Prefetch)和预加载(Preload)
    说明:手动设置预解析(DNS Prefetch)和预加载(Preload),这一条操作可能比较难,需要进行一定分析。这一步也非必须,觉得操作复杂可以略过。
    如果你是 SiteGround 虚拟主机用户,如上文所说无需再购买安装 WP Rocket 插件,因为 SG Optimizer 里自带很多功能和 WP Rocket 已重合。但是有些 WP Rocket 含有的功能,SG Optimizer 并没有,比如预解析(DNS Prefetch)功能。
    1)DNS Prefetch
    DNS Prefetch,即 DNS 预解析,或者也叫 DNS 预获取,是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度。DNS Prefetch,也是前端优化的一部分。格式通常是:





    DNS Prefetch 尽量的放在网页的前面,推荐放在后面。
    我们要做的重要工作,就是在 GTmetrix 的 Waterfall 里,找到速度特别慢的外部文件资源的域名,记录速度上拖后腿的外部文件的域名。
    这里我们先记录 https://platform.twitter.comhttps://www.youtube.com 这两个域名。同时,我们也可以继续看看  Waterfall 下,速度比较慢的文件的 URL 里面所有外部资源的域名。
    在下图中,ALL 的下方,有个 Domain 的竖列表,可以很快地看到各个文件资源来自哪些域名。

    OK,经过梳理,我们记录了这些外部资源的域名:

    • https://platform.twitter.com
    • https://www.youtube.com
    • https://www.gstatic.com
    • https://www.googletagmanager.com
    • https://www.googleadservices.com
    • https://www.google-analytics.com
    • https://cdn.syndication.twimg.com
    • https://syndication.twitter.com
    • https://s.ytimg.com
    • https://googleads.g.doubleclick.net
    • https://pbs.twimg.com

    可见,这个网站启用了 Google Analytics,投了 Google Adwords,用了一些 Twitter 的工具,使用了 Google Tag,以及 Google Captcha。。那么可以考虑给这些域名预加载,使得网页打开速度更快速。
    但是,注意:DNS Prefetch 不能选择太多,只能选择最多3-4 个域名,否则会拖慢 DNS 查询的时间,反而拖慢网页加载速度。我们可以选几个重复度高的域名。
    在 Cpanel 的 File Manager 中,找到你的 WP 主题文件夹下的 Header.php,点击鼠标右键,用 Code Edit 打开编辑(或者用 FTP工具下载 header.php 到本地,用代码编辑器 notepad++打开编辑修改)。
    在  上面添加几行代码:(注意,你按照你网站的外部资源域名来填写,不要照抄我下面的代码)






    每一行填写一个域名地址。不带 http 或 https,注意引号是英文符号。
    点击 Save 保存。这样,网页刚加载时,还没有加载需要的外部资源,DNS解析服务已经开始在处理预解析了,会优化页面加载速度。
    2)Preload
    Preload 作为一个新的 web 标准,旨在提高性能。预加载当前页的资源,浏览器会优先加载它们。有了 preload,它相当于告诉浏览器说,这个资源你后面会用到,现在就加载它吧。
    上面提到的 Asset CleanUp 对字体文件的预加载也是使用的 Preload 这一个新的 HTML 机制。
    格式:
    文件 URL 地址:完整 URL 地址,如:https://www.google.com/……./check.js
    as资源类型:script(js),  image(png,jpg,jpeg,gif), style(css),  font(woff,ttf,woff2)
    更多的具体的见下表:


    我们可以用 GTmetrix 的测速结果中,Waterfall 的功能,来看看有哪些外部资源文件。
    比如,有这么一个网站,得分特别低(C,E),页面加载速度也达到 8S,因为这个网站在页面里调用了多种外部资源。比如 youtube 视频,比如 twitter 最新动态,还有外部图片等等,都造成了速度缓慢。比如,最常见的是联系表单使用了 Google Captcha 验证机制,但这会调用谷歌的 JS,造成速度减慢。
    比如下图这个网站,问题很多。不过 17 秒的加载速度,真的是够慢的了!

    这里有些小疑问:看这个网站,已经在 SG Optimizer 的设置里开启了网页压缩 Gzip,怎么 GTmetrix 的 gzip 压缩这里得分还是这么低呢?
    这是因为你网站外部的文件,你是无法进行压缩的,因为这些文件是存放在外部网站上,不是你自己网站的文件,所以没办法的,可以忽略这些外部文件无法 Gzip 压缩(除非你把所有外部文件都下载存到网站目录下,修改网站调用这些文件的链接,不过这太麻烦了!!)。
    再比如:这个网站使用了 Twitter 的 widget 工具,调用了来自 https://platform.twitter.com 的各类 JS 和 CSS 文件。同时,还有 https://www.youtube.com 的 iframe_api 接口。
    我们可以记录并预加载 Waterfall 中严重拖慢速度的文件:把这些文件的 URL 放到 href=”” 中,并根据文件类型,填写 as 类型。一些明显的 CSS 和 JS 或 图片,最容易分辨。有些可能 as 类型比较难判断,比如涉及到一个外部网址,或 ?查询符跟着特别长一串 URL,如果感觉像是获取数据,这些你可以尝试填写 as=”fetch”。
    比如,上面这个网站,通过 Waterfall 的分析,有一些资源严重拖慢了速度,于是我们每个需要预加载的资源,分行写好,每一行文件资源都要写 as 类型和 crossorigin。
    碰到不确定的 as 类型,情愿整个这条资源放弃不写也不要留空不写 as 类型,否则会二次加载获取,反而耗费时间。

    在 Cpanel 的 File Manager 中,找到你的 WP 主题文件夹下的 Header.php,点击鼠标右键,用 Code Edit 打开编辑(或者用 FTP工具下载 header.php 到本地,用代码编辑器 notepad++打开编辑修改)。
    粘贴到上面 DNS Prefetch 代码的下面。保存!
    最终,在 Header.php 中添加代码如下:

    DNS预解析和资源预加载,搞定!(按照本篇教程的优化,上面截图网站页面的载入时间最终从 17S 优化到 4S 左右)
    注意,有时候可能会出现部分资源你在 Header 这里写了预加载的文件,但是缓存插件里,你又设置了 JS 或 CSS 的 Render-blocking(即 JS/CSS 异步加载,放到 footer 去加载),这样会有冲突。资源会在页面刚加载的时候尝试去 Preload 一次资源,但是获取失败。最终资源在 footer 最后加载,成功载入。
    这个不要紧,但是你要知道,异步加载是特地把一些文件放到加载顺序的最后才加载。并非一定是载入速度慢。加载后可以在 Chrome F12 开发者工具里看看,或者 GTmetrix 里看看,什么资源预加载失败(你可以从 header.php 里移除那一行预加载资源代码)。如果你不明白或者新手,可以略过这段文字。
    保存完毕后,由于每次浏览网站都要调用 header.php,这个也会被缓存。所以要清理缓存,点击 WP 后台顶部的 Purge SG Cache 按钮,清理缓存。完毕!
    本教程完!
    更多技术教程见 liaosam.com
                   

    本版积分规则

    站长QQ
    在线咨询
    咨询热线
    QQ:405327411

    QQ|免责声明|站长论坛 ( 豫ICP备11018337号-5 )

    GMT+8, 2020-7-14 11:22

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表