如何通過壓縮圖像來提高您的 HubSpot 網站載入速度

blank

在這個部落格中,Tenten 的 SEO 總監 Jim Beckham 強調了為什麼網站載入速度對 SEO 至關重要,包括它如何説明某些關鍵字對內容進行排名並改善用戶體驗。

為什麼提高網站速度對 SEO 很重要?

網站載入速度只是 Google 和其他搜尋引擎考慮的眾多因素之一,以確定某些關鍵字的內容排名。

由於幾個原因,它變得越來越重要:

1) 2016 年 10 月,全球行動網路流量首次超過桌面,

2) 亞馬遜回聲和谷歌首頁等技術正在成為移動搜索的新來源

3) Google 已逐步推出 移動第一索引,以回應更多來自行動裝置的查詢

因此,如果您的網站沒有為行動使用者提供一流的體驗,您在搜尋引擎搜尋引擎搜尋結果頁面(SERPS)上的競爭力可能會受到負面影響。更糟糕的是,如果使用者無法在行動裝置上正確查看您的網站,或者載入時間過久,您可能會發現您的網站流量會流向其他地方。

什麼是移動先索引?

移動先索引意味著 Google 將網站頁面的行動版本進行索引和排名。其實施是漸進的:它最初是針對谷歌認為移動和使用者友好的網站推出的,現在超過一半的搜尋結果使用這種方法進行索引。

如今,谷歌機器人的移動爬行器更頻繁地抓取網站。如果您的桌面和行動網站體驗存在差異,則Google搜尋結果中將顯示行動版本。

谷歌表示,這一切都是為了"更好地幫助我們(主要是移動使用者)找到他們想要的東西。

因此,請務必檢查您的 Google 搜索主控台帳戶,看看您的網站是否已經在移動第一索引中。如果是,則應有通知。

為什麼網站載入速度很重要?

人們不耐煩了。 根據谷歌的數據,如果大多數網頁在3秒內不載入,53%的網站訪問者會反彈

性能最好的網站在行動裝置上載入速度很快,因此,如果您的網站在3秒內載入速度不高,則您的訪問者數量將處於危險之中。

伺服器速度和網站代碼的複雜性導致網站速度緩慢,但一個真正常見的原因是您網站上的圖像。如果它們很大(按位元組)或大小巨大,它們需要很長時間才能載入。

此外,經常發生的是,雖然圖像在頁面本身可能顯得很小,但它已以全列印品質上傳,然後縮小到頁面上。

1. Cows

因此,即使您只希望圖像變小,您的瀏覽器也必須全尺寸從伺服器請求並載入影像,然後縮小圖像,顯著提高載入速度。

我網站上的圖片應該有多大?

它將取決於頁面上的圖像大小和圖像的內容。

我們發現最好的方法是在圖像檔大小和質量之間取得平衡——換句話說,使圖像盡可能小,而不會使其模糊不清,或者,如果有文本,則難以讀取。

通常,您應該將大多數圖像的目標為不超過 100kb(我們的 SEO 審核中標記了大於此的圖像)。

為了提供幫助,我們已將此四步指南組合在一起,用於批量壓縮圖像,以提高您的 HubSpot 網站載入速度。

(我們已經概述了如何在 HubSpot 中做到這一點,因為我們是鑽石集線器點合作夥伴,但這些步驟幾乎可以在任何其他內容管理系統上工作)。

第 1 步:按大小列出和排名您的網站圖片

要做到這一點,您需要一個爬行工具。 尖叫青蛙SEO蜘蛛 是一個驚人的工具,每個SEO應該使用。免費長達50頁的爬行,或每年149英鎊,它將支付自己在任何時間。

尖叫青蛙爬行您的網站頁面,跟蹤它們之間的連結,並生成關於可能影響您的 SEO 的報告 - 從斷開的連結和缺失的元數據,到 HREFLANG 標籤檢查和 SERP 結果爬行。

安裝"尖叫青蛙"後,將其載入,輸入網站位址並開始抓取。

(如果您也要抓取子域,在開始之前通過配置->蜘蛛設置此域)

2. Screaming Frog Crawl

按下批次匯出 - 影像 - - X KB 連結上的影像,然後下載超大圖像報告。

3. Screaming Frog Oversized images report

以 Excel 打開報告,按影像大小 (位元組) 排序 - - 最大到最小。

4. Oversized Images Report Excel

