CartFlows 和網站性能

已發表: 2020-07-14

上週,我們讓一位用戶對 CartFlows 寫了負面評論,因為他們認為 CartFlows “在他們的測試中”表現不佳。

這是他們評論的截圖。

哎喲! 沒有產品創建者希望看到一星評價,更不用說關於性能的評價了。

根據他們的測試,他們在 GTMetrix.com 上看到 4.5 秒到 8.3 秒的完全加載時間,總共有 83 個請求。 他們繼續得出結論,這將導致店主賠錢。

知道我們對性能的優先考慮,我知道他們的測試肯定有問題,但更重要的是,我想自己測試一下,看看數字說明了什麼。

在 CartFlows,我們以絕對透明為榮,所以這是寫下我的發現的絕佳機會,無論好壞。

什麼影響網站性能?

在我們開始之前,重要的是要了解您的網站加載時間的速度受幾個因素的影響。

主要因素有:

  • 您的網站託管選擇
  • 您在網站上使用的主題
  • 您的網站上有哪些插件
  • 您在要測試的頁面上放置的內容

CartFlows 只是您網站的一部分,我們無法完全控制整個體驗,因為:

  • 我們不會決定您應該使用哪種託管服務
  • 我們不會決定您應該使用什麼主題
  • 我們不會決定您應該使用哪些插件
  • 我們不會決定您在要測試的頁面上放置什麼

我們可以控制的是 CartFlows 本身的性能以及它在您網站上的運行方式。 還有我們如何設計我們的模板,但當然用戶可以按照他們想要的方式更改模板。

CartFlows 性能數據

所以這裡是我們的測試結果。 請記住,滿載時間並不是需要注意的重要數字,即使在這些測試中它的速度很快,因為它會上下波動。 此外,它不能反映訪問者如何體驗頁面。

對於此測試,我們通過 Cloudways 使用每月 20 美元的 Vultr 服務器。 該服務器目前有 16 個 WordPress 網站。 Varnish 在服務器上被禁用,因此服務器上沒有發生服務器端緩存。

為了能夠講述有關性能的整個故事,我們進行了 4 次差異測試。

  • 基線:我們使用 Astra 主題測試了默認 WordPress 安裝
  • Baseline + WooCommerce:我們添加了 WooCommerce 並測試了結帳頁面
  • Baseline + WooCommerce + CartFlows:我們將 CartFlows 添加到組合中,但僅使用結帳,除了 Gutenberg 之外沒有設計或頁面構建器
  • Baseline + WooCommerce + CartFlows + Elementor:我們添加了 Elementor 和我們的結帳模板設計之一

需要注意的是,我們在網站上沒有使用緩存插件,也沒有服務器端緩存或性能優化。

測試 1:基線

每個 WordPress 主題的性能都會有所不同。 我們選擇使用表現較好的主題之一的 Astra 主題。

測試 2:基線 + WooCommerce

對於這個測試,我們只是添加了 WooCommerce 並測試了結帳頁面。 由於您不能讓測試工具首先將產品添加到結帳以進行完整測試,因此您仍然可以看到基線的更改。

在這個測試中,我們看到請求增加了 20,頁面大小增加了大約 150KB。

測試 3:基線 + WooCommerce + CartFlows

對於此測試,我們將 CartFlows 添加到固定結帳的組合中。 由於 CartFlows 允許您預先填寫結帳,因此我們得到比之前的測試更好的測試結果。

同樣對於這個測試,我們使用的是古騰堡,它是 WordPress 附帶的默認塊構建器。

添加 CartFlows 時,我們看到請求增加了 6 個,總共 35 個請求。 此外,我們看到總頁面大小減小,這可能是由於未顯示主題頁眉/頁腳造成的。

這是一個非常小的增加,仍然是一個非常輕的頁面。

但現實是,除了結賬部分,沒有其他頁面設計。 您添加的每個圖像都會添加一個請求。 文本的每個字符都會增加總頁面大小……當然會稍微增加一點。

測試 4:基線 + WooCommerce + CartFlows + Elementor

現在是進行實際測試的時候了。 儘管您可以利用我們精美的 Gutenberg 模板並受益於 Gutenberg 的性能改進,但我們的大多數用戶將使用傳統的頁面構建器。

所以對於這個測試,我們認為我們會使用最流行的 WordPress 頁面構建器以及我們最流行的結帳模板之一。

將 Elementor 添加到此測試時,我們看到請求增加了 20,總共 55 個請求。 我們還看到總頁面大小增加了 180KB。

請記住,這是帶有設計的典型結帳。 還有一些圖像,這有助於增加大小和請求,所以這不僅僅是因為我們添加了 Elementor。

測試結果細分

這是一個結果表,以便更輕鬆地查看每個測試的更改。

要求總頁面大小滿載時間
基線9 41.5KB 1.2s
使用 WooCommerce 29 189KB 1.9s
使用購物車流35 179KB 2.0s
CartFlows + Elementor 55 349KB 2.4s

網站性能神話

可悲的是,關於網站性能存在大量誤解。 我將嘗試在這裡解決其中的一些問題。

高滿載時間會導致較低的轉化率!

正如您在我的測試中看到的,完全加載的時間很快,那是因為我使用了高質量的主機。 但是,如果完全加載時間是原來的兩倍,我仍然會感到舒服,因為我知道這是完全加載時間,而現實情況是,網站訪問者不會等待這麼長時間來加載所有內容。 您的網頁在每個項目加載時加載,而不是在每個請求下載後加載。 因此,實際上,訪問者不會盯著空白頁 2.4 秒或任何基於您的主機的加載時間。

CartFlows 會導致您的網站變慢!

您在“技術上”添加到網站的任何內容都會對性能產生影響。 添加圖像時,它會增加總頁面大小並添加請求。 如果您添加 20 個圖像,那就是 20 個額外的請求。 當您添加圖標、選擇背景顏色或編寫一段文本時,它們都會產生影響。 您可以“從技術上”說“將圖像添加到您的網站會導致您的網站變慢”,但這並不能阻止幾乎每個網站都使用圖像。

我要說明的一點是,如果向您的網站添加某些內容會帶來好處,那麼您為什麼不添加呢? 這就是我們向網站頁面添加圖像、視頻、圖標和文本的原因。 如果在結帳頁面上添加圖片會帶來更高的轉化率,因為您的潛在買家可以在其中看到自己,請添加它! 如果在您的結帳頁面上有一個信任保證徽章可以幫助您的買家在購買時感到更安全,請添加它!

因此,根據上面的數字,答案是 CartFlows 不會減慢您的網站速度。 雖然 CartFlows 僅向結帳頁面添加了 6 個請求,但它也減少了總頁面大小,因為它消除了主題的頁眉和頁腳。 請記住在您的網站上使用 CartFlows 的巨大好處。

包起來

我寫這篇文章的唯一目標是就性能和轉化率進行坦率的對話。

我對你最好的建議是“有時你必須看到樹外的森林”。 可悲的是,我看到很多人因瑣碎的事情而受阻,永遠無法開展業務。

性能很重要,但更重要的是您的信息並將其傳達出去。 為您的客戶提供可靠的報價。

如果您正在討論向結帳頁面添加一個額外的請求,因為您想展示一個滿意的客戶的面孔,我認為您應該添加圖像。

在 CartFlows,我們始終將性能放在首位,因此您可以專注於發展業務。