針對移動裝置優化網站的新思路

想象一下： 小企業主麗莎終於有了喘息的時間。

她拿出手機，決定檢視一下自己的網站。但她看到的……卻是一場噩夢。

她的網站載入緩慢。她不得不縮放才能閱讀文字。按鈕呢？很小，沒有三次嘗試是無法點選的。

她的網站在桌上型電腦上看起來還不錯。但在手機上呢？簡直一團糟。

與此同時，她的網站這樣下去，每秒鐘都在流失客戶。

如果她的客戶在苦苦掙扎，谷歌也會如此，因為移動效能對排名非常重要。一個讓使用者失望的網站根本無法在網上競爭。

為什麼移動優先設計至關重要

麗莎的故事並非獨一無二。

84% 的人擁有智慧手機，而且大多數人將手機作為主要裝置。這比使用個人電腦和膝上型電腦的人要多得多。

目前，移動瀏覽佔網路流量的 60% 以上，谷歌對移動優先索引的關注也反映了這一轉變。

如果您的網站在移動端提供的使用者體驗不佳，您就有可能失去訪客、搜尋結果排名，最重要的是，失去相關性。

就是這麼簡單。

對任何企業來說，修復移動網站都不僅僅是另一個專案。如果說有什麼意義的話，那就是為企業注入活力，留住客戶，為客戶找到你增加另一個渠道。

移動優先的設計能讓使用者滿意，載入時間快、導航流暢、互動方便。

因此，如果您準備優化您的線上形象，請從移動裝置開始。因為這是您的客戶所在，也是您的網站取得成功的關鍵所在。

響應式網頁設計意味著什麼？

響應式設計意味著您的網站會自動調整以適應任何螢幕尺寸–智慧手機、平板電腦、桌上型電腦甚至智慧手錶。

它不僅適合，還能以清晰易懂的格式提供資訊。您要確保使用者無需縮放或滾動，就能看到適合他們所使用的任何螢幕的內容。

當你瀏覽一個網站時，你會發現它能適應你的螢幕大小。

對於大螢幕來說，元素會放大到一定程度，這樣它們就不會顯得過大，但仍然易於使用。

移動裝置則恰恰相反。當你使用較小的螢幕時，你希望網站的內容縮小，但又不至於變得無法閱讀或無法互動。

比如伺服器主機提供商 DreamHost 主頁在桌上型電腦、平板電腦和移動裝置上的樣子。

能夠實現這種平衡的網站被認為是響應式網站。網頁設計和開發在這裡是相輔相成的，因為網站的圖形資產需要縮放。

在後臺，有 CSS 和樣式表來管理網站如何在不同尺寸的螢幕上顯示。

直到最近，響應式設計還只是一個事後的想法。我們過去的網站設計都是圍繞桌面體驗進行的。

現在，移動流量佔據了首位，移動設計也是如此。這就是為什麼你經常會在網頁設計圈子裡聽到移動優先這個詞。

還有一個常用的術語是 “響應式設計”。

另一方面，自適應設計是指為一個頁面建立多個版本，並根據訪客使用的裝置型別提供服務。

如今，這種網頁設計方法已經過時，因為響應式設計才是更有效的選擇。

如何在網頁設計時考慮移動優先

GreenPal 公司的執行長布萊恩-克萊頓（Bryan Clayton）花了九個月的時間，從零開始建立自己公司的網站。

一開始就遇到了很大的問題 。

我們以為大多數使用者會通過桌上型電腦或膝上型電腦購買草坪護理服務。但很快我們就發現，使用手機和平板電腦訪問網站的人數比使用桌上型電腦或膝上型電腦訪問網站的人數要多得多，比例高達 4:1。

最初的全功能桌上型電腦體驗包括各種鈴聲和口哨聲，例如動畫。

我們擁有各種其他功能，這些功能使桌面體驗令人愉悅 。

這種方法的問題是，桌面體驗無法轉換到行動網路瀏覽器上。

因此，網站顯得臃腫，在移動裝置上執行不暢。使用者發現，他們不得不通過捏合和縮放來完成註冊過程。

