手機網站速度測試進展不順利？這是提高移動頁面速度的10種方法

您是否知道移動頁面速度是Google的排名因素之一？雖然這可能不是網站不在搜索首頁上的主要原因，但這種情況不會持續很長時間。

讓我列出事實：

從2019年7月開始，谷歌開始了其移動優先索引計劃。這是因為與其他任何設備相比，現在有更多的用戶通過移動設備訪問網路。

（可視化工具的圖表。）

根據Google的調查，平均而言，移動網站的載入時間為15秒。

這就是關鍵所在：如果您讓訪問者等待10秒，跳出率就會在移動設備上大放異彩，更不用說15秒了。

如果要防止移動頁面速度問題妨礙吸引訪問者並將其轉變為熱情的客戶，請使用以下方法儘快縮短移動載入時間。

如何以10個步驟或更少的步驟提高移動頁面速度

如果您想保留：

• 搜索結果中的移動點擊率很高…
• 移動網站跳出率低…
• 移動轉化率始終在不斷上升……

然後，移動網頁的速度就不容小something了。

以下是改善移動設備上頁面載入時間的步驟：

?目錄：

• 步驟1：選擇快速的虛擬主機
• 步驟2：更新至最新版本的PHP
• 步驟3：在所有級別實施緩存
• 步驟4：優化代碼和資源的處理方式
• 步驟5：清理資料庫文件
• 步驟6：進行精益設計
• 步驟7：使圖片儘可能輕巧
• 步驟8：僅使用您需要的插件
• 步驟9：減少字體文件的數量和大小
• 步驟10：將您的移動網站轉換為更快的格式

步驟1：選擇快速的虛擬主機

如果背後沒有可靠的網路託管服務，那麼您為提高移動頁面速度所做的工作並不重要。

公平地說，如果一家網路託管公司的伺服器處理和為移動訪問者提供網站所需的時間太長，您就不能完全怪罪網路託管公司。您需要研究提供商，其基礎架構，並確保選擇了可以幫助加快網站載入時間的計劃。

以下是一些需要考慮的事項：

虛擬主機的伺服器在哪裡？

如果您或您的目標受眾附近沒有足夠的伺服器，則載入時間將會延遲。

一個好主意是尋找在您所在國家或地區提供頂級服務的主機。這裡是一些不錯的起點：

• 歐洲最佳WordPress託管
• 最佳WordPress託管英國
• 最佳WordPress託管印度
• 最佳WordPress託管澳大利亞
• 最好的WordPress整體託管

如果您已經購買了網路託管計劃，並且對伺服器的位置不滿意，則可以隨時使用CDN來補充託管。這些領先的CDN提供商之一可以幫助彌合您的網站與其訪問者之間的實際距離。

如果您的網站將服務於全球受眾，那麼您還應該考慮在網路託管之上使用CDN。

網路主機是否提供利基託管？

例如，如果您正在構建WordPress網站，那麼最好研究具有針對CMS優化的伺服器的最佳WordPress主機。

電子商務網站也是如此，隨著庫存和流量的增長，電子商務網站需要更多的處理能力。頂級的電子商務託管解決方案將確保可以快速處理移動流量和交易。

如果您使用的是WordPress以外的CMS，則還有Joomla，Drupal的託管解決方案。

您是否購買了託管託管？

使用託管的WordPress託管，您不僅可以與與您的CMS內外相識的提供商合作而受益，而且還可以獲得維護網站的幫助。

網站維護是網站維護的重要組成部分，對於維護健康的網站載入時間非常有用。如果您可以將其中的一部分外包給託管主機，則不必擔心。

但是，如果您最終不使用託管託管，那就不要著急。以下是一些技巧，這些技巧將向您展示如何自行進行這些性能優化。

是否以針對移動頁面速度進行了優化的技術堆棧而聞名的虛擬主機？

另一件事要看的是主機的技術堆棧。

• 他們使用NGINX嗎？
• 伺服器是否配備了緩存？
• CDN可以升級嗎？
• 伺服器是否在最新版本的軟體上運行？

