網站建設一個很重要的部分就是資源加載優化。由于網站建設中網速低、帶寬低、延遲高、移動設備內存小、處理器性能低等問題,往往需要優化前端頁面的性能以滿足用戶對網頁加載的期望。前段時間做了相關方面的網站優化,發現網上的中文教程比較少。我一步步跟著網站找問題解決,所以整理翻譯了一些有用的網頁。網頁加載時間受網絡速度影響。一般都是用瀏覽器模擬一個特定的網速進行測試,這樣優化前的結果和優化后的結果會有比較準確的對比。
1、減少請求數
文件資源壓縮:去除多余的空格、換行、縮進、注釋等不必要的字節,提高下載、解析、執行速度。這種類型的在線工具有很多。合并文件:每個CSS和JS文件都是一次HTTP請求,將多個相關的文件適當合并成一個文件,減少HTTP請求的次數。解決加載速度問題,首先要減少網頁請求,比如css sprite、js/css壓縮、緩存、按需加載等。另一種方法是將資源放在不同的子域名下。比如將圖片資源與靜態資源分離,可以大大加快網頁的加載時間,但這種方式不適用于HTTP2連接。
2、充分利用緩存
使用緩存可以減少對服務器的請求次數,節省加載時間,所以所有的靜態資源都必須緩存在服務器端,盡量使用長緩存。長緩存資源的更新可以使用不同的時間戳進行更新。合理設置資源的過期時間,尤其是一些不需要改動的靜態資源,將緩存過期時間設置的長些。
3、壓縮
網站經過壓縮后,將使搜索引擎抓取網站更加順暢,提升用戶體驗,更好地瀏覽網站內容。 gzip整體網頁壓縮,目前很多虛擬主機都支持,不需要站長操作。網站Gzip壓縮后,網頁打開速度加快;網頁腳本資源的壓縮可以使用站長工具的js壓縮工具。壓縮網站上不重要的圖片,可以大大減少虛擬主機的空間,加快網頁的加載速度;減少資源大小不僅可以減少存儲空間,還可以在網絡傳輸文件時減少傳輸時間,加快網頁的顯示速度。因此,需要對HTML、CSS、JavaScript等資源的代碼進行壓縮。
4、優化JavaScript加載性能
首屏盡量保持在1秒以內。對于屏幕上不用的資源,應該在用戶需要的時候加載(延遲加載、上拉滾動加載);可感知和不可感知的負載。隨著越來越多的應用程序使用JavaScript技術在客戶端進行處理,JavaScript在瀏覽器中的性能已經成為開發者面臨的最重要的問題。 JavaScript 的性能優化由于JavaScript 的阻塞特性而變得復雜,這意味著瀏覽器在執行JavaScript 代碼時,不能同時做其他事情,也就是其他事情會被阻塞。不管當前的JavaScript代碼是嵌入的還是外部鏈接文件中,頁面的下載和渲染都必須停下來等待腳本完成。 JavaScript 執行時間越長,瀏覽器等待響應用戶輸入的時間就越長。
5、CDN加速
通過CDN加速是一種比較昂貴的優化方法,所以這些把它放在所有優化方法的末尾,但卻是一種非常有效的優化方案。 CDN的全稱是Content Delivery Network,即內容分發網絡。 CDN加速主要是對靜態資源進行加速,比如網站上傳的圖片、媒體,以及一些導入的Js、CSS等文件。 CDN加速需要依賴各個網絡節點。例如,100臺CDN服務器分布在全國各地。從上海訪問時,資源會從最近的節點返回。這是核心。 CDN服務器通過緩存或主動抓取主服務器的內容來實現資源儲備。
如何優化網站的加載,對于一款移動產品來說,功能無疑是非常重要的,但性能也是用戶體驗不可或缺的一部分。當用戶能在1-2秒內打開一個手機頁面,看到信息的展示,或者開始下一步的操作時,用戶會覺得速度還是可以接受的;如果2-5秒后頁面可用,在這種狀態下,用戶的耐心會逐漸喪失;如果一個界面顯示時間超過5秒甚至更長,用戶基本無法忍受。可能有些用戶會注銷重新進入,但更多的用戶會直接放棄。對于網站開發者來說,提升用戶體驗是網站的核心價值,其中提升網站加載速度是最基本的用戶體驗。
我們專注高端建站,小程序開發、軟件系統定制開發、BUG修復、物聯網開發、各類API接口對接開發等。十余年開發經驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!