在我們的網站重建為移動優先體驗之前，移動瀏覽器上的轉換率不到 4% 。

這意味著，96% 的使用者在註冊過程中放棄了註冊。

克雷頓發現，在以移動為先的方式重建網站後，82% 的人通過移動裝置和平板電腦完成了免費價格評估的整個註冊過程。

我們的移動優先產品是我們今天能夠立足於市場的唯一原因 。

主要收穫：

布萊恩-克萊頓（Bryan Clayton）借鑑 GreenPal 的移動優先之旅，提出了可以簡化移動設計方法的見解：

• 瞭解你的使用者群：從訪問者如何訪問網站的資料入手。如果大多數使用者都使用移動裝置，那麼確保移動體驗是你的首要任務。克萊頓的資料顯示，5 個訪客中有 4 個使用移動裝置，這重塑了 GreenPal 的設計方法。
• 取消桌面功能：避免使移動體驗混亂或複雜化的功能，如複雜的動畫或小圖示，這些功能在桌上型電腦上效果很好，但在較小的螢幕上就不行了。
• 優化關鍵操作：在移動端，註冊或購買等關鍵操作的路徑應儘可能簡單直觀。跟蹤並改進轉換步驟，以適應移動端的流程。
• 保持視覺效果簡潔實用：通過保持佈局簡潔、元素間距合理和清晰的行動號召來限制干擾並關注可用性。
• 測試、迭代和改進：定期在移動裝置上測試網站，找出使用者體驗中的潛在痛點。根據反饋意見進行調整，提高網站的可訪問性和導航便捷性。
• 優先考慮轉換路徑：測試並優化移動裝置上的註冊流程。82% 的移動註冊完成率表明，改進流程可以提高使用者滿意度和轉化率。

說到響應式設計，我們可以從 GreenPal 的經驗中學到很多東西。

首先，我們來談談對受眾的定位。

聚焦受眾，徵求客戶反饋

在重新設計網站時，你可能需要弄清楚客戶目前是如何與網站互動的。這意味著要檢視分析資料，看看移動使用者和桌上型電腦使用者的參與度是否有所不同。

分析結果可能會顯示，移動訪客的跳出率較高，或者在網站上花費的時間較少。

這些都是移動使用者體驗不佳的致命訊號。如果資料指向這個方向，最好的辦法就是詢問客戶喜歡什麼，不喜歡什麼。

洛杉磯 Blu Skincare 公司的老闆 Zondra Wilson 在開始徵求客戶反饋意見時才發現自己的網站對移動裝置不友好。

我讓顧客寫評論，他們卻說找不到寫評論的地方 。

我會向他們詢問我的部落格或我釋出的文章，但他們很難找到。他們在手機上檢視我的網站時也有困難。他們必須向下滾動很多頁，我的第一張照片或關於我公司的任何資訊才會跳出來。他們不知道如何瀏覽我的網站。很多人都很沮喪，沒有瀏覽過第一頁。

當 Wilson 將自己的網站升級為更適合移動裝置的版本時，她立刻注意到使用者開始瀏覽比平時更多的頁面。

主要啟示

• 聽取直接反饋：威爾遜的客戶分享了他們在移動螢幕上瀏覽網站時遇到的困難，從尋找評論部分到閱讀她的部落格。他們的反饋突出了具體的問題領域，從而指導改進工作，提高了移動網站的參與度。
• 在分析中觀察使用者行為：移動網站的高跳出率或低會話時間都表明使用者體驗不佳。利用這些指標來確定設計變更的優先次序，並加強關鍵的移動接觸點。
• 使導航直觀，內容易於訪問：Wilson 網站調整的重點是讓內容在移動端立即可見，減少過多的滾動，提高關鍵部分（如評論和產品詳情）的易查詢性。

為移動裝置優化網站有很多屢試不爽的技巧。但是，客戶的反饋意見往往會揭示出使用者體驗中的某些部分，而這些部分是你可能會忽略的。

優化頁面內容

