網站加載速度最佳實踐和改進技巧

對於今天的在線用戶來說，他們想要他們想要的東西，而且他們現在就想要。 我們都遇到過在線資源網站加載速度太慢的情況，我們只是點擊了。 多虧了社交媒體、電視和所有其他現代技術，今天的人類並不以其耐心和專注而著稱。

速度是網站的無聲殺手。 近一半的網站用戶希望您的網站在 2 秒或更短的時間內加載。 這聽起來可能很瘋狂，但確實，即使是幾秒鐘的緩慢加載時間也會讓用戶不假思索地嚇跑。 現實情況是，您需要正確快速地加載您的網站。

網站加載速度最佳實踐

除非您親自測試，否則您可能不會意識到您的網站實際上有多慢。 幸運的是，您可以在 Google PageSpeed 免費執行此操作。 它是一個基於 Web 的工具，用於確定您的加載時間和查找問題區域。 您的網站加載時間如何疊加？ 如果您需要一些工作，請不要擔心。 只需單擊幾下，即可改善網站加載時間，這比您想像的要容易。 這裡有一些額外的提示，可以幫助您入門。

使用 Gzip 壓縮提高網站加載速度

Gzip 壓縮是一個強大的工具，可以將響應大小減少約 70%，這令人印象深刻。 Gzip 是通過您的主機完成的，因此您需要詢問您的網絡主機他們是否在其服務器上使用此壓縮。 使用 Gzip，您可以在不影響視頻、圖像或其他元素的質量的情況下縮短響應時間。

您可以運行測試以查看您的網站是否為 GZIPPED 並運行 Zip 壓縮測試。 Gzipping 的工作原理是減少 HTTP 響應的大小。 它最終會改變頁面的權重。

緩存您的文件

緩存是指您的網站版本存儲在用戶的瀏覽器中。 這樣，當他們再次訪問您的網站時，會加載一個較早的版本，直到新版本可以刷新。 緩存可以將您的加載時間從超過 2 秒減少到不到 1 秒。 這是一個很大的飛躍，你應該關心。 幸運的是，為您的網站設置緩存很容易。 如果您使用 WordPress，則可以使用免費的 W3 Total Cache 插件。 緩存是當今必不可少的，可以為您的網站加載性能增加額外的提升。

除了服務器端緩存，您還應該啟用瀏覽器緩存。 這實質上是一種指示瀏覽器在瀏覽器上存儲靜態文件（例如圖像、CSS 和 JS 文件）的副本的方法，以便訪問者在再次訪問您的網站時不必等待這些文件再次下載。 您可以在此有關 WordPress 利用瀏覽器緩存的信息集中閱讀更多信息。

升級您的網站主機

為您的網站選擇合適的主機可以影響您的頁面性能。 您可以根據需要對網站進行任意數量的更改，但是如果您沒有看到太大的改進，則可能是您的主機受到了指責。 當您第一次啟動網站時，很容易選擇最便宜的託管選項。 雖然這可能暫時沒問題，但如果您託管大量文件或遇到更大的流量，則可能會超出此範圍。

可能會共享更便宜的計劃，這意味著您鄰居網站上的任何問題也會影響您自己的。 擁有專用服務器可以避免在共享服務器上可能發生的任何問題。 如果您在響應時間方面需要幫助，您還將擁有更多客戶服務選項。

購買主機

檢查您的網站主題

您網站的設計方式也將影響您的網站對訪問者的顯示效果和速度。 切換主題可能就是在您的網站加載時間中騰出幾秒鐘的寶貴時間。

使用專業的網站頁面構建器或主題將確保您的網站不會因不必要的、凌亂的代碼而變得臃腫。 這就是為什麼除了網站模板、主題或構建器的美感之外，還必須研究更多內容。 此外，請考慮登錄您的網​​站或 Web 應用程序。 網站日誌記錄可以幫助您在問題發生之前發現問題，並且可以防止您的網站出現問題。 或者，您可以使用 Papertrail App 等工具直接發送日誌消息。

減少您的 Java 和 CSS 文件

