WordPress插件如何影响您网站的加载时间

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time, and how you can control them more efficiently.

您是否曾经想过WordPress插件如何影响您网站的加载时间? WordPress插件允许您向网站添加功能,但它们也可能影响网站速度。 在本文中,我们将向您展示WordPress插件如何影响网站的加载时间,以及如何更有效地控制它们。

How WordPress plugins affect your site's load time
WordPress插件如何工作? (How WordPress Plugins Work?)

WordPress plugins are like apps for your WordPress site. You can install them to add more features to your website like contact forms, photo galleries, or an ecommerce store.

WordPress插件就像您的WordPress网站的应用程序。 您可以安装它们以向您的网站添加更多功能,例如联系表格照片画廊电子商务商店

When someone visits your website, WordPress first loads its core files and then loads all your active plugins.

当有人访问您的网站时,WordPress首先加载其核心文件,然后加载所有活动插件。

For more details, take a look at our article about what are WordPress plugins? And how do they work?.

有关更多详细信息,请参阅我们的文章,有关什么是WordPress插件? 以及它们如何工作?

插件如何影响网站加载时间? (How Can Plugins Affect Site Load Time?)

Each WordPress plugin offers different functionality and features. To do that, some plugins make database calls on the backend while others load assets on the front-end such as CSS stylesheets, JavaScript files, images, etc.

每个WordPress插件都提供不同的功能。 为此,某些插件在后端进行数据库调用,而另一些插件在前端加载资产,例如CSS样式表,JavaScript文件,图像等。

Making database queries and loading assets adds up to your site’s load time. Most plugins make an HTTP request to load assets like scripts, CSS, and images. Each request increases your site’s page load time.

进行数据库查询和加载资产会增加站点的加载时间。 大多数插件都会发出HTTP请求,以加载脚本,CSS和图像等资产。 每个请求都会增加您网站的页面加载时间。

When done properly, the performance impact is often not too noticeable.

正确完成后,对性能的影响通常不太明显。

However, if you are using multiple plugins that are making too many http requests to load files and assets, then it will affect your site’s performance and user experience.

但是,如果您使用的多个插件发出太多的HTTP请求来加载文件和资产,那么它将影响您网站的性能和用户体验。

如何检查WordPress插件加载的文件? (How to Check Files Loaded by WordPress Plugins?)

To see how plugins are affecting your page load time, you need to check the files loaded by WordPress plugins.

要查看插件如何影响页面加载时间,您需要检查WordPress插件加载的文件。

There are plenty of tools that you can use to figure this out.

您可以使用许多工具来解决这个问题。

You can use your browser’s developer tools (Inspect in Google Chrome and Inspect Element in Firefox).

您可以使用浏览器的开发人员工具 (在Google Chrome中检查和在Firefox中检查元素)。

Simply visit your website and right click to select Inspect. This will open the developer tools panel.

只需访问您的网站,然后右键单击以选择检查。 这将打开开发人员工具面板。

You need to click on the ‘Network’ tab and then reload your website. As the page reloads, you will be able to see how your browser loads each file.

您需要点击“网络”标签,然后重新加载您的网站。 页面重新加载时,您将能够查看浏览器如何加载每个文件。

See page load time and files loaded with inspect tool

You can also use third-party tools like Pingdom and GTmetrix to see this. Among other useful information, these tools will also show you all files that are loaded and how much time they took to load.

您也可以使用Pingdom和GTmetrix等第三方工具来查看此信息。 除了其他有用的信息外,这些工具还将向您显示所有已加载的文件以及加载所需的时间。

Testing page load time using Pingdom
有多少个插件? (How Many Plugins are Too Many?)

As you see these files being loaded, you may start wondering how many plugins you should I use on my site? How many plugins are too many?

当您看到这些文件正在加载时,您可能会开始怀疑我应该在网站上使用多少个插件? 多少个插件太多?

The answer really depends on the set of plugins you are using on your website.

答案确实取决于您在网站上使用的插件集。

A single bad plugin can load 12 files while multiple good plugins will add just a couple of extra files.

