我們如何優化List25性能256%


您想加快WordPress網站的速度嗎? 想知道可以幫助您減少網站加載時間的WordPress優化技巧嗎? 在本文中,我們將向您展示如何通過共享優化List25網站以提高性能的方法來加快WordPress的運行速度。

您可能已經聽說過WordPress速度對於SEO很重要。 速度更快的網站具有更好的用戶參與度,更多的瀏覽量和更好的銷售。 在一個奇怪的循環案例研究中,他們發現延遲一秒鐘可能使您損失7%的銷售,11%的頁面瀏覽量減少以及16%的客戶滿意度降低。

Strangeloop Speed案例研究

那麼,您如何真正加快WordPress的速度呢?

好吧,我們決定分享一個完整的案例研究,以向您展示List25網站的結果以及我們如何完成這一切,而不僅僅是分享速度提​​示列表。

總覽

List25是由我們的創始人Syed Balkhi創建的娛樂博客。 該網站擁有超過150萬訂閱者,YouTube頻道擁有超過四分之一 十億 意見。

該網站上的內容主要是圖像和視頻,它們佔用了TB的帶寬,因此整體速度的優化對於我們降低成本,減少頁面廢棄並改善網站時間至關重要。

在開始優化之前,根據Pingdom的說法,我們的首頁加載時間為2.21秒。 完成後,頁面加載時間降至1.21秒 (快45%)

在此優化過程中,我們能夠加快服務器響應時間,提高頁面速度性能得分,減少總請求數,並縮短總體加載時間。

讓我們看一下幫助我們加快WordPress網站速度的優化技術。

WordPress託管

擁有一個好的虛擬主機對於您的網站速度至關重要。 隨著我們網站的流行,我們已經超過了以前的託管公司(HostGator)。

他們的服務器根本無法處理如此大小的網站,因為List25收到了數千萬的網頁瀏覽量。 HostGator非常適合較小的站點,但不適用於如此規模的站點。

我們研究了各種託管的WordPress託管選項,最終最終使用SiteGround託管List25,因為它們為該站點提供了最佳的總體價值。

您可以立即看到我們服務器響應時間的改善。 我們從最大442ms到172ms的響應時間。 改善了256%。

切換到SiteGround後的List25服務器響應時間

Siteground已針對WordPress,Joomla和Magento等特定平台構建了性能提升器。 它們基於您站點的平台,專門優化了服務器,從而提高了整體性能。

我們寫了一篇有關何時應該切換虛擬主機的文章,其中談到了7個關鍵指標。

如果您要切換主機,請一定嘗試一下SiteGround。 WPBeginner用戶可在託管+免費域上獲得60%的獨家折扣。

緩存插件

在提高WordPress速度方面,緩存是僅次於虛擬主機的第二重要因素。

通常,當訪問者訪問您的WordPress站點時,您的服務器會將PHP請求傳遞給MySQL數據庫,該數據庫查找正在請求的頁面,並即時生成該頁面並將其顯示給訪問者。 這佔用了大量資源。 緩存後,可以節省時間和資源。

下圖突出顯示了該過程。 用外行術語來說,將緩存視為創建桌面快捷方式,可以幫助您更快地訪問文件。

什麼是頁面緩存?

對於List25網站,我們使用的是SiteGround SuperCacher,這是他們為客戶專門構建的插件。 最重要的是,他們使用Varnish(其性能增強器的一部分)添加了高級動態緩存選項。

如果您不在Siteground上,請不要擔心。 您可以使用許多可用的解決方案之一(例如W3 Total Cache或WP Super Cache)在WordPress網站上設置緩存。

在WPBeginner,我們使用W3 Total Cache,它提供了許多頁面緩存選項,數據庫緩存和對象緩存。

隨著越來越多的託管公司專注於WordPress,我們將看到更多內置的自定義緩存解決方案。 Pagely和WPEngine還提供了自己的內置緩存系統。

CDN

內容交付網絡(CDN)可以幫助您提高網站速度。 自List25開始以來,我們一直在使用MaxCDN,因此這部分沒有改變。

我們已經寫了一篇完整的文章,內容是什麼是CDN以及為什麼需要它以及信息圖。

什麼是CDN

CDN使我們能夠從內容交付網絡提供所有CSS,Javascript和圖像。 通過確定站點訪問者的位置並從最接近訪問者的服務器中提供內容來工作。

如果您不打算購買高級CDN解決方案,那麼可以使用Cloudflare。

合併文件以減少HTTP請求

當您添加更多插件時,它們通常會添加自己的JavaScript和CSS文件。 每個其他文件都是一個新的HTTP請求。