有多種方法可以使伺服器快速運行，因此在簽署計劃之前必須先尋求這些提速。如果您需要一些幫助來縮小選擇範圍，請從這些快速的WordPress主機開始。

您的託管計劃可擴展嗎？

最後要考慮的一件事是託管計劃的可伸縮性。

如果您真的能使移動訪問者驚嘆不已，您可以期望訪問量會迅速增加。因此，擁有可同時擴展伺服器資源和流量的Web主機至關重要。

以下託管公司以其可擴展的產品而聞名：Kinsta，Cloudways，WP Engine，InMotion託管。

步驟2：更新至最新版本的PHP

PHP是一種開源腳本語言，我們使用它來構成WordPress網站及其功能的骨幹。不管您是否使用PHP進行動手編碼，它始終存在於伺服器級別，並且如果未更新，則可能會對移動頁面的速度產生影響。

Cloudways進行的基準測試研究說明了使用最新版本的PHP的重要性：

請注意，最新版本的PHP每秒可以同時處理多少個HTTP請求。

現在，當您首次建立WordPress網站時，您的網路主機應自動選擇最新版本的PHP。但是，除非您啟用了託管的PHP更新，否則就必須保持此狀態。

幸運的是，您可以輕鬆地自行更新PHP。

登錄您的虛擬主機帳戶

每個主持人的控制面板的組織方式都不盡相同，因此您在此處看到的內容將與最終看到的有所不同。

就是說，您要做的就是找到PHP管理器，如SiteGround中的以下示例所示：

查看當前的PHP版本

查找當前使用的PHP版本。

在上面的示例中，SiteGround自動將伺服器更新為最新版本，但仍讓用戶知道正在使用哪個版本。

如果需要進行任何更改，請打開可用的PHP版本列表，然後選擇要使用的版本：

Remember️在進行伺服器軟體的任何升級之前，請記住備份您的站點。

步驟3：在所有級別實施緩存

作為用戶，我們熟悉瀏覽器級別的緩存。通常是在我們看不到網頁上的更新內容時，我們才使用以下設置：

這使用戶可以從其瀏覽器中刪除該站點的存儲副本，以便在下次訪問該站點時顯示最新版本。

在網站上使用緩存具有巨大的性能優勢。顯然，我們不希望過時的信息在瀏覽器中「卡住」，但我們希望避免伺服器一遍又一遍地重新處理同一頁面。

通過啟用緩存並創建未更改的頁面的靜態副本，伺服器可以更有效地工作。

您可以使用兩種資源來啟用緩存。

啟用伺服器緩存（同時受益於桌面和移動頁面速度）

這不是您必須管理的事情。如前所述，重視性能的Web主機將在您的Web託管計劃中內置伺服器緩存。

為確保擁有所需的所有伺服器端緩存，請在主機控制面板中查找它。像PHP一樣，應該很容易找到：

如果您覺得需要升級緩存（如果有），可以在這裡進行。

啟用網站，資料庫和對象緩存

使用WordPress緩存插件，您將能夠激活所需的所有其他緩存。

我將以WP Fastest Cache為例。

WP最快的緩存

作者：Emre Vona

當前版本：0.9.0.5

上次更新時間：2020年4月10日

wp-fastest-cache.0.9.0.5.zip

98％評級

1,000,000+安裝

WP 3.3+要求

使用此插件，您可以快速啟用或禁用緩存系統：

這樣一來，您就不必陷入要啟用哪種緩存的麻煩了（例如網站，瀏覽器，資料庫，操作碼，內存緩存等）。

此外，此類緩存插件通常會為您提供其他加速設置（我們將在下一個技巧中介紹）。

升級還為您提供了其他性能優化功能，例如圖像優化，CDN配置和移動緩存。

步驟4：優化代碼和資源的處理方式

不僅是您的網站及其上的內容會減慢您的移動頁面載入的速度。其背後的代碼和文件也可能導致問題。

讓我們仔細看看WP Fastest Cache設置的下半部分：

您絕對應該利用這些性能優化，原因如下：

代碼縮小

