成長駭客 速度 部落格 加速你的部落格,從慎選外掛程式開始做起 by Vista Cheng 2月 01, 2018 URL Copied 本文作者Wayne Fu,研究最深入的主題為 Blogger ,同時也鑽研許多有關網路、雲端的應用心得。感謝授權轉載,特此申謝。相信重視 SEO 的站長和部落客,會特別關注網頁的載入速度,因為載入速度是 Google 的排名評分項目之一。之前曾寫過「網站效能」的系列文章,有興趣的站長可以分別去了解不同的主題要如何處理。由於提升「網頁載入速度」的詢問度一直很高,以往就算請讀者看這些相關文章,一段時間後還是可能回頭問一樣的問題。因此本篇決定整理出比較簡單、清楚的判斷流程,讓站長們可以自行健檢,決定哪些會拖慢網站速度的外掛需要移除。一、影響網頁速度的關鍵由於科技進步太快,現在的電腦、行動裝置效能之好,已經讓我們輕易地排除影響網頁速度的因素。以往 Javascript 的執行效能可能會因為 CPU、瀏覽器的解譯引擎而有所影響,但現在大部分使用者的強大 CPU、記憶體容量、瀏覽器新版本,讓 JS 可以一瞬間就執行完畢。甚至某些 CSS3 還可能需要比 JS 花費更多的 CPU 運算。現在網頁的執行,多半是在等待網路傳輸的時間,也就是各種 HTTP 請求:圖片網址外連 JS 網址外連 CSS 網址Iframe 外連網址總之,在範本中看到很多 JS 不用太緊張,有看到 HTTP 開頭的網址字串才需要學著辨別(註1),是否這個外連、外掛需要移除?需要注意的是,「A標籤」也有 HTTP 連結,但這是點擊後才會連往他處網站,不代表要在我們網站載入這個 HTTP 連結的內容,所以不會影響網頁速度。註1:不是每個網址都會以 HTTP 開頭,網址的表示方式還有相對網址(例如以斜線 "/" 開頭是其中一種),也可以雙斜線 "//" 開頭,這也增加了新手辨識的困難。二、影響載入速度的層次以下由輕微到嚴重,說明影響網站載入速度的因素:1. 超連結也就是前面提到的 A 標籤,不影響網頁速度。既然不影響,為何要特別提出呢?因為之後會提到外掛的替代方案,讓讀者先有個印象。2. 使用 CDN 的 HTTP 請求有提供 CDN(Content delivery network)服務的 HTTP 請求,會自動找到全球距離訪客最近的節點伺服器,能夠減少一大段網路傳輸距離、時間。對於 Blogger 平台的使用者而言,透過CDN會產生很大的優勢。根據Google官方論壇「Loading speed and page optimization questions」,如果是透過 Google 的 CDN 存放 Blogger 平台的資料,網站的存取速度絕對比其他部落格都快。3. 非 CDN 的 HTTP 請求沒有 CDN 的 HTTP 請求,就回歸到正常的網路傳輸,跟伺服器主機的反應速度,還有經過的國家、節點數量也都會有影響。建議部落格要使用的各種外連,例如 JS/CSS/圖片,最好都有 CDN 服務能提供,否則網頁開啟速度會受到很大影響。基本上 WFU BLOG 近幾年來介紹的外掛,都是以 CDN 外連為主,就是這個原因。4. 有用到 IFRAME 的外掛這點不容易分辨的原因是,需要開啟「Chrome 開發人員工具」才能檢查這個外掛有沒有在網頁上產生 IFRAME。簡單舉個例子,像是AdSense 廣告、Facebook讚按鈕、Google 地圖,這些都會產生 IFRAME。為何 IFRAME 比一般 JS 外連影響大呢?因為 IFRAME 代表載入一整個 HTTP 網址,裡面的內容有可能包山包海,也可能另外執行了好幾個 JS 外連,載入多個圖片、影音檔等。最好的例子是 AdSense 廣告,用 Chrome 開發人員工具看一下,就知道很精彩。所以只要網站少放幾個 AdSense 廣告,就能有感提升網頁效能。三、評估外掛是否移除有了以上概念後,可評估看看一些部落格常用的外掛,需不需要移除,或是有沒有更好的替代方案。1. 沒有 HTTP 外連的外掛過去有很多人提問,擔心某某外掛會不會影響速度。其實被詢問的那些外掛根本沒有 HTTP 外連,但要一般使用者分辨有無 HTTP 外連,的確沒那麼容易。其實有一個比較簡單的判別方式:這個外掛是否需要取得外部資料來顯示?以下列出幾個比較常見,沒有 HTTP 請求,所以不會影響速度的外掛:讓部落格導覽列選單能浮動置頂Blogger導覽列下拉選單﹍安裝懶人包快速回到網頁上方 Go Top 按鈕 + 各種動畫效果Blogger 樹狀標籤 V2.0Blogger 數字分頁導覽 → 如果知道怎麼把 JS 塞在範本中的話,這個外掛就沒有 HTTP 請求2. 社群分享按鈕很多網站會安裝類似 AddThis 這樣的社群分享按鈕外掛,如果以減少 HTTP 請求為前提的話,是完全可以不用安裝這類外掛的。以 Blogger 為例,可參考這篇「改造 Blogger 官方分享按鈕」,在網站擺放超連結形式的社群分享按鈕,完全不需要使用外掛。3. 相關文章外掛相關文章是部落格很重要的外掛,擺放在文末處可以有效提高讀者的黏著度、停留時間。很多網站會裝 LinkWithin 或是 AdSense 推出的相關文章外掛,這些外掛內容比較複雜,速度也會慢一些。因為取得自己網站相關文章的資訊,其實來自於自己的網域,以 Blogger 為例,可以改用以下外掛,速度更快:使用縮圖的「Blogger 相關文章 V2」純文字顯示的「Blogger 延伸閱讀小工具」速度更快的原因來自於程式碼沒那麼複雜,而且 HTTP 請求是 Blogger 伺服器,有 CDN 。4. 讚按鈕是否擺放讚按鈕外掛,需要根據自己網站的特性進行評估。以 WFU 網站為例,經過長時間觀察後,發現很少有讀者會在網站上按讚,多半是分享到 FB 時才會按,因此本站採取不擺放任何讚、+1 按鈕。但分享按鈕則是必須的,參考「2. 社群分享按鈕」的方式進行即可。5. 留言板外掛其實各種留言板外掛都很龐大,無論是 Facebook 、 Google+ 、 Disqus 都一樣。這一項依然請站長根據自己網站的特性進行評估,確定留言板外掛的使用量,會比原生留言板來得大,再考慮留下。其實部落格的原生留言板,除了速度快,還擁有任何外掛都無法比擬的 SEO 優點,因此WFU站只擺放 Blogger 官方留言板,可參考這篇「Blogger 官方留言板的優點及妙用﹍加強 SEO 搜尋排名」。6. 側邊欄外掛官方的標籤工具最新文章最新留言熱門文章以上這幾個都是常見的側邊欄外掛,都是讀取自己網站的資料,也就是送出 Blogger 伺服器的 HTTP 請求。如前所提,Blogger 伺服器有 CDN,反應、傳輸速度都是很快的,有相關需求的站長,可不必特地移除這類外掛。7. 有 CDN 的 HTTP 外連除了確定是讀取 Blogger 網域資料的外掛,其他的都會是外部 HTTP 請求,那麼使用這些外連時,無論是 JS/CSS,務必先尋找有沒有 CDN 服務,才能加快傳輸速度。以下提供一些常見、有 CDN 外連的項目:最熱門的圖片輪播外掛 Owl CarouselFont Awesome 圖示字型Fancybox 燈箱外掛jQuery 框架Bootstrap 框架8. 其他 HTTP 請求的外掛除了以上,就剩下 IFRAME 跟沒有 CDN 的外掛了(如果你真的找不到 CDN 的話)。如前所提,IFRAME 載入的東西太多,可先評判是否移除有 IFRMAE 的外掛,其次才是沒有 CDN 的外掛。請考慮這些剩下的外掛,其功能性、必要性是否大到不能割捨。如果是的話,就安心使用、放下效能的執著吧,畢竟還是會有某些事比速度更重要!★ 本文作者Wayne Fu,研究最深入的主題為Blogger,同時也鑽研許多有關網路、雲端的應用心得。感謝授權轉載,特此申謝。★ 圖片來源:Pixabay★ 提升你的內容力,請別錯過《內容力:打造品牌的超能力》線上課程★ 內容駭客系列講座(CHL4):為你的內容建立行動召喚 [現正報名中]★ 內容駭客讀書會:內容的力量:不販賣商品!用「內容行銷」讓客人自己找上門![現在報名中] 分享 取得連結 Facebook Twitter Pinterest 以電子郵件傳送 其他應用程式 張貼留言 留言
相信重視 SEO 的站長和部落客,會特別關注網頁的載入速度,因為載入速度是 Google 的排名評分項目之一。之前曾寫過「網站效能」的系列文章,有興趣的站長可以分別去了解不同的主題要如何處理。
由於提升「網頁載入速度」的詢問度一直很高,以往就算請讀者看這些相關文章,一段時間後還是可能回頭問一樣的問題。因此本篇決定整理出比較簡單、清楚的判斷流程,讓站長們可以自行健檢,決定哪些會拖慢網站速度的外掛需要移除。
一、影響網頁速度的關鍵
由於科技進步太快,現在的電腦、行動裝置效能之好,已經讓我們輕易地排除影響網頁速度的因素。以往 Javascript 的執行效能可能會因為 CPU、瀏覽器的解譯引擎而有所影響,但現在大部分使用者的強大 CPU、記憶體容量、瀏覽器新版本,讓 JS 可以一瞬間就執行完畢。甚至某些 CSS3 還可能需要比 JS 花費更多的 CPU 運算。
現在網頁的執行,多半是在等待網路傳輸的時間,也就是各種 HTTP 請求:
總之,在範本中看到很多 JS 不用太緊張,有看到 HTTP 開頭的網址字串才需要學著辨別(註1),是否這個外連、外掛需要移除?
需要注意的是,「A標籤」也有 HTTP 連結,但這是點擊後才會連往他處網站,不代表要在我們網站載入這個 HTTP 連結的內容,所以不會影響網頁速度。
註1:不是每個網址都會以 HTTP 開頭,網址的表示方式還有相對網址(例如以斜線 "/" 開頭是其中一種),也可以雙斜線 "//" 開頭,這也增加了新手辨識的困難。
二、影響載入速度的層次
以下由輕微到嚴重,說明影響網站載入速度的因素:
1. 超連結
也就是前面提到的 A 標籤,不影響網頁速度。
既然不影響,為何要特別提出呢?因為之後會提到外掛的替代方案,讓讀者先有個印象。
2. 使用 CDN 的 HTTP 請求
有提供 CDN(Content delivery network)服務的 HTTP 請求,會自動找到全球距離訪客最近的節點伺服器,能夠減少一大段網路傳輸距離、時間。
對於 Blogger 平台的使用者而言,透過CDN會產生很大的優勢。根據Google官方論壇「Loading speed and page optimization questions」,如果是透過 Google 的 CDN 存放 Blogger 平台的資料,網站的存取速度絕對比其他部落格都快。
3. 非 CDN 的 HTTP 請求
沒有 CDN 的 HTTP 請求,就回歸到正常的網路傳輸,跟伺服器主機的反應速度,還有經過的國家、節點數量也都會有影響。
建議部落格要使用的各種外連,例如 JS/CSS/圖片,最好都有 CDN 服務能提供,否則網頁開啟速度會受到很大影響。
基本上 WFU BLOG 近幾年來介紹的外掛,都是以 CDN 外連為主,就是這個原因。
4. 有用到 IFRAME 的外掛
這點不容易分辨的原因是,需要開啟「Chrome 開發人員工具」才能檢查這個外掛有沒有在網頁上產生 IFRAME。
簡單舉個例子,像是AdSense 廣告、Facebook讚按鈕、Google 地圖,這些都會產生 IFRAME。
為何 IFRAME 比一般 JS 外連影響大呢?因為 IFRAME 代表載入一整個 HTTP 網址,裡面的內容有可能包山包海,也可能另外執行了好幾個 JS 外連,載入多個圖片、影音檔等。
最好的例子是 AdSense 廣告,用 Chrome 開發人員工具看一下,就知道很精彩。所以只要網站少放幾個 AdSense 廣告,就能有感提升網頁效能。
三、評估外掛是否移除
有了以上概念後,可評估看看一些部落格常用的外掛,需不需要移除,或是有沒有更好的替代方案。
1. 沒有 HTTP 外連的外掛
過去有很多人提問,擔心某某外掛會不會影響速度。其實被詢問的那些外掛根本沒有 HTTP 外連,但要一般使用者分辨有無 HTTP 外連,的確沒那麼容易。
其實有一個比較簡單的判別方式:這個外掛是否需要取得外部資料來顯示?
以下列出幾個比較常見,沒有 HTTP 請求,所以不會影響速度的外掛:
2. 社群分享按鈕
很多網站會安裝類似 AddThis 這樣的社群分享按鈕外掛,如果以減少 HTTP 請求為前提的話,是完全可以不用安裝這類外掛的。
以 Blogger 為例,可參考這篇「改造 Blogger 官方分享按鈕」,在網站擺放超連結形式的社群分享按鈕,完全不需要使用外掛。
3. 相關文章外掛
相關文章是部落格很重要的外掛,擺放在文末處可以有效提高讀者的黏著度、停留時間。
很多網站會裝 LinkWithin 或是 AdSense 推出的相關文章外掛,這些外掛內容比較複雜,速度也會慢一些。
因為取得自己網站相關文章的資訊,其實來自於自己的網域,以 Blogger 為例,可以改用以下外掛,速度更快:
速度更快的原因來自於程式碼沒那麼複雜,而且 HTTP 請求是 Blogger 伺服器,有 CDN 。
4. 讚按鈕
是否擺放讚按鈕外掛,需要根據自己網站的特性進行評估。
以 WFU 網站為例,經過長時間觀察後,發現很少有讀者會在網站上按讚,多半是分享到 FB 時才會按,因此本站採取不擺放任何讚、+1 按鈕。
但分享按鈕則是必須的,參考「2. 社群分享按鈕」的方式進行即可。
5. 留言板外掛
其實各種留言板外掛都很龐大,無論是 Facebook 、 Google+ 、 Disqus 都一樣。這一項依然請站長根據自己網站的特性進行評估,確定留言板外掛的使用量,會比原生留言板來得大,再考慮留下。
其實部落格的原生留言板,除了速度快,還擁有任何外掛都無法比擬的 SEO 優點,因此WFU站只擺放 Blogger 官方留言板,可參考這篇「Blogger 官方留言板的優點及妙用﹍加強 SEO 搜尋排名」。
6. 側邊欄外掛
以上這幾個都是常見的側邊欄外掛,都是讀取自己網站的資料,也就是送出 Blogger 伺服器的 HTTP 請求。
如前所提,Blogger 伺服器有 CDN,反應、傳輸速度都是很快的,有相關需求的站長,可不必特地移除這類外掛。
7. 有 CDN 的 HTTP 外連
除了確定是讀取 Blogger 網域資料的外掛,其他的都會是外部 HTTP 請求,那麼使用這些外連時,無論是 JS/CSS,務必先尋找有沒有 CDN 服務,才能加快傳輸速度。
以下提供一些常見、有 CDN 外連的項目:
8. 其他 HTTP 請求的外掛
除了以上,就剩下 IFRAME 跟沒有 CDN 的外掛了(如果你真的找不到 CDN 的話)。
如前所提,IFRAME 載入的東西太多,可先評判是否移除有 IFRMAE 的外掛,其次才是沒有 CDN 的外掛。請考慮這些剩下的外掛,其功能性、必要性是否大到不能割捨。
如果是的話,就安心使用、放下效能的執著吧,畢竟還是會有某些事比速度更重要!
★ 本文作者Wayne Fu,研究最深入的主題為Blogger,同時也鑽研許多有關網路、雲端的應用心得。感謝授權轉載,特此申謝。
★ 圖片來源:Pixabay
★ 提升你的內容力,請別錯過《內容力:打造品牌的超能力》線上課程
★ 內容駭客系列講座(CHL4):為你的內容建立行動召喚 [現正報名中]
★ 內容駭客讀書會:內容的力量:不販賣商品!用「內容行銷」讓客人自己找上門![現在報名中]
留言
張貼留言