在考慮移動設計時，使用者在一個檢視中可以看到的資訊量和與之互動的資訊量（也稱為使用者介面密度）是一個重要的決定因素。

看看這些圖片，哪個更密集：

兩者的點數相同，但影象 A 看起來比影象 B 更密集。

早期的設計試圖將盡可能多的內容打包。

比如雅虎主頁：

時至今日，你還會看到許多網站同樣資訊繁雜。

然而，現代移動介面優先考慮的是清晰而非雜亂，給使用者提供他們所需要的東西，不多也不少。

而這正是谷歌從創立之初就遵循的設計風格。

下面是谷歌 2000 年代初的圖片：

設計專家馬修-斯特羅姆（Matthew Ström）寫道：”使用者介面的密度並不僅僅是指我們在螢幕上看到多少內容，而是指資訊如何直觀地在瞬間流動”。

移動裝置上過多的雜亂資訊會迫使使用者去尋找重要的資訊，從而減慢使用者的使用速度。但是，犧牲重要資訊的稀疏設計同樣會令人沮喪。

主要啟示

• 優先考慮重要操作：確定對使用者來說最重要的操作，如 “行動呼籲 “和表單，並將這些元素放在突出位置。然後，修剪不必要的連結或按鈕，防止雜亂無章。
• 使用視覺層次來引導流程：合理安排內容結構，使其自然地引導使用者瀏覽頁面，減少回溯的需要。正如我們在上面的圓點示例中看到的，用清晰的標題將相關專案分組，有助於引導注意力，同時讓使用者介面感覺不那麼雜亂。
• 明智使用空白區域：留白是移動裝置上寶貴的空間。用它來分隔不同的操作或元素，但要避免過度。適當的間距可以幫助使用者直觀地將相關資訊分組，而不會增加過多的滾動。
• 設計便於觸控的互動方式：確保按鈕、連結和圖示足夠大，便於在小螢幕上點選。目標是每個觸控目標至少有 44×44 畫素。
• 保持文字可讀性，無需縮放：保持一致的字型大小和間距，使文字一目瞭然。響應式網格和媒體查詢可幫助確保內容在不同裝置上正確縮放。

對於移動網站來說，保持使用者介面密度的有效平衡可確保使用者快速找到所需內容，而不會感到視覺負擔過重。

從小處著手（螢幕尺寸）

現代智慧手機功能強大，您的大部分受眾都能使用良好的網路連線。

但是，您需要確保網站的載入速度儘可能快。因此，去掉多餘的雜亂內容是最好的設計策略之一。

Modern Place Lighting 公司執行長維塔利-維諾格拉多夫（Vitaliy Vinogradov）發現，改用響應式、移動優先的網站設計後，轉化率比桌面網站高出 30%。

要做的一件重要事情就是刪除移動版網站上多餘的外掛、彈出式視窗或任何其他螢幕干擾器 。

他的團隊對網站進行了梳理，去掉了一些佔用螢幕寶貴空間的社交分享外掛。當你在設計時考慮到大螢幕時，你可能會發現你最終包含了很多對使用者沒有太大價值的元素。

馬特-費爾滕（Matt Felten）解釋說，“你需要為小螢幕設計。”他是洛杉磯的一名產品設計師。

“你必須更加專注。你必須減少資訊和內容”。移動網站建成後，你可能會發現，你根本不需要在桌面版網站上新增更多內容。

你可以通過刪除所有視覺雜亂的內容，讓你的網站在移動端更容易使用。此外，訪問者還能專注於真正重要的內容。這意味著使用者旅程中的行動號召、表單、帖子和其他關鍵元素。

主要啟示

