網站優化的11個技術操作

網站優化尤其是在線競爭如此激烈的情況下。在過去的幾個月中，我們編寫了許多性能教程，例如如何加快WordPress，Joomla，Drupal等的速度。但是，如果您不在任何這些平臺上怎么辦？如果您要優化站點，則無論平臺如何，我們都建議以下18個優化技巧。

但是在我們深入研究技巧之前，您應該了解一些工具，以便您可以首先確定網站性能問題。如果您知道網站在哪里變慢或出現瓶頸，則可以重新調整優先級。

網站速度測試

首先，我們建議您使用網站速度測試工具來分析您網站的整體速度。我們建議您使用KeyCDN的網站速度測試工具或WebPageTest，因為它們都支持HTTP / 2。需要Firefox 36+或Chrome 41+。您將在下面看到更多有關為什么我們建議遷移到HTTPS以利用HTTP / 2的優點。

網站負載測試

其次，重要的是對您的網站進行負載測試，以查看可能引起瓶頸的原因。以下是一些可以幫助您測試網站的工具。如果您要擴展平臺，這些功能也非常有用。

CyberFlood：網站和應用程序的安全性和性能測試。

負載影響：DevOps的自動化和按需性能測試。立即對多達120萬并發用戶進行負載測試您的網站，Web應用程序，移動應用程序或API。

加載程序：加載測試服務，可讓您通過數千個并發連接對您的Web應用程序和API進行壓力測試。釋放多達10,000個客戶。

BlazeMeter：針對您的所有應用程序運行大規?？蓴U展的，基于開源的性能測試，并在每個軟件交付階段驗證性能。

如果您運行的是WordPress網站，則有一個有用的插件（例如P3），可以幫助您查明使您的網站變慢的插件。

計算網站性能優化預算

Jonathan Fielding整理了一個很棒的免費小工具，您可以在其中計算績效預算。只需輸入您希望站點加載的速度（以秒為單位），然后選擇連接速度即可。

在下一頁上，您可以根據網站上的CSS，JS，圖像，視頻和字體使用情況來調整滑塊。

在最后一頁，它為您提供了性能預算明細以及不同連接類型的整體估計負載時間。同樣，這些都是估計值，但是查看所有連接速度之間的分散程度可能很有用。不要忘記針對移動設備和速度較慢的設備進行優化。

網站性能優化技巧

既然您已經在網站上運行了一些測試以查看延遲或負載在哪里，那么現在是時候開始進行優化了，請按照以下這些優化技巧進行操作。

1.圖像優化

最近，我們邀請了20多位網絡性能專家來分享他們的建議和他們看到的錯誤。猜猜其中有46％的人說優化是第一要務嗎？沒錯，圖片優化！所以，現在您已經從專家那里聽到了，不只是相信我們。

根據HTTP Archive 2016年的一份報告，平均而言，網站頁面權重的64％由圖片組成。

KeyCDN開發了Optimus WordPress插件以及一個API，該API專注于無損和有損圖像壓縮的組合。如果您使用API，則可以在任何平臺上使用?？梢栽贕itHub上找到Optimus API的PHP庫。如果您是開發人員，請隨時為其他Optimus API庫做出貢獻。

通過使用Optimus，您可以擺脫Google PageSpeed Insights的建議：通過壓縮…，您可以節省4.7 KB（30％）而不損失。使用Optimus的另一個優點是它支持轉換為Google開發的WebP格式。

根據Google的說法，WebP無損圖像比PNG小26％，比JPEG圖片小25-34％。

您可以將以下代碼段添加到.htaccess文件中，以支持WebP格式（而不是JPEG或PNG圖像）的提供。

而且，如果您使用的是WordPress，則可以使用KeyCDN的免費WordPress Cache Enabler插件自動提供WebP格式。這里是一些其他第三方工具，您也可以將其用于圖像壓縮。

圖像縮小自動任務系統的插件＃

咕unt聲：grunt-contrib-imagemin

gulp：gulp-imagemin

第三方在線工具＃

小小PNG

海妖

JPEGmini（適用于OSX，iOS，Windows的應用程序）

本地工具＃

ImageAlpha（Mac）

