pageSpeed Insights 圖片對網站優化方案

一 規則 以下概括幾點 可供參考。<br>

避免使用着陸頁面重定向

啓用壓縮功能

縮短服務器相應應用時間

使用瀏覽器緩存機智

縮短資源大小

優化圖片

優化css發送過程

優化加載可見內容

移除會阻止呈現內容的javaScript

1 避免使用着陸頁面重定向<br>

重定向會觸發http請求相應週期。並會拖慢網頁呈現速度。在最好的狀況下，每一個重定向都會添加一次往返響應。最壞的狀況下，除了額外的http請求響應週期之外。可能會更屢次的的執行dns查找 ，tcp 握手和tls協商，所以，您可能減小重定向的使用和提示網站的性能。
   如下是重定向的模式
   
       exapmple.com 使用網頁設計 無須要人任何重定向快速切很理想化。
	   example.com -m.exmaple.com/htom 會致使設備用戶遭到屢次往返。
	   exmaple.com => www.example.com->m.exmaple.com 移動端很是緩慢
	   建議
	   瞭解自適應設計基礎知識。 以提供出色的多設備體驗並消除沒必要要的重定向。

2 啓用壓縮功能<br>

全部現代瀏覽器都支持gzip 壓縮 全部http 請求自動協議相似的壓縮。啓用gzip 壓縮珂大幅度壓縮索傳授的響應大小 減小客戶端的流量並加快網頁的首次呈現速度。
   
   建議
 在您的網絡服務器上啓用品測試gzip 支持 html5 所包含人民的服務器
  Server Configs
	[Apache](https://github.com/h5bp/server-configs-apache "Apache")
	[Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae "Google App Engine (GAE)")
	[Internet Information Services (IIS)](https://github.com/h5bp/server-configs-iis "Internet Information Services (IIS)")
	[lighttpd](https://github.com/h5bp/server-configs-lighttpd "lighttpd")
	[Nginx](https://github.com/h5bp/server-configs-nginx "Nginx")
	[Node.js](https://github.com/h5bp/server-configs-node "Node.js")

3 改善服務器響應時間<br>

建議服務器響應衡量的是花費多長時間加載必要的html 開始呈現服務託管網頁。其中減去的了谷歌哥您的服務器以前的網絡延遲時間，每次運行因此的時間能夠有所不一樣，可是這差別不該太大。事實上，每次各類服務器應在用時方面存在很大的差別行，可能意味潛在性能我問題。
	
	建議
	   您應該將服務器響應的時間控制在200毫秒內，不少潛在因素可能會延遲服務器響應，當解決問題後。您必須繼續衡量服務器先gin趕時間，並設法應將出現的性能瓶頸的問題
	1 收集並檢測
	2 找出並修復
	3 檢測並提醒

4 使用瀏覽器緩存<br>

經過網絡獲取資源速度緩慢有代價昂貴，下載過程可能須要和客戶端服務器之間進行屢次往返，會致使延遲處理，可能會阻止網頁內容呈現，是訪問支持數據費用。全部的服務器響應都應指定一種緩存政策。幫助客戶端明確是否能夠重用以前的獲取響應。
   建議， 每項資源都指定一種明確的緩存政策來回答下列問題。該資源可被緩存，可緩存多長時間。如何在緩存政策到後期對該資源進行有小的重現驗證。當服務器返回響應時間。必須提供etag 標頭。
  Cache-Contol 指定瀏覽器和其餘中間緩存如何 緩存單項響應時長時間，
  eTAG 提供從新驗證的令牌，有瀏覽器自動發送。用於檢測上次請求響應的資源是否發生變化，
  [指定最佳的Cache-Control 政策](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#defining-optimal-cache-control-policy "指定最佳的Cache-Control 政策")
  [使用緩存的響應失效的最佳緩存的響應](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating-and-updating-cached-responses "使用緩存的響應失效的最佳緩存的響應")
  [緩存覈對清單。](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#caching-checklist "緩存覈對清單。")
  對於靜態素材的資源不常的素材變化資源，咱們建議至少緩存1周，至多緩存1年。若是您須要精確控制資源的失效時間，咱們建議使用網址指紋版本控制技術.
 5 縮減資源(HTML CSS javascript 的大小)<br>
 
   縮減大小的是指不影響瀏覽器處理資源的狀況下移除冗餘，沒必要要的數據。移除未使用的代碼。
   建議 縮減html CSS js 資源的大小
   要縮減HTML大小 請查實使用htmlMinifer
   要縮短CSS大小。請嘗試使用的cssNano csso
   要縮短js大小。請嘗試使用。UglifyJS Closure Compiler 也有效。您珂建立一個使用的這些工具的構建的流程。縮短和重命名開發文件將保持正式版目錄。
 6 優化圖片<br>
 
    對於網頁來講，在所下載的字節數中，圖片每每會佔很大比例。所以，優化圖片一般能夠卓有成效地減小字節數和改進性能：瀏覽器須要下載的字節數越少，對客戶端帶寬的爭用就越少，瀏覽器下載內容並在屏幕上呈現內容的速度就越快。
	在爲您的圖片資源尋找最理想的格式和優化策略時，您須要仔細分析多個方面：要編碼的數據的類型、圖片格式功能、質量設置、分辨率，等等。此外，您還須要考慮：是否最好以矢量格式提供某些圖片、是否可經過 CSS 實現所需的效果，以及如何爲每類設備傳送已進行相應調整的資源。
	遵循提供自適應圖片的最佳作法
	參閱各類圖片的圖片優化覈對清單
	針對 GIF、PNG 和 JPEG 圖片進行優化
	GIF、PNG 和 JPEG 格式在整個互聯網的圖片流量中佔 96%。鑑於這些圖片格式的熱門程度，PageSpeed Insights 提供了具體的優化建議。爲方便起見，您能夠直接從 PageSpeed Insights（它使用的是 modpagespeed.com 中提供的圖片優化庫）下載通過優化的圖片。
	您還可使用相關工具（例如 ImageMagick 提供的 convert 庫）來應用相似的優化 - 請參閱下面的示例說明。
	若是您使用第三方工具，則請注意：假若您的圖片在此以前已進行了充分的優化，轉換後的圖片可能會變大。若是發生這種狀況，請使用您的原始圖片。
	GIF 和 PNG 均是無損格式，由於壓縮過程不會對這兩類圖片的外觀作出任何修改。對於靜止圖片，PNG 能夠實現更好的壓縮寬高比和更好的外觀質量。對於動畫圖片，請考慮使用 video 元素（而不是 GIF）以實現更好的壓縮效果。
	始終將 GIF 轉換爲 PNG 格式，除非原始圖片是動畫圖片或很是小（不足幾百字節）。
	對於 GIF 和 PNG，若是全部像素都是不透明的，請移除 Alpha 通道。
	例如，您可使用 convert 庫經過以下命令優化 GIF 和 PNG 圖片（括號內的參數是可選的）：
	convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
	cuppa.png
	cuppa.png（1763 字節）
	convert cuppa.png -strip cuppa_converted.png
	cuppa_converted.png
	cuppa_converted.png（856 字節）
	JPEG 是一種有損格式。壓縮過程會去除此類圖片的外觀細節，但壓縮寬高比可能會是 GIF 或 PNG 的 10 倍。

	若是圖片質量較高，請將其降至 85。當圖片質量大於 85 時，圖片會迅速變大，但外觀上的改善卻微乎其微。
	將色度採樣率降至 4:2:0，由於人類視覺系統對亮度（與顏色相較而言）更敏感。
	對超過 10k 字節的圖片使用漸進式格式。漸進式 JPEG 一般可爲大型圖片實現更高的壓縮寬高比（與基準 JPEG 相較而言），並具備漸進式呈現圖片的優點。
	若是圖片是黑白的，請使用灰度色彩空間。
	例如，您可使用 convert 庫經過以下命令優化 JPEG 圖片（括號內的參數是可選的）：
	convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
	puzzle.jpg
	puzzle.jpg（13501 字節）
	convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
	puzzle_converted.jpg
	puzzle_converted.jpg（4599 字節）
 7 優化CSS 發送過程
 
     瀏覽器必須先處理當前網頁的因此樣式的佈局信息。而後才能呈現內容。所以，瀏覽器會阻止呈現網頁內容。直到外部樣式表表如下載完畢處理完畢，想要詳細瞭解關鍵呈現路徑。獲取如何取消阻止的呈現優化CSS 發送過程相關的提示
	 若是外部CSS資源較小。您能夠將直播插入HTML文檔中，較小的CSS文件可讓瀏覽器順暢五組的網站。請注意。若是CSS  文件較大。徹底內嵌CSS  並緩加其他樣式。
	  內嵌較小CSS文件的實例
	  請勿內嵌較大的數據url
	  請勿內嵌CSS屬性
	  <html>
	     <head>
		    <style>
			   .bule{color:blue}
			</style>
		 </head>
		 <body class="blue">
		      <div class="blue">
			  Hello world
			  </div>
			   <noscript id="deferred-styles">
				  <link rel="stylesheet" type="text/css" href="small.css"/>
				</noscript>
				<script>
				    var loadDeferredStyles = function (){
					   var addStylesNode = document.getElementById('deferred-styles');
					   var replacement = document.createrElement('div');
					   replacement.innerHTML =addStylesNode.textContent;
					   document.body.appendChild(replacement);
					   addStylesNode.parentElement.removeChild(addStylesNode);
					};
					var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
					if(raf) ref(funciton(){window.setTimeout(loadDeferredStles,0);});
					else window.addEventListener('load',loadDeferredStyles);
					</script>
		 </body>
      </html>
8 縮減首屏內容大小
     若是所須要的數據超出的初始擁塞窗口的限制。系統就是繼續用你難道服務器用戶的瀏覽器 之間進行更多的往返的時候，若是用戶使用的延遲時間較長的網絡。該問題坑你會顯著拖慢網頁的加速速度
	  建議我哪敢呀加速幾種方法。
	      合理構建HTML 一遍首先加載關鍵首屏內容。
		  減小資源所用的數據量。
    合理的構建的HTML 以便首先加載關鍵的首屏的內容
	 請首先加載網頁內容。合理構建網頁一時來服務器的出示響應發送必要數據，從而當即呈現網絡關鍵部分，並暫緩呈現其他部分。可能意味着，您必須將CSS 拆分兩個部分。一個負責挑戰內容ATF 部分的樣式內嵌部分。以及一個可緩存的呈現的部分
	 請參考示列。瞭解途觀調整網站結構提升加載速度，
	 若是您的HTML 先加載第三方軟件 在家中主要內容。加載順序更改成加載主要內容。
	 若是您的網站的採用兩列溼佈局。而您的HTML 加載邊欄。
	減小資源全部數據量
	  當通過從新設計的網站均可在過個涉筆政策運行的首關鍵內容。使用一下技術減小用戶呈現是網頁的數據量
	    減資源的大小。經過移除沒必要要的空格的評論來縮減HTML CSS JAVAscript 的大小。用過使用重命名資源中間變量的名稱工具，實現進一步優化
		儘量考慮使用CSS 而非圖片
		啓用壓縮功能。
		
9 移除會阻止內容呈現的 JavaScript
    瀏覽器必須先經過解析HTML 標記構建的DOM樹 而後才能呈現網頁，在此過程當中。每當解析遇到腳本，必須先中止解析HTML執行平執行該腳本，而後才繼續解析，複議外部腳本，系統還會強制解析相應的資源下載完畢。
	建議
	   您應儘量避免使用會阻止內容呈現的 JavaScript，尤爲是必須先由系統獲取而後才能被執行的外部腳本。用於呈現網頁內容的腳本可內嵌到網頁中，以免產生額外的網絡請求，但內嵌的內容不能太大，並且必須可被快速執行以提供良好的性能。對初次呈現不重要的腳本應設爲異步加載，或推遲到首次呈現完畢後再開始加載。請注意，要經過這種方式縮短加載用時，您還必須優化 CSS 發送過程。
	   內嵌 JavaScript
 會阻止內容呈現的外部腳本會強制的瀏覽器等待系統獲取JAVASCRIPT 可能會咋網頁系統中增長一次屢次的網絡往返過程。若是外部的腳本較小，您可將內容海子街內嵌到HTML文檔中。以免網絡延遲，
	 <html>
  <head>
	<script type="text/javascript" src="small.js"></script>
  </head>
  <body>
	<div>
	  Hello, world!
	</div>
  </body>
</html>
您就能夠按照以下方式內嵌腳本：
<html>
  <head>
	<script type="text/javascript">
	  /* contents of a small JavaScript file */
	</script>
  </head>
  <body>
	<div>
	  Hello, world!
	</div>
  </body>
</html>
內嵌腳本內容可消除對 small.js 的外部請求，並可以使瀏覽器縮短首次呈現網頁所需的時間。但請注意，內嵌也會致使 HTML 文檔變大，而且相同的腳本內容可能須要內嵌在多個網頁中。所以，咱們建議您只內嵌較小的腳本以實現最佳性能。
將 JavaScript 設爲異步加載
	默認狀況下，JavaScript 會阻止 DOM 構建，於是會致使網頁的首次呈現時間延遲。爲防止 JavaScript 阻止解析器正常運行，咱們建議您對外部腳本使用 HTML async 屬性。例如：
	<script async src="my.js">
	要詳細瞭解異步腳本，請參閱解析器被阻止與異步 JavaScript。 請注意，異步腳本未必會按指定的順序執行，且不該使用 document.write。考慮到這些限制，若是腳本有賴於執行順序或者須要訪問或修改網頁的 DOM 或 CSSOM，那麼您可能須要從新編寫此類腳本。
	延遲加載 JavaScript
	若是某些腳本對於初次呈現網頁不是必不可少的，此類腳本的加載和執行即可被推遲到初次呈現網頁後或網頁的其餘關鍵部分加載完畢後。這樣作有助於減小資源爭用並提升性能。
	常見問題解答
	若是我使用的是 JavaScript 庫（例如 jQuery），該怎麼作？
	不少 JavaScript 庫（例如 jQuery）均可用來加強網頁，從而爲網頁增添額外的互動性、動畫和其餘效果。不過，這些行爲大多可在首屏內容呈現後再添加，以確保無虞。 請考慮將此類 JavaScript 設爲異步加載或推遲其加載時間。