• 速度優先於多餘的功能：刪除非必要的外掛、彈出式視窗和大圖片，以簡化移動體驗。
• 強調基本內容：關注使用者最需要的內容，尤其是在移動裝置上。刪減大段文字、不必要的圖片和多餘的功能。將關鍵元素，如 “行動呼籲 “和導航按鈕等放在觸手可及的地方。
• 使導航直觀：在小螢幕上，使用者可以從簡單明瞭的佈局中獲益。堅持使用垂直滾動的單欄佈局，並將導航專案放置在易於訪問的位置。
• 設計時考慮到點選目標：按鈕和連結應足夠大，以便在小螢幕上舒適地點選。避免使用過小的按鈕或過密的連結，以免造成意外點選。
• 減少視覺雜亂：留白對於移動裝置上的可讀性至關重要。它為每個元素提供了呼吸空間，提高了頁面的整體可用性。

完善設計美學

Felten 說：“現在的消費者對設計的要求越來越高”。”他說：“現在人們非常希望看到一個漂亮、效能良好的網站所帶來的商業價值 。

如果我是一個小企業主，而所有的競爭對手都有一個非常漂亮、反應靈敏的網站，而我沒有，那麼在不到一秒鐘的時間裡，人們就會對我的產品做出負面評價。

當你建立一個專業的網站時，它不僅能展示你的設計眼光，還能展示你為提供良好的使用者體驗所付出的努力。

除非你從事的是一個非常小眾的領域，否則客戶在網上幾乎總是有其他選擇。

您網站的設計應能很好地代表您的業務，因此請盡心盡力。

針對移動裝置優化網站的 8 種方法

既然你已經知道為什麼有必要為移動使用而優化你的網站，那就讓我們來做一些更實際的事情吧。在接下來的幾節中，我們將帶您瞭解建立移動優化網站的一些最關鍵的方面，從簡單到技術複雜，不一而足。

我們建議您花時間儘可能多地實施這些方法，以提高網站在所有裝置上執行良好的機率，並獲得 Google 移動優先索引的青睞。

1. 使用谷歌Lighthouse測試網站

在採取任何進一步行動之前，立即對網站的移動友好性進行清點。

這將幫助您找出網站中需要改進的具體方面，併為您提供如何改進的有用資訊。

一種方法是在幾種不同的裝置上使用網站。使用自己的智慧手機或平板電腦訪問網站，看看網站的外觀和使用感覺如何。

這樣做可以讓您瞭解載入時間、在較小螢幕上的設計效果、內容是否仍然可讀以及導航是否易於使用。

要深入瞭解並獲得詳細的診斷結果，可以使用 Google Lighthouse，這是一款開源工具，可提供側重於效能、可訪問性、搜尋引擎優化 (SEO) 等方面的稽覈。

現在，Lighthouse 已直接整合到 Chrome DevTools 中，使其易於訪問和使用，以便對網頁進行全面分析。

下面介紹如何訪問它：

1. 開啟谷歌 Chrome 瀏覽器：你需要使用最新版本的 Chrome 瀏覽器，因為你需要使用 Chrome DevTools 才能使用 Lighthouse。
2. 進入隱身選項卡：你可以在Windows上點選 Ctrl + Shift + N，或者在Mac上點選 Cmd + Shift + N。我們之所以要在隱身模式下進行測試，是因為外掛會干擾 Lighthouse 的效能分析，甚至谷歌也建議在隱身模式下進行測試。
3. 導航到要檢查的網站：輸入網站的 URL 並讓其完全載入，以獲得準確的讀數。
4. 開啟 DevTools：右鍵單擊頁面上的任意位置並選擇 “檢查“，或使用鍵盤快捷鍵 Ctrl + Shift + I（Windows）或 Cmd + Option + I（Mac）開啟 DevTools。
5. 選擇Lighthouse選項卡：進入 DevTools 後，點選頂部的 “Lighthouse” 選項卡。這部分是配置和執行審計的地方。
6. 配置稽覈設定：選擇 “移動” 來評估移動效能。選中所有類別以進行全面分析–“效能”、”可訪問性”、”最佳實踐” 和 “搜尋引擎優化”。
7. 執行稽覈：點選 “分析頁面載入” 啟動分析。Lighthouse 將開始測試並彙編每個選定類別的結果，包括移動頁面的移動優化。這個過程可能需要幾秒到一分鐘。

Lighthouse 可為每個類別提供評分和建議：