還請確保使用HTML srcset和size屬性來利用響應圖像，以根據顯示的大小提供不同比例的圖像。

2.減少HTTP請求

當瀏覽器從服務器獲取數據時，它會使用HTTP（超文本傳輸協議）來獲取數據。它是客戶端和主機之間的請求/響應。通常，HTTP請求越多，網頁加載速度就越慢。

您可以通過多種方式減少請求數量

內聯您的JavaScript（僅在很小的情況下）

使用CSS精靈

減少諸如第三方插件之類的資產，這些資產會產生大量外部請求

除非絕對需要，否則不要使用第三方框架

使用更少的代碼！

組合CSS和JS文件（使用HTTP / 2串聯不再重要）

特定網站必須發出的請求數量因站點而異。運行站點速度測試將告訴您生成特定頁面需要多少個請求。

禁用此功能后，您將不再具有該第二個HTTP請求，并且您的主腳本將不再具有302重定向。這只是HTTP請求清除的一個示例。

第二個HTTP請求清除

HTTP請求清除的另一個示例是，如果您運行的WordPress默認情況下在頭文件中包含附加的JavaScript文件wp-emoji-release.min.js？ver = 4.3.1。表情符號很棒，但真的需要嗎？值得從其他JavaScript文件獲得額外的重量和時間嗎？可能不會。您可以通過將以下代碼添加到您的functions.php文件中來禁用WordPress中的表情符號。

或者，您也可以使用免費的“禁用表情符號”插件。

如果事情沒有被使用，不要讓它們產生請求！另外，不僅要優化您的首頁，網站的其余部分也應引起注意。

3.縮小CSS和JavaScript

資源的最小化意味著從HTML，JavaScript和CSS中刪除不需要加載的不必要字符，例如：

空格字符

換行符

注釋

塊定界符

這減少了必須從服務器請求的代碼量，從而加快了加載時間。

縮小自動化任務系統的插件＃

的JavaScript

咕unt聲：咕unt聲-丑化

吞咽：吞咽uglify

的CSS

咕unt聲：grunt-contrib-cssmin

Gulp：gulp-minify-css

如果您使用的是WordPress，則還可以使用Cache Enabler插件來縮小CSS和JavaScript。

4.關鍵路徑和渲染阻止資源（CSS + JS）

在分析網頁速度時，您始終需要考慮可能阻止DOM的因素，這會導致頁面加載時間的延遲。這些也稱為渲染阻止資源，例如HTML，CSS（可以包括Web字體）和JavaScript。以下是有關如何通過優化關鍵渲染路徑來防止CSS和JavaScript阻止DOM的一些建議。

CSS文件

正確調用您的CSS文件。

使用媒體查詢將某些CSS資源標記為非渲染阻止。

減少CSS文件的數量（將CSS文件合并為一個文件）。

縮小CSS（刪除多余的空格，字符，注釋等）。

總體上減少使用CSS。

的JavaScript

當涉及到JavaScript時，要牢記一些最佳實踐。

將您的腳本移動到</ body>標記之前的頁面底部。

使用async或defer指令以避免渲染阻塞。

將您的JS文件連接到一個文件中（使用HTTP / 2不再重要）。

縮小JavaScript（刪除多余的空格，字符等）。

如果很小，請內聯您的JavaScript。

異步允許腳本在后臺下載而不會阻塞。然后，在完成下載的那一刻，渲染被阻止并且該腳本執行。執行腳本后，將繼續渲染。

您的另一個選擇是推遲JavaScript。 該指令的作用與異步相同，不同之處在于它保證腳本按在頁面上指定的順序執行。 帕特里克·塞克斯頓（Patrick Sexton）有一個很好的例子，說明了如何適當推遲JavaScript的加載。

在這篇文章的后面，我們還將討論您對Web字體的選擇。

5.使用內容交付網絡（CDN）減少延遲

如果您不熟悉內容交付網絡（CDN），我們強烈建議您閱讀完整的CDN指南。 除了加快全球資產交付速度之外，CDN還可以大大減少延遲。

