你的網(wǎng)站打開(kāi)速度過(guò)慢時(shí)要怎么解決?
網(wǎng)站打開(kāi)的速度時(shí)快時(shí)慢十分影響用戶(hù)的體驗(yàn),那么怎么去解決這個(gè)問(wèn)題呢?建議從以下這些參考以下這些方法。
1.網(wǎng)站建設(shè)用到的圖片盡量將其縮小
首先,必須要優(yōu)化或壓縮你的圖像文件。你不能用數(shù)碼相機(jī)拍張照片就直接放到網(wǎng)頁(yè)上。必須要降低圖片文件的解像率,降低圖像質(zhì)量,得到一個(gè)優(yōu)化過(guò)的文件。上面提到的800K的圖像文件,很容易就可以降低到100K以下,也沒(méi)有什么可以覺(jué)察得到的質(zhì)量上的損失。
可以使用Photoshop,里面已經(jīng)有專(zhuān)為網(wǎng)頁(yè)壓縮圖像文件的選項(xiàng),或者網(wǎng)上也有其他壓縮圖像文件的在線(xiàn)工具,大家可以搜索一下。
如果網(wǎng)頁(yè)的圖片比較多,而且單個(gè)圖片也比較大。那么在保證圖片質(zhì)量不變的情況下(清晰度),盡可能地去壓縮圖片大小,圖片的格式盡量按照這個(gè)級(jí)別來(lái)webp > jpg > png > bmp。
2.將網(wǎng)絡(luò)壓縮這個(gè)功能打開(kāi)
在瀏覽器發(fā)生數(shù)據(jù)請(qǐng)求的時(shí)候,會(huì)帶上這個(gè)標(biāo)記表示這個(gè)瀏覽器可以接受以gzip壓縮方式傳輸數(shù)據(jù),不過(guò)這個(gè)功能不是所有服務(wù)器都支持的。
必須要使用網(wǎng)頁(yè)編輯軟件來(lái)做網(wǎng)頁(yè)。微軟的Word確實(shí)提供一個(gè)功能,將文件輸出為HTML格式。在絕大部分情況下,這些輸出文件在網(wǎng)站上打開(kāi)也沒(méi)什么問(wèn)題。但問(wèn)題是,這樣的文件包含了大量的垃圾代碼。在上面的例子里,200K的HTML文件用專(zhuān)用的網(wǎng)頁(yè)編輯軟件重新改一下,能輕易降到15K以下,也就是說(shuō)90%全是垃圾代碼。
3.使用瀏覽器緩存
同一個(gè)站點(diǎn)下面的不同頁(yè)面,在網(wǎng)站建設(shè)時(shí)就會(huì)共用這些資源文件。那么有人就會(huì)想到能不能把這些共用的資源文件設(shè)置為可緩存的形式呢?答案是肯定可以的,不過(guò)這需要技術(shù)人員來(lái)操作。好處就是刷新或者跳轉(zhuǎn)到另一個(gè)頁(yè)面的時(shí)候,就可以不用再再?gòu)木W(wǎng)絡(luò)拉取相關(guān)資源,這樣對(duì)于網(wǎng)站的速度將會(huì)大大地提高。
4.重定向請(qǐng)求盡量減少
有些網(wǎng)站在建設(shè)時(shí)就設(shè)計(jì)好了不同的訪(fǎng)問(wèn)終端頁(yè)面,像這種每一次重定向它都讓瀏覽器重新發(fā)起請(qǐng)求,再次重新加載又會(huì)消耗更多時(shí)間。像這種問(wèn)題的解決方案就是將網(wǎng)站建設(shè)成響應(yīng)式網(wǎng)站,直接一個(gè)站點(diǎn)覆蓋所有網(wǎng)站。
5.壓縮css和js內(nèi)容
這一步驟如果不懂的話(huà)就需要網(wǎng)站建設(shè)的技術(shù)人員來(lái)操作。主要是查看網(wǎng)站css文件和js文件中是否有大量的空格和變量命名,如果有就將這些內(nèi)容以及空格去除掉,那么這些css文件和js文件的大小就會(huì)被縮減,這樣對(duì)網(wǎng)站的加載速度也是一種提升。
設(shè)想一下,把這些垃圾代碼和未壓縮的圖像文件全加起來(lái),你該浪費(fèi)了多少帶寬?又有多少用戶(hù)等不下去而離開(kāi)了你的網(wǎng)站?
下面列出幾個(gè)具體的網(wǎng)頁(yè)代碼問(wèn)題,有助于降低文件大小。
使用CSS
CSS大量減少HTML中的格式代碼,并且可以作為外部文件使用,不必每次打開(kāi)網(wǎng)頁(yè)都調(diào)用這些格式文件。
盡量使用標(biāo)準(zhǔn)代碼
瀏覽器在打開(kāi)網(wǎng)頁(yè)的時(shí)候,如果網(wǎng)頁(yè)文件中包含太多的錯(cuò)誤,瀏覽器需要花時(shí)間矯正這些錯(cuò)誤。所以盡量要使用正確的標(biāo)準(zhǔn)代碼。
定義圖形文件和表格的尺寸(高度和寬度)
這樣瀏覽器可以在圖像文件和表格里面的內(nèi)容完全下載之前,就顯示出網(wǎng)頁(yè),因?yàn)閳D像和表格的大小已經(jīng)確定了,位置可以預(yù)留出來(lái)。
刪除不需要的代碼
比如大量的空格,空行,評(píng)論等。
減少花里胡哨的東西
很炫的JS菜單,按鈕,圖形,音樂(lè),動(dòng)畫(huà),flash等等,這些東西有它明確的目的嗎?還是就是好玩?
如果網(wǎng)頁(yè)太長(zhǎng),考慮分成多個(gè)網(wǎng)頁(yè)
這樣另外一個(gè)好處就是,顯得你的網(wǎng)頁(yè)內(nèi)容還多點(diǎn)。
減少網(wǎng)頁(yè)中要調(diào)用的文件數(shù)目
不要用太多很小的圖像文件,在可能的情況下,減少這些圖像文件的數(shù)目。這樣文件下載的時(shí)候,就不需要那么多的HTTP連接。
避免使用嵌套表格
如果必須使用表格的話(huà),也要盡量少用使用嵌套表格。
使用外部文件
CSS,JS等,都要放到外部文件。
總的目標(biāo)是盡量減少文件大小,包括HTML文件,圖片和腳本。如果能把網(wǎng)頁(yè)上文件總大小降到30K以下就好,20K更好,如果10K以下,那就更好了。
很多網(wǎng)頁(yè)設(shè)計(jì)師會(huì)嘲笑這樣的數(shù)字,一個(gè)現(xiàn)代的網(wǎng)頁(yè)還能只是20K,30K?不可能!光我那個(gè)很炫的logo就20K了。
如果能兩者兼得的話(huà),不妨可以兼顧。但如果兩者不能兼得,你是選擇讓用戶(hù)看到一個(gè)不那么炫的網(wǎng)頁(yè),還是讓用戶(hù)根本就看不到網(wǎng)頁(yè)呢?