以用戶為中心的優化:提高網站體驗的3種方法

[ad_1]
以用戶為中心的優化:提高網站體驗的3種方法

SEO是多方面的,每個優化因素都依賴於其他因素。

您可以創建吸引用戶並與其相關的一流內容 搜索意圖,但如果您的網頁載入緩慢,您的用戶將永遠不會有機會閱讀您為網站創建的這些優秀內容。

用戶不耐煩,如果他們不得不等待幾秒鐘,他們就會反彈。

載入時間與跳出率圖形由Think With Google「width =」480「height =」335「sizes =」(最大寬度:480px)100vw,480px「data-srcset =」https://cdn.searchenginejournal.com/ wp-content / uploads / 2019/05 / load-time-bounce-rate-think-with-google-480x335.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/load -time-bounce-rate-think-with-google-680x475.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/load-time-bounce-rate-think-with- google-768x536.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/load-time-bounce-rate-think-with-google.png 1000w「data-src =」https ://cdn.searchenginejournal.com/wp-content/uploads/2019/05/load-time-bounce-rate-think-with-google-480x335.png來自Google的Think數據

你能怪他們嗎?想想當你必須觀看一個裝載輪旋轉時你感到多麼沮喪,感覺就像永恆。

三個不同的載入輪圖標「width =」760「height =」271「sizes =」(最大寬度:760px)100vw,760px「data-srcset =」https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/loading-wheels-768x274.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/loading-wheels-480x171.png 480w,https://cdn.searchenginejournal .com / wp-content / uploads / 2019/05 / loading-wheels-680x242.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/loading-wheels.png 1022w「data -src =「https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/loading-wheels-768x274.png

這是我們在進行任何性能優化工作時需要具備的思維方式,因為當您從對用戶的同情心處理事物時,將會發生最有意義的改進。

了解用戶的不同瀏覽條件

對用戶的同情是一個很好的起點,但我們還需要了解用戶訪問您網站的方式。

例如,他們使用哪些設備和瀏覽器訪問您的網站?他們瀏覽什麼樣的互聯網連接?

瀏覽條件的這些差異會對性能產生比預期更大的影響。

通過測試跨不同設備的CNN主頁的JavaScript處理時間的結果證明了這一點 來自WebPageTest

CNN圖形的JavaScript處理時間「width =」760「height =」440「sizes =」(最大寬度:760px)100vw,760px「data-srcset =」https://cdn.searchenginejournal.com/wp-content/上傳/ 2019/05 / javascript-processing-for-cnn-768x445.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/javascript-processing-for-cnn-480x278.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/javascript-processing-for-cnn-680x394.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/javascript-processing-for-cnn.png 800w「data-src =」https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/javascript-processing-for-cnn-768x445巴紐

iPhone 8是一款具有更好CPU的高端設備,與在13秒內載入的Moto G4相比,在4秒內載入了CNN主頁。

然而,對於在36秒內載入相同頁面的Alcatel 1X,結果更為顯著。

三種不同手機的處理時間「width =」760「height =」473「sizes =」(最大寬度:760px)100vw,760px「data-srcset =」https://cdn.searchenginejournal.com/wp-content/上傳/ 2019/05 / different-device-processing-times-768x478.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/different-device-processing-times-480x299.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/different-device-processing-times-680x423.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/different-device-processing-times.png 900w「data-src =」https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/different-device-processing-times-768x478巴紐

表現並不是「一分錢適合所有人」的情景。它可能會根據每個用戶的瀏覽條件而有很大差異。

「受眾」標籤中的 谷歌分析 是一個開始挖掘並研究用戶如何訪問您的網站的好地方。

例如,您可以在「受眾」>「移動」>「設備」下看到最常用設備的拆分。

Google Analytics移動設備報告「width =」760「height =」361「sizes =」(最大寬度:760px)100vw,760px「data-srcset =」https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/google-analytics-mobile-devices-768x365.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/google-analytics-mobile-devices-480x228.png 480w ,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/google-analytics-mobile-devices-680x323.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/ 2019/05 / google-analytics-mobile-devices.png 927w「data-src =」https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/google-analytics-mobile-devices-768x365。 PNG

這只是眾多報告中的一個,因此請仔細查看您的分析帳戶,以便更好地了解您的用戶以及可能影響他們在您網站上體驗的因素。

以用戶為中心的性能優化是未來

考慮到性能的不同性質取決於每個用戶的瀏覽條件,營銷人員可以採取更多措施來改進我們加速網站的方式。

網站速度的未來應側重於圍繞用戶及其特定瀏覽環境定製性能。

以下三個方面可以進行優化,以改善用戶體驗網站的方式:

  • 用戶的設備
  • 用戶的互聯網連接
  • 用戶的旅程

1.根據用戶設備優化性能

確保每個用戶在您的網站上獲得積極,快速體驗的關鍵是實現基準級別的性能,該級別適用於您要優化的最基本設備。

圍繞這個概念的兩個Web開發策略是:

  • 漸進增強
  • 優雅的退化

漸進式增強

漸進增強功能側重於使頁面的核心內容可訪問,然後在用戶設備或瀏覽器允許的功能之上逐步添加更多技術高級功能。

例如,網站可能首先在HTML中提供乾淨,可訪問的內容作為優先順序。

然後,如果檢測到用戶的瀏覽條件可以處理更複雜的特徵,則可以在頂部分層一些額外的CSS視覺改變,並且可以通過JavaScript進行一些更高級的交互。

優雅的退化

優雅降級基本上與漸進增強相反。