• 效能：告訴你載入速度和響應速度。
• 可訪問性：顯示網站對殘障人士的友好程度。
• 最佳實踐：檢查安全性、移動設計和質量方面的問題。
• 搜尋引擎優化：就網站在移動端針對搜尋引擎的優化程度提供建議。

每個部分都有具體建議。瀏覽這些內容可以幫助您提高網站的移動效能，使其更快、更易使用。

現在不要太在意分數。正如你所看到的，即使是谷歌也在搜尋引擎優化方面打出了 83 分。您只需儘可能地改善它，使其接近 100 分即可。

此時，您可以依次處理列出的每個問題。例如，如果您在某個頁面上執行測試，但分析沒有完成，那麼您的 robots.txt 檔案可能阻止了谷歌的機器人。

只需編輯 robots.txt 檔案，允許 Google 訪問被阻止的檔案或修復任何重定向錯誤即可。

2. 使用自定義CSS使網站具有響應性

實現響應式網頁設計的一個重要部分就是使用 CSS。只要掌握一點 CSS 知識，就能讓你的網站對移動裝置友好，這一點會讓你大吃一驚。

舉個例子，你可以使用 CSS 來實現我們所說的媒體查詢範圍。

通過媒體查詢（或響應式斷點），你可以告訴瀏覽器何時載入頁面的不同佈局，這取決於瀏覽器使用的螢幕大小。

下面是一個簡單的媒體查詢：

@media (max-width: 768px) {
/* CSS rules for screens 768px and smaller */
}

您在此塊中新增的任何樣式規則都將適用於螢幕尺寸為 768 畫素寬或更小的裝置。

這是告訴瀏覽器根據螢幕尺寸將兩個按鈕堆疊在一起或並排顯示的方法之一。

媒體查詢是 HTML、CSS 和 JavaScript 庫（包括 Bootstrap）的重要組成部分，因為它們可以實現移動響應式設計。

使用 CSS 使網站響應速度更快的其他方法包括：

建立CSS網格佈局：

CSS 網格佈局（如 Bootstrap 提供的佈局）提供了一種簡單的方法，可幫助您根據不同的螢幕尺寸調整設計。有了一個定義明確的元素佈局，您就可以根據不同尺寸的螢幕來配置元素的顯示方式和所佔空間。

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

對佈局元素使用大小百分比

如你所知，CSS 可讓你使用畫素和其他度量單位來設定元素的高度和寬度。為了讓你的網站反應更靈敏，我們建議使用百分比。這樣，當螢幕變小時，按鈕等元素就能無縫適應。

img {
width: 100%; /* Scales with container size */
height: auto;
}

流暢的排版和間距：

頁面上的圖片和其他視覺元素不應該是唯一能適應小螢幕的東西。文字也需要響應，否則移動網站上的使用者只能在螢幕上看到一兩個字，然後就需要向下滾動。以相對單位（如 em 或 rem）設定字型，可使字型隨裝置縮放。

h1 {
font-size: 2.5rem;
}
@media (max-width: 600px) {
h1 {
font-size: 2rem; /* Smaller font size for smaller screens */
}
}

控制元素之間的間距

CSS 可以幫助你使用 padding 和 margin 在不同 HTML 塊之間輕鬆新增間距。

下面是一個簡單的示例，說明如何在塊中新增 margin 和 padding，以及如何應用媒體查詢來新增不同的間距：

.card {
margin: 20px;
padding: 15px;
}
@media (max-width: 768px) {
.card {
margin: 10px;
padding: 10px;
}
}

如果你對 HTML 和 CSS 的使用感到得心應手，那麼設計一個完全響應式網站可能比你想象的要容易得多。

不過，如果您使用 WordPress 等內容管理系統（CMS），整個過程就會變得簡單得多，因為即使在進行響應式設計時，您也很少需要處理程式碼。

3. 選擇響應式主題和外掛

WordPress 提供了大量專為移動友好性而設計的主題和外掛，因此比以往任何時候都更容易構建響應式網站。

大多數新主題（超過 10,000 個！）都採用了響應式設計原則，因此選擇合適的 WordPress 主題應該很容易。

