營(yíng)銷型網(wǎng)站建設(shè)知識(shí)/Web Site
位置:協(xié)城首頁(yè)>網(wǎng)絡(luò)營(yíng)銷知識(shí)>營(yíng)銷型網(wǎng)站建設(shè)知識(shí)只做為你賺錢的營(yíng)銷型網(wǎng)站,只做為你賺錢和省錢的網(wǎng)絡(luò)營(yíng)銷和電子商務(wù)
頁(yè)面加載速度優(yōu)化的12個(gè)建議
頁(yè)面加載速度優(yōu)化的12個(gè)建議 | |
發(fā)表時(shí)間:2014-05-28 作者: 來(lái)源: 瀏覽: | |
最近發(fā)布的2014年春季電商頁(yè)面速度與Web性能”調(diào)查報(bào)告強(qiáng)調(diào)了電商頁(yè)面加載速度的重要性,同時(shí)指出很多網(wǎng)站都沒(méi)有利用最佳的頁(yè)面優(yōu)化技術(shù),頁(yè)面加速速度都存在很大缺陷。那么該如何補(bǔ)救,提高網(wǎng)站頁(yè)面的加載速度呢? 中山網(wǎng)絡(luò)公司給出了12個(gè)頁(yè)面加載速度優(yōu)化的補(bǔ)救措施,用以改善加載時(shí)間,改善站長(zhǎng)瀏覽者的用戶體驗(yàn)。網(wǎng)站運(yùn)營(yíng)人員可以通過(guò)這些建議來(lái)解決頁(yè)面加載速度難題。編譯如下: 1、合并Js文件和CSS 將JS代碼和CSS樣式分別合并到一個(gè)共享的文件,這樣不僅能簡(jiǎn)化代碼,而且在執(zhí)行JS文件的時(shí)候,如果JS文件比較多,就需要進(jìn)行多次“Get”請(qǐng)求,延長(zhǎng)加載速度,將JS文件合并在一起后,自然就減少了Get請(qǐng)求次數(shù),提高了加載速度。 2、Sprites圖片技術(shù) Spriting是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式,它是將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去,然后利用CSS技術(shù)展現(xiàn)出來(lái)。這樣一來(lái),當(dāng)訪問(wèn)該頁(yè)面時(shí),載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了,可以減少了整個(gè)網(wǎng)頁(yè)的圖片大小,并且利用CSSSprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求,從而大大的提高頁(yè)面的性能。CSSSprites在國(guó)內(nèi)很多人叫css精靈,很早就有了,在很多大型網(wǎng)站都有用到,特別是一些所有頁(yè)面都存在的圖標(biāo)用得比較多,很好的提升加載速度。 3、壓縮文本和圖片 壓縮技術(shù)如gzip可以有效減少頁(yè)面加載的時(shí)間。包括HTML,XML,JSON(JavaScript對(duì)象符號(hào)),JavaScript和CSS等,壓縮率都可以在大小70%左右。文本壓縮用得比較多,一般直接在空間開(kāi)啟就行,而圖片的壓縮就比較隨意,很多都是直接上傳,其實(shí)還有很大的壓縮空間。 4、延遲顯示可見(jiàn)區(qū)域外的內(nèi)容 為了確保用戶可以更快地看見(jiàn)可見(jiàn)區(qū)域的網(wǎng)頁(yè)可以延遲加載或展現(xiàn)可見(jiàn)區(qū)域外的內(nèi)容,為了避免頁(yè)面變形,可以使用占位符標(biāo)簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時(shí)候,不加載任何第一屏以下的圖片信息,只有當(dāng)用戶把鼠標(biāo)往下滾動(dòng)的時(shí)候,這些圖片才開(kāi)始加載。這樣很明顯提升可見(jiàn)區(qū)域的加載速度,提高用戶體驗(yàn)。 5、確保功能圖片優(yōu)先加載 網(wǎng)站建設(shè)主要考慮可用性的重要性,一個(gè)功能按鈕要提前加載出來(lái),用戶進(jìn)入下載頁(yè),一個(gè)只需要8s時(shí)間的下載花了5s在等待、尋找下載按鈕圖片,誰(shuí)能忍受? 6、重新布置Call-to-Action按鈕 其實(shí)這個(gè)和上面一條是差不多的,都是從用戶體驗(yàn)速度著手,跳過(guò)了網(wǎng)頁(yè)的整體加載速度。速度沒(méi)變,只是讓一些行為按鈕提前,Call-to-Action按鈕一般習(xí)慣設(shè)計(jì)在頁(yè)面底部,這樣的習(xí)慣對(duì)于用戶來(lái)說(shuō)并不總是好的,購(gòu)買用戶需要等到最下面加載出來(lái)才能點(diǎn)擊下一步操作??梢哉{(diào)整CTA按鈕的位置或使用滑動(dòng)的圖片按鈕。很多大型購(gòu)物網(wǎng)站的加入購(gòu)物車就是這種類型。 7、圖片格式優(yōu)化 不恰當(dāng)?shù)膱D像格式是一種極為常見(jiàn)的減慢加載速度的罪魁禍?zhǔn)住U_的圖片格式可以讓圖片縮小數(shù)倍,如果保存為最佳格式??梢怨?jié)省大量帶寬,減少處理時(shí)間時(shí)間,大大加快頁(yè)面加載速度,這是一種很常見(jiàn)的做法。 8、使用 Progressive JPEGs ProgressiveJPEGs圖片是JPEG格式的一個(gè)特殊變種,名為“高級(jí)JPEG”。在創(chuàng)建高級(jí)JPEG文件時(shí),數(shù)據(jù)是這樣安排的:在裝入圖像時(shí),開(kāi)始只顯示一個(gè)模糊的圖像,隨著數(shù)據(jù)的裝入,圖像逐步變得清晰。它相當(dāng)于交織的GIF格式的圖片。高級(jí)JPEG主要是考慮到使用調(diào)制解調(diào)器的慢速網(wǎng)絡(luò)而設(shè)計(jì)的,快速網(wǎng)絡(luò)的使用者通常不會(huì)體會(huì)到它和正常JPEG格式圖片的區(qū)別。對(duì)于網(wǎng)速比較慢的用戶,這無(wú)疑有很好的體驗(yàn)。 9、精簡(jiǎn)代碼 這個(gè)可以說(shuō)是最直接的一個(gè)方法,也是用得比較多的,對(duì)網(wǎng)頁(yè)代碼進(jìn)行瘦身,刪除不必要的沉冗代碼,比如不必要的空格、換行符、注釋等,包括JS代碼中的無(wú)用代碼也需要清除。其中對(duì)于注釋代碼的清除可能有些人存在誤區(qū),甚至有的在里面堆砌關(guān)鍵詞。 10、延遲加載和執(zhí)行非必要腳本 網(wǎng)頁(yè)中有很多腳本是在頁(yè)面完全加載完前都不需要執(zhí)行的,可以延遲加載和執(zhí)行非必要腳本。這些腳本可以在onload事件之后執(zhí)行,避免對(duì)網(wǎng)頁(yè)上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可能是你自己網(wǎng)頁(yè)的甲苯,往往更多的是一些第三方腳本,這樣的有很多,比如評(píng)論、廣告、智能推薦、百度云圖、分享等等,這些完全可以等主體內(nèi)容加載完后再執(zhí)行。 11、使用AJAX AJAX即“Asynchronous Javascript +XML“,是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁(yè)(不使用AJAX)如果需要更新內(nèi)容,必須重載整個(gè)網(wǎng)頁(yè)面。 12、自動(dòng)化的頁(yè)面性能優(yōu)化 自動(dòng)化的頁(yè)面性能優(yōu)化也就是借助工具了,網(wǎng)站提速工具有很多,這里Radware推薦了自家的RadwareFastView,也算Radware給自家做了一個(gè)廣告,這里不多說(shuō)了。 以上就是中山網(wǎng)絡(luò)公司給出的12個(gè)頁(yè)面加載速度優(yōu)化建議。 小編:協(xié)成科技網(wǎng)絡(luò)公司,營(yíng)銷型網(wǎng)站建設(shè)專家 | |
上一篇:注意網(wǎng)站細(xì)節(jié) 規(guī)避建站誤區(qū) | 下一篇:網(wǎng)頁(yè)關(guān)鍵詞密度多少最合適 |
此文關(guān)鍵字:網(wǎng)絡(luò)公司,網(wǎng)站建設(shè) | |
網(wǎng)絡(luò)營(yíng)銷知識(shí)
營(yíng)銷型網(wǎng)站建設(shè)知識(shí)
- 2015年網(wǎng)站設(shè)計(jì)我們將看到這十大趨...
- 網(wǎng)站建設(shè)中容易忽視網(wǎng)站副導(dǎo)航
- 中山網(wǎng)絡(luò)公司的網(wǎng)站建設(shè)和網(wǎng)站優(yōu)化...
- 中山網(wǎng)絡(luò)公司淺議網(wǎng)站建設(shè)好以后更...
- 成功的網(wǎng)站建設(shè):是好內(nèi)容加上真投...
- 中山網(wǎng)絡(luò)公司的網(wǎng)站建設(shè)和網(wǎng)站優(yōu)化...
- 網(wǎng)站建設(shè) 推動(dòng)企業(yè)發(fā)展新動(dòng)力
- 做企業(yè)網(wǎng)站建設(shè)需要注意哪些問(wèn)題
網(wǎng)絡(luò)營(yíng)銷推廣技巧
- 企業(yè)網(wǎng)站建設(shè)注意6大低價(jià)陷阱
- 從網(wǎng)站收錄少看網(wǎng)站存在的三大問(wèn)題
- seo 網(wǎng)站建設(shè)制造幾點(diǎn)倡議
- 幾個(gè)讓你的用戶體驗(yàn)變差的細(xì)節(jié)!
- 網(wǎng)站優(yōu)化:站內(nèi)文章編輯技巧
- 高質(zhì)量網(wǎng)站建設(shè)包括哪些因素
- 企業(yè)網(wǎng)站建設(shè)必須要了解的操作流程
- 淺談網(wǎng)站建設(shè)與網(wǎng)絡(luò)營(yíng)銷