WordPress插件如何影響您網站的加載時間


您是否曾經想過WordPress插件如何影響您網站的加載時間? WordPress插件允許您向網站添加功能,但它們也可能影響網站速度。 在本文中,我們將向您展示WordPress插件如何影響網站的加載時間,以及如何更有效地控制它們。

WordPress插件如何影響您網站的加載時間

WordPress插件如何工作?

WordPress插件就像您的WordPress網站的應用程序。 您可以安裝它們以將更多功能添加到您的網站,例如聯繫表格,照片畫廊或電子商務商店。

當有人訪問您的網站時,WordPress首先加載其核心文件,然後加載所有活動插件。

有關更多詳細信息,請參閱我們有關什麼是WordPress插件的文章。 以及它們如何工作?

插件如何影響網站加載時間?

每個WordPress插件都提供不同的功能。 為此,一些插件在後端進行數據庫調用,而其他插件在前端加載資產,例如CSS樣式表,JavaScript文件,圖像等。

進行數據庫查詢和加載資產會增加站點的加載時間。 大多數插件都會發出HTTP請求來加載腳本,CSS和圖像等資產。 每個請求都會增加您網站的頁面加載時間。

正確完成後,對性能的影響通常不太明顯。

但是,如果您使用的多個插件發出太多的HTTP請求以加載文件和資產,那麼它將影響您網站的性能和用戶體驗。

如何檢查WordPress插件加載的文件?

要查看插件如何影響頁面加載時間,您需要檢查WordPress插件加載的文件。

您可以使用許多工具來解決這個問題。

您可以使用瀏覽器的開發人員工具(在Google Chrome中檢查和在Firefox中檢查元素)。

只需訪問您的網站,然後右鍵單擊以選擇檢查。 這將打開開發人員工具面板。

您需要點擊“網絡”標籤,然後重新加載您的網站。 頁面重新加載時,您將能夠查看瀏覽器如何加載每個文件。

查看頁面加載時間和使用檢查工具加載的文件

您也可以使用Pingdom和GTmetrix等第三方工具來查看此內容。 除了其他有用的信息外,這些工具還將向您顯示所有已加載的文件以及加載所需的時間。

使用Pingdom測試頁面加載時間

有多少個插件?

當您看到這些文件正在加載時,您可能會開始懷疑我應該在網站上使用多少個插件? 多少個插件太多?

答案確實取決於您在網站上使用的插件集。

一個壞插件可以加載12個文件,而多個好插件將僅添加幾個額外的文件。

所有編碼良好的插件都試圖將加載的文件數量降至最低。 但是,並非所有插件開發人員都那麼小心。 有些插件會在每次加載頁面時加載文件,即使它們不需要這些文件也是如此。

如果您使用太多此類插件,那麼這將開始影響您網站的性能。

如何控制插件?

您可以在WordPress網站上執行的最重要的操作是僅使用經過良好編碼,具有良好評論並且受可信賴來源推薦的插件。

請參閱我們的指南,了解如何查找哪些WordPress插件。

如果您發現WordPress插件正在影響您網站的負載,請尋找一個能完成同樣工作但效果更好的更好的插件。

接下來,您需要開始使用緩存和CDN來進一步提高站點的性能和速度。

您應該考慮的另一個因素是您的網站託管。 如果您的託管服務器未正確優化,則將增加站點的響應時間。

這意味著不僅插件,而且您網站的整體性能也會變慢。 確保您使用的是最好的WordPress託管公司之一。

作為最後的選擇,您可以卸載您無法使用的插件。 仔細查看網站上已安裝的插件,看看是否可以卸載其中的一些插件。 這不是理想的解決方案,因為您將不得不犧牲功能以提高速度。

手動優化WordPress插件資產

高級WordPress用戶可以嘗試管理WordPress插件如何在其網站上加載文件。 這樣做需要一定的編碼知識和調試技巧。

在WordPress中加載腳本和样式表的正確方法是使用 wp_enqueue_stylewp_enqueue_script 職能。

大多數WordPress插件開發人員都使用它們來加載插件文件。 WordPress還具有簡單的功能來註銷這些腳本和样式表。

但是,如果僅禁用加載這些腳本和样式表,則這將破壞您的插件,並且它們將無法正常工作。 要解決此問題,您需要將這些樣式和腳本複制並粘貼到主題的樣式表和JavaScript文件中。

這樣,您將能夠一次加載所有它們,從而最大程度地減少http請求並有效減少頁面加載時間。

讓我們看看如何輕鬆地在WordPress中註銷樣式表和JavaScript文件。

在WordPress中禁用插件樣式表

首先,您將需要找到要註銷的樣式表的名稱或句柄。 您可以使用瀏覽器的檢查工具找到它。

查找樣式名稱

找到樣式表句柄後,可以通過將此代碼添加到主題的functions.php文件或特定於站點的插件中來註銷它。

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

您可以在此函數中註銷所需數量的樣式句柄。 例如,如果您有多個插件要為其註銷樣式表,則可以這樣進行:

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' );
}

請記住,註銷這些樣式表將影響您網站上的插件功能。 您需要復制註銷的每個樣式表的內容,並將它們粘貼到WordPress主題的樣式表中,或將它們添加為自定義CSS。

在WordPress中禁用插件JavaScript

就像樣式表一樣,您將需要找出JavaScript文件所使用的句柄來註銷它們。 但是,您將無法使用檢查工具找到手柄。

為此,您將需要更深入地研究插件文件,以找出插件用來加載腳本的句柄。

找出插件使用的所有句柄的另一種方法是將此代碼添加到主題的functions.php文件中。

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

添加此代碼後,您可以使用 [pluginhandles] 簡碼以顯示插件腳本句柄的列表。

顯示WordPress中的插件腳本句柄列表

現在有了腳本句柄,您可以使用以下代碼輕鬆註銷它們:

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

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

您還可以使用以下代碼禁用多個腳本,如下所示:

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' );
}

現在,正如我們前面提到的,禁用這些腳本將使您的插件無法正常工作。

為避免這種情況,您需要將JavaScript組合在一起,但有時它無法順利運行,因此您必須知道自己在做什麼。 您可以從試錯法中學習(就像我們很多人一樣),但是我們建議您不要在實際網站上這樣做。

最好的測試位置是在本地WordPress安裝上,或在具有託管WordPress託管提供程序的暫存站點上。

僅在特定頁面上加載腳本

如果您知道需要插件腳本來加載網站上的特定頁面,則可以允許該特定頁面上的插件。

這樣,腳本將在站點的所有其他頁面上保持禁用狀態,並且僅在需要時才加載。

這是在特定頁面上加載腳本的方法。

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

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

此代碼僅在除聯繫頁面之外的所有頁面上禁用contact-form-7腳本。

目前為止就這樣了。

我們希望本文能幫助您了解WordPress插件如何影響您網站的加載時間。 您可能還希望查看我們的最終指南,以提高WordPress速度和網站性能。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。