继上次webp图片优化《不容错过的WordPress加速秘诀：开启WebP支持，让网站速度瞬间爆表！》之后，博客站的加载速度已经有了明显的提升，但我始终觉得肯定还存在可以优化的地方，直到我偶然间看到了站点html中的输出链接，瞬间知道该从哪里优化了。

wordpress站默认输出js/css/图片以及各种资源链接的时候都使用了完整的url，比如站点logo链接地址：/wp-content/uploads/2019/07/logo.png，虽然看起来没啥问题，但是前面的域名段完全没必要，如果使用/wp-content/uploads/2019/07/logo.png这种相对路径不仅省去了域名段，对加载也完全没影响，最关键的是可以减小传输的数据量，那么该如何在wordpress中实现这一点呢？

要在wordpress中使用相对路径，主要有以下2种方式：

一、使用wordpress原生函数

wordpress原生提供了一个可以将完整链接转化为相对路径的方法：wp_make_link_relative，使用该方法即可将完整链接转换为相对路径，比如：

wp_make_link_relative(get_bloginfo('stylesheet_url'));
wp_make_link_relative(get_bloginfo('template_directory'));
wp_make_link_relative(get_the_permalink());

虽然通过wp_make_link_relative，也能实现全站使用相对路径的需求，但是这种方式需要改动的代码比较多，每一处输出链接的地方都需要调用该方法做转换，侵入性比较大，而且有一定的局限性，比如使用了某个插件，对于插件输出的链接就不能做转换了，我们也不能贸然去改插件的代码，后期更新会有问题。由于我的站点使用了autoptimize这个插件，来优化js/css资源，最终js/css资源的链接，也是由这个插件输出的，如何解决这个问题也带出了第二种使用相对路径的方式。

二、利用插件的输出钩子函数做链接替换

正如上面提到的，我的站点使用了autoptimize这个插件，而这个插件提供了

autoptimize_html_after_minify这个钩子函数，利用该钩子函数，我们可以将插件优化后的内容做替换修改，将站点域名全部替换成空字符串，剩下的就是相对路径了，实现方式如下：

function convert_links_to_relative($content) {
    $site_url = get_site_url();
    $content = str_replace($site_url, '', $content);
    return $content;
}
add_filter('autoptimize_html_after_minify', 'convert_links_to_relative');

这种方式的好处是对所有的输出内容做了全局修改，所以我们不再需要使用方法一种提到的wp_make_link_relative来一处一处去修改，但是也有一些需要注意的地方，比如这样的链接：

<a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?>">
<a href="<?php echo get_site_url(); ?>" title="<?php bloginfo('name'); ?>">

被替换后就变成了空的，我们需要在末尾加上一个/,改成类似下面这样：

<a href="<?php bloginfo('home'); ?>/" title="<?php bloginfo('name'); ?>">
<a href="<?php echo get_site_url(); ?>/" title="<?php bloginfo('name'); ?>">

三、写在最后

在完成上述修改后，清空缓存，并重新打开我们的网站页面会发现全部的站内资源都已经使用了相对链接，这种方式对于站内链接输出比较多的页面比如首页、列表页优化量还是比较可观的。