如何提高頁面速度以獲得更多流量和轉化

頁面速度是當今數字營銷的關鍵因素。它對以下方面有重大影響:

  • 訪問者在您的網站上停留的時間。
  • 其中有多少轉化為付費客戶。
  • 您在付費搜索中按每次點擊費用支付的費用。
  • 您在自然搜索中的排名。

不幸的是,大多數網站在頁面速度方面表現不佳,這對其收入產生了直接的負面影響。

作為數字營銷人員,我們可以花時間做的事情幾乎是無限的,而且時間永遠都不夠。結果,有些事情被推到了次要位置。

似乎最常被推遲的事情之一是優化頁面速度。這很容易理解,因為大多數人並沒有真正理解這個經常被忽視的細節的重要性,所以他們看不到投入時間和金錢來改進幾秒鐘或更短的時間的價值。

對於一些營銷人員(包括那些只專注於搜索引擎優化的營銷人員)來說,這似乎是一個微不足道的時間,但從行業巨頭的數據一直到我們自己的分析數據,已經證明是巨大的。

我假設你和我一樣,你想最大化你的結果,當然還有你的收入,對吧?然後讓我們開始讓您的網站比塗油的鼻涕更快!(這很直觀,不是嗎?)

1.放棄預算虛擬主機

這些天我們都在努力省錢,畢竟,訂閱 Raven、SEMrush、Moz 以及我們每天使用的所有其他工具的訂閱量很快就會增加。這幾乎就像多了一個孩子。

許多人試圖省錢的一種方法是選擇一種廉價的共享主機(虛擬主機 / 託管),它將盡可能多的網站塞進服務器上,就像一群小丑擠在一輛汽車上一樣。性能該死!

當然,您的網站大部分時間都可以使用,就像大多數網絡主機一樣,但它的加載速度會非常緩慢,以至於您的訪問者會感到沮喪,而不會轉化為買家。

“但幾乎看不出來!” 這些討價還價的購物者堅持。

事情是這樣的——你可能幾乎不會注意到它,因為它是你的寶寶,你喜歡它。但其他人只想盡快進入和離開您的網站。

人們希望在您的網站上停留足夠長的時間來做他們想做的事情,無論這意味著獲得答案、購買產品還是其他特定目標。如果你讓他們慢一點,他們很可能會討厭他們的經歷並離開而不轉換。

可以這樣想:

大多數人無條件地愛自己的孩子。但是別人的孩子在餐廳裡尖叫、扔東西、擾亂他們的夜晚?他們討厭那個孩子。您的網站也是如此。

它真的有多大的不同?

根據亞馬遜進行的一項研究,僅僅 100 毫秒(人類甚至無法感知的時間單位)的差異就足以使他們的銷售額減少 1%。沃爾瑪也發現了類似的結果。

如果那一小段時間對銷售有那麼大的直接影響,你認為多一秒或更長時間會產生什麼樣的影響?但這並不止於此,因為您的網站載入速度(或緩慢)也會影響自然搜索排名和每次點擊費用。換句話說,如果您的網站加載緩慢,您應該期望在這個關鍵領域投資的競爭對手會吃掉您的午餐。

底線:跳過預算網絡託管。如果他們像商品一樣銷售它(主要基於價格),那麼他們也會像對待商品一樣對待他們的客戶。

有很多針對速度進行了優化的網絡主機,特別是對於 WordPress 網站,其中一些的價格與預算選項相似。

所以請四處詢問,進行一些測試,並投資一個網絡主機,它會給你帶來滿足你的訪問者和谷歌的性能。

2. 減少 HTTP 調用

網頁呈現和運行所需的每個文件(例如 HTML、CSS、JavaScript、圖像和字體)都需要單獨的 HTTP 請求。發出的請求越多,該頁面的加載速度就越慢。

現在,如果你和我交談過的大多數人一樣,你可能會想“哦,我不需要擔心這個,傑里米。我知道我在做什麼,我不會在我的網站上添加一堆臃腫的垃圾!”

這可能部分正確。你可能不會在你的網站上添加一堆臃腫的垃圾,但對於我遇到的 90% 以上的網站來說——它仍然存在。

那個膨脹不存在,因為膨脹仙女在你睡覺的時候把它偷偷溜進去了。這是因為大多數網頁設計師,無論技能或經驗如何,都不會將頁面速度放在首位。可悲的事實是,大多數人甚至不知道如何。

問題從這裡開始:

大多數主題會加載一個或多個 CSS 文件和幾個 JavaScript 文件。有些,例如 Jquery 或 FontAwesome,通常是從另一台服務器遠程加載的,這大大增加了加載頁面所需的時間。

當您考慮插件添加的其他 CSS 和 JavaScript 文件時,這變得更加成問題。僅來自 CSS 和 JavaScript 文件的 HTTP 請求就很容易結束。

當您考慮頁面上的所有圖像時,每個圖像都需要單獨的 HTTP 請求,它很快就會失控。

  • 將 JavaScript 文件合併為一個文件。
  • 將 CSS 文件合併為一個文件。
  • 減少或消除加載自己的 JavaScript 和/或 CSS 文件的插件。在某些情況下,與重力形式一樣,您可以選擇禁止加載它們。
  • 為經常使用的圖像使用精靈。
  • 盡可能使用 FontAwesome 或 Ionic Icons 之類的字體而不是圖像文件,因為這樣只需要加載一個文件。

3.包括尾部斜線

無論是來自外部來源(鏈接建設工作)還是來自您自己的網站,在指向您網站的鏈接上省略尾部斜杠,都會對速度產生不利影響。

