我們都知道速度就是金錢 - 更快的網站轉換得更好，從而提高收入
儘管速度有直接影響，但獲得實施性能改進的建議有時可能具有挑戰性，因為它通常涉及編輯可能影響網站結構完整性的遺留代碼 ... 特別在提高 JavaScript 的性能方面尤其如此
雖然 JavaScript 的靈活性使其在編寫函數時易於使用，但同樣的靈活性使其維護起來更具挑戰性。客戶和開發人員經常提出的要求是通過易用性和所需資源來確定性能改進的優先級別
這可能很難確定，特別是如果您不是開發人員並且沒有網站後端程式碼的撰寫經驗
而我通過我理解的活動對我的列表進行排序來解決這個問題 - 我認為需要對網站程式碼進行最少幅度的編修。因此在本文中，我將介紹經常使用的 12 個快速修復要點
1、刪除第三方工具、小工具（ Widget ）和網絡技術
大多數網站依賴第三方技術進行追蹤、監控、客戶支持 （ ex：聊天功能 ）等等它的挑戰在於通常用您無法控制的程式碼在網站上執行，導致無法提高其性能
之所以會降低頁面性能，是因為這些腳本來自不同的網域
要理解這一點，您首先需要了解訪問網頁時會發生什麼事 → 瀏覽器會查找所有需要 DNS（域名系統 ）查找的資源，然後必須等到查找完成後才開始下載頁面。此事件依賴於來源服務器快速響應。當它響應時瀏覽器必須閱讀並理解代碼，然後才能將其提供給您！
雖然此事件可能需要幾毫秒，但乘以瀏覽器必須執行的查找，然後包括來自正在查找的任何網域的緩慢服務器響應時間，這些毫秒會增加到秒
這裡的問題是為什麼不需要這些會讓你沉重的負擔？
作為我審查的一部分，我總是審查網站上使用的第三方技術的數量，最簡單的方法是使用技術 BuiltWith 和 Wappalyzer（ 亦可用其它付費和免費工具來執行此操作 ）查找工具。當您需要做出簡單的決定是保留還是刪除時，它們通常非常有用
但是如果該技術仍在使用中，並且需要評估保留它的好處與對網站負載的影響，那麼最好使用 Page Speed Insight Tool 和 Lighthouse 等診斷工具來突出性能影響。假設更傾向於技術，則可用 Chrome 開發工具 "阻止網絡請求阻止功能" 查看在未加載特定腳本或資源時頁面的速度
另一個用於可視化負載活動的好工具是 WebPageTest - Website Performance and Optimization Test，此報告為您提供了用 Chrome 請求數據按字節傳輸的資產大小的直觀表示 - 網站越舊，找到不再使用的外部程式碼的機會就越大
我已經發現：
- 不再使用的聊天框腳本
- 不同版本的 Cookie 小部件（ Widget ）
- 來自不再使用的廣告追蹤像素（ ex：Facebook Pixel ）
定期查看標籤管理器腳本好刪除不必要的腳本，或是使用 GTM 中的 網頁瀏覽觸發條件 來延遲訪問者一登陸頁面就不需要的腳本加載，直到頁面完全加載
2、實現 DNS Prefetching & Preconnect
DNS 預取和預先連接是瀏覽器資源提示，可用於加速 DNS 查找瀏覽器通常會等到需要某個資源時再嘗試請求該資源的來源 →在請求該資源時整個頁面的加載將暫停，直到解決為止！
DNS 預取是種在需要前調用非關鍵資源來源的方法，通過為瀏覽器提供先機來加快查找時間，您可以預取將顯示在頁面底部的第三方小部件，如聊天框、社交分享按鈕、調查小部件等
<link rel="dns-prefetch" href="//example.com">
預先連接還用於建立早期連接，但應用於對頁面加載至關重要的資源，如託管在內容交付網絡上的資產、Web 字體等
3、盡可能使用單一 JQuery Library
一些第三方腳本帶有 jQuery Library但通俗地說 jQuery 是個 JavaScript Library，它簡化了 JavaScript 功能的使用
大多數現代網站都有某種形式的 JavaScript，因此它已經在網站上加載了一個 jQuery 版本
當您只需要一個時，在您的網站上拉取該 Library 的兩個版本是種資源浪費
加載外部腳本時，總是要求不加載 jQuery 版本的版本
然後，您的開發人員可以將腳本設置為使用您網站上正在加載的全局版本
不要忘記測試您正在加載的腳本是否與您網站上的 jQuery 版本兼容
使用 Chrome 開發工具 JavaScript 控制台窗口查看正在您的網站上加載的 jQuery 版本 → 輸入 Ctrl + Shift + J 打開控制台，然後輸入 console.log(jQuery().jquery); 在命令行中！
或者可用 Yellow Lab Tools 來簡單檢查 jQuery 版本
其它減少加載 jQuery 文件影響的方法包括使用最新版本的 Hosted Libraries | Google Developers
4、移除舊瀏覽器支持的冗餘 CSS 指令
網站越老，攻擊次數就越高刪除多餘的 CSS 指令，如舊瀏覽器支持（ IE Fixes）很容易，因為它通常是個單獨的程式碼區塊。而且許多工具會突出顯示網站點上未使用的 CSS
然而不必逐行查看程式碼好獲取瀏覽器支援 → Yellow Lab Tools 為您提供了一個易於理解的清單表，您可以讓您的開發人員完成它！
請確保查看您的追蹤工具好查看仍在使用這些舊瀏覽器的訪問者數量，如果這些數字可以保證您繼續提供支援、放棄虛擬主機
許多人試圖省錢的方法是選擇廉價的共享主機，然後將盡可能多的網站塞進服務器
當然您的網站大部分時間都可以使用，就像大多數網路主機一樣，但它的加載速度會非常緩慢，以至於您的訪問者會感到沮喪，而不會轉變為買家
“但幾乎看不出來！” ... 這些討價還價的購物者堅持
事情就是這樣 ... 你可能幾乎不會注意到它 ... 它就像是你的孩子，而且你喜歡它，但其它人只想盡快進入和離開您的網站
人們希望在您的網站上停留足夠長的時間來做它們想做的事情，無論是獲得答案、購買產品還是其陙特定目標。如果您稍微放慢它們的速度，就很可能會討厭所有的過程，並在沒有轉換的情況下離開
像這樣思考：
大多數人無條件地愛自己的孩子。但是別人的孩子尖叫、扔東西，擾亂他們在餐館的夜晚？鐵定們討厭死那個孩子 ... 對吧？這與您的網站是相同的意思 ...
許多人試圖省錢的方法是選擇廉價的共享主機，然後將盡可能多的網站塞進服務器
當然您的網站大部分時間都可以使用，就像大多數網路主機一樣，但它的加載速度會非常緩慢，以至於您的訪問者會感到沮喪，而不會轉變為買家
“但幾乎看不出來！” ... 這些討價還價的購物者堅持
事情就是這樣 ... 你可能幾乎不會注意到它 ... 它就像是你的孩子，而且你喜歡它，但其它人只想盡快進入和離開您的網站
人們希望在您的網站上停留足夠長的時間來做它們想做的事情，無論是獲得答案、購買產品還是其陙特定目標。如果您稍微放慢它們的速度，就很可能會討厭所有的過程，並在沒有轉換的情況下離開
像這樣思考：
大多數人無條件地愛自己的孩子。但是別人的孩子尖叫、扔東西，擾亂他們在餐館的夜晚？鐵定們討厭死那個孩子 ... 對吧？這與您的網站是相同的意思 ...
它真的有多大區別？
根據亞馬遜進行的一項研究，僅僅 100 毫秒的差異人類甚至無法感知的時間單位，就足以將銷售額減少 1%。沃爾瑪發現了類似的結果
如果那一小段時間對銷售有如此大的直接影響，你認為多一秒或更多會產生什麼樣的影響？
而且它並不止於此，因為網站加載的速度也會影響自然搜尋排名和按點擊付費的成本
換句話說如果加載緩慢，您應該期待在這個關鍵領域的對手吃掉您的午餐
最後底線：
跳過虛擬主機 - 如果它們像商品一樣銷售（主要基於價格），那麼他們也會像對待商品一樣對待客戶
有很多針對速度進行了優化的網路主機，尤其是 WordPress 網站，其中一些的價格與預算選項相似。 因此四處打聽並進行一些測試，再判斷虛擬主機是是否可以為您提供滿足訪問者和 Google 的要求
有很多針對速度進行了優化的網路主機，尤其是 WordPress 網站，其中一些的價格與預算選項相似。 因此四處打聽並進行一些測試，再判斷虛擬主機是是否可以為您提供滿足訪問者和 Google 的要求
5、減少 HTTP 呼叫
網頁呈現和運行所需的每個文件（例如 HTML、CSS、JavaScript、圖像和字體）都需要單獨的 HTTP 請求 ... 發出的請求越多，頁面加載越慢！現在如果你和我交談的大多數人一樣，你可能會想 "哦，我不需要擔心，我知道我在做什麼，我不會在我的網站上添加一堆臃腫的垃圾！”
這可能部分正確。你可能不會這樣作，但對於我遇到的 90+% 的網站卻仍然存在
膨脹不存在是因為膨脹仙女在你睡覺的時候偷偷溜進去了。之所以存在，是因為大多數網頁設計師無論技能或經驗如何都不會優先考慮頁面速度。而且可悲的事實是大多數人甚至不知道該怎麼做
這是問題開始的地方：
大多數主題加載一個或多個 CSS 文件和幾個 JavaScript 文件。例如 Jquery 或 FontAwesome，通常是從另一台服務器遠程加載的，這大大增加了加載頁面所需的時間
當您考慮由插件添加的額外 CSS 和 JavaScript 文件時，這會變得更加成問題 →僅從 CSS 和 JavaScript 文件就很容易得到六個或更多的 HTTP 請求！
當您將頁面上的所有圖像都考慮在內時，每個圖像都需要一個單獨的 HTTP 請求，它很快就會失控 ... 因此請：
- 將 JavaScript 文件合併為一個文件
- 將 CSS 文件合併為一個文件
- 減少或消除加載自己的 JavaScript 和/或 CSS 文件的插件（在某些情況下，與 Gravity Forms 一樣，您可以選擇禁用它們的加載）
- 經常使用的圖像使用精靈
- 盡可能使用 FontAwesome 或 Ionic Icons 之類的字體而不是圖像文件，因為這樣只需加載一個文件
6、包括尾部斜線
省略指向您網站的鏈接的尾部斜槓，無論是來自外部來源（鏈接構建工作）還是來自您自己的網站，都會對速度產生不利影響就是這樣：
當您訪問不帶斜槓的 URL 時，Web 服務器將查找具有該名稱的文件。如果它沒有找到具有該名稱的文件，則會將其視為一個目錄並在該目錄中查找默認文件
換句話說通過省略尾部斜槓，您將強制服務器執行不必要的 301 Redirect。雖然對您來說似乎是即時的，但確實需要更長的時間，而且正如我們已經確定的那樣，每一點都加起來
https://example.com（這很糟糕） 或者 https://example.com/services（這也不好）
對比
https://example.com/（這很好） 或者 https://example.com/services/（這個也不錯）
7、啟用壓縮
啟用 GZIP 壓縮可以顯著減少下載 HTML、CSS、JavaScript 文件所需的時間，因為它們被下載為更小的壓縮文件，然後在到達瀏覽器後進行解壓縮別擔心 - 您的訪問者無需做任何額外的事情，因為所有現在的瀏覽器都支持 GZIP，並且已經為所有 HTTP 請求自動處理它
8、啟用瀏覽器快取
啟用它後，網頁元素會存儲在訪問者的瀏覽器中，因此它們下次訪問您的網站或訪問另一個頁面時，它們的瀏覽器便可加載該頁面，而無需向服務器發送另一個 HTTP 請求任何快取元素一旦加載了第一個頁面並將其元素存儲在用戶的快取中，則只需要在後續頁面上下載新元素，即可大大減少在瀏覽會話期間需要下載的文件數量
9、最小化資源
縮小您的 CSS 和 JavaScript 文件會刪除不必要的空白和註釋好減少文件大小，從而減少下載它們所需的時間幸運的是這不必是個手動過程，因為有多種在線工具可以將文件轉換為更小的的版本，還有幾個可用於 WordPress 的外掛可在不修改原始文件的情況下用縮小版本替換常規 CSS 和 JavaScript 文件的網站頭部鏈接（包括流行的快取外掛 ），例如：
使設置恰到好處可能需要一些努力，因為縮小通常會破壞 CSS 和 JavaScript，因此一旦您縮小了所有內容，請務必徹底測試您的網站
10、優先考慮未捲動畫面下的上方內容（Above-the-Fold）
如果您的網站被編碼為優先顯示 Above-the-Fold 內容，即在訪問者滾動前可見的內容，則您的網站可以更快地向訪問者顯示。這意味著確保出現在折疊上方的任何元素也盡可能靠近 HTML 程式碼的開頭，以便瀏覽器可以首先下載和呈現它們
包含內聯呈現該區域所需的任何 CSS 和 JavaScript 也很重要，而不是包含在外部 CSS 文件中
11、優化媒體文件
由於帶有高質量相機的移動設備很常見，而且 WordPress 可以方便地上傳圖像，因此許多人只是簡單地拍攝照片並上傳，而沒有意識到圖像通常至少比實際大四倍必要的這會大大減慢您的網站速度，尤其是對於移動用戶
優化網站上的媒體文件有可能極大地提高您的頁面速度，而且這樣做相對容易，因此這是對您時間的一項很好的投資
優化圖像
- 選擇理想的格式：JPG 非常適合攝影圖像，而 GIF 或 PNG 最適合具有大面積純色的圖像。 8 位 PNG 文件適用於沒有 Alpha 通道（透明背景）的圖像，24 位文件適用於具有 Alpha 通道的圖像
- 確保圖像大小合適：如果圖像在您的網站上以 800 像素寬顯示，則使用 1600 像素寬的圖像沒有任何好處
- 壓縮圖像文件：除了作為頂級圖像編輯程序之外，Adobe Photoshop 還具有出色的圖像壓縮功能，您還可以使用免費的 WordPress 外掛 - 例如 EWWW Image Optimizer、Imsanity 和 TinyJPG - 它們會自動壓縮上傳的圖像
- 選擇理想的格式：MP4 在大多數情況下是最好的，因為它產生最小的文件大小
- 根據訪問者的屏幕尺寸提供最佳尺寸
- 如果視頻在背景中用作設計元素，則消除音軌
- 壓縮視頻文件：我大部分時間使用 Adobe Premiere，但 Camtasia 也是一個不錯的選擇
- 減少視頻長度
- 考慮將視頻上傳到 YouTube 或 Vimeo，而不是在本地提供它們並使用 iframe 嵌入程式碼
根據圖像的實現，有兩種方法可以處理此問題
- 您網站的 HTML 中的圖像可以使用 src set 提供，它使瀏覽器能夠根據訪問者使用的設備的屏幕尺寸選擇、下載和顯示適當的圖像
- 通過 CSS 放置的圖像（通常作為背景圖像）可以使用媒體查詢提供服務，好根據訪問者使用的設備的屏幕尺寸選擇合適的圖像