今天的大多數網站都使用大量的 Javascript 和 CSS 文件，這些文件可能會在您用戶的瀏覽器中單獨處理。 一次請求過多會降低您的網站加載速度。 如果您能夠縮小所有這些文件，則不會增加網站加載時間的權重。

讓您的 Java 和 CSS 文件從外部加載而不是讓每個頁面都變得擁擠是一個聰明的主意。 然後，用戶只需在文件出現時加載它們，而不是每次有人訪問您網站上的新頁面時。 不要讓過多的文件讓用戶的瀏覽器感到困惑。

通過網絡承載您的負載

如果您遇到高流量，則需要認真對待您的網絡。 內容交付網絡 (CDN) 服務通過使用跨多個不同地理區域的服務器將文件直接提供給您的用戶。 這意味著不同地點之間的時間更少，因此您的網站可以更快地加載。 最著名的 CDN 是 Amazon CloudFront，很容易將其與您當前的網站集成。

嘗試外部託管平台

與 CDN 類似，您可以將文件託管在外部託管平台上，以避免減慢加載時間。 這是最常見的視頻文件。 視頻非常龐大，將它們直接上傳到您的網站會佔用大量空間。 它們很容易超過 100 MB，因此在您自己的服務器上託管視頻或其他大文件並不是明智之舉。

在外部託管這些文件是一個更好的主意。 YouTube 和 Vimeo 是視頻文件的絕佳選擇。 從那裡，您可以將視頻嵌入您的網站。 它可以節省空間並且不會減慢您的加載時間。 也輕鬆了很多！

尤其是使用 YouTube，可以讓您的內容面向全新的觀眾。 事實上，YouTube 被認為是最大的搜索引擎之一，每月吸引超過 10 億用戶。 它可以免費使用，您可以上傳長達 15 分鐘的視頻（如果您提交請求，則可以上傳更多）。 你絕對不會出錯。

檢查您的 HTTP 請求

雅虎聲稱網站 80% 的加載時間來自下載頁面的所有不同部分。 雖然我們已經討論了 Java 和 CSS 文件的最佳實踐，但其他方面呢？ 需要加載的頁面元素越多，頁面完全顯示所需的時間就越長。

您可以通過瀏覽器查看這些請求中有多少正在發生。 谷歌瀏覽器配備了專注於 HTTP 請求的開發者工具。 要訪問這些工具，請在 Google Chrome 中右鍵單擊您的頁面，單擊“檢查”，然後導航到“網絡”選項卡。

現在，您可以在“時間”部分看到每個文件加載所需的時間。 在角落裡，您還會看到請求總數。 減少花費最多時間的請求是加快網站加載時間的一種簡單方法。 繼續閱讀以了解在下一個技巧中合併文件的最佳方式。

合併和縮小 HTML 文件

縮小文件時，可以消除任何不必要的空格或代碼。 所有這些小事情可能看起來並不重要，但這會增加您的加載時間。 目標是擁有盡可能精簡的 HTML 文件。

查看您的網站，看看是否有您不再使用的任何不必要的頁面。 有什麼地方可以消除空白或不必要的代碼嗎？ 最後，合併 HTML 文件以確保您不會耽誤網站加載時間。

使用外部 CSS

CSS 是您為頁麵包含樣式和設計元素的方式。 您的網站可以訪問在您的頁面之前加載的外部文件或訪問內聯樣式。 在 HTML 文檔中包含 CSS 本身會增加很多代碼。 正如我們之前所說，這不好。

相反，您應該使用加載在 HTML 頭部的外部 CSS。 如果可以避免，請不要在 HTML 中放入任何 CSS。 這尤其意味著 div 或標題。 如果您使用外部樣式表，它會更簡潔、更精簡。 編輯也容易得多。

如果您不確定 CSS 的狀態，請使用 CSS 交付工具來查看您的 CSS 文件如何堆疊。 這會讓您知道外部文件的位置以及 HTML 中是否有任何內聯元素。 如果可能，只使用一個外部 CSS 文件。 如果您有多個文件，您可能可以合併文件。

推遲 Javascript 加載