當開發人員編寫代碼時，他們通常以一種使人可讀的方式添加額外的空格，注釋和其他格式。但是，它們為您的伺服器所做的就是為其提供額外的字元來處理。

通過最小化HTML，CSS和JavaScript，可以刪除多餘的代碼，從而使文件大小和代碼變得更易於管理，以使伺服器可以將其傳遞給訪問者。

代碼/文件組合

根據HTTP存檔，伺服器為每個移動頁面平均處理69個HTTP請求（即文件）。為了使此過程更有效，應儘可能合併文件。

除了剝離代碼中多餘的字元之外，您還可以將所有文件組合為一個文件。這對於重量級的CSS和JavaScript文件特別有用。

Gzip壓縮

您熟悉.zip文件，以及為什麼我們使用它們來交付大量文件並減小較大文件的大小。 Gzip壓縮的工作原理類似，但在伺服器級別。

Gzip壓縮HTML和樣式表。同樣，減少伺服器必須處理的文件數量和大小。

消除渲染阻止資源

在許多情況下，這是緩存插件中的一項高級功能。也就是說，這是一個重要的使用方法，您將從此Google PageSpeed Insights報告中看到：

在此移動站點與性能有關的所有問題中，最大的問題是阻止渲染的資源。

基本上，當您的伺服器遇到帶有內聯CSS或JavaScript的網頁時，它將嘗試先處理頁面的更重要方面。反過來，這會延遲移動訪問者查看網站內容的速度。

但是，通過啟用此性能優化功能，您可以推遲非關鍵代碼的載入，然後使首屏內容和數據顯示得更快。

步驟5：清理資料庫文件

將您的WordPress資料庫想像成一個文件夾（例如您放在辦公桌或計算機上的文件夾）。您將重要信息存儲在專用且安全的位置，因為您認為：「總有一天我會用到。」

但是隨後您便可以清理工作區並意識到不需要保留多少文檔。插件已卸載，但留下了文件。即使您不再需要第七版，也可以保存博客文章修訂版。垃圾評論堆積如山。

不用說，資料庫有很多方法可以被舊的和不必要的文件和數據所覆蓋。

您可以自己梳理資料庫，但這是一項耗時的任務，可以輕鬆地卸載到資料庫優化插件中。

WordPress Codex建議為此任務進行WP-Optimize。請注意，此插件還會執行許多其他操作，包括緩存和圖像優化。

WP-Optimize –清理，壓縮，緩存。

作者：David Anderson，Ruhani Rabin，Updraft團隊

當前版本：3.0.19

上次更新時間：2020年3月31日

wp-optimize.3.0.19.zip

96％的評分

900,000+安裝

WP 3.9+要求

還有其他插件可以更有效，更完整地處理這些任務，因此無需使用此插件激活它們。只關注提供的資料庫優化：

該優化列表實際上會告訴您資料庫中何時需要清除某些點，例如「資料庫中的51個修訂版」。只要您知道不需要那些舊版本，就可以繼續進行「運行優化」。

WP-Optimize現在提供了計劃的清理，因此請放手一遍，以便定期自動清理資料庫：

這些看起來很簡單，但很容易忽略WordPress資料庫中所有隱藏的文件。但是，為減少伺服器必須查看的文件數量，您可以做的任何事情都越好。

步驟6：進行精益設計

輕鬆掌握最新的網頁設計趨勢，告訴您使用某些元素或功能來提高參與度和轉化率。但是，如果您查看許多這些設計組件，則它們是在考慮較大的桌面屏幕的情況下構建的。

以彈出窗口為例。雖然這是在適當的時候在桌面上吸引用戶注意力的好方法，但模式彈出窗口確實可以侵入手機屏幕。

這就是幾年前Google對移動彈出窗口實施罰款的原因。因此，在設計移動網站（或實際上是任何網站）時，請僅包括必要內容。

使用輕巧且響應迅速的WordPress主題

如今，許多WordPress主題都具有額外的功能：

• 預裝的插件包
• 預先構建的小部件，塊和其他頁面模板
• 導入演示時自動安裝的圖像和視頻
• 自定義字體包
• 和更多

