前言:

 

*以下文中所有Wordpress 皆用WP来代替

 

WP的性能一直是令人诟病地方,特别是你想拿WP对比其他静态站点来比较的话,那WP的短板就会暴露无遗,因为WP是基于PHP语言生成的动态程序,所以这意味着你需要找到其他优化的方法。

 

在本文中,我将深入优化一个全新的安装的WP程序。

来帮助新人更好的理解WP的性能。

WP的加载速度会比你预想中更快!

 

WP的表现

 

  • 本文中,我将全新安装一个没有任何插件以及主题的WP程序,然后对他来深度优化。
  • 通过HTTPS和HTTP/2 在Nginx上运行,如果你想重新安装WP。我建议你使用HTTP/2协议。

 

  • 新安装的WP使用Twenty Sixteen主题
  • 安装完成后首次访问我刚安装好的WP,一共又15个HTTP请求,页面大小为135KM,和一个看起来还可以的时间。
  • 但是请记住,这只是一个白板程序,如果你添加插件和图片&媒体文件之后,肯定会变慢,所以我尽可能的优化好网站的加载时间。

 

 

一 禁用Emojis

 

第一个是wp-emoji-release.min.js文件。此文件用于在WP中显示表情符号字符,因为nofollow链接。除非你绝对不能没有表情符号,我们建议这是首先摆脱全新安装。要禁用表情符号,您可以选择以下选项:

1.使用代码禁用Emojis

禁用表情符号的第一种方法是将以下代码放入您的functions.php文件中。

/**

* Disable the emoji’s

*/

function disable_emojis() {

remove_action( ‘wp_head’, ‘print_emoji_detection_script’, 7 );

remove_action( ‘admin_print_scripts’, ‘print_emoji_detection_script’ );

remove_action( ‘wp_print_styles’, ‘print_emoji_styles’ );

remove_action( ‘admin_print_styles’, ‘print_emoji_styles’ );

remove_filter( ‘the_content_feed’, ‘wp_staticize_emoji’ );

remove_filter( ‘comment_text_rss’, ‘wp_staticize_emoji’ );

remove_filter( ‘wp_mail’, ‘wp_staticize_emoji_for_email’ );

add_filter( ‘tiny_mce_plugins’, ‘disable_emojis_tinymce’ );

}

add_action( ‘init’, ‘disable_emojis’ );

 

/**

* Filter function used to remove the tinymce emoji plugin.

*

* @param    array  $plugins

* @return   array             Difference betwen the two arrays

*/

function disable_emojis_tinymce( $plugins ) {

if ( is_array( $plugins ) ) {

return array_diff( $plugins, array( ‘wpemoji’ ) );

} else {

return array();

}

}

二 插件禁用Emojis

如果您更喜欢使用免费的轻量级插件,Ryan Hellyer 为WP创建了一个很棒的“ Disable Emojis ”插件。该插件总大小仅为9 KB

请记住,对于插件来说,运行很多插件并不总是坏事。它更多的是关于插件的质量与数量。如果插件是轻量级的,它不会减慢您的网站速度。基本上所有这个插件正在运行我们上面共享的代码。执行此操作后,我们现在剩下14HTTP129KB。

第2步。禁用嵌入

接下来,我们将看一下wp-embed.min.js脚本。自4.4版以来,这已包含在WP中。这是一个自动在可视化编辑器中格式化粘贴内容的脚本,例如视频,推文等。但是,这并不是真正需要的。这个脚本的一个大问题是,无论是否正在使用,它都会加载到每个页面上。即使禁用此脚本。

1.禁用嵌入代码

禁用嵌入的第一种方法是将以下代码放入functions.php文件中。

// Remove WP embed script

function speed_stop_loading_wp_embed() {

if (!is_admin()) {

wp_deregister_script(‘wp-embed’);

}

}

add_action(‘init’, ‘speed_stop_loading_wp_embed’);

执行此操作后,我们现在剩下13个HTTP请求,总大小为128 KB。您还可以看到,当我们进行这些WordPress性能调整时,我们的DOMContentLoaded和总加载时间不断减少。我们正在使用Chrome DevTools并禁用了缓存。

 

第3步。实现缓存

请注意,在我们所有的速度测试中,第一个HTML初始DOC负载非常高。即使我们在Chrome DevTools中启用缓存,它仍然会在180毫秒左右徘徊。因此,要修复初始HTML DOC加载时间,您需要实现缓存机制。在这种情况下,我们将使用KeyCDN 的免费WordPress Cache Enabler插件。

 

Cache Enabler是一个用于WordPress的轻量级缓存插件,它通过生成静态HTML文件到磁盘使您的网站更快。这是一种非常快速的缓存方法。该插件还侧重于HTTP / 2,这意味着您将找不到连接选项,因为这会损害HTTP / 2性能。该插件总大小仅为15.4 KB

在Cache Enabler插件设置中,我们检查了预压缩,以及HTML和Inline JS的缓存缩小。

现在,让我们再次查看我们的第一个HTML初始DOC加载。只需启用Cache Enabler,就可以将平均从180毫秒降至平均80毫秒。所以它从我们的HTML DOC加载中削减了约100毫秒。这是缓存插件将为您的WordPress网站所做的功能。此外,由于缩小,我们的总页面大小降至123 KB,并且我们的DOMContentLoaded和总加载时间也更低。

 

第4步。使用CDN

现在我们已经对基础新安装进行了相当好的优化,现在是时候添加CDN了。通过使用CDN,您可以通过提供更接近访问者的内容来进一步减少延迟。此外,正如我们稍后将展示的那样,还有其他好处,例如转向单个HTTP / 2连接并忽略查询字符串以进行其他缓存。

