減少頁面加載量,提高用戶訪問速度

2022-06-16    分類: 網(wǎng)站建設(shè)

減少頁面加載量最主要的目的是減少資源消耗,加快頁面的呈現(xiàn)速度。雖然延遲加載可以在一定程度上優(yōu)化頁面的性能,但不是所有的內(nèi)容都需要第一時(shí)間加載給用戶看或者重復(fù)加載的。比如用戶在瀏覽頁面第一屏的內(nèi)容,那么頁面在打開時(shí)就加載第一屏以下的一些內(nèi)容就不是很有必要。再或者,官網(wǎng)頁面中一些相同的部分,如導(dǎo)航、腳部聲明等部分,這些修改率極低的內(nèi)容每次都從服務(wù)器請(qǐng)求,在一定程度上增加了頁面加載的負(fù)荷。

另外針對(duì)現(xiàn)狀,官網(wǎng)通過采用HTML5本地存儲(chǔ),內(nèi)容按需加載,延遲加載,文件壓縮,CSS Sprites等技術(shù),使頁面性能得到了大幅度提升。

HTML5自打出生就注定要開始它不平凡的一生,各大科技公司都對(duì)其寄予厚望,并紛紛進(jìn)行嘗試。可以想象,一個(gè)日瀏覽量1000w次的網(wǎng)站,節(jié)省10K的下載量會(huì)有多好的效果,這對(duì)用戶的訪問速度和服務(wù)器的負(fù)載都有極大的好處。官網(wǎng)嘗試采用全新的內(nèi)容布局思路,對(duì)用戶做更好的引導(dǎo)。本次改版,官網(wǎng)主要有以下四個(gè)方面的調(diào)整:大量去除上一版影響瀏覽的Flash動(dòng)畫,只保存首頁下載按鈕的Flash效果,加快了頁面的加載速度;引導(dǎo)頁對(duì)用戶進(jìn)行分流,獲取游戲資訊的用戶進(jìn)入官網(wǎng),了解游戲玩法攻略的進(jìn)入戰(zhàn)爭學(xué)院;首頁增強(qiáng)了游戲活動(dòng)和賽事的展示,采用了不同以往的大型輪播廣告和占據(jù)頁面近三分之一空間的列表;增加了免費(fèi)英雄展示和游戲榮譽(yù)墻的部分。

同時(shí),在關(guān)注網(wǎng)站性能優(yōu)化的同時(shí),我們應(yīng)該注意到減少用戶加載頁面時(shí)的加載量也是一個(gè)極其重要的方面。蘋果、谷歌、微軟陸續(xù)推出HTML5展示頁面,各大視頻網(wǎng)站也相繼宣布支持HTML5視頻技術(shù),HTML5地理定位技術(shù)更如雨后春筍,在國外社交網(wǎng)站得到應(yīng)用。另外采用HTML5視頻技術(shù),使官網(wǎng)在蘋果移動(dòng)平臺(tái)上有很好的表現(xiàn)。

另一方面,在移動(dòng)設(shè)備平臺(tái),iPhone的出貨量已經(jīng)超過1億部,而iPad的銷量也超過了1500萬臺(tái),iPad2也在首周銷量了近100萬臺(tái),銷售額達(dá)到95億,占整個(gè)平板市場份額的90%。

為了配合LOL不刪檔測試,并改善用戶瀏覽時(shí)的體驗(yàn),官網(wǎng)在今年1月份開始了改版。我們知道,這倆不支持Flash,這個(gè)普及程度提醒我們,提高多平臺(tái)的兼容性勢在必行。

減少頁面加載量的方法有很多,這次LOL官網(wǎng)改版主要用到了以下方法:

采用HTML5本地存儲(chǔ)技術(shù),在用戶電腦里存儲(chǔ)頁面的一些內(nèi)容,如導(dǎo)航,合作媒體,腳部聲明等。這樣用戶在加載頁面時(shí),瀏覽器直接從本地獲取這些內(nèi)容,在一定程度上減少了資源的消耗。

圖片隨滾動(dòng)條滾動(dòng)加載,使用戶在瀏覽頁面時(shí),動(dòng)態(tài)按需加載圖片。比如,用戶在瀏覽第一屏內(nèi)容時(shí),第一屏以后的圖片是沒有加載的,當(dāng)用戶滾動(dòng)頁面時(shí),呈現(xiàn)在瀏覽器中的部分會(huì)動(dòng)態(tài)加載圖片。

優(yōu)化輪播廣告的加載方式,頁面打開時(shí)只加載第一張圖片,在輪播到第二張圖片時(shí),才請(qǐng)求加載第二張圖片,以此類推。

按需加載頁卡的內(nèi)容,官網(wǎng)首頁右上角的新聞板塊,加載時(shí)只請(qǐng)求第一個(gè)頁卡的內(nèi)容,當(dāng)用戶點(diǎn)擊其他頁卡時(shí),再加載頁卡的內(nèi)容。

本文名稱:減少頁面加載量,提高用戶訪問速度
分享地址:http://muchs.cn/news20/168120.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)、ChatGPT、搜索引擎優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)