無論您選擇哪種主題，它們都能自動適應任何裝置，無需額外工作。

如果您想在安裝或購買主題前檢查其是否具有響應性，我們建議您檢視其演示。很多主題演示都會預覽其設計在較小螢幕上的效果。

確保響應性的技巧：

• 使用頁面生成器預覽：使用 Gutenberg（區塊編輯器）、Spectra、Elementor 和 Divi 等工具，您可以預覽頁面在桌面、平板電腦和手機上的效果。這一步驟有助於確保每個頁面從一開始就針對不同裝置進行優化。
• 避免重型外掛：堅持使用注重效能和響應性的外掛。有些外掛會增加大量載入時間，影響移動效能。儘可能使用輕量級外掛或選擇 WordPress 內建功能。
• 使用暫存網站進行測試：使用暫存環境測試新主題和外掛。這為您提供了一個安全的空間來調整設定、新增內容，並確保您的網站在所有裝置上都能響應，然後再將更改上線。
• 考慮經典編輯器外掛的替代方案： 經典編輯器的視覺化程度不如新的編輯器，因此很難預覽移動友好型設計。升級到塊編輯器（Block Editor）或像 Spectra 這樣的視覺化頁面生成器，可以確保為移動設計提供更好的體驗。

Spectra 是一款功能強大的 WordPress 外掛，它能幫助你設計出漂亮的網站，並提供針對移動裝置優化的本地拖放介面。

它擴充套件了 WordPress 塊編輯器的功能，可幫助您建立使用者友好型網站，這些網站本身具有響應性，可確保網站在從智慧手機到大型桌上型電腦等各種螢幕尺寸上都美觀大方。

它直觀的設計選項允許你自定義每個元素，以便在所有裝置上都能獲得最佳瀏覽效果，使移動友好型設計更易於使用。

如果你覺得建立響應式頁面有困難，可以嘗試使用 Elementor 或 Spectra 等人工智慧網站建立工具，或者更換主題。這些都會對任何頁面產生重大改變，因此你需要慢慢熟悉新外掛和主題的工作方式。

4. 測試網站的Core Web Vitals

Core Web Vitals 是谷歌關注使用者體驗的效能指標。它們有助於評估網站的載入、互動和穩定性，這些因素對搜尋引擎優化和使用者滿意度有很大影響。

下面是這些指標的快速分解：

• 最大內容頁面繪製 (LCP)：該指標衡量的是頁面上最大元素（通常是主圖或標題文字）載入所需的時間。LCP 分數低意味著頁面整體載入速度快。更快的 LCP 表示主要內容可以更快地訪問，最好在 2.5 秒內。
• 首次輸入延遲 (FID)：該指標的目的是衡量互動性。FID 分數能告訴你在頁面載入時，使用者需要多長時間才能與頁面進行互動。FID 應低於 100 毫秒，以確保流暢的體驗。
• 累積佈局偏移(CLS)：它告訴你頁面在載入過程中的佈局 “移動” 或移動的程度。您希望 CLS 分數接近零，以儘量減少這種移動。

給網站的使用者體驗打分很難。因此，核心網站生命值並不能全面反映網站的整體使用者體驗。不過，它們能讓您衡量任何頁面的關鍵技術方面，而這些方面會直接影響使用者體驗的好壞。

此外，核心網站體驗不僅僅是理論上的練習。

它們對搜尋引擎優化和頁面排名有直接影響。谷歌允許您使用其免費的 PageSpeed Insights 工具測試核心網頁生命值。

只要輸入一個 URL，PageSpeed Insights 就會返回其核心網頁生命值的概覽：

與 Lighthouse 工具一樣，Google 也會提供具體的建議，告訴你可以通過哪些改進措施來優化網站。

由於 Core Web Vitals 更注重效能，因此您在這裡看到的大多數建議都與速度優化有關：

請記住，PageSpeed Insights 會分別返回移動版和桌面版網站的結果。

這意味著每個版本可能會得到不同的建議。關注移動優化建議將大大提高這兩組得分。