请务必查看我们关于CDN如何工作 的深入帖子以及我们的入门指南。在这篇文章中,我们假设您已经启动并运行了CDN。我们将使用KeyCDN 的免费WordPress CDN Enabler插件来部署我们的CDN。该插件总大小仅为6.4 KB

 

在CDN启动器设置中,我们启用HTTPS(因为我们使用来自KeyCDN的HTTP / 2)并输入我们的CDN URL。

 

启用CDN后,您可以看到我们的大部分资产(JavaScript,CSS等)现在都是从我们的CDN加载的。总加载时间减少了大约一半,我们的DOMContentLoaded时间也减少了很多。请注意我们的瀑布如何随着我们不断优化而变得越来越好。不确定我们的意思是瀑布?请务必查看我们关于瀑布分析的深入文章。

 

步骤5.删除查询字符串

接下来,您会注意到每个脚本如何以版本号结尾?例如ver = 1.12.4或vers = 3.4.1。这些称为查询字符串,有助于确定脚本的版本。像这样的查询字符串的问题在于它对于缓存目的而言效率不高,并且有时会完全阻止缓存这些资产。所以你有三个选择:

1.使用代码删除查询字符串

删除查询字符串的第一种方法是将以下代码放入functions.php文件中。

function _remove_script_version( $src ){

$parts = explode( ‘?ver’, $src );

return $parts[0];

}

add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );

add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15,

2.使用插件删除查询字符串

如果您更喜欢使用免费的轻量级插件,Atul Kumar Pandey 为WordPress 创建了一个很棒的“ Query Strings Remover ”插件。该插件总大小仅为1.5 KB

 

3.使用CDN缓存和忽略查询字符串(推荐)

第三个选项,这是推荐的方法是,如果您使用KeyCDN,我们可以选择实际忽略查询字符串并缓存资产。默认情况下,在所有区域上启用此功能。这意味着您不需要使用代码或插件进行此优化,它全部由CDN处理。如果由于某种原因需要禁用它,可以在区域的高级功能下完成。

 

第6步。托管Google字体

接下来,如果我们仔细观察,我们可以看到有4个请求被生成到fonts.gstatic.com。这是加载谷歌字体,它包含在默认的WordPress主题中。在我们的示例中,它为Merriweather和Montserrat加载不同的字体权重。

https://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C400italic%2C700italic%2C900italic%7CMontserrat%3A400%2C700%7C&subset=latin%2Clatin-ext

 

https://fonts.gstatic.com/s/montserrat/v7/IQHowFEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4WY.woff2

 

https://fonts.gstatic.com/s/merriweather/v13/RFda8w1V0eDZheqfcyQ4EOgdm0LZdjqr5-oayXSOefg.woff2

 

https://fonts.gstatic.com/s/montserrat/v7/zhcz-WihjSQC0oHJ9TCYPkvArhqVIZ0nv9q090hN8.woff2

最好减少外部DNS查找的数量,并且如果可能的话,还要关注单个HTTP / 2连接。每次外部查找都会引入一系列延迟问题,内容下载时间,TLS协商等等。所以我们要做的就是将Google字体移到我们的CDN上。这样,它们从与我们其余资产相同的位置加载。

您可以查看我们有关如何将Google字体迁移到CDN的深入教程。如果您不使用CDN,这也可以用于直接在Web服务器上托管它们。我们快速下载以下Google字体  https://google-webfonts-helper.herokuapp.com并将其托管在我们的服务器上名为“fonts”的文件夹中。

merriweather-v13-latin-700.woff

merriweather-v13-latin-700.woff

merriweather-v13-latin-700italic.woff

merriweather-v13-latin-700italic.woff2

merriweather-v13-latin-900.woff

merriweather-v13-latin-900.woff2

merriweather-v13-latin-900italic.woff

merriweather-v13-latin-900italic.woff2

merriweather-v13-latin-italic.woff

merriweather-v13-latin-italic.woff2

merriweather-v13-latin-regular.woff

merriweather-v13-latin-regular.woff2

montserrat-v7-latin-700.woff

montserrat-v7-latin-700.woff2

montserrat-v7-latin-regular.woff

montserrat-v7-latin-regular.woff2

因为我们已经使用了CDN Enabler插件,所以这些字体会立即复制到我们的CDN。要使用它们,我们必须在WordPress主题中禁用Google字体,并将样式应用于我们的内部CSS样式表。这取决于您使用的主题。如果您无法弄清楚如何在当前主题上禁用Google字体,请随时询问您的主题开发人员。

正如您所看到的,我们现在已经关闭了12个HTTP请求,因为我们不再需要查询Google的样式表。我们的字体现在从CDN加载。您可以看到我们的DOMContentLoaded和总加载时间也继续下降。我们所做的每项优化都会对性能产生重大影响。

https://cdn.themewood.com/fonts/montserrat-v7-latin-700.woff2

 

https://cdn.themewood.com/fonts/merriweather-v13-latin-regular.woff2

 

https://cdn.themewood.com/fonts/montserrat-v7-latin-regular.woff2

 

步骤7.禁用Gravatars

正如您所看到的,我们几乎只有一个HTTP / 2连接,没有外部DNS查找。唯一剩下的就是致电gravatar.com。值得庆幸的是他们现在正在使用HTTP / 2,但除非你真的想要头像,否则你可以禁用它们。

 

通过取消检查WordPress仪表板的讨论设置中的“显示头像”,可以轻松删除此内容。

 

通过删除对gravatar.com的调用,我们现在减少了11个HTTP请求,并且在我们的CDN上使用单个HTTP / 2连接来连接外部资产。

 

如果我们取消选中Chrome DevTools中的“禁用缓存”选项,我们可以看到重复访问网站的加载速度非常快!

 

 

 

发表评论

共有 0 条评论