讓您的網站快速發展：第 1 部分
已發表: 2015-03-18這已經不是什麼秘密了：今天的網絡用戶需要速度。 隨著互聯網和蜂窩連接越來越快，用戶希望網站能夠快速加載，而開發人員的工作就是盡其所能為這些頁面提供快速服務。 那麼，如何讓您的網站快速火爆？ 以下是您在使用 WordPress 構建時應該做的具體操作。
第一件事：測試您網站的速度
性能可以分為兩大類：前端和後端。 我認為後端是與服務器相關的任何事物以及數據在頁面上的填充方式（主題中的 PHP 代碼是“後端”）。 前端由您的所有資產（CSS、JavaScript、圖像等）和標記組成。 Web 瀏覽器讀取和解釋的所有內容都是“前端”。 我在性能方面做出這種區分的原因是因為很高興知道您正在優化什麼，更重要的是，知道您最需要優化的地方。
要測試您網站的速度，我建議結合使用 WebPagetest 和 Google PageSpeed Insights。 WebPagetest 讓我們可以很好地了解網站加載所需的實際時間（以秒為單位），為您提供一些很好的指標來了解是後端還是前端導致網站加載緩慢。 PageSpeed Insights 最適合查看瀏覽器如何呈現您的網站以及您可以在前端改進哪些方面。
請記住，本文的重點是完全定制的 WordPress 網站。 如果您正在使用龐大的主題和 19 個第三方插件（插件會降低前端和後端的速度）在網站上運行速度測試，請先從空白開始，然後一個一個地慢慢激活插件以找到那些這正在減慢速度。
前端性能
如何立即提高 WordPress 主題的可訪問性
沒有一天我不使用網絡，即使是在我度假的時候。 我將大膽猜測你可以聯繫起來。 越來越多，互聯網發揮...
根據 Fastly 首席性能官 Steve Souders 的說法，性能的黃金法則是頁面總加載時間的 80-90% 由前端組成（80/20 規則）。 後端的 10-20% 至關重要，但即使您使用最快的主機資金可以買到，如果不優化前端以確保用戶感知到，您的網站仍然無法發揮其全部潛力它加載速度很快。 在前端優化方面，感知很重要。 用戶不會關心網站加載需要多長時間（以秒計）。 他們真正關心的是他們可以多快地與它交互並立即查看內容或執行操作。 並不是說您不應該擔心實際的加載時間（您應該），但是通過遵循以下技術，您可以確保您的網站盡快處於可用狀態，然後快速完成頁面加載所有資產。
CSS
在將 CSS 交付給瀏覽器之前，對 CSS 做的最重要的事情就是壓縮它並刪除未使用的選擇器。 在開發主題時獲得良好的開發工作流程會使這個過程變得微不足道，尤其是在您使用像 Sass 這樣的預處理器時。 我使用 Grunt，它是一個 JavaScript 任務運行程序，可以在開發時為您執行命令。 Grunt 有一個名為 grunt-contrib-sass 的插件，它可以簡單地將所有 Sass 文件編譯為一個（如果您使用的是 Sass 部分文件），將其縮小並壓縮。 在此基礎上添加 grunt-contrib-watch 插件，它會在您保存文件時運行 Sass 任務。 簡單的！ 如果您沒有使用最新最好的 CSS 方法，請不要失眠，但在創作 CSS 時盡量遵循某種標準，以避免重複和巨大的文件大小。
一旦您的樣式表準備就緒，加載它的最簡單（到目前為止也是標準）方法就是在<head>中引用它；。 這樣，瀏覽器會在加載 DOM 的其餘部分之前加載並解析它。 但是，有一種新技術可以將“關鍵”樣式內聯在<head>中，然後使用 JavaScript 異步加載完整的樣式表。 只有當我絕對想在一秒鐘內加載（或感知加載）網站時，我才會真正使用這種技術，但看看它是否適合您的工作流程是一件很棒的事情。 細絲組有一篇關於使用這種技術的大量文章。
JavaScript
了解 WordPress 如何使用 MySQL
從廣義上講，WordPress 可以分為兩個部分：生成 WordPress 站點外觀和感覺的邏輯和模板，存儲所有內容和權力的 MySQL 數據庫。
優化 JavaScript 的黃金法則很簡單：提供盡可能少的 JavaScript 文件並縮小和連接。 第三方 WordPress 插件可能會因使用未縮小的阻塞 JavaScript 文件而使您的文檔膨脹而造成不利影響，因此在選擇插件時要注意這一點很重要。 理想情況下，您會將所有 JavaScript 文件連接成一個，然後將其縮小。 在無法將所有文件合併為一個的情況下，可以使用稱為“async”和“defer”的 HTML 屬性異步加載 JavaScript 文件，或者在加載頁面的其餘部分後使用。
現在最常見的引用 JavaScript 的地方是在文檔的底部，就在結束標記之前。 但是，還有更高級的技術可以加載 JavaScript。 同樣，Filament Group 對此進行了大量研究，並且有幾個開源項目，如果您的目標是超快的頁面加載時間，您可以使用這些項目（順便說一下，我與 Filament Group 沒有任何關係；我只是覺得他們的東西很棒）。 最好的方法似乎是通過在<head>中內聯一個小函數來動態加載腳本； 然後附加腳本標籤而不阻塞頁面的其餘部分。 有關更多信息，請查看 loadJS 腳本。
圖片
圖像通常是頁面上最大的文件，導致頁面加載時間的最大延遲。 不過，圖像的好處在於，與 CSS 和 JavaScript 不同，大多數瀏覽器都是異步加載它們的。 這至少有助於提高頁面的感知性能，但您仍然需要確保 A）您提供的圖像盡可能少，並且 B）這些圖像被盡可能多地壓縮。
壓縮工具對於盡可能多地擠出圖像上的多餘部分是必要的。 ImageOptim 是一款出色的 Mac 應用程序，它與 OptiPNG 和 jpegtran 一起用於 Grunt 等任務運行程序。
字體
如今，Web 字體非常普遍。 我幾乎在每個項目中都使用 Google Web Fonts，但直到最近我才意識到僅僅在<head>中引用它們對性能造成的影響。 性能影響很小，但這是一篇關於讓網站快速運行的文章，所以一切都很重要！ 為了使用 Web 字體獲得最佳性能，我建議使用由 Google 和 Typekit 共同開發的 Web Font Loader。 它是一個開源腳本，既可以管理從第三方（如 Google Web Fonts）加載字體，也可以讓它們異步加載（厭倦了這個詞嗎？）。
正如預期的那樣，將 Web Font Loader 集成到您的項目中需要一些配置，因此請查看 GitHub 上的項目以獲取有關如何設置它的詳細信息。