操作方法如下:

當您訪問不帶斜杠的 URL 時,Web 服務器將查找具有該名稱的文件。如果它沒有找到具有該名稱的文件,則會將其視為目錄,並在該目錄中查找默認文件。

換句話說,通過省略尾部斜杠,您將強制服務器執行不必要的 301 重定向。雖然它對您來說似乎是即時的,但它確實需要更長的時間,而且正如我們已經確定的那樣,每一點都會加起來。

https://example.com(這很糟糕)

或者

https://example.com/services (這也很糟糕)

對比

https://example.com/(這很好)

或者

https://example.com/services/(這個也不錯)

4.啟用壓縮

啟用 GZIP 壓縮可以顯著減少下載 HTML、CSS、JavaScript 文件所需的時間,因為它們被下載為更小的壓縮文件,然後在它們到達瀏覽器後被解壓縮。

别擔心——您的訪問者不需要做任何額外的事情,因為所有現代瀏覽器都支持 GZIP 並且已經為所有 HTTP 請求自動處理它。

5.啟用瀏覽器緩存

啟用瀏覽器緩存後,網頁的元素將存儲在訪問者的瀏覽器中,因此當他們下次訪問您的網站或訪問另一個頁面時,他們的瀏覽器可以加載該頁面,而無需向服務器發送另一個 HTTP 請求任何緩存的元素。

一旦第一個頁面被加載並且它的元素被存儲在用戶的緩存中,接下來的頁面只需要下載新的元素。這可以大大減少在典型瀏覽會話期間需要下載的文件數量。

6. 縮小資源

縮小 CSS 和 JavaScript 文件可以刪除不必要的空白和註釋,從而減少文件大小,從而減少下載它們所需的時間。幸運的是,這不必是手動過程,因為有幾種在線工具可以將文件轉換為更小的、縮小的版本。

還有幾個可用於 WordPress 的插件,它們將用它們的縮小版本替換常規 CSS 和 JavaScript 文件的網站頭中的鏈接,而無需修改原始文件,包括流行的緩存插件,例如:

  • W3 Total Cache
  • WP Super Cache
  • WP Rocket

可能需要一些努力才能使設置恰到好處,因為压縮通常會破壞 CSS 和 JavaScript,所以一旦你压縮了所有內容,請務必徹底測試你的網站。

7. 優先考慮首屏內容

如果您的網站被編碼為優先考慮首屏內容(換句話說,在訪問者滾動之前可見的內容),則您的網站可以向訪問者顯示以更快地載入。

這意味著確保出現在首屏的任何元素也盡可能靠近 HTML 代碼的開頭,以便瀏覽器可以首先下載和呈現它們。

包含內聯呈現該區域而不是外部 CSS 文件所需的任何 CSS 和 JavaScript 也很重要。

8.優化媒體文件

由於具有高質量相機的移動設備很常見,而 WordPress 等現代內容管理系統可以方便地上傳圖像,許多人只是簡單地拍攝照片並上傳,而沒有意識到圖像通常至少比實際大四倍必要的。

這會大大降低您的網站速度——尤其是對於移動用戶。

優化您網站上的媒體文件有可能極大地提高您的頁面速度,而且這樣做相對容易,因此這是您時間的一項很好的投資。

優化圖像

  • 選擇理想的格式。JPG 非常適合攝影圖像,而 GIF 或 PNG 最適合具有大面積純色的圖像。8 位 PNG 文件適用於沒有 Alpha 通道(透明背景)的圖像,24 位文件適用於有 Alpha 通道的圖像。
  • 確保圖像大小合適。如果圖像在您的網站上以 800 像素寬顯示,則使用 1600 像素寬的圖像沒有任何好處。
  • 壓縮圖像文件。除了作為頂級圖像編輯程序之外,Adobe Photoshop 還具有出色的圖像壓縮功能,起價為 9.99 美元/月。您還可以使用免費的 WordPress 插件——例如WWW Image OptimizerImsanityTinyJPG——它們會自動壓縮上傳的圖像。

優化視頻

  • 選擇理想的格式。在大多數情況下,MP4是最好的,因為它產生的檔大小最小。
  • 根據訪問者的螢幕尺寸提供最佳尺寸(尺寸)。
  • 如果視頻在後台用作設計元素,則消除音軌。
  • 壓縮視頻檔。我大部分時間都使用Adobe Premiere,但Camtasia也是一個不錯的選擇。
  • 縮短視頻長度。
  • 考慮將視頻上傳到YouTube或Vimeo,而不是在本地提供,並使用他們的iframe嵌入代碼。

不過,您不應止步於此,因為那隻會劃傷表面。

要真正優化您網站上的媒體,您需要根據屏幕尺寸提供適當大小的圖像,而不是簡單地調整它們的大小。

根據圖像的實現,有兩種方法可以處理這個問題。

  • 可以使用 src set 提供您網站 HTML 中的圖像,這使瀏覽器能夠根據訪問者使用的設備的屏幕尺寸選擇、下載和顯示適當的圖像。
  • 通過 CSS 放置的圖像——通常作為背景圖像,可以使用媒體查詢提供,以根據訪問者使用的設備的屏幕尺寸選擇適當的圖像。

9. 利用緩存和 CDN

緩存使您的 Web 服務器能夠存儲網頁的靜態副本,以便更快地將它們傳送到訪問者的瀏覽器,而 CDN 允許將這些副本分發到世界各地的服務器,以便訪問者的瀏覽器可以從離他們最近的服務器訪問網頁;這極大地提高了頁面速度。

發佈留言