如何简化WordPress头部信息,去掉一些不必要的代码加载

懂得网站优化的都明白,去除网页上的不必要加载,不仅可以提高页面加载速度,还可以让页面代码更简洁,可读性更强。

对于WordPress更是如此,当我们安装了一个主题,查看页面源文件时,会发现页面头部加载了很多我们用不到的代码,这使页面代码看起来十分臃肿,其中有些代码还可能造成安全风险。

今天我们就来讲一下如何去掉WordPress页面头部的冗余代码。

拿我自己这个WordPress博客举例,在刚安装完主题,查看首页源代码时,发现光<head>部分代码就有64行,其中大部分都是不需要的!

话不多说,马上开始清理!

首先打开header.php,删除以下两行代码。

<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

其中第一行用于定义XFN(XHTML Friends Network),意思是XHTML社交网络,是一个通过XHTML标记语言在网页上保存关系数据的方法,用不到,所以删除。

第二行pingback的作用是引用文章的通知,比如你的网站中引用了别人的一篇文章,就会给别人的网站发一个通知,反之也一样,它需要引用和被引用双方都开启pingback功能,国内基本很少用,所以删除。

注意!接下来的脚本都是通过操作functions.php文件来删除。

首先删除网页上显示的WordPress版本号,源代码上是这样显示的:

<meta name="generator" content="WordPress X.X.X" />

这个展示到页面中不太安全,容易被黑客利用。

删除方法是在functions.php中加入这行代码:

remove_action( 'wp_head', 'wp_generator' ); 

emoji表情我也用不到,它产生的脚本如下:

functions.php中加入下面两行代码,分别用于删除emoji表情的script脚本和style样式:

remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); 
remove_action( 'wp_print_styles', 'print_emoji_styles' );

接下来移除feed,feed主要用于订阅服务,但现在很少人会订阅了,而且还可能被采集站利用。

feed产生以下类型脚本:

<link rel="alternate" type="application/rss+xml" ... />

functions.php中加入下面这行代码,用于删除文章和评论的feed;

remove_action( 'wp_head', 'feed_links', 2 ); 

继续加入这行代码,用于删除分类和标签feed。

remove_action( 'wp_head', 'feed_links_extra', 3 );

下面这两个,是离线编辑器产生的脚本。

<link rel="EditURI" type="application/rsd+xml" ... />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" ... />

删除方法是在functions.php中添加以下代码:

remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );

下面这段代码是为了从指定网站预获取表情和头像,是境外网站,可能影响速度,也需要删除。

<link rel='dns-prefetch' href='//s.w.org' />

删除方法是在functions.php中添加以下代码:

add_filter( 'emoji_svg_url', '__return_false' );

还有下面这个REST API,也是指向境外网站,同样要删除。

<link rel="https://api.w.org/" ... />

删除方法是在functions.php中添加以下代码:

remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );

最后是删除编辑器和新版网站编辑器的前端脚本。

<link rel='stylesheet' id='wp-block-library-css' ... />
<style id='wp-block-library-theme-inline-css' ... > ... </style>
<style id='global-styles-inline-css' ... > ... </style>

删除方法是在functions.php中添加以下代码:

function remove_wp_block_library_css() {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' ); 
    wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css', 100 );

完成这一系列操作后,发现<head>部分代码从64行减少到了26行,看起来非常清爽!