我們進行了一項測試，向您展示了在實施和未實施CDN的情況下延遲時間的差異。這僅僅是從連接性的角度來看。我們使用了KeyCDN的ping測試工具，可以方便地從以下10個位置同時進行測試。這是兩者之間的結果。

我們的原始服務器（不帶CDN）和POP（帶CDN）之間的等待時間平均減少了73％！查看我們的網站延遲測試的全部詳細信息。

您可以在幾乎任何現有平臺上實施CDN，因為KeyCDN具有25種以上的集成。這是我們集成指南的快速列表。

WordPress整合

CMS整合指南

框架集成指南

AWS S3 CDN集成

Google Cloud Storage CDN整合

定制CDN集成

6. TTFB

到第一字節的時間（TTFB）是Web服務器響應能力的度量?；旧?，這是您的瀏覽器從服務器請求信息后開始接收信息的時間。網站的TTFB計算如下：

HTTP請求時間+進程請求時間+ HTTP響應時間

TTFB在Chrome DevTools中顯示為綠色等待欄。

我們的原始服務器（不帶CDN）和POP（帶CDN）之間的等待時間平均減少了73％！查看我們的網站延遲測試的全部詳細信息。

您可以在幾乎任何現有平臺上實施CDN，因為KeyCDN具有25種以上的集成。這是我們集成指南的快速列表。

WordPress整合

CMS整合指南

框架集成指南

AWS S3 CDN集成

Google Cloud Storage CDN整合

定制CDN集成

域名預取是在用戶實際跟隨鏈接之前已經解析域名的一個很好的解決方案。下面是一個示例，如何在HTML的HEAD部分中實現它：

<link rel =“ dns-prefetch” href =“ // www.example.com”>

雙斜杠表示URL以主機名開頭（在RFC1808中指定）。

Preconnect允許瀏覽器在將HTTP請求實際發送到服務器之前建立早期連接?？梢灶A先啟動諸如DNS查找，TCP握手和TLS協商之類的連接，從而消除了這些連接的往返延遲，并為用戶節省了時間。

下面的示例顯示為KeyCDN的區域別名鏈接啟用預連接的外觀。

<link href ='https：//cdn.keycdn.com'rel ='preconnect'>

7. HTTP / 2

Stack Exchange and Discourse的聯合創始人Jeff Atwood在我們的網絡性能問題中回答說，他將給出的第一條建議是“全面采用HTTP / 2-每個人的巨大進步?！蔽覀兿矚gJeff的回答，因為我們絕對同意HTTP / 2是未來，并且會帶來巨大的性能優勢。

Go是一種編程語言，它是一個很好的例子，它說明了當您在頁面上處理大量圖像時，以及HTTP / 2遠遠超過HTTP / 1的情況。

要啟用HTTP / 2，僅需要一個SSL證書（它需要TLS）和一個支持HTTP / 2的服務器。您可以使用KeyCDN的HTTP / 2測試工具來查看是否受支持?，F在，KeyCDN通過我們的加密集成提供免費的SSL證書。還沒有遷移到HTTPS？我們也有一個HTTP到HTTPS遷移指南。

8. PHP7和HHVM＃

出于安全補丁，性能升級等原因，使Web服務器的各個組件保持最新狀態至關重要。如果您使用的是PHP，則與PHP 5.6相比，升級到PHP7可以極大地提高性能。以及利用HHVM。

根據上圖的結果，相比于WordPress 3.6中PHP 5.6的96個，PHP7每秒可以處理204個請求。此外，與WordPress 4.1中PHP5.6相比，PHP7可以處理183個以上的請求。

HHVM是Facebook等網站使用的開源VM，也顯示出了良好的效果。在測試PHP 7和HHVM時，Kinsta與Zend的結果略有不同。從他們的結論來看，HHVM勢不可擋。

由于環境，硬件，所測試的CMS平臺，版本等的不同，許多測試結果會有所不同。但是無論哪種方式，PHP7和HHVM都是提高網站性能的絕佳方法。

9. Web字體性能

根據HTTP存檔，現在有60％的網站使用自定義字體。自2011年以來，該數字增長了850％以上。網絡字體（例如Google字體）的缺點是它們向外部資源添加了額外的HTTP請求。 Web字體也被渲染阻止。以下是一些有關更好的Web字體性能的建議。

