web性能優化-提高網頁載入速度

02-04

縮減首屏內容的大小

https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent

概覽

如果所需的數據量超出初始擁塞窗口的限制，系統就需要在伺服器和用戶瀏覽器之間進行更多次的往返。如果用戶使用的是延遲時間較長的網路（例如，移動網路），該問題會嚴重延遲網頁的載入。

建議

為提高網頁載入速度，請限制呈現網頁首屏內容所需的數據（HTML標記、圖片、CSS和JavaScript）大小。為此，您可以嘗試以下幾種方法：

結構化HTML，以便首先載入關鍵的首屏內容

減少資源所用的數據量

結構化HTML，以便首先載入關鍵的首屏內容

請首先載入網頁的主要內容。結構化網頁，以便伺服器發出的初始響應能發送必要數據，從而迅速呈現網頁的關鍵部分並暫緩呈現其餘部分。這可能意味著，您必須將CSS拆分為兩個部分：負責調整內容ATF部分的格式的內嵌部分，以及可暫緩呈現的部分。
參考以下示例，了解有關如何結構化網站以提高載入速度：

如果您的HTML先載入第三方小部件，再載入主要內容，請將該載入順序更改為先載入主要內容。

如果您的網站採用的是兩列布局（即導航邊欄加文章），而HTML先載入邊欄，再載入文章，請考慮首先載入文章。

減少資源所用的數據量

如果經過重新設計的網站可以在多個設備上正常運行，並能首先載入關鍵內容，請使用以下技術來減少呈現網頁所需的數據量：

縮減資源的大小：通過移除不必要的空格和評論來縮減HTML、CSS和JavaScript的大小。通過使用可重命名資源中變數名稱的工具，實現進一步的優化。

儘可能考慮使用CSS，而非圖片。

啟用壓縮功能

優化CSS發送過程

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI

概覽

屏幕顯示內容之前，瀏覽器會阻止外部CSS文件。這會導致額外的網路延遲，並延長屏幕顯示內容的時間。

建議

如果外部CSS資源較小，您可以直接將這些內容插入到HTML文檔中，這稱為「內嵌」。通過這種方式內嵌較小CSS資源，瀏覽器可以繼續呈現網頁。請注意，如果CSS文件較大，完全內嵌CSS可能會導致PageSpeed Insights通過按優先順序排列可見內容警告您網頁的首屏部分體積過大。如果CSS文件較大，您需要識別和內嵌呈現首屏內容所需的CSS，並暫緩載入其餘樣式，直到首屏內容顯示之後為止。

內嵌較小CSS文件的示例

請勿內嵌較大數據URI

請勿內嵌CSS屬性

內嵌較小CSS文件的示例

如果HTML文檔如下所示：
<html>n <head>n <link rel="stylesheet" href="small.css">n </head>n <body>n <div class="blue">n Hello, world!n </div>n </body>n</html>n
並且small.css資源如下所示：
.yellow {background-color: yellow;}n .blue {color: blue;}n .big { font-size: 8em; }n .bold { font-weight: bold; }n
您就可以內嵌關鍵的CSS，具體方法如下：
<html>n <head>n <style>n .blue{color:blue;}n </style>n </head>n <body>n <div class="blue">n Hello, world!n </div>n </body>n</html>n<link rel="stylesheet" href="small.css">n
在網頁載入之後，原始small.css才會載入。通過JavaScript將所有<style>和<link>元素插入到文檔中，以維護CSS規則的應用順序。

請勿內嵌較大數據URI

在CSS文件中內嵌數據URI時，請務必慎重。您可以在CSS中選擇使用較小數據URI，因為內嵌較大數據URI會導致首屏CSS變大，進而延緩網頁呈現時間。

請勿內嵌CSS屬性

應盡量避免在HTML元素（例如，< p stylex=...>）中內嵌CSS屬性，因為這經常會導致出現多餘的重複代碼。此外，內容安全政策(CSP)會在默認情況下阻止在HTML元素上內嵌CSS。

啟用壓縮功能

https://developers.google.com/speed/docs/insights/EnableCompression

概覽

許多網路伺服器可以通過調用第三方模塊或使用內置程序將文件壓縮為gzip格式，然後再發送該壓縮文件以供下載。這樣可以在下載呈現網站所需的資源時，為您節省一些時間。

建議

您應在自己的網路伺服器上啟用壓縮功能。以下這些參考展示了某些熱門網路伺服器上所啟用的壓縮功能：

Apache：採用mod_deflate

Nginx：採用HttpGzipModule

IIS：配置HTTP壓縮功能

常見問題解答

PageSpeed Insights報告許多靜態內容文件需要壓縮為gzip格式，但我已將網路伺服器配置為使用gzip壓縮格式提供這些文件。為何PageSpeed Insights無法識別這些壓縮文件？在將文件下載到客戶端計算機時，代理伺服器和防病毒軟體可以停用壓縮功能。由於PageSpeed Insights是根據實際返回到客戶端的標頭來報告結果，因此，如果您要在使用此類防病毒軟體或在後面放置中級代理伺服器的客戶端計算機上運行分析（許多代理伺服器是透明的，您甚至可能意識不到代理伺服器介入您的客戶端和網路伺服器），則可能會導致出現此問題。
要確定代理伺服器是否為導致此問題的原因，您可以使用PageSpeed Insights Chrome擴展功能來檢查標頭：

在相關網頁上運行PageSpeed。

點擊顯示資源標籤。

展開標為未壓縮的資源的網址。系統將顯示伴隨該資源一同顯示的標頭。如果您看到一個名為Via、Forwarded或Proxy-Connection的標頭，則表明代理伺服器已提供該資源。

縮減資源（HTML、CSS和JavaScript）的大小

https://developers.google.com/speed/docs/insights/MinifyResources

概覽

縮減資源大小是指刪除不必要的位元組（例如，多餘的空格、換行符和縮進）。壓縮HTML、CSS和JavaScript可提高下載、解析和執行的速度。此外，對於CSS和JavaScript，還可通過以下方式進一步縮小文件體積：在對HTML進行適當更新的過程中重命名變數名稱，以確保選擇器繼續運行。

建議

您應縮減HTML、CSS和JavaScript的大小。
要縮減HTML的大小，您可以使用PageSpeed Insights Chrome擴展功能來生成優化版HTML代碼。對HTML頁面進行分析，然後瀏覽「縮減HTML的大小」規則。點擊「查看經過優化的內容」，以獲取經過優化的HTML代碼。
要縮減CSS的大小，您可以嘗試使用YUI Compressor和cssmin.js。
要縮減JavaScript的大小，請嘗試使用Closure Compiler、JSMin或YUI Compressor。您可以創建一個使用這些工具的構建流程，以便縮減開發文件的大小並對其進行重命名，然後將其保存到正式版目錄。

https://www.google.com/search?q=css+instead+of+images

Using CSS instead of images when coding your web design

Why to use HTML and CSS instead of images

4 Ways for Using CSS Instead of Images for Design Effects