一个坏插件可以加载12个文件,而多个好插件将仅添加几个额外的文件。

All well-coded plugins try to keep the files they load to a minimum. However, not all plugin developers are that careful. Some plugins will load files on every single page load, even when they don’t need those files.

所有编码良好的插件都试图将加载的文件数量降至最低。 但是,并非所有插件开发人员都那么小心。 有些插件会在每次加载页面时加载文件,即使它们不需要这些文件也是如此。

If you are using too many of such plugins, then this will start affecting your site’s performance.

如果您使用太多此类插件,那么这将开始影响您网站的性能。

如何控制插件? (How to Keep Plugins in Control?)

The most important thing you can do on your WordPress site is to only use plugins that are well coded, have good reviews, and are recommended by trusted sources.

您可以在WordPress网站上执行的最重要的操作是仅使用经过良好编码,具有良好评论并且受可信赖来源推荐的插件。

See our guide on how to find which WordPress plugins.

请参阅我们的指南, 了解如何查找哪些WordPress插件

If you find that a WordPress plugin is affecting your site’s load, then look for a better plugin that does the same job but better.

如果您发现WordPress插件正在影响您网站的负载,请寻找一个能完成相同工作但效果更好的更好的插件。

Next, you need to start using caching and CDN to further improve your site’s performance and speed.

接下来,您需要开始使用缓存CDN来进一步提高站点的性能和速度。

Another factor you should consider is your website hosting. If your hosting servers are not properly optimized, then it will increase your site’s response time.

您应该考虑的另一个因素是您的网站托管。 如果您的托管服务器未正确优化,则将增加站点的响应时间。

This means that not just plugins, but your site’s overall performance will be slower. Make sure you are using one of the best WordPress hosting companies.

这意味着不仅插件,而且您网站的整体性能也会变慢。 确保您使用的是最好的WordPress托管公司之一。

As a last resort, you can uninstall plugins that you can live without. Carefully review the installed plugins on your website,and see if you can uninstall some of them. This is not an ideal solution as you will have to compromise on features for speed.

作为最后的选择,您可以卸载没有生活的插件。 仔细查看您网站上已安装的插件,看看是否可以卸载其中的一些插件。 这不是一个理想的解决方案,因为您将不得不牺牲功能以提高速度。

手动优化WordPress插件资产 (Optimize WordPress Plugin Assets Manually)

Advanced WordPress users can try to manage how WordPress plugins load files on their site. Doing so requires some knowledge of coding and some debugging skills.

高级WordPress用户可以尝试管理WordPress插件如何在其网站上加载文件。 这样做需要一定的编码知识和调试技巧。

The proper way to load scripts and stylesheets in WordPress is by using the wp_enqueue_style and wp_enqueue_script functions.

在WordPress中加载脚本和样式表正确方法是使用wp_enqueue_stylewp_enqueue_script函数。

Most WordPress plugin developers use them to load plugin files. WordPress also comes with easy functions to deregister those scripts and stylesheets.

大多数WordPress插件开发人员都使用它们来加载插件文件。 WordPress还具有简单的功能来注销这些脚本和样式表。

However, if you just disable loading those scripts and stylesheets, then this will break your plugins, and they will not work correctly. To fix that, you will need to copy and paste those styles and scripts into your theme’s stylesheet and JavaScript files.

但是,如果仅禁用加载这些脚本和样式表,则这将破坏您的插件,并且它们将无法正常工作。 要解决此问题,您需要将这些样式和脚本复制并粘贴到主题的样式表和JavaScript文件中。

This way you will be able to load all of them at once, minimizing the http requests and effectively decreasing your page load time.

这样,您将能够一次加载所有它们,从而最大程度地减少http请求并有效减少页面加载时间。

Let’s see how to easily deregister stylesheets and JavaScript files in WordPress.

让我们看看如何轻松地在WordPress中注销样式表和JavaScript文件。

在WordPress中禁用插件样式表 (Disable Plugin Stylesheets in WordPress)

First, you will need to find the name or handle of the stylesheet that you want to deregister. You can locate it using your browser’s inspect tool.

