關於產品載入速度
本文主要做一些梳理,以確定幾個一直以來有點疑問的問題:
為什麼要提升載入速度?
產品載入速度應該達到多少?
如何提升產品載入速度?
1.為什麼要提升載入速度?
1)影響使用者體驗
這是常識。
2)影響SEO效果——對於web端產品
正如《SEO實戰密碼》提到的,SEO與使用者體驗相通,一個網頁開啟速度慢的網站,想必對使用者體驗不夠重視,因此容易引起搜尋引擎的懲罰。
網頁載入速度是搜尋引擎的考慮因素之一
百度站長平臺提到 :
其實不僅是百度,各大搜索引擎對於移動網頁的開啟速度都越來越重視,並且將載入速度作為衡量網頁移動友好度的重要標準。因此,再次建議站長重視移動端體驗,打造使用者與站點共贏的網路生態。
谷歌也有類似處理 :
We do say we have a small factor in there for pages that are really slow to load where we take that into account. ——John Mueller, Google Switzerland
我們確實說過:我們會將載入速度過慢的網頁的載入速度作為考慮的一個小因素。
影響搜尋引擎爬取量,進而影響收錄/索引量
谷歌的Webmaster Central Help Forum上有個使用者提問 :
For the past 6+ weeks, we have been seeing most of our URLs returning a ‘Temporarily Unreachable’ error when fetched in Google Webmaster Tools using the ‘Fetch as Google’ simulation tool. We have been unable to pin point what exactly could be the issue behind this considering we had a 100% success rate with this in the past.
我的翻譯:在過去的6個多星期裡,我們看到我們的大部分網址在使用“Google抓取方式”模擬工具在Google網站管理員工具中提取時,都返回“暫時無法訪問”錯誤。 考慮到我們過去100%的成功率,我們無法確定這個問題究竟是什麼。
We're seeing an extremely high response-time for requests made to your site (at times, over 2 seconds to fetch a single URL). This has resulted in us severely limiting the number of URLs we'll crawl from your site. ——John Mueller, Google Employee
我的翻譯:對於您的網站的請求,我們看到的響應時間非常高(有時提取一個URL超過 2秒 )。這會導致我們嚴重限制從您網站抓取的網址數量。
PS:上面提到" 2秒 ",但暫不確認是否要這麼快的載入速度,或者此處的 2秒 僅僅針對一個頁面的某個URL。
影響搜尋結果排名
谷歌Webmaster Central Blog上有篇文章提到 :
You may have heard that here at Google we're obsessed with speed, in our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.
上方的重點在這一句:today we're including a new signal in our search ranking algorithms: site speed.
翻譯:今天我們將一個新的內容包含到我們的搜尋排名演算法中:網站速度。
結論 : 網站載入速度是搜尋引擎的評估因素之一——可以想象會越來越重視 。
3)影響轉化率
從我們日常的體驗來說,如果一個網站/APP開啟速度很慢,我們很可能沒耐心等待而直接選擇離開,這自然會影響轉化率。
一篇文章提到 :a 2-second delay in load time during a transaction resulted in abandonment rates of up to 87%. This is significantly higher than the baseline abandonment rate of 67%.
翻譯:在交易中,2秒的延遲導致放棄率高達87%,這遠遠超過了放棄率的基準線67%。
用圖表示是這樣:

綜上所述:提升網際網路產品的載入速度是必須的,否則:
影響使用者體驗
影響轉化率
影響SEO效果(對於web端產品)
2.產品開啟速度應該達到多少?
1)M端
百度站長平臺提到 :2017年10月初,“閃電演算法”上線,移動搜尋頁面首屏載入時間將影響搜尋排名。
移動網頁 首屏 在 2秒之內 完成開啟的,在移動搜尋下將獲得提升頁面評價優待,獲得流量傾斜;同時,在移動搜尋頁面首屏載入非常慢( 3秒及以上 )的網頁將會被打壓。
由此可知: M端網頁首屏開啟速度目標為2秒以內,至少要在3秒以內,儘量避免在3秒及以上。
2)PC端
沒找到非常明確的說法,但可以根據已有內容進行推斷。
百度站長平臺提到 :百度使用者體驗部研究表明,使用者期望且能夠接受的頁面載入時間在3秒以內。若頁面的載入時間過慢,使用者就會失去耐心而選擇離開,這對使用者和站長來說都是一大損失。
谷歌的Maile Ohye提到: 2 seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second.——Maile Ohye, from Google
翻譯:2秒對電商網站來說是一個底線。在谷歌,我們的目標是在0.5秒以內。
谷歌的Doubleclick提到:“The Need for Mobile Speed”, we found that 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.
翻譯:"對移動端網站速度的需求",我們發現 當載入時間超過3秒時 ,53%的移動網站訪問被放棄。
這說明: 2秒以內是一個值得追求的目標,3秒以內幾乎就是下限 。
而由於使用者體驗都是想通的,M端與PC端的載入速度對APP很有參考價值,因此對於任何一個終端,上述結論都可以參考。
3.如何提升網站開啟速度
這裡僅以網站載入速度為例,收集了部分建議。
1) 百度統計的建議 :
下載頁面啟用Gzip :可減少 69 B 啟用伺服器Gzip,可以減少傳輸位元組數。未啟用Gzip的資源有: http://www.jfz.com/ (大小: 278 B 預計可減少 69 B )
開啟頁面字符集宣告 :在頁面部分沒有發現字符集宣告,請增加該宣告。如果部分未定義字符集,將增加頁面渲染次數,速度減慢。
PC端:
使用瀏覽器快取 。在 HTTP標頭中為靜態資源設定過期日期或最長存在時間,可指示瀏覽器從本地磁碟中載入以前下載的資源,而不是通過網路載入。
優化圖片 。適當地設定圖片的格式並進行壓縮可以節省大量的資料位元組空間,優化圖片可將其大小減少80.8 KiB (37%)。
清除首屏內容中阻止呈現的 JavaScript 和 CSS 。您的網頁中有6個阻止呈現的指令碼資源和3個阻止呈現的 CSS 資源。這會導致呈現網頁的過程出現延遲。
縮短伺服器響應時間 。在我們的測試中,您的伺服器在0.47秒鐘內做出了響應。能夠拖慢伺服器響應時間的因素有很多。請閱讀我們的建議,瞭解如何監控並計量使您的伺服器花費時間最多的項。
按優先順序排列可見內容 。您的網頁需要進行更多次的網路往返通訊才能呈現首屏內容。要獲得最佳效果,請減少呈現首屏內容所需的 HTML 數量。
縮減 HTML 。壓縮 HTML 程式碼(包括其中所含的任何內嵌 JavaScript 和 CSS)可以節省大量資料位元組空間,並提高下載和解析的速度。為以下資源縮減 HTML 大小可將其大小減少2.7 KiB (14%)。
M端:
清除首屏內容中阻止呈現的 JavaScript 和 CSS 。您的網頁中有6個阻止呈現的指令碼資源和3個阻止呈現的 CSS 資源。這會導致呈現網頁的過程出現延遲。
使用瀏覽器快取 。在 HTTP 標頭中為靜態資源設定過期日期或最長存在時間,可指示瀏覽器從本地磁碟中載入以前下載的資源,而不是通過網路載入。
縮短伺服器響應時間 。在我們的測試中,您的伺服器在0.34秒鐘內做出了響應。能夠拖慢伺服器響應時間的因素有很多。請閱讀我們的建議,瞭解如何監控並計量使您的伺服器花費時間最多的項。
縮減 JavaScript 。壓縮 JavaScript 程式碼可以節省大量資料位元組空間,並提高下載、解析和執行的速度。
優化圖片 。適當地設定圖片的格式並進行壓縮可以節省大量的資料位元組空間。優化以下圖片可將其大小減少36.8 KiB (41%)。
縮減 CSS 。壓縮 CSS 程式碼可以節省大量資料位元組空間,並提高下載和解析的速度。為以下資源縮減 CSS 大小可將其大小減少6.7 KiB (17%)。
縮減 HTML 。壓縮 HTML 程式碼(包括其中所含的任何內嵌 JavaScript 和 CSS)可以節省大量資料位元組空間,並提高下載和解析的速度。為以下資源縮減 HTML 大小可將其大小減少1.3 KiB (17%)。
3) 公眾號小北的夢囈提到 :
減少HTTP的請求
Gzip 壓縮
開啟快取
優化圖片
不要安裝太多的外掛
避免廣告,視訊太多
網站的伺服器