但是，由於存在這些元素，所以不會自動使主題載入緩慢。這完全取決於這些功能的實施情況。

這就是為什麼選擇WordPress主題通常感覺就像是俄羅斯輪盤遊戲，尤其是如果您必須為此付費並花時間對其進行配置以了解其實際速度時。

您可以做的是使用可用數據來查找以輕量級為核心的WordPress主題。

CodeinWP對流行的WordPress主題進行了速度測試，並提出了一些有用的發現。該文章顯示了一些熱門主題的載入時間，因此您可以自己決定要使用哪個主題（因為沒有一個主題可以為所有人服務）。

三秒鐘似乎是測試移動用戶耐心的門檻，因此請堅持更快載入主題。

盡量減少佔用資源的元素

以輕量級主題啟動網站的另一件事是，這些主題通常鼓勵設計最佳實踐。

您不會看到實時聊天小部件，彈出式窗口或自動旋轉輪播等數據消耗或分散注意力的元素。相反，您可以專註於增強設計，圖像和消息傳遞方面的功能。

您可能要謹慎的是主題中包含的圖像和視頻的數量。

僅僅因為圖像橫幅的佔位符帶有鼓舞人心的報價，或者模板帶有背景視頻，並不意味著您需要使用這些元素中的每一個。如果您在給定的空間中沒有值得分享的東西，請不要強求。這就是為什麼：

根據HTTP Archive的說法，圖像是Web伺服器上最大的壓力源之一：

• 在移動站點總計1791.9 KB中，圖像通常佔用其中的879.5 KB。
• 伺服器必須處理的69個HTTP請求中，圖像負責其中的27個。

因此，僅使用所需的圖像（和視頻）。這種自舉方法不僅可以使您構建精簡的移動設計，還可以幫助您將移動頁面的長度保持在較短的一側。與台式機相比，進入移動頁面底部的滑動次數更多，因此請牢記這一重要考慮因素。

記住移動用戶的意圖

使移動設計更精簡的另一件事是圍繞移動用戶的意圖構建您的網站。

Google的一刻便是如何以及為什麼要這樣做的完美示例。

基本上，谷歌說的是這樣的：

得益於移動設備的日益普及，消費者的行為正在發生變化。因此，他們不會像以前那樣搜索品牌，體驗或產品，也不會像以前那樣與網站互動。

尤其是移動用戶正在根據以下四個「時刻」搜索信息和網站：

知道這一點，您應該真正考慮如何立即將這些信息提供給移動用戶。例如，與其隱藏「預訂」按鈕或在主頁深處或在其自己的頁面上安排小部件，不如將它的按鈕放在首位（或者最好是在頁眉中）。

這種以微矩為重點的設計肯定會改善移動用戶的體驗，但請考慮一下它對於您的移動頁面速度也會有什麼作用。

如果您可以更快地獲得移動訪問者所需的答案或將其引導至他們想採取的行動，那麼他們將花費更少的時間自行解決。這樣可以最大程度地減少他們使用您網站的搜索欄，滾動瀏覽每個頁面或瀏覽菜單的需求。

現場停留時間可能會更短，但是您的轉化率應該更高，並且伺服器能夠處理每個新請求的能力也更高。

步驟7：使圖片儘可能輕巧

正如我們已經看到的，圖像往往會佔用網路伺服器上的大量空間（移動網站重量的大約一半來自它們）。

由於移動網站的載入速度比台式機網站慢，因此在WordPress網站上使用圖片之前，請使其圖像儘可能輕。

您可以採取多種措施來實現這一目標：

儘可能使用WebP和下一代JPG

無論您是從股票照片網站下載圖像還是使用自己的圖像網站，都可能不會過多考慮保存它們的文件格式。但是，圖像格式可能會對移動網站產生重大影響。

以以下PageSpeed Insights測試為例：

該網站的桌面版本在100分中獲得97分，並且幾乎沒有Google提出的有關如何加快處理速度的任何建議。另一方面，移動版僅獲得75分（滿分100分），並且上述建議是降低載入速度的一種方法。

