提高Web性能的8個技巧總結

  提高Web性能的8個技巧總結前端

  在互聯網盛行的今天,愈來愈多的在線用戶但願獲得安全可靠而且快速的訪問體驗。針對Web網頁過於膨脹以及第三腳本蠶食流量等問題,Radware向網站運營人員提出如下改進建議,幫助他們爲用戶提供最快最優質的訪問體驗。瀏覽器

  1. 管理「頁面膨脹」安全

  頁面大小與性能有着密切的關係。Radware最新電商性能「行業現狀」報告顯示,100強電商頁面大小中位數達到了1492KB,比一年半以前增大了48%。服務器

  在研究報告里加載最快的10個頁面中,頁面包含的資源請求中位數爲50個,頁面大小中位數爲556KB。而加載最慢的10個頁面中,頁面包含的資源請求中位數爲141個,頁面大小中位數爲3289KB。換句話說,加載最慢的頁面的資源中位數幾乎是加載最快的頁面的三倍,頁面大小則是六倍。網絡

  仔細研究頁面尺寸大小,咱們能夠獲得更多的信息。加載最快的10個頁面所包含的資源總數範圍比較密集:在15個~72個之間;頁面尺寸最小的僅爲251KB,最大的2003KB。而加載最慢的10個頁面所包含的資源總數範圍則比較普遍:在89個~373個之間;頁面尺寸最小爲2073KB,最大的則超過了10MB。前端優化

  2. 進行圖像優化異步

  圖像是形成頁面膨脹的罪魁禍首之一,一般佔據頁面字節數的50-60%。在頁面中添加圖片或是將現有圖片放大,是迅速獲取用戶並提升業務轉化率的有效方式。可是這種方法會對性能形成嚴重的影響。工具

  進行圖像優化是提高性能最簡單的一種方法,它可使頁面加載更快。爲了更有效的完成圖像渲染,圖像必須通過壓縮和整合、圖像的尺寸和格式必須通過仔細調整,圖像質量也必須通過優化,這樣才能夠依據圖像的重要性進行區別化的加載處理。性能

  3. 控制第三方腳本優化

  在典型的頁面服務器請求中,來自於第三方腳本的請求佔了其中的50%或更多。這些第三方腳本不只會增長頁面的字節數,帶來延遲,並且也會成爲Web頁面中最大的潛在故障點。無響應、未經優化的第三方腳本會下降整個網絡的加載速度。

  解決辦法是延遲第三方腳本的加載,將其放在關鍵頁面內容以後進行加載,更爲理想的狀況是放在頁面onLoad事件以後加載,這樣纔不會影響企業的搜索排名(谷歌將onLoad事件做爲加載時間指標)。對於一些分析工具和第三方廣告商而言,若是延遲第三方腳本加載的方法不可行,能夠利用腳本的異步版本,與關鍵內容的加載同步進行。用戶必須瞭解網站中有哪些腳本,刪除那些無用的腳本,並對第三方腳本的性能進行持續監控。

  4. 真正作到移動設備優先

  「移動設備優先」並非一個全新的概念。早在2013年,移動設備的使用量就已經超過了臺式機,然而與衆多口頭承諾的移動性能相比,真正專一於移動設備的開發仍是存在必定的差距。例如,2011年11月,移動設備上的平均頁面大小爲475KB,如今則增加至897 KB。也就是說,在短短三年之間,平均頁面大小几乎翻了一番。

  儘管移動設備和網絡取得了一些進展,但就性能而言,仍是沒法與大小已接近1MB的服務頁面需求保持同步。咱們知道,頁面大小與加載時間息息相關,移動用戶對緩慢的加載速度尤爲敏感。若是企業但願網站能夠真正作到「移動設備優先」,就必須正確處理這些問題。

  5. 在進行響應式Web設計時兼顧性能

  響應式設計讓設計人員和開發人員能夠更好地控制Web頁面的外觀和感受。它可使跨多平臺和設備上的頁面變得更漂亮。但同時也會帶來巨大的性能損失,這些性能損失並不能經過更快速的瀏覽器、網絡和小工具獲得緩解。並且隨着時間的推移,這樣影響還將持續惡化。

  響應式設計創建在樣式表和JavaScript之上。然而,低效的CSS和JS所帶來的性能問題遠遠大於其設計優點給咱們帶來的好處。樣式表應當放在HEAD文檔中,用以實現頁面的逐步渲染。然而,樣式表卻常常出如今頁面其它位置,這就阻礙了頁面的渲染速度。換句話說,JavaScript文件應當放在頁面底部或在關鍵內容加載完成以後再被加載纔是合理的處理方式。

  6. 實時監控性能

  你們都知道要解決一個問題就必須先對問題有充分的瞭解。要解決頁面性能問題,企業就必須知道用戶在何時能夠看到主要頁面內容並與之進行交互;同時,企業還需瞭解性能和可用性問題是如何影響業務指標的。企業須要有方法獲取實際的性能指標並對其進行分析。實時用戶監控(RUM)工具能夠從真實用戶的角度實時獲取、分析並記錄網站的性能和可用性。

  7. 切勿過度依賴CDN解決全部性能問題

  Radware季度電商性能「行業現狀」報告中存在一項最具爭議性的調查結果,即:使用內容分發網絡(CDN)的網站完成主要內容渲染所需的時間比不曾使用CDN的網站要長的多。這是一個相關性問題,而非因果關係:一般狀況下,相較於未使用CDN的網站,使用CDN的網站頁面更大,也更復雜。頁面的大小和複雜程度纔是形成性能問題的元兇,而非CDN。但這一結果也代表,僅依靠CDN並不能解決全部的性能難題。

  若是部署得當,CDN會是解決延遲問題很是有效的工具:縮短託管服務器接收、處理並響應圖像、CSS文件等頁面資源請求所需的時間。可是,延遲僅僅只是現代電商網站的關鍵問題之一。爲了實現最佳的加速效果,網站運營人員能夠採用組合解決方案:CDN+前端優化(如Radware FastView解決方案)+應用交付控制器(ADC)和內部管理。

  8. 在企業內部增強Web性能觀念的宣傳

  大量研究證實,提升頁面速度能夠對全部的關鍵性能指標產生積極影響:頁面訪問量、用戶粘連度、業務轉化率、用戶滿意度、客戶保持、購物車的內容多少和收入。

  然而,正如上述7個建議中所代表的那樣,許多企業都犯了一樣的錯誤,最終損害了Web性能。目前,企業應該重點解決Web開發目標和在線業務目標之間的差距問題,並且,每一個企業都應該至少擁有一個內部性能專家,以便更好的解決Web性能問題。

相關文章
相關標籤/搜索