“hi~優(yōu)化師,你們的落地頁,打開速度夠快嗎?”
Warning: Invalid argument supplied for foreach() in /data/cxweb/www/gupowang.com/public/article/view.html on line 71
7年前
【作者】輝輝輝
【來源】信息流運營
【編輯】善小布
似乎每一個運營人都在擔憂落地頁的問題,例如: 打開快不快,圖片多不多 結構合理不合理,展現(xiàn)效果不自然 設計美觀不美觀... 今天,輝輝輝以一個前端的角度來給大家專業(yè)的分析一下如何讓你的落地頁(LoadingPage)三秒內(nèi)打開,甚至是一秒! 這里我想問大家伙一個問題, “你的落地頁,打開速度夠快嗎?” 頁面打開速度過慢無外乎這幾個問題: 圖片問題 代碼問題 線程問題(客戶端瀏覽器最高同時加載數(shù)) 服務器問題 一、圖片問題 現(xiàn)在很多信息流廣告的LP(落地頁),都是設計成圖片的形式然后切圖排版,但是會出現(xiàn)加載過于緩慢的問題,解決方法如下: 1. 控制單張圖片大小在200kb以內(nèi)(根據(jù)服務器帶寬可適當大一些); 2. 非透明背景圖片格式均修改為.jpg ; 3. .jpg圖片品質(zhì)控制在60左右(PhothShop打開-另存為web格式); 4. 加載圖片方式選擇連續(xù)而不是優(yōu)化 (連續(xù):以多線程方式下載) 5. 有條件的小伙伴可以使用CDN靜態(tài)資源加速,可以很只管看到解決效果。 解析: 將圖片大小控制在服務器帶寬加載速度以內(nèi),如: 1Mbps=1024Kbps=1024/8KBps=128KB/s 同時,控制加載方式為連續(xù)的好處為:圖片整體顯示,以不清晰的方式慢慢變清晰! 二、代碼問題 代碼問題也是比較常見的問題,很多技術同學,為了達到運營同學要的效果(不擇手段!)也是沒有辦法, 查看源代碼你可能看到: 還有這樣的: 看得懂代碼的小伙伴,你知道什么問題嗎? 1. 阻塞進程-未加載完成之前,不加載之后的內(nèi)容; document.writeln('lalallala'); alert('lalal'); 2. 引用資源順序不對,例如:jQuery沒有在引用的腳本之前加載,會導致錯誤; 3. 引用資源地址錯誤/資源服務器過于緩慢; 解析: 在這里,我很嚴肅的規(guī)勸大家,代碼規(guī)范以及減少阻塞的方法應該都是咱們的基礎必修課,并且規(guī)范起來,對后期代碼維護都是很有幫助的! 三、線程問題 這個東西是我肯可以先來看一下基本概念: 當我們在瀏覽網(wǎng)頁的時候,對瀏覽速度有一個重要的影響因素,就是瀏覽器的 并發(fā)數(shù)量 。 并發(fā)數(shù)量簡單通俗的講就是,當瀏覽器網(wǎng)頁的時候同時工作的進行數(shù)量。 如果同時只有2個并發(fā)連接數(shù)數(shù)量,那網(wǎng)頁打開的時候只能依賴于這2條線程,前面如果有打開慢的內(nèi)容,就會直接影響到后面的內(nèi)容打開。 但是如果同時有更多的并發(fā)連接數(shù),這樣就會大大的提高網(wǎng)頁加載速度。 瀏覽器的并發(fā)連接數(shù)也并非越大越好 。 下表概括了基于主機上運行的IE瀏覽器的版本的最大并發(fā)連接數(shù)、主機的連接速度和服務器的受支持的協(xié)議版本。 看到這里,你發(fā)現(xiàn)一個問題沒有,是不是發(fā)覺你平時使用 谷歌 還有 火狐 打開速度都很快? 是的,谷歌因為針對客戶端開放的線程是最多的(最新版為6-10條),最高不超過10線程. 所以你懂的,最快的是谷歌,但是不一定是最高就最好,但是就目前的硬件水平,最高就是最好的這句話沒毛病! 瀏覽器引擎在加載資源的同時會監(jiān)測統(tǒng)一主域(同一域名)下的資源有多少,并且 最高不超過瀏覽器線程的情況下 同時加載。 那么如果當其中一個主域的進程(線程)被阻塞了,加載速度肯定就慢下來了,所以我在這里建議大家: 在加載資源的時候一定不要把所有的資源(img、js、css、fonts)放在同一主域下,可以根據(jù)資源類型建立不同的二級域名。 例如: imgs.youdomain.site、js.yourdomain.site、css.yourdomain.stie 這樣不就把你的資源分開了嗎? 哪怕其中一個主域阻塞,也是不影響其他的主域同時加載,速度嗖的一下就上來了! 所以,老鄉(xiāng),雞蛋不要放在一個籃子里嘛! 四、服務器問題 服務器坑爹有木有!選擇運營商就像選擇男朋友一樣, 必須得靠譜 ! 那些年,做技術的小編被坑過很多次,好多鍋都在我頭上,不得不背! 在這里,含淚給大家分享一下我的心酸史: 某安服務器(免得說我打廣告)! 天那!就是他,一年時間出過三次問題,平均三個月多出一次問題! 服務器斷電?我遇到兩次! 還有一次是服務器宕機了,整個機房全部斷網(wǎng)! 要了我的親命!老子為了這個事兒背了三次鍋,客戶投放廣告至少有兩天打開LP是404狀態(tài)! 后來我找他們說事兒,他們說這個他們不管的,最多給你服務器延期三天... 我要你個錘子! 三天有什么用? 能挽回我的損失嗎? 所以,在這里我用血的教訓告訴大家, 買服務器一定不要舍不得花錢,特別是做廣告的,廣告費都花了,為啥服務器不知道多花點錢 ? 買服務器,國內(nèi)的,有備案的,我推薦 阿里云/騰訊云/小鳥云 ,使用起來很方便,維護起來也很方便,售后很nice,經(jīng)常有活動,大家感興趣可以去他們官網(wǎng)看看!(非廣告,只是推薦) |
投稿請戳這里!投稿
0
次分享
文章評論(0)