很多網站建設沒有利用最好的頁面優化技術,頁面加速的速度有很大的硬傷。那么如何補救和提高網站頁面的加載速度呢?
小編整理了頁面加載速度優化的補救措施,以改善站長瀏覽器的加載時間和用戶體驗。網站運營商可以使用這些建議來解決頁面加載速度的問題。如下圖
1.合并Js文件和CSS
將JS 代碼和CSS 樣式合并到一個共享文件中,不僅簡化了代碼,而且在執行JS 文件時會進行多次“Get”請求,從而延長加載速度。 JS文件合并在一起后,Get請求的次數自然會減少,加載速度也會提高。
2.精靈圖片技術
Spriting是一種網頁圖像應用處理方法,將一個頁面中涉及的所有零散圖像包含成一個大圖像,然后通過CSS技術顯示出來。這樣當你訪問這個頁面的時候,加載的圖片就不會像以前那樣一張一張的顯示出來了,這樣可以減少圖片在整個網頁上的體積,CSSSprites的使用可以減少網頁的http請求頁面,從而大大提高頁面性能。表現。 CSS spritess在國內被很多人稱為CSS sprite。它們已經存在了很長時間,并在許多大型網站中使用。特別是一些存在于所有頁面的圖標使用頻率更高,大大提高了加載速度。
3.壓縮文本和圖片
gzip 等壓縮技術可以有效減少頁面加載時間。包括HTML、XML、JSON(JavaScript 對象表示法)、JavaScript 和CSS 等。壓縮率可達70%左右。文字壓縮應用廣泛,一般只需要直接在空間打開即可,而圖片壓縮就比較隨便了,很多都是直接上傳的。其實壓縮的空間還是很大的。
4.延遲顯示可視區域之外的內容
為了保證用戶能夠更快地看到可見區域的網頁,延遲加載或顯示可見區域之外的內容,避免頁面變形,可以使用占位符標簽來設置正確的高度和寬度。例如,當用戶停留在首屏時,WP 的jQueryImage LazyLoad 插件無法加載首屏以下的任何圖像信息。這些圖像只會在用戶向下滾動鼠標時開始加載。這顯著提高了可視區域的加載速度并改善了用戶體驗。
5.確保首先加載功能圖片
網站主要考慮可用性的重要性。要預加載功能按鈕,用戶會轉到下載頁面。一個只需要8s的下載需要等待5s,尋找下載按鈕的圖片。誰受得了?
6.重新排列行動號召按鈕
其實這個和上面那個差不多,從用戶體驗的速度出發,跳過了網頁整體的加載速度。速度沒有改變,只是按下了一些行為按鈕。呼叫按鈕通常放在頁面底部,這對用戶來說并不總是好的。購買用戶需要等到底部加載完成后才能點擊下一步。您可以調整CTA 按鈕的位置或使用滑動圖像按鈕。這是許多大型購物網站的購物車類型。
7.圖像格式優化
不適當的圖像格式是加載時間緩慢的常見原因。如果以盡可能最佳的格式保存,正確的圖像格式可以使圖像小幾倍。它節省了大量帶寬,減少了處理時間,并大大加快了頁面加載速度,這是一種非常普遍的做法。
8.使用漸進式JPEGs
ProgressiveJPEGs圖片是JPEG格式的一種特殊變體,名為“Advanced JPEG”。在創建Advanced JPEG 文件時,數據是這樣排列的:加載圖像時,最初只顯示模糊圖像,隨著數據加載,圖像逐漸變得清晰。它相當于一個隔行掃描的GIF 圖像。 Advanced JPEG 主要是為使用調制解調器的慢速網絡設計的。快速網絡的用戶通常不會意識到它與普通JPEG 圖像之間的區別。對于網速較慢的用戶來說,這無疑會有不錯的體驗。
9.簡化代碼
這可以說是最直接的方法,也是使用最廣泛的方法。瘦身網頁代碼,刪除不必要和冗余的代碼,比如不需要的空格、換行符、注釋等,包括JS代碼中無用的代碼也需要清除。可能有些人對去掉評論碼有誤解,有些人甚至在里面塞了關鍵詞。
10.延遲加載和執行不必要的腳本
網頁中有很多腳本不需要在頁面完全加載后才執行,因此可以延遲加載和執行不需要的腳本。這些腳本可以在onload事件之后執行,避免影響頁面重要內容的顯示。這些腳本可能是您自己網頁的甲苯,通常它們是第三方腳本。這樣的腳本有很多,比如評論、廣告、智能推薦、百度云圖、分享等,這些都可以在主要內容加載完成后完全執行。
11.使用AJAX
AJAX,即“Asynchronous Javascript + XML”,是指一種用于創建交互式Web 應用程序的Web 開發技術。 AJAX 可以通過在后臺與服務器交換少量數據使網頁異步更新。這意味著您可以更新網頁的部分內容而無需重新加載整個頁面。如果內容需要更新,傳統網頁(沒有AJAX)必須重新加載整個網頁。
我們專注高端建站,小程序開發、軟件系統定制開發、BUG修復、物聯網開發、各類API接口對接開發等。十余年開發經驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!