移動端網站最佳化:移動端網站最佳化全接觸

來源:互聯網
上載者:User

文章描述:為了滿足移動使用者的高期望,你需要對網站針對行動裝置進行最佳化,在4秒或更少的時間裡載入完畢。最好的方式來達到4秒這個魔術時間,是通過減少JavaScript和最佳化HTML、CSS和映像,保持智能手機上最少的處理負荷。

最近一項 研究表明,80%的網民對移動端的瀏覽體驗感到失望,同時,當體驗提升時,他們會在智能手機上花費更多的時間。

這不奇怪,因為64%的智能手機使用者希望網站可以在4秒內載入完畢,但一半的網站花費了二倍以上的時間,達到了9秒。這篇文章會闡述一些可以使你的網站在移動端跑得更快的技術。

移動端使用者的下載速度

讓我們來研究下究竟是什麼影響了智能手機上的網頁載入速度。

最明顯的原因是智能機的網速。最佳情況下,移動端使用者使用3g與4g上網。在美國,57%的使用者使用3g上網,27%的使用者使用4g。在加拿大,4g使用者更少。而在英國,4g還是新鮮事物。Pcworld的研究表明,在美國,3g平均下載速度為2mbps,4g則為6.2mbps。ofcom的研究顯示,在英國3g的下載速度為2.1mbps。北美和歐洲以外的連線速度一般較慢。1mpbs可換算為122kb每秒,或者0.12mb每秒,因此以上的資料可以轉換如下:

  • 244 KB/s 3G使用者平均網速值 (0.24 MB/s)
  • 756 KB/s 4G使用者平均網速值(0.76 MB/s)

如果把上述值乘以移動使用者等待時間4秒,這意味著網站對於3g使用者來說最大為1mb,而4g使用者為3mb。

然而下載速度並不是瓶頸,網路延遲及智能機的記憶體與cpu才是瓶頸。即使手機可以在4秒內下載完1mb,頁面也要花費更長的時間去載入,因為手機需要接收並解析代碼與圖片。

在案頭端,下載檔案只佔顯示網站時間的20%,其餘時間花費在解析http請求,擷取樣式表,指令檔及圖片上。由於移動端的cpu,記憶體與緩衝跟案頭端完全無法相提並論,這些在手機上會花費更長的時間。

怎樣減少載入時間

構建一個快速的網站,就是一個做出艱難決定與砍掉非核心體驗的過程。如果某一項需求價值不大,去掉之。這個原則適用於所有開發階段,尤其是規劃和編碼時。

  • 減少依賴檔案 : 更少的檔案意味著更少的http請求與更快的載入時間
  • 降低圖片大小: 適應與調整高解析度圖片,在額外的下載時間中占居榜首,佔用了寶貴的記憶體與處理資源。
  • 減輕用戶端負擔: 最佳實務是重新思考你的javascript,並使之降低到最小尺寸

怎樣減少依賴檔案

怎樣減少依賴檔案

如果你想為移動端使用者隱藏圖片,display:nonevisibility:hidden是不能阻止檔案下載的。測試下面的代碼:

<divstyle="display:none;"><imgsrc="logo-none.png" /></div><divstyle="visibility:hidden;"><imgsrc="logo-hidden.png" /></div>

你可以觀察下面的瀑布圖,圖片容器設定display: nonevisibility: hidden後仍然會被下載。

替代方案是利用css載入背景圖片,之後利用media query媒體查詢來通過條件隱藏圖片。這個技術最初被Jason grigsby測試過,之後被tim kandlec進一步拓展。亞馬遜獨立的移動端頁面使用了此種技術,根據裝置來條件載入特定的圖片。

<metaname="viewport"content="width=device-width"><style>@media (max-width:600px) {         .image{             display:none;}     }     @media (min-width:601px) {         .image{             background-image:url(image1.jpg);}     } </style><divclass="image"></div>

你可以看到圖片不載入的瀑布圖:

[1] [2] [3] [4] [5]  下一頁



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。