首頁 找知識 搜尋行銷. 【SEO技術】網頁速度最佳化技巧 – 減少HTTP Requests

【SEO技術】網頁速度最佳化技巧 – 減少HTTP Requests

網頁開啟速度是影響使用者感受非常重要的一個因素,也間接的影響了你的網站瀏覽量、轉換率。
一個龜速的網站,使用者是沒有耐心久留的!又尤其在這個行動裝置盛行的時代,越來越多的人是在移動中瀏覽網頁,網站的速度是網站經營者必須做好的一項功課!

先介紹兩個網頁速度測試工具:

Google PageSpeed

這是Google提供的網頁速度測試工具,不但會計算一個參考分數,更會提供該如何優化的提示說明,而且有中文喔!

WebPageTest

這個速度測試工具就較複雜一些囉~適合對於網站建置有一定認知的使用者,工具除了能夠選擇遠端測試的地區,更提供了非常詳細的頁面載入時間軸圖表

pagespeed-optimization-1

Google PageSpeed 從 20 分到 80 分的速度優化技巧

用過了速度測試工具之後,就能夠很清楚的知道拖慢網頁載入速度的問題出在哪裡囉!
其實影響著頁面載入速度的最重要的要素是 HTTP Requests,接著才是檔案大小

我們來看看一個網頁HTTP Requests很多的實際案例,載入速度為什麼會慢吧!

pagespeed-optimization-2

下圖是某個網站的 HTML 原始碼前段與使用 WebPageTest  工具產生的圖表

我們可以看到 HTML Document 前半段引用了許多現成 Framework,如 bootstrap、jQuery UI 等
這些組件都會產生 HTTP requests,並且是從 HTML Document 依照前後順序循序載入的

pagespeed-optimization-3

從上圖 WebPageTest 工具產生的圖表,可以看到網頁內容被載入的時間點,與每個內容載入了多久,範例當中的網站使用許多 Framework,又沒有將檔案整併,因此一個頁面開啟時需要載 48 隻 js 檔案與 22 隻 css 檔,光是 js 與 css 檔案加起來就高達了 70 個HTTP requests,佔據頁面開啟之後的 6 秒,這六秒可是黃金時間呀!!

pagespeed-optimization-4

接著下圖可以看到 6 秒之後才開始載入頁面的正文本與圖片
而這些圖檔有許多是小小的 icon

pagespeed-optimization-5

例如這個箭頭:

上述這個範例網站一共有兩個優化的重點:
1.減少 include file  HTTP Requests
2.將小 icon 圖檔合併使用 CSS Sprites

減少 include file 的 HTTP Requests
分為兩個方向:
1. 要將頁面當中沒有用到的 js 或 css 檔案就不應該載入,應該在 HTML 中將 include 的原始碼刪除。

2. 合併多個分開的 js 或 css 檔,或是將小型的 js 或 css 檔案內嵌在頁面當中(例如僅有10 行的檔案),並且<script> 標籤移至 </body> 前延後載入,css檔案則是在 <head>…</head>當中載入。

參考資料:移除禁止轉譯 JavaScript、為 CSS 傳送進行最佳化處理

將多個 icon 小圖示檔案合併為一張圖檔使用 CSS Sprites 方式
如果只有需要用到幾張的小圖也可以使用先前 awoo 部落格有介紹的 data URI scheme 方式

參考資料:CSS Image Sprites

 

原本的 HTTP Requests 共有 150 個,經過上面的調整之後剩下 47 個
大幅減低了 HTTP Requests 數量,頁面載入的效能就提升非常多囉!

關於 awoo SEO 關鍵字行銷誌

awoo SEO 網路行銷誌。在全球,搜尋引擎行銷已成為網路行銷最重要的工具。在台灣,搜尋引擎行銷已占了總體網路行銷廣告預算的二分之一。在過去,搜尋引擎行銷造就了Google, 改寫了大者恆大的商業秩序。在未來,搜尋引擎行銷將會用更不一樣的姿態, 走入我們生活的每個角落。

大家都在看

《數位時代的奧格威談廣告-聚焦消費洞察 解密品牌行銷》了解行銷的重點知識

《數位時代的奧格威談廣告-聚焦消費洞察 解密品牌行銷》了解行銷的重點知識

]“所有商業策略的目標,就是為了打動人心,而且「就像賽跑,你可以打破自己的紀錄,但如果別人跑得比你快,你還是會輸」” 這是這本書上寫著血淋淋的一段話,創意在這個數位時代裡似乎看來變得不那麼重要、對我看來今日更多人著重在數位廣告工具的使用技巧、廣告活動的投資回報速度、社群吸睛的搞怪花招…等等上頭,而忘記了行銷這件的”本質”和”原點”上頭了。

還想知道更多數位新知?快來訂閱 dcplus 關鍵分享報

您希望收到哪些資訊呢?