1.合並js和css文件
將js和css分別合並到一個共享文件,這樣不僅能夠簡化代碼,而且在執行js文件是,如果js文件較多,就需要多次向服務器請求數據,這樣將會延長加載速度,將js文件合並在一起,減少了請求的次數,就能夠提高加載的速度;
2.Sprites圖片技術(圖片精靈技術)
圖片精靈技術是一種常用的頁面速度加載優化的方式,它是將一個頁面涉及到的所有的零星圖片(注意:只是那些曉得圖片、icon)都包含到一張大圖中,然后利用css的背景屬性將其相應的圖片在現在響應的文字,這樣當訪問一面時,只用加載一張大圖即可,而不用一幅一幅的去請求。這種方法既減少了圖片的大小,有減少了http請求的次數,可以很大程度的優化頁面的加載熟讀
3.壓縮圖片和文本
壓縮圖片和文本也可以減小數據的大小,尤其是代碼的壓縮,如HTML、XML、JSON、javascript、css等代碼的壓縮率可達70%以上,代碼壓縮后可以大大減少文件的體積,是頁面可以快速的加載
4.按需加載(及可見區域以外的區域延時加載)
為了讓用戶可以更快的看到網頁中交重要的內容,可以優先加載可見區域的內容,延時加載不可見區域的內容,為了避免頁面變形可以使用占位符,占位圖片來固定寬高。如jquery中的ImageLazyLoad等一些插件就可以很好的實現按需加載,只有當用戶鼠標向下滾動式,下面得圖片才會加載。當然也可以用原生的js來實現。
5.確保功能圖片優先加載
網站主要考慮可用性的重要性,一個功能按鈕要提前加載出來,用戶進入下載頁,一個只需要8s時間的下載,花了5s在等待、尋找下載按鈕圖片,誰能忍受?
6.圖片格式優化
不正確的使用圖片格式是一種很常見的拖慢加載速度的原因,正確的使用圖片格式可以數倍的減小圖片的大小。一般網頁的大圖,如banner圖片一般使用jpg格式,因為jpg是一種有損壓縮,可以最大程度的減小圖片的體積,而且不會影響視覺體驗(不支持透明通道);小圖片一般用png格式,一般是無損壓縮的(保留透明通道)。
7. 使用 Progressive JPEGs(高級JPEG)
ProgressiveJPEGs圖片是JPEG格式的一個特殊變種,名為“高級JPEG”。在創建高級JPEG文件時,數據是這樣安排的:在裝入圖像時,開始只顯示一個模糊的圖像,隨着數據的裝入,圖像逐步變得清晰。它相當於交織的GIF格式的圖片。高級JPEG主要是考慮到使用調制解調器的慢速網絡而設計的,快速網絡的使用者通常不會體會到它和正常JPEG格式圖片的區別。對於網速比較慢的用戶,這無疑有很好的體驗。
8.代碼的精簡
代碼的是最直接的方法,也是對於一個程序員編程能力的考驗。對代碼進行優化,以最少的代碼來實現所需的功能,及減少了文件的體積,同時也減少了不必要的時間的浪費。同時不必要的空格、注釋、換行等的減少,也可以減少文件的體積。
9.延遲加載和執行非必要代碼
網頁中的大部分js代碼都是在頁面加載后才需要執行的,所以對於這些代碼可以寫在window.onload事件的回掉函數中。這樣可以使頁面主體和一些必要的js代碼優先加載的出來,然后來去請求非一開始就需要的代碼。
10.使用Ajax
當一個頁面只有一部分需要更新時,可以使用ajax來對頁面進行異步的更新,這樣不需要重新的刷新整個頁面,重新請求整個1頁面的數據,而只需要請求需要的那部分數據更新頁面即可。這樣既提高了頁面的加載速度,有提高了體驗性。
11.借助自動化工具來實現頁面的優化
比如RadwareFastView