根據Google的說法，以下三種圖像格式可以提高移動頁面的速度：

• JPEG 2000
• JPEG XR
• WebP

這只是一個問題：

WordPress不接受這些開箱即用的格式。為了使用這些輕量級的下一代圖像格式，您需要插件的幫助。值得慶幸的是，有許多圖像優化插件可以幫助您解決此問題。

通過WordPress圖像優化插件運行所有圖像

您可以做兩件事來處理圖像文件並使它變小：

1. 調整大小。
2. 壓縮它。

現在，有很多免費工具可以在線使用。但是，當您在設計網站時（一項已經很耗時的任務），您要做的最後一件事就是在工作流程中引入另一種工具和瑣事。

相反，您可以做的是安裝一個流行的WordPress圖像優化插件，並自動執行該過程，因此這是您最後需要擔心的事情。

例如，這就是您使用Optimole設置並忘記的方式。

圖像優化和Optimole的延遲載入

作者：Optimole

當前版本：2.3.1

上次更新時間：2020年4月21日

optimole-wp.zip

96％的評分

50,000+安裝

WP 4.7+要求

首先，您要以自己滿意的質量應用圖像壓縮（最好接近「高」）：

然後，您需要設置最大圖像尺寸，以免過大的圖像使您的網站不堪重負：

您還可以應用延遲載入，以便僅當訪問者滾動到頁面時，頁面下方的圖像才會載入：

這將有助於節省伺服器資源，以備不時之需。

Optimole還將自動將WebP圖像提供給兼容的瀏覽器。因此，這也是一件值得考慮的事情。

想要幫助入門嗎？使用此分步指南進行圖像優化，以逐步完成該過程。

步驟8：僅使用您需要的插件

不一定會導致移動頁面速度問題的WordPress插件數量過多。但是，編碼不正確的插件會導致性能問題，因為插件會消耗大量數據（例如使用實時跟蹤或定期調用資料庫的插件）。

因此，您必須非常注意要安裝的插件。

儘管網站上有必不可少的插件（大多數）都應使用，但完美的插件數量並沒有黃金法則。您建立的網站類型將決定這一點。但是，嘗試找出以下幾點時，您應該注意以下幾點：「我真的需要這個插件嗎？」

查看評論

用戶在WordPress插件存儲庫中留下的評論對於審查插件的質量很有用。

但是，您應該尋找排除插件的不只是「破壞我的網站」或「不起作用」。

閱讀評論時，查找諸如「快速」，「緩慢」和「輕量級」之類的關鍵字。在過去的一年中，看到足夠多的人聲稱其移動頁面速度存在問題，因此您應該立即移至下一個插件。

請與您的網路託管公司聯繫

大多數網路託管公司都列出了他們不希望客戶使用的被禁止，列入黑名單或被拒絕的插件列表。只需搜索您的主機名加上「禁止的插件」，您就會找到列表。

禁止使用插件的原因有很多。性能是最常見的性能之一。

讓我們以HostGator不允許的插件為例：

在這裡，您會找到以下插件：

• 具有與Web主機相同的功能。
• 通過調用資料庫或外部API來覆蓋它。
• 編碼錯誤或不再受支持，效果不佳。
• 大量用戶不需要的功能。

因此，如果您不確定從WordPress插件列表中可以從哪裡開始減少脂肪，請檢查主機的禁止插件列表。它會為您提供一些補償的技巧。

步驟9：減少字體文件的數量和大小

隨著時間的推移，我們的字體文件的大小在移動網站上變得越來越大。

根據HTTP Archive的數據，移動設備上的平均字體大小為：

• 2017年為75.2 KB。
• 2020年為104.2 KB

的確，在最大程度地減少添加到站點的重量方面，我們還有很多魚可以炒，但是減少字體文件的數量和大小仍然有幫助。

使用更少的字體

不久以前，設計師對裝飾字體和布局也充滿了樂趣。但是隨著越來越多的用戶湧向移動設備上的網路，在字體設計方面，我們不得不縮減規模。

當要使用的屏幕少得多時，使用超大字體或不規則布局是不切實際的。