我們將這些JavaScript和CSS文件組合為一個文件,以減少請求並加快加載時間。 您可以查看有關WordPress插件如何影響加載時間的更多詳細信息。

現在,我們正在加載站點上特定區域可能不需要的一些小功能,但是此代碼已緩存在CDN上,結果表明,與加載幾個較小的JS文件相比,對文件的請求更少,提供了更好的性能。

這是您必須定期執行的操作,因為您使用的插件會隨著時間變化。

圖像精靈

我們利用了一個圖像精靈,它將幾個社交和站點圖標組合成一個圖像:

List25雪碧

每當我們需要顯示特定圖標時,我們都會使用CSS進行以下操作:

  1. 將圖像加載為背景圖像
  2. 定義我們需要圖標的元素的寬度和高度
  3. 設置圖片的背景位置以加載必要的圖標

例如,要加載側邊欄的社交媒體圖標,我們使用:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

background-positionwidthheight CSS屬性可幫助我們定位要輸出的圖像的特定部分:

List25 Sprite,已編輯

結果,僅對此圖像文件的第一個請求正在使用帶寬。 隨後對CDN的圖像請求將導致加載緩存的(通常是本地的)版本,並且只需要請求一個圖像和6個不同的社交圖標即可。

通過將JavaScript,CSS和圖像結合在一起,我們大大減少了請求數量。

代碼壓縮

代碼最小化涉及刪除空格和換行符以減小文件大小,從而在請求時可以更快地加載。

對於List25,我們使用SCSS,這是一種基於語法的樣式表(Sass簡介)。 這使我們能夠以易於閱讀的佈局在多個開發領域中構建CSS文件:

List25 SCSS

然後,我們使用CodeKit將SCSS文件編譯為單個CSS文件。 CodeKit還刪除空格和換行符,以確保文件盡可能小:

結果,我們能夠將CSS文件大小減少28%。

圖像優化

我們在兩個方面優化了圖像:WordPress主題和上傳的內容。

對於WordPress主題,我們使用CodeKit來確保所有圖像都進行無損壓縮。 這樣可確保文件大小盡可能小,而不會降低質量。

List25圖像優化

我們還教育了所有作者關於保存針對Web優化的圖像的重要性。 請參閱我們的指南,了解如何保存針對網絡優化的圖像。

無JavaScript社交分享

就像其他任何網站一樣,List25的社交共享確實很重要。 但是,社交共享插件會大大降低您的網站速度。

List25社交分享按鈕

在我們的測試中,雖然集成了這四個社交網絡的腳本並沒有影響頁面加載時間,但在移動設備上查看時,它明顯降低了網站的速度。 儘管腳本是異步加載的,但社交共享按鈕仍會花費幾秒鐘的時間顯示,導致帖子內容隨按鈕加載到視圖中而移動。

為了解決這個問題,我們轉向了(幾乎)沒有Java腳本的解決方案。 社交網絡的每個共享按鈕均由我們的自定義WordPress插件呈現,並且主題的Javascript僅在用戶單擊按鈕時才用於打開Web瀏覽器窗口。

但是,我們仍然想顯示帖子在所有社交網絡中擁有的共享總數。 為此,我們製作了一個小的自定義WordPress插件,以將每個社交網絡中的社交份額計數檢索和緩存到Post元表中。 這些計數每24小時更新一次,以確保耗時的查詢不會一直運行。

您可以使用Sharre之類的API,也可以剖析Floating Social Bar進行自定義。

使用Pingdom的RUM(實時用戶監控),這個新的共享插件將“真實”頁面的加載時間從6秒減少到2秒多一點。 它還確保了我們減少了對第三方腳本的請求數量。

結果

我們大大提高了網站速度。 加載時間從2.2秒增加到1.22秒。

6

我們能夠大大減少服務器的響應時間。

切換到SiteGround後的List25服務器響應時間

這有助於減少Google機器人下載頁面所花費的時間,從而提高了我們的抓取速度。

網站管理員工具抓取頁面所花費的時間

我們的總體跳出率下降了7%,因為網站加載速度更快,而且通過切換主機,我們能夠減少服務器錯誤。

List25跳出率

您可以想像,跳出率較低時,在網站上花費的時間也增加了30秒以上。

結論

如您所見,加載速度更快的網站可以提高訪問者的參與度。 我們討論的技術涵蓋了一系列基本和中間的改進,您可以實施這些改進來優化WordPress網站。

我們希望本文能幫助您加快WordPress網站的速度。 您可能還需要查看我們的文章,了解2015年必須有20個必須具有WordPress插件的文章。

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