SEOER可以通過對網頁性能的速度測量和分析來獲取網頁上的大部分性能數據。如何根據這些數據采取適當的方法和手段來優化SEO的性能?
基于SEO優化的PC瀏覽器前端優化技術
前端優化策略很多,可以概括為網絡加載類、頁面呈現類、CSS優化類、javascript執行類、緩存類、圖像類、體系結構協議類等。
網絡加載類
1、減少HTTP資源請求的數量
百度和谷歌官員在他們的搜索優化指南中反復強調盡可能多地合并HTTP請求。在前端頁面中,通常建議盡量合并靜態資源圖片、javascript或css代碼,以減少頁面請求數量和資源請求消耗,從而縮短初次訪問頁面的用戶的等待時間。通過構建工具合并圖像、CSS、javascript和其他文件可以減少HTTP資源請求的數量。此外,我們應該盡努力避免重復資源和增加冗余請求。
2、減小HTTP請求大小
除了減少HTTP資源請求的數量,我們還應該小化每個HTTP請求的大小。例如,可以使用減少不必要的圖片、javascript、css和html代碼、優化文件壓縮或使用gzip壓縮傳輸內容來減少文件大小和縮短網絡傳輸等待時間。特別是百度閃電算法之后,對網站的訪問速度也有要求。
3、將css或javascript放在外部文件中,避免直接使用<style>或<script>標記。
在HTML文件中引用外部資源可以有效地利用瀏覽器的靜態資源緩存,但有時在簡單的移動頁面css或javascript的情況下,為了減少請求,css或javascript會直接寫入HTML,具體根據css或javascript文件的大小和業務場景而定。如果css或javascript文件的內容更多,業務邏輯更復雜,建議將其引入外部文件。
<linkrel=“stylesheet”href=“//cdn.domain.com/path/main.css”><scriptsrc=“//cdn.domain.com/path/main.js”><script>
4、避免空心Href和SRC
當<link>標記的href屬性為空或<script>、<img>和<iframe>標記的src屬性為空時,瀏覽器在渲染過程中仍會加載href屬性或src屬性的空內容,直到加載失敗,從而阻止頁面中其他資源的下載過程,加載的內容。是無效的,所以應該盡量避免。
<imgsrc=“”alt=“photo”>ahref=“>單擊鏈接</a>
5、為HTML指定Cache-Control或Expires
為HTML內容設置Cache-Control或Expires可以將HTML內容緩存起來,避免頻繁向服務器端發送請求。在頁面Cache-Control或Expires頭部有效時,瀏覽器將直接從緩存中讀取內容,不向服務器端發送請求。
<metahttp-equiv="Cache-Control"content="max-age=7200"/><metahttp-equiv="Expires"content="Mon,20Jul201623:00:00GMT"/>
6、合理設置Etag和Last-Modified
合理設置Etag和Last-Modified使用瀏覽器緩存,對于未修改的文件,靜態資源服務器會向瀏覽器端返回304,讓瀏覽器從緩存中讀取文件,減少Web資源下載的帶寬消耗并降低服務器負載。
<metahttp-equiv="last-modified"content="Mon,03Oct201714:45:57GMT"/>
7、減少頁面重定向
頁面每次重定向都會延長頁面內容返回的等待延時,一次重定向大約需要600毫秒的時間開銷,為了保證用戶盡快看到頁面內容,要盡量避免頁面重定向。
8、使用靜態資源分域存放來增加下載并行數
瀏覽器在同一時間向同一個域名請求文件的并行下載數是有限的,因此可以利用多個域名的主機來存放不同的靜態資源,增大頁面加載時資源的并行下載數,縮短頁面資源加載的時間。通常根據多個域名來分別存儲JavaScript、CSS和圖片文件。
<linkrel="stylesheet"href="//cdn1.domain.com/path/main.css"><scriptsrc="//cdn2.domain.com/path/main.js"></script>
9、使用靜態資源CDN來存儲文件
如果條件允許,可以利用CDN網絡加快同一個地理區域內重復靜態資源文件的響應下載速度,縮短資源請求時間。
10、使用CDNCombo下載傳輸內容
CDNCombo是在CDN服務器端將多個文件請求打包成一個文件的形式來返回的技術,這樣可以實現HTTP連接傳輸的一次性復用,減少瀏覽器的HTTP請求數,加快資源下載速度。例如同一個域名CDN服務器上的a.js,b.js,c.js就可以按如下方式在一個請求中下載。
<scriptsrc="//cdn.domain.com/path/a.js,b.js,c.js"></script>