5. 改善網站的載入時間

正如我們在上一節所暗示的，網站速度在移動裝置上尤為重要。

優化網站速度不僅能幫助你降低跳出率，還能改善使用者體驗，這對你的盈利來說是個好訊息。

通過測試網站的核心網路生命值，您可以準確瞭解網站載入所需的時間。

有了這些資訊和工具提供的效能優化建議，您就可以著手改善網站的載入時間。

以下是一些對網站影響最大的優化方法：

• 實施快取：使用快取時，網站的一些檔案將被儲存在一個更方便的位置（比如每個訪問者的本地裝置上），這樣就不需要在每次訪問新頁面時都下載這些檔案了。有許多免費的快取外掛可供使用，不過一些託管計劃預設情況下也包含這一功能。
• 使用內容交付網路（CDN）：CDN可讓你在分佈在不同地理位置的一系列伺服器中儲存檔案副本，而不是從一箇中央伺服器傳送檔案。這樣，無論使用者身處何地，載入時間都會更加均衡，同時還能減少頻寬使用量。
• 優化圖片：大型圖片檔案往往是導致載入時間緩慢的罪魁禍首。通過壓縮圖片，您可以在不影響圖片質量的情況下減小圖片的大小。有幾種免費和高階解決方案可以幫助你做到這一點，包括 ShortPixel 外掛和 TinyPNG 網站。
• 最小化程式碼：通過優化網站的 CSS、HTML 和 JavaScript 程式碼，可以提高網站效率，縮短寶貴的載入時間。
• 更新網站的各個方面：使用過時的軟體來執行網站，不僅容易出現安全問題，還會使網站無法發揮最高效率。通過隨時更新外掛、主題和內容管理系統，可以避免這些問題。

雖然這看起來似乎很費事，但實際上這些技術大多可以通過簡單、免費的解決方案來實現，幾乎不需要你進行任何配置。

因此，您的網站在移動裝置上的表現會更好，在搜尋引擎排名中也會更有優勢。

6. 為移動裝置重新設計彈出視窗

雖然彈出式廣告因其侵入性和干擾性而飽受批評，但它們仍然是一種出奇有效的潛在客戶生成方法。

因此，如果您的網站包含至少一到兩個彈出式視窗，用於捕捉潛在使用者或向使用者傳遞重要資訊，我們也不會感到驚訝。

雖然彈出式視窗非常有效，但它們會對移動體驗產生負面影響。

在較小的裝置上，螢幕空間變得更加重要，即使是中等大小的彈出式視窗也會比桌面版網站上的彈出式視窗更具破壞性。

不久前，谷歌開始打擊彈出式視窗，實施了一系列這些元素需要遵守的規則，以避免它們過度影響使用者體驗。

以下是谷歌認為具有干擾性的彈出視窗的示例：

無論是在使用者從搜尋結果導航到頁面後，還是在使用者瀏覽頁面時，彈出式視窗都會打斷使用者流程並覆蓋主要內容。

另一方面，這裡有一個在谷歌眼中很好的例子：

谷歌可以接受這種彈出式視窗，因為它有一個易於點選的大按鈕。

此外，大多數彈出式視窗都是根據法律義務建立的，例如 Cookie 使用或年齡驗證，只要不過分，就完全沒有問題。

這些規則包括以下內容：

• 彈出式視窗必須儘可能不造成妨礙：在移動裝置上，彈出式視窗只能覆蓋螢幕的一小部分。
• 彈出式視窗應易於關閉：應明確移動使用者如何關閉彈出視窗，通常是通過一個可見的、大小合適的按鈕。新增一個清晰可見、大小合適的關閉按鈕，讓使用者可以毫不費力地解除彈出視窗。
• 包含必要資訊的彈出視窗除外：上述指導原則不適用於登入對話方塊、年齡驗證表、cookie 通知、GDPR 同意通知等。

只要您在設計彈出式視窗時牢記這些注意事項，您的網站就不會受到任何負面影響。但是，不遵守彈出式視窗指南的網站可能會在排名中受到懲罰。

