網頁版導覽列

br

2022-02-03T19:38:00+08:00

網站SEO提升-Javascript, CSS, Html等,減少不必要的request 次數

網站SEO提升

網站SEO提升-可以從Javascript, CSS, Html以及減少不必要的request 次數去著手,這裡有一些名詞的解釋擬人化之後,就會比較容易了解。以下紀錄的是目前姐妹淘部落格尚無法解決的SEO問題。這是使用天下無狗後的紀錄。


Javascript系列

Javascript產生內容檢查

Javascript 產生內容為什麼對SEO不好,想像一下你在街上看到一間你感興趣的商店,你走了進去結果店裡什麼都沒有,在店內四處摸索了一遍,最後向店員詢問有沒有賣***,結果店員才跑進倉庫把***搬出來給你看。這故事大概就是搜尋引擎爬蟲進到了你的網站的遭遇,雖然 Google 搜尋引擎很聰明,能夠爬取Javascript產生的內容,不過並非100% 都能被抓取到,抓取效率也沒有直接呈現來得高,而且有些搜尋引擎比較笨,甚至連向店員詢問都沒有,見到店內空空就轉頭走人囉。如果你的網站是內容型網站,建議絕對要把主要內容讓網頁載入的第一時間時就能呈現出來!就像是把店內主打商品給擺在最醒目的櫥窗!

Javascript 檔案過大(5個)

如同圖片檔案一樣,當 Javascript 的檔案過大時,會導致網頁讀取速度變慢,也有可能造成搜尋引擎無法完整的檢索網頁的內容。建議可以利用減少、合併、下移、壓縮等方式來優化頁面上的 JavaScript 。

Javascript 檔案過小(2個)

Javascript 檔案過小這個問題好比碰上了不會吐鈔票的繳費機,放了一千元鈔票下去,機器會像是你贏得了吃角子老虎大獎一樣吐了一大堆的硬幣給你,你得慢慢得拾取這些硬幣,而且好重呀!

JS檔案過小,對伺服器而言就是增加了伺服器請求,也會增加網路讀取往返的時間,影響效能,因此建議把小型的JS檔案與其他JS檔案合併成一個吧!

若真的只有一個小型JS檔案,又沒辦法與其他JS檔案合併,建議嵌入頁面當中(若其他頁面也需要依賴這些JS就不建議這麼做囉)

Javascript 數量(內部:23個/外部:25個,建議減少嵌入JS數量)

除了檔案過大的 JavaScript之外,數量過多的JavaScript 也是會影響網路速度的唷!因為每支Javascript檔案都代表著一次 request,就算Javascript 的檔案不大,同樣也會因為數量太多而增加 request 的次數,網頁速度就會被連帶拖慢了。

建議可以在不影響功能運作的情況下,適當把 JavaScript 合併,當前網頁用不到的 JavaScript 檔案就別載入了,才不會影響到網頁速度喔!若是大型網站的話,建議在初期就要規劃好各階層網頁和版面框架,才能有效合併、拆分 JavaScript 的檔案喔!

頁面載入完成時間(約5.17秒,頁面載入時間過長)

頁面載入完成時間,也就是網頁載入所需的平均時間。講白話點就是使用者點擊網址後,能夠看到完整網頁內容的時間。網頁速度太慢對於使用者和搜尋引擎來說都是相當扣分的!

有過上網經驗的人應該都能體會點擊網頁後,遲遲看不到內容的焦慮與不耐煩啊~ 最後也只能無奈按下右上角的叉叉關閉視窗囉。而搜尋引擎也會因為網頁速度過慢而無法抓取資料或抓取不完整導致網站排名受到嚴重地影響喔!建議可以參考 Google Pagespeed Insights 分析工具提高網頁速度喔~


頁面request數量(158個,建議減少至75個以下)

當瀏覽器想要呈現網頁內容,通常要先向伺服器索取「圖片」、「腳本」、「CSS」、「HTML」等資料,等伺服器回應後,瀏覽器才能接後續動作,而這樣往外部要求檔案的動作就稱為「request」。


當要求的「request」數量越多,就越會影響網路速度。就像拼圖一樣,當拼圖的塊數越多,完成的時間就會相對越久。根據Kissmetrics 研究顯示,47% 使用者希望在兩秒以內可以看到網頁,超過 40% 的使用者如果等候超過三秒便會放棄開啟網頁,所以建議排除掉不必要的 requests,例如:不必要的 CSS 檔案及 Javascript 檔案,以便維持網頁速度水準喔!