您現在有一個報告,顯示哪些影像最大(在位元組中),它們存儲在 HubSpot 的檔案管理員(目的地)中,以及它們在(源)上顯示哪些頁面。

選擇額外: 您可以使用 Pivot 表找出大多數頁面上的哪些影像功能,因為如果您想優先修復最重的圖像,或者大多數頁面上的圖像,這也可能對您有所説明。

5. Excel Pivot Example

 

第 2 步:在 HubSpot 的檔案管理員中定位您的圖像

通過行銷存取 HubSpot 的檔案管理員 - » 檔案和範本 - » 檔案

6. HubSpot File Manager

 

查看要壓縮的第一個圖像的目的地網址。圖像的檔名稱應位於URL中。

例如 https://www.b2bmarketinglab.co.uk/hs-fs/hubfs/social-media6789.jpg?width=600&name=social-media6789.jpg

將圖像名稱複製並貼上到 HubSpot 檔案管理員的搜尋列中。

7. HubSpot File Search

按一下圖像以提出檔詳細資訊

從這裡你可以看到圖像的使用位置並確認其大小。

按下"更多' - 下載並將影像儲存到電腦。

選擇額外: 這也是您進一步優化圖像檔名稱和替代文本的機會,因此它更具描述性和/或包含關鍵字。

8. HubSpot Image Details

第 3 步:批量壓縮您的網站圖像

我的例子中的圖像是高達10MB,太大,需要什麼,並可能減慢它的特色博客文章的載入時間。我們需要的是散裝圖像壓縮機。

對於影像壓縮,我通常使用 TinyJPG, 因為它易於使用,可以批量壓縮圖像,而不會使圖像模糊。

但是,小JPG的尺寸限制為5MB。因此,我使用 壓縮JPEG 先將檔從10MB減少到1.0MB。

9. Compress JPG

 

然後,我使用TinyJPG將其壓縮到386.7kb。

10. TinyJPG

然而,雖然我覺得仍然有機會使圖像變小,因為它不低於100kb的目標,只有這麼多的壓縮可以做。如上所示,將圖像重新上傳回 TinyJPG 只會剃掉另外 30kb。

但我並沒有絕望 - 圖像是巨大的大小:5184 x 3456圖元,不必要的大圖像,只會在博客文章中使用。

使用 PicResize,我能夠重新縮放圖像大小,而調整大小的圖像的最終輸出為 93KB,圖像質量之間幾乎沒有明顯的差異。

11. Image Resize Comparison

因此,在這個極端的例子中,我能夠將 10.03MB 的圖像降低到 93KB,與圖像質量沒有太大差異。通過使用圖像編輯器 - 即 PhotoShop,或其免費開源等價物 GIMP, 您可以進一步縮小檔大小。

也有線上的替代方案,如 PicResize,它允許您指定影像輸出大小(我設置為不超過 100KB)。

(大多數時候,您只需要在此過程中使用小JPG。你可能想知道: 「為什麼不從一開始就使用 Pic 縮放呢?事實是,我只是在寫這篇文章時才找到的,但值得注意的是,PicResize的壓縮過程還有幾個步驟,它一次只能做一個圖像。因此,如果您有大量圖像需要處理,則可能需要更長的時間,因此我只會推薦它用於超過 5MB 的圖像,並將 TinyJPG 用於其他一切。

第 4 步:在 HubSpot 的檔案管理器中替換壓縮圖像

最後一步很簡單。

返回到 HubSpot 的檔案管理員中的圖像,然後單擊" 取代"

上傳您的新壓縮圖像,你就完成了!

12. HubSpot Compressed Image

HubSpot 的偉大之處在於,圖像被替換,但停留在同一位置。這意味著使用圖像的所有內容都會自動使用壓縮版本進行更新,這可節省大量時間。畢竟,確保您為 B2B 內容行銷策略創建的內容 得到優化至關重要!

最後,回到 Excel 中的圖像報告,獲取下一張圖片的名稱並重複上述步驟。希望您能很快看到您的頁面載入速度更快!

瞭解更多關於改善您的網站的SEO 在我們的部落格 上,或瞭解我們的 SEO 諮詢服務

來源: 如何通過壓縮圖像來提高您的 HubSpot 網站載入速度


開始你的旅程與 銷售團隊替代: 中心點 Crm 快:

What do you think?

Written by hubdigital

blank

為什麼公司津貼不僅僅是噱頭

blank

如何壓縮網站上的圖像?