7. 選擇可靠的虛擬主機

我們以前說過，現在還要再說一遍–為網站選擇合適的伺服器主機是您要做的最重要的決定之一。

為什麼？

移動使用者通常都在路上，網路速度通常較慢，因此每一秒的載入時間都很重要。

經過優化的主機可以讓您的網站保持快速、可靠並始終可訪問。

一個簡單的事實是，如果您選擇的主機或計劃不能提供您所需的速度和資源，那麼無論您做多少工作，都無法阻止您的網站表現不佳。

有鑑於此，您需要選擇一個能保證持續高效能和最少停機時間的計劃。我們建議選擇 VPS 或受管理的專用託管計劃，以獲得穩定的效能。

虛擬專用伺服器（VPS）託管是需要穩定速度和靈活性的網站的理想之選，而且無需破費。使用VPS，你可以獲得一個虛擬化伺服器，該伺服器提供專用資源，這意味著你的網站在高流量時不會出現速度減慢。

如果您對虛擬主機有更高的要求，您可以選擇託管專用伺服器，這意味著您可以使用專門為您的網站預留的伺服器。

對於大型網站或電子商務平臺來說，託管專用主機可以提供最大程度的控制、速度和安全性。有了專用資源，您就可以根據自己網站的需要定製伺服器，確保在任何時候都能提供一流的效能。

這不僅可以讓您根據自己的確切要求定製伺服器，還意味著安全性和速度的提高–這兩者都是移動友好型網站的關鍵要素。

移動優化主機的注意事項：

• 高正常執行時間保證：尋找能提供至少 99.9% 正常執行時間的主機，以確保移動使用者能隨時訪問網站。
• 內容分發網路（CDN）：CDN可以從更靠近使用者的伺服器傳送內容，從而進一步加快網站速度。使用DreamHost，你不需要訂閱和配置第三方CDN，它可以為你的網站加速。
• 快取和壓縮：選擇支援快取和影象壓縮的主機，以縮短載入時間，這對於連線速度較慢的移動使用者尤其有價值。DreamHost會在我們的伺服器上自動快取你的網站，也會在使用者的瀏覽器上自動快取，以加快頁面載入時間。

8. 建立移動應用程式

最後，我們迎來了一項看似艱鉅的任務–建立移動應用程式。

移動應用程式不再是大品牌的專利。市場已經發生了巨大的變化，現在幾乎所有型別的企業或組織除了提供標準的響應式網站外，還提供移動應用程式，這已經是司空見慣的事情了。

擁有專用應用程式還能帶來許多簡單網站無法提供的獨特優勢。例如，您可以提供獨家內容、直接管理訂閱、使用推送通知即時聯絡使用者–讓他們隨時瞭解新聞、優惠或更新。

您也不必從零開始。

雖然可以從頭開始編寫移動應用程式（或聘請開發人員），但更簡單的解決方案是使用一種工具，幫助您將網站轉化為應用程式。

利用專門為 WordPress 使用者設計的 AppPresser 等工具，您只需進行少量編碼，就能將現有網站轉化為應用程式。

這是一款高階工具，起價為每月 59 美元。為此，您將獲得一個直觀的應用程式生成器介面，如果您已經熟悉 WordPress，應該會很容易使用。

有了這個工具，您就可以根據特定網站快速製作出 Android 和 iOS 移動應用程式，然後通過 App Store 或 Google Play 商店與使用者分享，或直接提供給網站的訪問者或訂閱者。

小結

將您的網站移動化意味著您可以隨時隨地接觸到受眾–就在他們手中。

隨著越來越多的人使用移動裝置，快速載入、使用者友好的移動體驗對於任何線上業務都至關重要。

因此，從響應式設計到優化載入時間，每一項改進都有助於提高使用者參與度，並在搜尋排名中佔據有利位置。

無論您使用的是硬編碼網站還是 WordPress 等內容管理系統，都不要再等待了。

經過移動優化的網站是實現增長並與受眾建立聯絡的基礎。