該網站將以完整的體驗開始,但如果用戶的設備無法處理更高級的功能,則會通過關閉某些低重要性元素開始回歸逐漸複雜的體驗。

這些網路策略可以非常強大,因為如果您的網站載入速度很快,即使在最基本的設備上也能很好地運行,請考慮它在高端設備上的載入速度。

2.根據用戶的Internet連接優化性能

內部連接是用戶瀏覽條件中最不穩定的因素之一,尤其是對於移動用戶而言。當我們在移動中使用我們的設備時,互聯網連接必然會波動和下降。

但是,可以針對不同級別的互聯網連接進行優化,以確保用戶在3G或2G連接上仍然可以獲得良好的網站體驗。

網路信息API

網路信息API 提供有關用戶的Internet連接狀態的信息,包括其連接的類型和強度。

您可以使用以下代碼示例使用網路信息API來檢測用戶的Internet連接中的更改:

網路信息API代碼示例「width =」813「height =」195「sizes =」(最大寬度:813px)100vw,813px「data-srcset =」https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/network-information-api.png 813w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/network-information-api-480x115.png 480w,https:// cdn .searchenginejournal.com / wp-content / uploads / 2019/05 / network-information-api-680x163.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/network-information- api-768x184.png 768w「data-src =」https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/network-information-api.png

您還可以設置說明如果互聯網連接發生變化應該發生什麼,以及網站上的內容應該如何採用。

正如Google I / O 2018所示,如果用戶的連接是4G,您可以設置要載入的視頻,因為此連接可以處理這種豐富的體驗。

但是,如果用戶正在瀏覽2G或3G連接,您可以設置要載入的靜態圖像來代替視頻,這樣您就不會對用戶已經有限的連接施加太大的壓力。

根據連接類型「width =」760「height =」415「sizes =」(max-width:760px)100vw,760px「data-srcset =」https://交換圖像視頻的Google I / O示例cdn.searchenginejournal.com/wp-content/uploads/2019/05/google-io-swap-video-for-image-example-768x419.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/google-io-swap-video-for-image-example-480x262.png 480w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/google-io-swap- video-for-image-example-680x371.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/google-io-swap-video-for-image-example.png 912w「數據-SRC =「https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/google-io-swap-video-for-image-example-768x419.png

在這種情況下,用戶不期望觀看視頻或動畫並且不知道他們丟失了什麼。重要的是他們很快就能看到內容。

這有助於用戶對速度的感知,因為他們獲得快速體驗而不必等待很長時間才能載入非關鍵視頻。

3.根據用戶的旅程優化性能

優先考慮要儘可能快地載入的最重要資源的一種方法是用戶的旅程。

當用戶在特定頁面上時,他們最有可能在哪裡點擊下一個?在用戶的旅程中,下一頁需要哪些鏈接和資源?

同樣,這是優化所需優先順序的另一種方法,而不是優化用戶可能潛在的每個頁面以及他們可能需要的每個資源。

頁面之間快速,無縫的旅程為用戶對速度的感知做出了巨大貢獻。

資源提示

讓瀏覽器一次性載入每個資源可能是一個低效的過程,為用戶在等待頁面載入時增加了更多的時間。

這是哪裡 資源提示 可以幫助。資源提示是您可以提供給瀏覽器的指令,以幫助它優先考慮最先載入的內容。

預載

預載入指定影響當前應首先載入的當前導航的最高優先順序資源。

PRECONNECT

預連接先前建立與伺服器和其他來源的連接。對於連接性較差的用戶,此過程可能需要很長時間。

預取

預取指定了將來導航或用戶旅程中下一步所需的關鍵鏈接和資源。

Guess.js

Guess.js 通過自動化預取重要資源的過程並優先考慮用戶旅途中最有可能需要的資源,將資源提示提升到新的水平。

它的工作原理是使用Google Analytics數據分析用戶瀏覽網站的方式,使用網頁瀏覽量,之前的網頁路徑和退出等指標。

然後,它使用機器學習來為任何給定頁面的用戶旅程中下一頁最可能的預測建模。

然後,它會預覽用戶可能在他們瀏覽您網站的下一步中訪問的頁面。這意味著,當用戶點擊它時,下一頁已經載入,提供快速,無縫的導航體驗。

Guess.js如何工作「width =」760「height =」389「sizes =」(最大寬度:760px)100vw,760px「data-srcset =」https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/guess-js-768x393.png 768w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/guess-js-480x245.png 480w,https://cdn.searchenginejournal .com / wp-content / uploads / 2019/05 / guess-js-680x348.png 680w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/guess-js.png 812w「data -src =「https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/guess-js-768x393.png

本文中提到的優化方法將需要開發人員的工作。

如果您在閱讀時喜歡其中任何一個的外觀,那麼請確保您與開發機構或工程團隊坐下來從實施角度討論您的網站可能實現的內容。

結論

我們需要停止假設每個人都在最佳條件下訪問我們的網站。

每個用戶都有自己獨特的瀏覽環境。這就是為什麼我們需要更加努力地圍繞用戶定製我們的性能優化工作以及構成其瀏覽體驗的不同變數,例如他們的設備和互聯網連接。

但是,這樣做並不容易。它當然不是搜索引擎優化或營銷人員應該嘗試自己解決的問題。

我們需要花更多時間與開發人員交流,並向他們學習可用於以用戶為中心的性能優化的最新技術和方法。

更多資源:

圖片來源

特色圖片: Unsplash
所有截圖均由作者拍攝,2019年5月

相關文章