不僅要減少移動文本的裝飾性，而且還必須使字體變化最小化，這一點也很重要。確實，網站上使用的字體類型不得超過兩種-一種用於標題文本，另一種用於正文。這樣可以使整個站點的閱讀體驗更加輕鬆一致。

選擇快速字體

幾年前，KeyCDN對最快的字體進行了案例研究。

但是，測試並不像「哪種Google字體載入速度最快？」那樣簡單。如果真是這樣，那麼結果將是：

但是這些是通過Google API和CDN運行的網路字體。將最快的Web字體（Open Sans）與最快的Web安全字體（Arial）進行比較後，他們得到了：

這類似於我們網站面臨的其他性能問題。您迫使數據和資源通過的層越多，Web伺服器處理它們所需的時間就越長。

因此，就網路字體而言，儘可能嘗試在本地託管字體（在您自己的CDN上）。如果可以找到喜歡的網路安全字體，請選擇該字體。如果所有其他方法都失敗了，那麼十大最快的Google網路字體中的一種將會起作用。

壓縮字體文件

如果我們在談論字體格式，那麼WOFF或WOFF2將是最好的選擇。對於初學者來說，它們是跨瀏覽器使用最廣泛的字體格式：

當前唯一不接受的瀏覽器是Opera Mini（上面的紫色）。

除了廣泛接受之外，WOFF會自動壓縮。根據Google的說法，WOFF2文件的大小最多可以比其他字體格式小30％。

這也不只是Google的建議。由於壓縮效率高，W3C建議網站使用WOFF 2.0字體格式。

步驟10：將您的移動網站轉換為更快的格式

引入了兩種網站和網頁格式，以幫助我們更好地處理移動設備上的緩慢載入時間。

兩者都已在此博客上廣泛討論，因此，我不想在這裡花太多時間談論它們。但是，我確實想快速總結一下，為什麼將移動網站遷移到以下一種（或兩種）格式可能會有所幫助：

安培

AMP是「加速的移動頁面」的縮寫。有很多因素可以使此頁面快速格式化：

• 它主要依靠輕量級HTML。
• 它使用延遲載入。
• 頁面內容被緩存在Google Cloud中。

雖然您可以在任何網站上使用它，但對於希望提供快速閱讀體驗的數字出版物和博客而言，它尤其有用。此外，它易於實現-您只需要一個WordPress插件即可轉換頁面。

在此處閱讀我們的AMP指南。

PWA

PWA是「 Progressive Web App」的縮寫。它充分利用了移動網路的優勢（即可搜索性和便利性），並將其與移動應用程序相結合（即更具移動友好性的設計以及電話功能）。它也比傳統的移動網站快得多。

要注意的另一件事是，可以像移動應用程序一樣離線訪問PWA，如果您的網站針對居住在低覆蓋區或無覆蓋區的人們，那麼PWA就是一個不錯的選擇。

由於PWA將網站放入類似應用的外殼中，因此無需選擇要轉換的網站頁面。如果您想從頭到尾創建更好，更快的體驗，請以PWA的形式構建（或轉換您的網站）。

儘管有一些WordPress插件可以幫助您將網站轉變為一種PWA，但最好還是從頭開始編寫此插件。

在此處閱讀我們的PWA指南。

到頂部
準備提高您的移動頁面速度？

隨著越來越多的訪客湧向智能手機上的網站，我們的網站需要做好準備，以為他們提供最佳體驗。唯一的問題是，在設計和優化台式機網站的某些舊方法方面，就移動頁面速度而言，它們做得並不多。

但是，通過使用上述步驟，您可以立即提高移動頁面的速度。

請確保不要在此停下來。定期重新訪問您的移動網站以確保其正常運行很重要。藉助這些網站速度測試工具之一，您可以輕鬆地在其上顯示選項卡，同時獲得有關需要修復的明確指導。

…

別忘了加入我們的速成班，以加快WordPress網站的速度。通過一些簡單的修復，您甚至可以減少50-80％的載入時間：

Karol K的布局，演示和編輯。