Javascript 載入時間(23個檔案載入過久)

Javascript 載入時間過長,會讓網頁速度過慢;影響之下,搜尋引擎可能會誤以為頁面不存在而略過檢索喔,想當然爾網站排名也會連帶受到影響囉!

Image 數量(內部:0個/外部:41個,建議減少外部圖片數量)

圖片數量過多會延長網頁開啟的時間,此時除了要擔心使用者沒耐心等待之外,還要煩惱搜尋引擎可能因為網頁開啟速度過慢,而略過檢索,那就會影響網站的排名了!

建議可以適當減少網頁中的圖片數量,有多個小型 Logo 也合併成一張圖片,就可以改善因為圖片過多而拖垮網頁速度的問題囉


CSS系列問題

PS.我CSS一共外部有7個,還算OK,只是1個過大、2個過小

CSS檔案過大

CSS過大最直接的影響就是頁面載入速度。

舉個例子,將一個CSS檔案想像成一部大貨車,上面滿載著五顏六色的油漆,今天的目的是要為一棟房子將牆面漆成白色,而貨車上大部分顏色的油漆其實都是用不到的,這時其實只要派出一輛載著足夠的白色油漆的小貨車就可以啦!

縮減CSS大小是一個巧妙的藝術,減少CSS大小的技巧如下:

減少重複定義

class重複使用

運用CSS簡寫(CSS SHORTHANDS)

減少換行

刪除最後一個分號

色碼縮寫,例如 #ffaacc 縮寫為 #fac

0px 縮寫為 0

使用工具壓縮CSS


若一份CSS已經用盡了上述技巧,但檔案仍然過大,那麼就應該依照網站頁面版型拆分CSS,不同版型載入相對應的CSS內容。


CSS 檔案過小

想像一下你去超商買東西,結帳時店員找了你20個壹元硬幣,內心應該會os:「幹嘛不找我兩個十元就好了?」


CSS過小就很像是20個壹元硬幣的例子,對伺服器而言就是20個伺服器請求,會增加網路讀取往返的時間,影響效能,因此建議把小型的CSS檔案與其他CSS檔案合併成一個吧!

若真的只有一個小型CSS檔案,又沒辦法與其他CSS檔案合併,那可以嵌入頁面當中(若其他頁面也需要依賴這些CSS就不建議這麼做囉)


主機回應時間(約339毫秒)

主機回應速度會影響搜尋引擎檢索和網站的收錄狀況。

當主機的回應速度越慢,搜尋引擎越沒有耐性爬取的喔~(別懷疑,它跟人一樣,耐性是有限度的!)當搜尋引擎減少爬取你網站的頻率,就會延遲收錄你網站所更新的內容。( 根據 Google PageSpeed Insights 的建議,伺服器主機回應時間應低於 200 毫秒。)

試想你是個餐廳的經營者,當顧客都因為你出餐速度太慢而不太常光顧的時候,又要如何能即時知道你換了新菜單、推出新菜色了呢?若是不希望自己的新商品明明比競爭對手早上架,卻因為主機回應速度過慢導致沒能搶在競爭對手前得到好的曝光的話,大家就得趕緊改善出菜的速度,縮短主機回應的時間喔!

HTML5 語意標籤

未設置:nav、article、section、address


網頁標題長度(46 字,建議少於 30 字元)

網頁標題就像是一本書的書名或新聞的標題,取名時力求精準吸睛,過長或過短都不好。

網頁標題過短,不容易傳達網頁資訊;網頁標題過長,多餘的字數就會被搜尋引擎吃掉,改以「...」呈現;或是直接替你更改標題內容喔。

就算你不在意精心撰寫的標題被截斷,好歹也要考量到SEO,標題過長可是會分散頁面與目標關鍵字的相關性的唷!建議中文字數30字以下,簡短有力的網頁標題,就是你網頁最親切迷人的招牌啦~

馬上加入姐妹淘粉絲團!最新美食話題都在這!

即時追蹤!第一手情報!
隱藏版美食消息不藏私

搜尋ID:@tao.idea
加入姐妹淘 美食一把罩