首先,您需要找到要注销的样式表的名称或句柄。 您可以使用浏览器的检查工具找到它。

Finding a style name

After finding the stylesheet handle, you can deregister it by adding this code to your theme’s functions.php file or a site-specific plugin.

找到样式表句柄后,您可以通过将此代码添加到主题的functions.php文件或特定站点的插件中来注销它。


add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

You can deregister as many style handles as you want within this function. For example, if you have more than one plugin to deregister the stylesheet for, then you would do it like this:

您可以在此函数中注销所需数量的样式句柄。 例如,如果您有多个插件要为其注销样式表,则可以这样进行:



add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}


Remember, that deregistering these stylesheets will affect plugin features on your website. You need to copy the contents of each stylesheet you deregister and paste them in your WordPress theme’s stylesheet or add them as custom CSS.

请记住,注销这些样式表将影响您网站上的插件功能。 您需要复制注销的每个样式表的内容,并将其粘贴到WordPress主题的样式表中,或将它们添加为自定义CSS

在WordPress中禁用插件JavaScript (Disable Plugin JavaScripts in WordPress)

Just like stylesheets, you will need to find out the handle used by the JavaScript file to deregister them. However, you will not find the handle using the inspect tool.

就像样式表一样,您将需要找出JavaScript文件所使用的句柄来注销它们。 但是,您将无法使用检查工具找到手柄。

For that you will need to dig deeper into plugin files to find out the handle used by the plugin to load a script.

为此,您将需要更深入地研究插件文件,以找出插件用来加载脚本的句柄。

Another way to find out all the handles used by plugins is to add this code into your theme’s functions.php file.

找出插件使用的所有句柄的另一种方法是将此代码添加到主题的functions.php文件中。


function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

After adding this code, you can use [pluginhandles] shortcode to display a list of plugin script handles.

添加此代码后,可以使用[pluginhandles]简码显示插件脚本句柄的列表。

Display a list of plugin script handles in WordPress

Now that you have script handles, you can easily deregister them using the code below:

现在有了脚本句柄,您可以使用以下代码轻松注销它们:


add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

You can also use this code to disable multiple scripts, like this:

您还可以使用以下代码禁用多个脚本,如下所示:


add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

Now, as we mentioned earlier that disabling these scripts will stop your plugins to work properly.

现在,正如我们前面提到的,禁用这些脚本将使您的插件无法正常工作。

To avoid this, you will need to combine JavaScripts together, but sometimes it does not work smoothly, so you must know what you are doing. You can learn from trial and error (like a lot of us do), but we recommend you do not do that on a live site.

为避免这种情况,您需要将JavaScript组合在一起,但是有时它不能顺利运行,因此您必须知道自己在做什么。 您可以从试错法中学习(就像我们很多人一样),但是我们建议您不要在实际网站上这样做。

The best place to test is on a local WordPress install or on a staging site with managed WordPress hosting providers.

最好的测试位置是在本地WordPress安装上,或在具有托管WordPress托管提供程序的暂存站点上。

仅在特定页面上加载脚本 (Load Scripts Only on Specific Pages)

If you know that you will be needing a plugin script to load on a specific page on your website, then you can allow a plugin on that particular page.

如果您知道需要在网站的特定页面上加载插件脚本,则可以在该特定页面上允许插件。

This way the script remains disabled on all other pages of your site and is loaded only when needed.

这样,脚本将在站点的所有其他页面上保持禁用状态,并且仅在需要时才加载。

Here is how you can load scripts on specific pages.

这是在特定页面上加载脚本的方法。


add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code simply disables contact-form-7 script on all pages except the contact page.

此代码仅在除联系页面之外的所有页面上禁用contact-form-7脚本。

That’s all for now.

目前为止就这样了。

We hope this article helped you learn how WordPress plugins affect your site’s load time. You may also want to see our ultimate guide to improve WordPress speed and site performance.

我们希望本文能帮助您了解WordPress插件如何影响您网站的加载时间。 您可能还需要查看我们的最终指南,以提高WordPress速度和网站性能

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值