速度是移動端網頁的靈魂,這些策略幫你提速

2022-09-21 19:36:12 字數 2439 閱讀 8636

nick babich – 早在 2016 年的時候,移動端流量就已經超越桌面端成為目前主流。根據google uk 的研究,如今65%的英國成年人都以智慧型手機作為他們的主要上網裝置。

人們通過移動端裝置搜尋資訊,**購物,使用移動端裝置訂閱各種服務。使用者偏好上的轉變推動著使用者期望發生變化。現如今,絕大多數的使用者比以往更沒有耐心,當他們希望得到某個東西的時候,通常希望立刻能得到,否則,他們會迅速離開,選擇其他的方案。

在如今的移動端產品當中,載入緩慢,登入艱難,流程複雜是常見的問題,今天的文章將會為你提供一系列「提速」的技巧。

緩慢的頁面載入隨著技術的發展,越來越快的頁面載入體驗,使得比以往更不願意等待載入了。

2/ 3 的移動端使用者表示,頁面的載入速度對於他們的瀏覽體驗而言影響是最大的。

google 對全球範圍內900000 個移動端**進行了測試,發現這些**的平均載入時長為 22 秒。與此同時,研究表明,如果移動端頁面載入時間超過 3 秒,53%的使用者將會直接離開。

1、試圖找出造成問題的原因

如果對於你的**而言,載入緩慢是乙個常見的情況的話,那麼你應該盡量找出問題所在。通常,頁面載入的時間受到下面的因素的影響:

2、測試你的**

測試**效能的工具並不少,其中之一就是google 的test my site ,這個**將會為你提供如何加速和改進**的可行性報告。

webpage test 是另外乙個非常有用的工具,它將會從全球不同的地方來使用真實的瀏覽器(ie和chrome)來測試使用者瀏覽的時候的真實資料。

3、使用骨架布局

如果你想在現有的條件下讓網頁更快一點,那麼你可以試著讓它在視覺體驗上更「快」一些。

在載入頁面的過程中先載入整個布局的骨架,能給人一種速度感,一種看起來比實際載入要快得多的主觀感受。

看看 codepen 這個純css**所構建的骨架布局吧,優先載入布局讓用程式設計客棧戶感受到頁面載入「有進展」。

登入限制很多網頁和app 要求使用者必須註冊登入之後才能夠使用其中的功能。對於許多品牌認知度較低或者價值主張不明顯的應用而言,許多使用者會因為這種登入限制而離開。如果能夠推遲註冊,允許使用者試用服務和功能,那麼使用者可能會隨後註冊並登入。

1、允許使用電子郵件和手機號碼作為使用者id

如果你要求使用者建立乙個唯一的使用者名稱,他們很可能會遭遇下面的困程式設計客棧難:

允許使用者使用電子郵件和手機號碼作為登入id,能讓使用者方便不少。

2、讓密碼驗證的體驗盡量順暢

使用者忘記密碼是常有的事,忘記密碼本就是一件惱人的事情,而重置密碼這件事情也是一樣令人惱火。

amazon 密碼丟失重置流程

通過簡化認證體驗,減少使用者放棄的風險。使用第三方社交帳號登入:

flipboard 允許使用者使用使用社交帳號登入。

還有的app 已經開始允許 faceid 和 touchid 來登入了。

3、提供其他可選的登入方式

基於使用者所提供的資訊允許他們使用額外的方式登入。舉個例子,如果你的使用者繫結了手機號,可以使用手機號獲得一次性密碼來登入。ebay 就是這樣做的:

漫長的結帳流程越來越多的移動端客戶開始在移動裝置上購物,使用者對於購物結帳的流程和體驗自然也是越來越高。不過,說起來容易做起來難,在移動裝置上填寫表單很痛苦,很多使用者會因為需要填寫表單過長而放棄。這並不奇怪,根據google

所提供的資料,50%的使用者會因為經驗不足而放棄移動交易。

1、不要強迫使用者建立賬戶

根據 maymard 的研究,強迫使用者註冊賬戶是人們放棄狗屋的最主要原因。應當允許使用者發生購買而無需註冊,在購買頁面應該有「作為訪客結帳」的選項,並且要明顯。ebay 的購買頁面當中,就提供了「登入」和「作為訪客結帳」的選項。

2、記住使用者提供的詳細資訊

不要要求使用者輸入他們以前提供過的任何資訊。一旦是蒐集過的資料,就不要讓使用者反覆提交,比如收貨位址和賬單細節等。只需要確保使用者想修改的時候能夠修改就行。

3、用好地理資訊資料

相比於每次都詢問使用者收貨位址和所處位置,不如記錄好使用者之前所提交的資料,並且允許提供預設選項,確保使用者能夠按需調整即可。

當使用者點選「分享我的位置」按鈕的時候,表單中會填充當前位址資訊。

4、使用移動支付

談及付款,你應該盡可能為使用者提供他們所喜歡的付款方式。除了傳統的支付方式之外,還應該允許使用者使用諸如 apple pay 和 android pay 這樣的支付選項,這樣避免了複雜的表單填寫,並且可以提高安全感。

5、設計「快速購買」的選項

這種選項對於許多使用者是有益的。當使用者點選「快速購買」的時候,之後系統會自動載入預先填寫好的預設支付方式程式設計客棧和收貨位址,快速完成購買任務。(好像**就是這樣的吧?)

6、允許在另外一台裝置上繼續執行購買任務

雖然使用移動裝置購物的使用者一直在增加,但是相當多的使用者只是在移動端上瀏覽,再到桌面端上完成購買。允許使用者提供「儲存稍後看」或者「將購物車傳送到電子郵件」等選項來完成操作。

本文標題: 速度是移動端網頁的靈魂,這些策略幫你提速

本文位址: /news/seo/78245.html

如何提高移動端網頁載入速度?

nick babich 早在2016年的時候,移動端流量就已經超越桌面端成為目前主流。根據google uk 的研究,如今65 的英國成年人都以智慧型手機作為他們的主要上網裝置。在如今的移動端產品當中,載入緩慢,登入艱難,流程複雜是常見的問題,今天的文章將會為你提供一系列 提速 的技巧。隨著技術的發...

PC端網頁和移動端網頁,自己做的總結

1.pc考慮的是瀏覽器的相容性,而移動端開發考慮的更多的是手機相容性,因為目前不管是android手機還是ios手機,一般瀏覽器使用的都是webkit核心,所以說做移動端開發,更多考慮的應該是手機解析度的適配,和不同作業系統的略微差異化。2.在部分事件的處理上,移動端多出來的事件是觸屏事件,而缺少的...

移動端網頁中ViewPort的使用

meta name viewport content width device width,target densitydpi high dpi,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no meta n...