如何停止加載不必要的文件並減少網站的 HTTP 請求 – WordPress 優化技巧
已發表: 2020-09-08
在 Crunchify 上，我們發布了多個速度優化教程供您隨時參考。
我們使用 MaxCDN 作為我們的內容提供商。 它已經快 4 年了，到目前為止它工作得很好。 Genesis WordPress Framework 和 MaxCDN 是最佳組合。 默認情況下，Genesis Framework 帶有大量優化、Google 標記模式、移動友好結構等等。
上週我在查看我的 MaxCDN 帳戶時，突然發現了熱門下載資源。 如上圖所示，上週top 9 out of 10 resource files下載量超過了5 millions次。
我很驚訝，想我真的需要這些資源嗎？ 我必須單獨加載這些文件嗎？ 除了style.css文件之外，如果不需要，如何擺脫這些文件，這是網站加載所必需的。
讓我們開始了解我如何用簡單的技巧擺脫所有這 9 個文件
不適合所有讀者
這些步驟並不適用於所有 WordPress 讀者。 在 Crunchify 上，我們使用 Crayon Syntax Highlighter 和自定義主題特定圖像，因此它適用於有限用戶
第1步
讓我們list all of those 9 files 。 第二列顯示下載次數。
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
第2步
讓我們將Crayon Syntax Highlighter插件文件組合在一起。
有3個文件：
neon.css 、 crayon.min.css和crayon.min.js 。 我已經編寫了一個完整的單獨教程，共有 7 個詳細步驟來擺脫這些文件。 請檢查一下，如果您發現任何問題，請告訴我。
第三步
現在wp-embed-min.js 。 請訪問教程如何禁用 WordPress 4.4+ 的自動嵌入腳本。 它將停止在前端加載嵌入文件。
第四步
讓我們3 more .png文件：
bg-pattern.png
我在頁眉和頁腳背景中加載此圖像。 我改用顏色#333來擺脫它。
crunchify-sprite.png
我正在加載這個精靈圖像以在側邊欄中顯示社交關注按鈕。 我用fontawesome字體替換了它。
h3.png
我正在加載這個以在某些位置顯示 H3 帖子的複選標記。 我用fontawesome字體替換了它。 下面是一個很棒的等價物。
第 5 步
現在我們只剩下 2 個文件了。 crunchify-logo.png和bg.png ，我想保留它。 因此，我沒有調用圖像，而是為這些文件添加了等效的base64圖像。
前：
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
後：
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
我已將兩個圖像都轉換為 base64 圖像。 我們將獲得的優勢是，不必打開另一個連接並向服務器發出 HTTP 請求以獲取圖像。
更少的請求 = 更好的頁面加載時間
使用SVG (Scalable Vector Graphic) image有一些優勢，因為圖像可以縮放到任何大小而不會失去清晰度（除了非常小），這在視網膜顯示器上看起來很棒。
這些Data URIs不僅限於.png或圖像，還可以用於任何資源。 這是我在網上使用的一個簡單的 .png 到 .svg 轉換器工具。
概括
本教程是如何加速 WordPress 和提高性能部分的一部分。 您將在那裡找到所有 WordPress 優化技巧和提示。
通過執行此步驟，我從 10 個中刪除了所有 9 個不需要的資源。這意味著 - 我的頁面加載速度非常快，因為每個頁面上的請求將減少 9 個
如果您有任何其他可以提高網站頁面速度的提示，請告訴我。 在 Crunchify，速度是主要標準，這就是我們使用很少插件的原因。 所有頁面within half a second加載。