當您延遲一個文件（如 JavaScript）時，您要確保在加載其他 Java 元素之前正確加載網站的其餘部分。 有時推遲 Java 就像使用插件一樣簡單。 其他時候，您需要手動添加一個 HTML 腳本，讓網站知道您想最後加載 Java。

此腳本調用外部 JavaScript 文件。 這裡有一個完整的教程來推遲你的 Java。 雖然差別不大，但這可以使您的 pape 看起來加載速度更快。

回顧你的第一個字節的時間

您的第一個字節時間 (TTFB) 是瀏覽器在開始加載其第一個字節數據之前等待的時間。 根據谷歌的說法，你的 TTFB 應該在 200 毫秒以下。 但是，這是服務器端的問題，因此很容易被更多的 Web 開發人員忽略。

當用戶訪問您的網站時，它不會自動開始加載。 儘管它看起來像是一個即時過程，但首先要進行 3 個步驟。 您的瀏覽器向託管網站的服務器發送初始 HTTP 請求，然後執行 DNS 查找、服務器處理和響應等步驟。

再一次，您的 Chrome 開發人員工具將在您的網頁上顯示此過程需要多長時間。 這也將在很大程度上取決於互聯網連接的強度。 較慢的連接具有較慢的 TTFB。 檢查您的 TTFB 以確保它低於 200 毫秒。 如果不是，則是時候與您的房東討論正確的解決方案了。 您可能沒有足夠的空間，或者您可能遇到過多的流量。

首屏內容優先

有時您的頁面很長，需要一段時間才能加載。 這是一個現實。 但是，確保首先加載首屏信息可以為您節省一些訪問者。 通過確保頁面頂部的所有內容快速顯示來改善您的用戶體驗。

這是一個叫做“延遲加載”的過程，這個名字是有道理的。 這就像在頁面上緩慢加載，但它從用戶最關注的頂部開始。 通過延遲加載，您的用戶可以看到最熱門的內容並提高網站加載速度，而無需等待頁面的其餘部分加載。 這是一個好主意，因為想像一下整個頁面有 10 多張照片。 您不希望您的訪問者等到所有這些圖像加載後才開始閱讀。

延遲加載使用 jQuery.sonar 只加載可見的圖像。 有許多插件可以輕鬆地向頁面添加延遲加載，但這裡有一個完整的手動操作教程。 您的用戶會很高興他們不再需要等待首屏內容。

檢查您的圖像尺寸

無需檢查文件大小即可輕鬆上傳圖像。 偶爾這可能沒問題，但如果您不小心，它很容易減慢您的網站速度。 保存圖像時，請嘗試使用“保存為網絡”選項來保存它們。 這可用於 Photoshop 或 Fireworks 等工具。 使用“Save for web”，可以在不損失圖像清晰度的情況下縮小圖像尺寸。

通常，應避免較大的文件大小。 PNG 保存圖片時。 您可以檢查圖像屬性以查看它們是否接近更大尺寸。 最後，如果您的網站上已有大圖片，請使用插件或手動壓縮這些文件以提高網站加載速度。

刪除不必要的額外內容以提高網站加載速度

有時我們會向我們的網站添加新內容並忘記它們。 我們要么轉向別的東西，要么不再需要過去的解決方案。 不管是什麼原因，請確保您經常查看您的網站，以確保不會在不使用的任何內容上浪費空間。 這適用於以下所有情況：

• 圖片;
• 插件；
• 導航元素；
• 設計元素；
• 頁數；
• 存檔的博客文章。

無論多小，這些都會對您的網站加載速度產生負面影響。 此外，它們可能會在您的網站安全中創建薄弱環節，尤其是使用插件時。 這些很容易損壞，這會降低您的安全性。 養成定期查看您的網站是否有過時的額外內容的習慣。

限制您的社交分享按鈕

社交分享按鈕是鼓勵參與社交媒體的好方法。 但是，需要有一個限制。 這些按鈕有時非常有效。 然而，它們也可能是一個泡沫。 我們可以同意的是，這些社交分享按鈕使用了幾個外部 JavaScript，它們會降低您的網站速度。

