虾皮路对于WordPress网站的优化加速有多种方法，而WordPress的前端页面优化加速的方法中，其实是有一种方法是预先加载您稍后需要的内容，预读取CSS文件，预连接整个页面，或者提前解析域名或者提前渲染接下来要访问的页面，从而加快网站的访问。这里搬主题就介绍一下WordPress网站前端优化加速之预加载/预读取/预连接/DNS预读取/预渲染及设置的图文教程。
原文链接：https://www.banzhuti.com/wordpress-page-optimization-acceleration-link.html
上述的方法其实只要通过浏览器本身支持的功能去实现，因为浏览器有一个简单的内置方式来完成所有这些事情。有五个<link rel>标记指示浏览器预加载某些内容：
这里介绍每个标记做什么，以及何时使用它们。
一、preload（预加载）
<link rel="preload">告诉浏览器尽快下载和缓存资源（如脚本或样式表）。当您在加载页面几秒钟后需要该资源，并且希望加快速度时，这很有用。在下载资源后，浏览器不会对其进行任何操作。不执行脚本，不应用样式表。它只是缓存——当其他东西需要它时，它会立即可用。
1、使用的语法
href指向要下载的资源，比如CSS，比如JS等文件
as可以是您可以在浏览器中下载的任何内容：
style 表示样式表，
script 表示脚本，
font 表示字体，
fetch用于使用fetch（）或xmlhttpRequest下载的资源，
其他值——参见MDN上的完整列表
指定as属性很重要——它有助于浏览器确定优先级并正确安排下载。
2、使用注意事项
当您很快需要资源时就使用它。当您知道在加载页面后很快就需要资源，并且您希望更早地开始加载该资源时，<link rel=“precoad”>会有所帮助。例如：
使用自定义字体。在外部CSS文件中，应用这些字体的@font-face规则：
默认情况下，仅在提取和应用index.css时，comic sans.woff2才开始下载。使用<link rel=“preload”>不用等那么长时间，而是来更快地启动下载：
您可以按照关键的CSS方法来划分。按照这种方法，您将把CSS分为两部分：关键部分（即时渲染所需）和非关键部分：
使用这种方法，非关键样式将仅在JavaScript开始执行时开始下载，这可能是在第一次呈现之后的几秒钟。不用等待JS执行，而是使用<link rel=“preload”>来更快地启动下载：
不要过度使用。预加载所有内容并不能神奇地加快网站的速度——相反，它可能会阻止浏览器智能地安排所有内容。
不要与预读取混淆。如果页面加载后不需要立即使用资源，则不要使用<link rel=“preload”>。如果您以后才需要它——例如，下一页，请使用<link rel=“prefetch”>。
3、其他说明
这是强制性的。与所有其他与预加载相关的<link>标记不同，此标记对于浏览器是必需的（如果它支持该标记）。浏览器必须下载<link rel=“preload”>中指定的资源。对于此处描述的其他标记，如果浏览器决定——例如，如果网络速度较慢，则可以跳过预加载资源。
优先级。对于不同类型的资源（样式、脚本、字体等），浏览器通常分配不同的优先级。这允许首先下载最重要的资源。对于使用<link rel=“preload”>获取的资源，浏览器使用as属性来确定其优先级。有关Chrome，请参见Chrome优先级的完整表格
2）如何找到要预加载的内容：
——转到devtools并运行页面加载的性能记录
——滚动浏览网络部分，找到阻止页面呈现但下载太晚的内容（=网络部分下载太多）。通常是CSS或JS
二、prefetch（预读取）
<link rel=“prefetch”>要求浏览器在后台下载和缓存资源（如脚本或样式表）。下载的优先级较低，因此不会干扰更重要的资源。当您知道在后续页面上需要该资源，并且希望提前缓存该资源时，这将非常有用。下载资源后，浏览器不会对其进行任何操作。不执行脚本，不应用样式表。它只是缓存——当其他东西需要它时，它会立即可用。
1、使用的语法
href指向要下载的资源。
as可以是任何您可以在浏览器中下载的内容：
style 表示样式表，
script 表示脚本，
font 表示字体，
fetch用于使用fetch（）或xmlhttpRequest下载的资源，
其他值——参见MDN上的完整列表
指定as属性很重要，它有助于浏览器确定优先级并正确安排下载。
2、使用注意事项
将其用于其他页面的资源。如果您需要不同页面上的资源，并且希望预加载该资源并加快该页面的呈现速度，那么<link rel=“prefetch”>将有所帮助。例如:
您有一个电子商务网站，40%的用户从主页转到产品页面。使用<link rel=“prefetch”>下载负责呈现产品页面的CSS和JS文件
您有一个单页应用程序，并对其进行代码拆分，以便不同的页面加载不同的包。当用户访问某个页面时，询问路由器链接到的其他页面，并使用<link rel=“prefetch”>为这些页面预加载包。
尽可能多地使用它是安全的。浏览器通常以最低优先级调度预取，因此它们不会干扰其他资源。这意味着预取很多东西可能是安全的。请记住，虽然这仍然会使用用户的数据——并且有可能花他们的钱！
不要用于紧急资源。几秒钟后需要资源时，不要使用<link rel=“prefetch”>。在这种情况下，请改用<link rel=“preload”>。
3、其他说明
不是强制性的。浏览器不需要遵循<link rel=“prefetch”>指令。这意味着它可以决定不获取资源——例如，如果连接速度较慢。
在Chrome中的优先级。在Chrome中，<link rel=“prefetch”>下载通常以最低优先级（完整的优先级表）排序。这意味着它们通常在其他所有加载后安排。
三、preconnect（预连接）
<link rel=“preconnect”>要求浏览器提前执行到域的连接。当您知道很快会从那个域下载一些东西，但是不知道确切的内容，想加快初始连接的速度时，这是很有帮助的。当浏览器从新的第三方域中检索某些内容时，必须建立连接。（第三方域与应用程序所在的域不同。）当站点使用Google字体的字体、从CDN加载React或从API服务器请求JSON响应时，可能会发生这种情况。
建立新的连接通常需要几百毫秒。每个域只需要一次，但仍然需要时间。如果预先设置连接，您将节省时间并更快地从该域加载资源。
1、使用的语法
href指向要解析的域名。你可以指定协议（https://domain.com）或不指定协议（https://domain.com），它的工作将相同。
预链接是否能提升速度，参考如下内容：
我们都知道，浏览器要访问某个资源，都必须对该资源所属的源进行连接，而这个连接的过程主要包括：DNS 查询、TCP 握手 以及 TLS 握手（针对 HTTPS）。就像这样：
所以，如果浏览器能够在空闲的时候提前对将要访问的源建立好连接，那么就可以一定程度提高资源获取的速度。这也就是：preconnect 的作用。
怎么用呢？很简单，直接声明一个 link 标签，将 rel 的属性值设置为：preconnect，然后指定源地址就好了：
<link rel="preconnect" href="http://xxxxxx" >我们可以用它来加速 Web 字体的加载：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>由于 font-face 要求字体载入需要在 anonymous mode 下进行，因此这里需要 crossorigin 的属性。
来看下使用前后网络请求对比图：
也可以应用于视频资源：
<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://i.banzhuti.com">
<link rel="preconnect" href="https://9.banzhuti.com">
<link rel="preconnect" href="https://s.banzhuti.com">但是有一点要记住，声明了 preconnect 不代表浏览器一定会去做，浏览器也可以选择忽略的（可能没有好的时机来处理，这完全可以取决于浏览器具体的实现）。
2、使用注意事项
将其用于您很快需要的域。当您在第三方域上拥有重要的样式、脚本或图像时，但您还不知道资源URL时，<link rel=“preconnect”/>将帮助您。例如：
您的应用程序托管在my-app.com上，它向api.my-app.com发出AJAX请求。您不知道您将向该域发出什么特定的请求——因为您是动态地从JS发出请求的。
使用<link rel=“preconnect”>提前连接到api.my-app.com，使第一个数据请求更快
您的应用程序托管在my-app.com上，它使用谷歌字体。Google字体分两个阶段加载字体：首先，从fonts.googleapis.com下载一个CSS文件；然后，该CSS文件从fonts.gstatic.com请求字体。
在从fonts.googleapis.com下载CSS文件之前，您无法知道fonts.gstatic.com中需要哪些特定的字体文件。使用<link rel=“preconnect”>提前建立连接
使用它可以稍微加快一些第三方脚本或样式。如果页面中有第三方资源，您确实需要更快地加载，请为该域添加<link rel="preconnect" />。它将指示浏览器更快地为该域设置连接。
不要过度使用。建立和保持连接的成本很高——无论是对客户机还是服务器。最多对4-6个域使用此标记。
3、其他说明
不是强制性的。浏览器不需要遵循<link rel="preconnect">指令。这意味着它可以决定不建立新的连接——例如，如果已经建立了很多连接，或者在其他情况下。
连接过程包括什么。要连接到每个站点，浏览器必须执行以下步骤：
DNS解析。查找指定域名（google.com）的服务器IP地址（216.58.215.78）
TCP握手。执行往返（消息转到client→server→client）以启动到服务器的TCP连接
TLS握手（仅适用于HTTPS站点）。执行两次往返（消息转到client→server→client→server→client）以启动安全的TLS会话。
注意：这将随着HTTP/3的变化而改变，因为它将改进和加速连接机制。不过，这仍然很遥远。
四、dns-prefetch（DNS预读取）
<link rel=“dns prefetch”>要求浏览器提前执行域名的DNS解析。当您知道很快就会连接到那个域名，并且想加速初始连接时，这是很有帮助的。
浏览器连接到新的第三方域时必须执行DNS预读取解析。（第三方域与应用程序所在的域不同）当您的站点使用Google字体的字体、从CDN加载React或从API服务器请求JSON响应时，可能会发生这种情况。
对于每个新域，解析DNS记录通常需要大约20-120毫秒。它只影响从该域下载的第一个资源，但它仍然很重要。如果提前执行DNS解析，将节省时间并更快地加载该资源。
1、使用的语法
href指向要解析的域名。你可以指定协议（https://domain.com）或不指定协议（https://domain.com），它的工作将相同。
2、使用注意事项
将其用于您很快需要的域名。当您在浏览器事先不知道的第三方域上拥有一些重要资源时，<link rel="dns-prefetch" /> 将帮助您。例如：
您的应用程序托管在my-app.com上，它向api.my-app.com发出AJAX请求。浏览器不知道您将向该域发出请求，因为您是从JS发出请求的。
使用<link rel=“dns prefetch”>解析api.my-app.com并使第一个数据请求更快
您的应用程序托管在my-app.com上，它使用谷歌字体。Google字体分两个阶段加载字体：首先，从fonts.googleapis.com下载一个CSS文件；然后，该CSS文件从fonts.gstatic.com请求字体。
浏览器不知道您将从fonts.gstatic.com加载字体，因此请使用<link rel="dns-prefetch">
使用它可以稍微加快一些第三方脚本或样式。如果页面中有第三方资源，您确实需要更快地加载，请为该域名添加<link rel="dns-prefetch" />。它将指示浏览器更快地为该域安排DNS解析。
注意<link rel=“dns prefetch”/>和<link rel=“preconnect”/>。在同一个域名中使用这两个标记并不是真正有用的——<link rel=“preconnect”/>已经包括了所有<link rel=“dns prefetch”/>所做的，以及更多。但是，在两种情况下，它仍然有意义：
您希望支持较旧的浏览器。从IE10和Safari 5开始支持<link rel=“dns prefetch”/>。chrome和firefox中支持<link rel=“preconnect”/>，但仅在11.1版中添加到Safari，在ie/edge中仍然不支持。如果需要支持这些浏览器，请使用<link rel=“dns prefetch”/>作为<link rel=“preconnect”/>的备用。
您希望加速4-6个以上的域名。不建议在超过4-6个域中使用<link rel=“preconnect”/>，因为打开和保持连接是一项昂贵的操作。<link rel=“dns prefetch”/>更轻，因此如果您想加快速度，请将其用于其他第三方域名。
3、其他说明
不是强制性的。浏览器不需要遵循<link rel="dns-prefetch">指令。这意味着它可以决定不执行DNS解析——例如，如果已经有很多DNS解析，或者在其他情况下。
什么是DNS。Internet上的每个服务器都由一个唯一的IP地址寻址，该地址看起来像216.58.215.78。但是，当您访问一个站点时，您不会键入服务器的IP地址——您使用站点域（像google.com）。这要归功于DNS（域名系统）服务器——将域（google.com）映射到服务器IP地址（216.58.215.78）的服务器。
要解析域名，浏览器必须对DNS服务器执行请求。当您连接到一个新的第三方域时，这需要20-120毫秒。
DNS被缓存，尽管不可靠。某些操作系统和浏览器缓存您的DNS请求。如果您需要再次从第三方域中检索某些内容，这将节省时间——但不要依赖它。Linux通常根本没有DNS缓存。Chrome有一个DNS缓存，但它只能存活一分钟。Windows缓存DNS响应5天。
五、prerender（预渲染）
<link rel="prerender">要求浏览器加载一个URL并在不可见选项卡中呈现它。当用户单击指向该URL的链接时，应该立即呈现页面。如果您确定用户下一步将访问某个特定页面，并且希望更快地呈现该页面，这将非常有用。不过目前<link rel=“prerender”>在主要浏览器中的支持兼容性一般。
1、使用的语法
href指向要在后台呈现的URL。
2、使用注意事项
当您确定一个用户下一页会去某页时。如果您有一个转换程序，其中70%的访问者从A页转到B页，那么A页中的<link rel=“prerender”/>可能有助于快速呈现B页。
不要过度使用。在流量和内存方面，预渲染页面的成本非常高。不要将<link rel=“prerender”/>用于多个页面。
3、其他说明
不是强制性的。浏览器不需要遵循<link rel="prerender">指令。这意味着它可以决定不执行预渲染——例如，如果内存不足，或者连接速度较慢。
Chrome不能进行完全渲染。Chrome没有完全渲染，而是进行NoState 预取以保存内存。这意味着Chrome会下载页面和所有后续资源，但不会呈现或执行JavaScript。
火狐和Safari根本不支持这个标签。这并没有破坏规范，因为浏览器不需要对标签进行操作；但这仍然是非常可悲的。火狐有一个已经开放了7年的实现缺陷，有报道说Safari也不支持它。
五、5种link加速方法总结
使用：
<link rel="preload"> —— 几秒钟后您需要一个资源
<link rel="prefetch"> —— 下一页需要资源时
<link rel="preconnect"> —— 当您知道很快就会需要一个资源，但还不知道它的完整网址
<link rel="dns-prefetch"> ——当您知道很快就会需要一个资源，但还不知道它的完整网址（对于旧浏览器）
<link rel="prerender"> —— 当您确定用户将导航到某个特定页面时，您希望加快速度
六、实际设置及操作教程
其实以上5中link加速的方法都各有优缺点，但是重点看自己的站点实际加载内容绝对选择哪些加速方式。比如以搬主题为例，尽管已经进行了动静分离，但是对于动静分离后的加载，实际上还是有可以优化的空间的。
动静分离的教程如下
动静分离后，先进行站点的实际需要加载的资源查看。
打开谷歌浏览器，输入任何要检测的网页打开，然后右键，点击检查，然后选择Network选项。其中记得勾选关闭缓存。如下图。
关闭缓存是为了让每次加载的页面都从服务器读取，而并非从本地电脑读取，从而了解到每个资源的大小及加载细节。接下来刷新网站或者按Ctrl+R组合键进行页面刷新。
然后找到每次加载页面的体积最大的，或者加载速度最慢的资源，比如自定义字体。如下图
自定义字体的体积大小有70多KB，每次都要下载几百毫秒。因此可以采取如下的加速方式：DNS预读取、预链接、预加载。
为什么选择这两个呢？首先我们加载的自定义字体是部署在对象存储上的，每次新访客打开网页都要进行加载绑定对象存储的域名，然后加载域名对应的字体。因为域名都是采用https协议，我们就可以分析得出，大概在字体上花的时间路径如下：
打开搬主题页面>调用页面的CSS及JS资源>调用到对象存储域名进行DNS域名解析>HTTPS握手>获取字体资源并下载
以上只是一个字体解析并下载的过程，但是这样会存在一个问题，那就是第三步的“调用到对象存储域名进行DNS域名解析”开始执行只能等到第二步完成后。那意味着会花掉较长时间在等待上，如果将第三步第四步排到与第二步同时进行，那么将节省大量等待时间，从而加快网站的访问速度。
因此，我们将字体的所在的对象缓存的域名进行DNS解析。同时添加域名的预链接和预加载。代码如下：
<link rel="preconnect" href="https://cdn.banzhuti.com/" crossorigin>
<link rel="dns-prefetch" href="//bzt.flxzz.com">
<link rel="preload" href="https://cdn.banzhuti.com/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
这些代码一般我们放到页眉文件里即可。以上我们是以自定义字体来举例，各个小伙伴可以根据自己站点的实际情况进行分析，然后选择核心重要的资源进行优化，比如站点的CSS、JS和字体等。
如果觉得复杂，可以直接用WordPress插件进行自动设置，基本就涵盖了大部分的优化操作
最后，搬主题给大家提个醒，link优化虽好，可不要贪多哦。贪多有可能物极必反，导致每个页面充斥着大量无用的资源加载，反而拖慢了页面速度。
评论前必须登录！
立即登录 注册