根據瀏覽器支持確定優先級

只選擇您需要的樣式

盡量減少字符集

在本地托管字體或預取

使用Base64編碼存儲在LocalStorage中

您可以在我們有關分析網絡字體性能的文章中看到以上每種方法的示例。格魯吉亞（Georgia）是一種很棒的系統字體，看上去很漂亮，而且易于閱讀。

您也可以將Google字體移至CDN。我們在使用Google的CDN和KeyCDN之間進行了比較，而使用KeyCDN的速度更快。為什么？因為它減少了HTTP請求的數量，所以DNS查找使您可以利用單個HTTP / 2連接，并可以更好地控制緩存。

10.熱鏈接保護

熱鏈接保護是指限制HTTP引薦來源網址，以防止其他人將您的資產嵌入其他網站。通過禁止其他站點顯示圖像，熱鏈接保護將為您節省帶寬。

示例：您的網站URL是www.domain.com。要停止從其他站點對圖像進行熱鏈接并從圖像主機顯示名為donotsteal.jpg的替換圖像，請將以下代碼放在.htaccess文件中：

RewriteEngine開

RewriteCond％{HTTP_REFERER}！^ http：//（。+ \。）？domain \ .com / [NC]

RewriteCond％{HTTP_REFERER}！^ $

RewriteRule。* \。（jpe？g | gif | bmp | png）$ http://i.imgur.com/donotsteal.gif [L]

KeyCDN還提供一種簡單的方法來啟用熱鏈接保護，以保護您的CDN帶寬。請參閱我們的教程，了解如何創建區域引薦來源網址。

11.啟用Gzip壓縮

Gzip是另一種壓縮形式，它在將服務器上的網頁，CSS和JavaScript發送到瀏覽器之前對其進行壓縮。該網站的性能優化易于實施，并且可以發揮很大的作用。

12.Apache

您可以通過將以下內容添加到.htaccess文件來啟用壓縮。

<IfModule mod_deflate.c>

    ＃壓縮HTML，CSS，JavaScript，文本，XML和字體

    AddOutputFilterByType DEFLATE應用程序/ javascript

    AddOutputFilterByType DEFLATE application / rss + xml

    AddOutputFilterByType DEFLATE application / vnd.ms-fontobject

    AddOutputFilterByType DEFLATE應用程序/ x字體

    AddOutputFilterByType DEFLATE應用程序/ x-font-opentype

    AddOutputFilterByType DEFLATE應用程序/ x-font-otf

    AddOutputFilterByType DEFLATE應用程序/ x-font-truetype

    AddOutputFilterByType DEFLATE應用程序/ x-font-ttf

    AddOutputFilterByType DEFLATE應用程序/ x-javascript

    AddOutputFilterByType DEFLATE application / xhtml + xml

    AddOutputFilterByType DEFLATE應用程序/ xml

    AddOutputFilterByType DEFLATE字體/ opentype

    AddOutputFilterByType DEFLATE字體/ OTF

    AddOutputFilterByType DEFLATE字體/ ttf

    AddOutputFilterByType DEFLATE image / svg + xml

    AddOutputFilterByType DEFLATE圖片/ x-icon

    AddOutputFilterByType DEFLATE文本/ CSS

    AddOutputFilterByType DEFLATE text / html

    AddOutputFilterByType DEFLATE文本/ javascript

    AddOutputFilterByType定義文本/純文本

    AddOutputFilterByType DEFLATE text / xml

    ＃刪除瀏覽器錯誤（僅適用于真正的舊瀏覽器）

    BrowserMatch ^ Mozilla / 4 gzip-only-text / html

    BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip

    BrowserMatch \ bMSIE！no-gzip！gzip-only-text / html

    標頭附加隨用戶代理

</ IfModule>

Nginx

您可以通過將以下內容添加到nginx.conf文件來啟用壓縮。

如您所見，您可以實施數百種不同的網站優化調整，以進一步改善內容的交付和速度。 從圖像優化到實施CDN，再到瀏覽器和服務器緩存，都可以利用HTTP / 2，Gzip，PHP7，HHVM等更多功能對自己官網網站優化！