“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)看看!(非廣告,只是推薦)


           

          收藏

          {{favCount}}

          個人收藏

          投稿請戳這里!投稿
          0

          次分享

          文章評論(0)

          {{ user.nickname }}
          發(fā)表評論
          登錄 進行評論
          加載更多 正在加載中... 沒有更多了