尤其是 Facebook，是造成這種情況的罪魁禍首。 Facebook 腳本可以通過共享按鈕降低網站性能。 考慮一下這些共享按鈕是否真的值得麻煩。 您仍然可以保留它們，但只能保留那些被證明是表現最佳的。

異步交付

說到第三方代碼，有很多可能會出錯。 如果第三方遇到中斷或突然變慢，您的頁面很容易在嘗試加載該資源時卡住，無論是社交分享按鈕還是網絡分析腳本。

異步交付是解決這種放緩的方法。 啟用此功能後，如果您的第三方網絡出現中斷，您自己的網站將不會受到影響。 您可以通過多種方式啟用異步交付，此處概述了所有這些方式。

安裝 Google PageSpeed

Google PageSpeed 是一個開源服務器模塊，可優化您的網站加載速度。 它由 Google 設計，旨在讓您的網站速度更快，而且易於使用。 基本上，它會對您的服務器和網站文件進行不同的修改。 您不必手動執行任何操作，您的網站會表現得更好。

當涉及到您的網站性能時，它與您會發現的一刀切解決方案非常接近。 您可以自己將 Google PageSpeed 安裝到您的文件管理器，也可以請您的主機或開發人員協助您進行安裝。 您可以設置它並忘記它。

組合背景圖像

許多主題使用多個背景圖像來創建一個完整的圖像。 雖然這可能看起來很棒並且同時發生，但它可能會降低您的網站性能。 因為您的用戶的瀏覽器需要發出幾個不同的請求來加載背景照片，這會在加載過程中增加時間。

相反，將您的圖像合併為一個以提高您的網站加載速度。 這樣，您的用戶只需要發出一個請求而不是多個請求。 您的網站將更快，因為不再有多個往返請求後台正確加載。

停止盜鏈圖片

盜鍊是將來自其他網站的照片嵌入到您自己的網站而不將其上傳到您的服務器的做法。 這很簡單，只需少量代碼，但這是一種不好的做法，可能導致網站速度減慢等。

盜鏈不僅會損害您的網站，而且如果您在未經許可的情況下這樣做，在技術上也是一種竊取。 網站所有者為託管這些文件的空間付費，當您通過嵌入代碼將同一文件放置在自己的網站上時，您就是在未經許可獲取他們的資源。

雖然有些網站允許您直接上傳圖像以進行共享，但這仍然不是一個好主意。 當這些網站運行緩慢或遇到高流量時，如果您嵌入它們，它們可能會降低您的網站加載速度。 另外，除非您為空間付費，否則這些文件可以隨時刪除而不會發出警告。

是的，盜鏈可能會為您節省一些帶寬，但從長遠來看，它更有可能減慢您的網站速度。 始終將您的圖像託管在您自己的服務器上，而不是盜鏈。 如有疑問，最好在您自己的服務器上購買更多空間，以便您有能力上傳它們。 無論如何，您應該使用小圖像文件，所以這應該不是問題。

立即提高您的網站加載速度

您準備好將您的網站提升到新的高度了嗎？ 是時候提高您的網站加載速度了。 如果您的網站加載速度較慢，很容易在無意中失去訪問者。 想想當網站加載時間過長時，您發現它是多麼令人沮喪。 網站加載時間延遲一秒將導致轉化次數減少 7%，頁面瀏覽量減少 11%。 不要通過認真對待上述這些提示來對您的用戶這樣做。

加速您的網站並不復雜、昂貴或令人困惑。 這是改進 SEO 並對用戶產生積極影響的最簡單、最快捷的方法之一。 如果您希望您的網站運行得更好並給您的用戶留下深刻印象，那麼投資於上述提示是值得的。

從避免熱鏈接和斷開的鏈接到升級您的網絡託管，即使是上述小步驟也會產生很大的影響。 如果您不知所措，請先測試您的網站加載速度。 從那裡，您將很好地了解需要做多少改進才能確保您的網站以最高性能水平運行。 您的網站可能只需要進行一些調整即可符合 Google 的標準。 您的用戶已經厭倦了等待，因此是時候開始工作了。

ibrandify 創建的網站加載速度矢量