域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

網(wǎng)站速度不僅影響用戶(hù)體驗(yàn)，也影響Google robot對(duì)網(wǎng)站的爬取，進(jìn)而影響網(wǎng)站收錄;所以網(wǎng)站速度對(duì)于SEO的重要性不可小覷。Google Page Speed 主要用于分析檢測(cè)頁(yè)面加載速度和元素，提出建議。技術(shù)人員從而可以依據(jù)Page Speed的要點(diǎn)來(lái)修正和提高網(wǎng)頁(yè)網(wǎng)站的質(zhì)量。對(duì)于網(wǎng)頁(yè)需要改進(jìn)的地方，PageSpeed不僅提供了優(yōu)化建議，甚至還直接把優(yōu)化的最終結(jié)果都給提供出來(lái)。

Page speed來(lái)自于Google，可以下載插件安裝在Firefox或Chrome上。插件一般都是英文版，F(xiàn)irefox也有中文版本，但缺乏詳細(xì)解釋。這里先把主要檢測(cè)事項(xiàng)的中英文對(duì)比出來(lái)。然后針對(duì)細(xì)致的項(xiàng)進(jìn)行解釋并盡可能提供技術(shù)上操作說(shuō)明。也可以用另一種方法，直接用Googlehttps://developers.google.com/speed/pagespeed/insights 網(wǎng)站性能檢測(cè)工具檢測(cè)網(wǎng)站需要優(yōu)化的細(xì)節(jié)。

今天我將介紹JavaScript和CSS優(yōu)化相關(guān)要點(diǎn)，所有的整理資料都是來(lái)自于falconhan。

一、壓縮JavaScript (Minify JavaScript)

壓縮JavaScript的方法跟壓縮HTML和壓縮CSS在本質(zhì)上的好處是一樣的。一般的方式就是3種：壓縮多余的空格和換行符;刪除注釋;把較長(zhǎng)的變量名稱(chēng)和過(guò)程名稱(chēng)統(tǒng)一替換為很短的名稱(chēng)。

壓縮工具也有很多，之前提到的YUI Compressor就可以執(zhí)行。

Google/Gtmetrix有一句話看不懂，We recommend minifying any JS files that are 4096 bytes or larger in size. You should see a benefit for any file that can be reduced by 25 bytes or more。意思是盡可能壓縮4K意思的JS文件，所獲好處是文件可以被縮減25個(gè)字節(jié)或以上。猜測(cè)原因是緩存器的容量是4K，如果JS超過(guò)此大小將不會(huì)放入緩存中?

另外不確定的是，可被縮減的25bytes的文件是JS本身還是指其它文件，why? 高手請(qǐng)指示一二…………….

二、合并外部JavaScript (Combine external JavaScript)

合并外部的JavaScript文件，跟合并外部CSS是類(lèi)似的原理，都能夠有效減少往返時(shí)間(RTT)及在下載其它資源時(shí)減少延遲。過(guò)多的JS和CSS文件會(huì)導(dǎo)致過(guò)度的HTTP開(kāi)銷(xiāo)，簡(jiǎn)單有效的處理方式就是將外部的JS文件簡(jiǎn)化后再合并。

關(guān)于外部JavaScript的使用，有一些建議：

將頁(yè)面的JavaScript分割為2個(gè)文件，一個(gè)包含那些必須的代碼，這樣在頁(yè)面加載之初會(huì)率先調(diào)用。另一個(gè)就是可以等到其它HTML內(nèi)容都加載完再調(diào)用的JS。在頁(yè)面的之前使用的JavaScript，盡可能將其簡(jiǎn)化，這樣能避免加載和解析時(shí)間過(guò)長(zhǎng)而阻止其它內(nèi)容能快速展現(xiàn)。將那些極少被大多數(shù)頁(yè)面使用到的JavaScript代碼，放置在獨(dú)立的文件中，這樣可避免多數(shù)頁(yè)面不要調(diào)用它而浪費(fèi)時(shí)間。對(duì)于那些不需要緩存的小段的JavaScript代碼，考慮將其放在HTML頁(yè)面代碼當(dāng)中。JS在頁(yè)面中放置的位置也有講究的，重要的內(nèi)容優(yōu)先展示是基本原則，還要考慮到JS或其它資源的并行下載以進(jìn)一步節(jié)省時(shí)間。

三、內(nèi)嵌小型 JavaScript (Inline small JavaScript)

內(nèi)嵌小型JavaScript能夠節(jié)省JS請(qǐng)求所導(dǎo)致的服務(wù)器請(qǐng)求/響應(yīng)時(shí)間開(kāi)銷(xiāo)。就是對(duì)于小段的JS代碼，直接嵌入在頁(yè)面中會(huì)比單獨(dú)的外部調(diào)用會(huì)好一些。但是更理想的解決方法是將小段JS整合起來(lái)再進(jìn)行外部調(diào)用，參見(jiàn)合并外部的JavaScript。從節(jié)省時(shí)間的角度來(lái)考慮，JavaScript代碼跟CSS用法類(lèi)似，僅用于某個(gè)特效的小段代碼可以寫(xiě)入在頁(yè)面里，用于多個(gè)地方的JS可以合并來(lái)外部調(diào)用。

四、優(yōu)化樣式表和腳本的排列順序 (Optimize the order of styles and scripts)

正確地部署外部樣式和不管內(nèi)外的Scripts腳本，能夠合理并行下載資源，從而縮減瀏覽器對(duì)頁(yè)面進(jìn)行渲染的時(shí)間。由于JavaScript能夠改變網(wǎng)頁(yè)的內(nèi)容和樣式布局等，瀏覽器在遇到j(luò)s時(shí)就會(huì)延遲執(zhí)行渲染任何內(nèi)容，而讓位于先下載、解析和執(zhí)行Script腳本內(nèi)容。然而，比請(qǐng)求的時(shí)間更重要的是，瀏覽器在碰到Script時(shí)，其它資源沒(méi)辦法并行下載處理，會(huì)導(dǎo)致頁(yè)面停頓，可能影響用戶(hù)體驗(yàn)。

關(guān)于樣式表和腳本之間的順序關(guān)系，有幾個(gè)推薦的處理順序，一是盡可能把頁(yè)面的重要內(nèi)容在腳本和樣式表前先加載，二是外部的腳本放在外部的樣式之后，三是把內(nèi)部的腳本放在所以其它內(nèi)容之后。

五、壓縮CSS (Minify CSS)

壓縮CSS和壓縮JS是一個(gè)道理，就是減少文件體積提高下載速度，瀏覽器在解析和執(zhí)行CSS的時(shí)候也能提高速度。一個(gè)可用的工具是 YUI Compressor。

CSS自己壓縮也可以，有一些方法，如使用CSS縮寫(xiě)塊狀間隔，

” padding-top:5px

padding-right:6px

padding-bottom:7px

padding-left:8px”

可以縮寫(xiě)為 padding:5px 6px 7px 8px;

每?jī)晌坏念伾刀家粯涌珊?jiǎn)寫(xiě)，#aabb11 可寫(xiě)為 #ab1

去掉沒(méi)必要的空格、換行、注釋?zhuān)サ魶](méi)必要的字體選項(xiàng)等。

六、去掉無(wú)用的CSS (Remove unused CSS)

PageSpeed告訴你，當(dāng)前頁(yè)面里面有多少CSS樣式是沒(méi)有被用到的，去掉它們可以進(jìn)一步加快瀏覽器對(duì)CSS的解析量，提供整個(gè)頁(yè)面的加載速度。

很多網(wǎng)站的做法都是大部分頁(yè)面會(huì)沿用統(tǒng)一的CSS文件，這樣在管理上比較容易些。但會(huì)導(dǎo)致了很多樣式并不會(huì)被頁(yè)面中的元素所使用，對(duì)單頁(yè)面來(lái)講造成一定的資源冗余。PageSpeed雖然把每個(gè)沒(méi)有被當(dāng)前頁(yè)用到的CSS樣式都列出來(lái)，但覺(jué)得這個(gè)實(shí)際的指導(dǎo)意義不夠明顯，因?yàn)椋瑸槊總€(gè)頁(yè)單獨(dú)配一個(gè)CSS文件顯得特二。

最好的處理辦法是盡可能把CSS進(jìn)行分類(lèi)管理，比如針對(duì)不同頻道頁(yè)的(模板可能不同)，針對(duì)圖片形式的，針對(duì)表格的等，不同的頁(yè)面會(huì)調(diào)用到不同的CSS。如果在建站時(shí)就規(guī)劃好，這種方法就能兼顧C(jī)SS精簡(jiǎn)和管理上的便利。還有一點(diǎn)需要注意，就是在”合并外部的CSS”這個(gè)優(yōu)化選項(xiàng)里提到的，多個(gè)較小的CSS應(yīng)該合并到一個(gè)文件里以減少HTTP請(qǐng)求量，或者使用內(nèi)聯(lián)樣式。

七、內(nèi)嵌小型CSS (Inline small CSS)

將CSS代碼進(jìn)行外部調(diào)用是有好處的(最主要是方便統(tǒng)一管理)，但是不能盲目地把所有CSS都改為外部調(diào)用。把一些小型(片段或體積不大)的CSS代碼嵌入在頁(yè)面HTML里，讓瀏覽器直接下載解析，可以減少服務(wù)器請(qǐng)求/應(yīng)答的時(shí)間開(kāi)銷(xiāo)，從而加快頁(yè)面的加載速度。另外也可以把小型CSS都聚合為較大的單個(gè)CSS文件，再進(jìn)行外部調(diào)用。

Google Pagespeed光說(shuō)小型CSS，但到底體積大小是多少才算小。。。一說(shuō)是768bytes，另外從某人試驗(yàn)中(基于Apache)得出另一個(gè)結(jié)論：體積小于2K(2046 bytes)的CSS代碼算是小型，可以節(jié)省整體時(shí)間。以上2個(gè)說(shuō)法都可作為參考，實(shí)際情況還需要進(jìn)行測(cè)試，但小于768的就肯定適合去合并外調(diào)或內(nèi)聯(lián)使用。

八、合并外部的CSS (Combine external CSS)

合并外部樣式表文件，能夠減少往返時(shí)間(RTT)及在下載其它資源時(shí)減少延遲。外部過(guò)多的JS和CSS文件會(huì)導(dǎo)致過(guò)度的HTTP開(kāi)銷(xiāo)，簡(jiǎn)單處理方式就是合并，最好不要超過(guò)3個(gè)CSS文件的調(diào)用。

關(guān)于CSS的使用上，有一些建議：

將CSS分割為2個(gè)文件，一個(gè)是包含必須的樣式，就是在頁(yè)面加載之初會(huì)影響視覺(jué)效果的。另一個(gè)就是可以等到其它HTML內(nèi)容都加載完再調(diào)用的。

對(duì)于那些不常被大多數(shù)頁(yè)面用到的CSS樣式，考慮放入到單獨(dú)文件(比如有些表格樣式CSS，只針對(duì)某些頁(yè)面有效)。而對(duì)于那些只是對(duì)某個(gè)元素應(yīng)用的CSS，則推薦使用內(nèi)聯(lián)樣式。不要在CSS里使用 @import 來(lái)再調(diào)用其它的CSS，要么合并到主CSS里，要么單獨(dú)再外部調(diào)用一次。

九、使用高效的CSS選擇符 (Use efficient CSS selectors)

使用高效的CSS選擇符能夠加速頁(yè)面展現(xiàn)，盡可能避免使用那些能夠匹配很多元素的選擇符。當(dāng)瀏覽器在解析HTML時(shí)，先把CSS樣式表中指定的元素，根據(jù)標(biāo)準(zhǔn)CSS重疊和順序規(guī)則，建造為所有元素展現(xiàn)的結(jié)構(gòu)文檔樹(shù)。在火狐瀏覽器里(其它類(lèi)似)，樣式渲染器將為每個(gè)元素，按照從右到左的規(guī)則進(jìn)行匹配(最右邊的選擇符叫做”Key”)，為所有元素找到渲染的次序規(guī)則。

越少的CSS規(guī)則將會(huì)使用更少的時(shí)間。因此，對(duì)于CSS樣式來(lái)講，最好就先刪除沒(méi)用的CSS，然后將應(yīng)用了大量CSS規(guī)則的元素作優(yōu)化。以下是一些來(lái)自David Hyatt的針對(duì)高效CSS的建議：

避免使用通配規(guī)則(*)，星號(hào)這種通配符就盡量少或不用，對(duì)頁(yè)面的渲染影響比較大，直接用ID、類(lèi)和標(biāo)簽選擇符比較好。不要限定ID選擇符，文檔中ID就是唯一的，沒(méi)必要像這樣：div#top{} ，直接就用#top{}就可以。不要限定類(lèi)選擇符，比如，將 li.cnt{} 更改為 .li-cnt{}。規(guī)則具體化，避免長(zhǎng)串選擇符，最好不要出現(xiàn) div ul li a{} 類(lèi)似的選擇符，建議直接用 .li-anchor{}，避免使用偽類(lèi)選擇符(Pseudo-Class)，其開(kāi)銷(xiāo)很高。避免使用子選擇符，如果有像#toc>li>a這樣的基于標(biāo)簽的子選擇符，那么應(yīng)該使用一個(gè)類(lèi)來(lái)關(guān)聯(lián)標(biāo)簽元素，如.toc-anchor。用類(lèi)選擇符來(lái)代替子選擇符。比如你需要給兩個(gè)列表來(lái)使用不同的樣式：

ul li {color: blue;}

ol li {color: red;}

可以將其改為2個(gè)類(lèi)

.unordered-list-item {color: blue;}

.ordered-list-item {color: red;}

十、將CSS放在文檔標(biāo)頭處 (Put CSS in the document head)

對(duì)于外部CSS文件，瀏覽器會(huì)將其完全下載再對(duì)頁(yè)面進(jìn)行解析。內(nèi)聯(lián)CSS樣式(在< style >里)也會(huì)導(dǎo)致回溯和重解析。因此，建議把所有樣式都放到外部CSS文件里，再將其放在頭部來(lái)確保頁(yè)面打開(kāi)時(shí)就先下載，有助于加速頁(yè)面展現(xiàn)。

HTML 4.01規(guī)范里也建議把CSS都放到里，用Link來(lái)調(diào)用，而不要用@import來(lái)調(diào)用。百度統(tǒng)計(jì)工具中的“網(wǎng)站速度診斷”功能里也有相應(yīng)的建議：CSS說(shuō)明出現(xiàn)在之后，會(huì)導(dǎo)致頁(yè)面重新渲染，降低網(wǎng)站打開(kāi)速度。解決方法不難，查一遍可能存在的< style >標(biāo)簽，挪到之前。

十一、避免在 CSS 中使用 @import (Avoid CSS @import)

在外部的CSS文件中使用@import會(huì)使得頁(yè)面在加載時(shí)增加額外的延遲。雖然規(guī)則允許在樣式中調(diào)用@import來(lái)導(dǎo)入其它的CSS，但瀏覽器不能并行下載樣式，就會(huì)導(dǎo)致頁(yè)面增添了額外的往返耗時(shí)。比如，第一個(gè)CSS文件first.css包含了以下內(nèi)容：@import url(“second.css”)。那么瀏覽器就必須先把first.css下載、解析和執(zhí)行后，才發(fā)現(xiàn)及處理第二個(gè)文件second.css。

簡(jiǎn)單的解決方法是使用標(biāo)記來(lái)替代@import，比如下面的寫(xiě)法就能夠并行下載css文件，從而加快頁(yè)面加載速度：

注意的是之前文章提到過(guò)一個(gè)頁(yè)面中的CSS文件不宜過(guò)多，否則應(yīng)該簡(jiǎn)化及合并外部的CSS (Combine external CSS) 以節(jié)省往返請(qǐng)求時(shí)間(RTT)。

十二、將圖片組合為 CSS 貼圖定位 (Combine images using CSS sprites)

使用CSS貼圖定位，也叫CSS精靈，能減少下載資源時(shí)的往返次數(shù)、縮減請(qǐng)求的開(kāi)銷(xiāo)及Web頁(yè)面所請(qǐng)求的總字節(jié)數(shù)。

原理與減少JavaScript和CSS是一樣的，就是如果網(wǎng)站內(nèi)有多個(gè)圖片，理想情況下是把眾多的可拼合的圖片組織成一個(gè)較大的圖，從而減少HTTP請(qǐng)求次數(shù)和時(shí)間。最常見(jiàn)的一種情況是網(wǎng)站的文本編輯框，里面大量的小圖標(biāo)，如果網(wǎng)速較慢可看得出一個(gè)一個(gè)加載顯示，如果能拼合為一張圖片，就能大幅節(jié)省加載時(shí)間。那么如何使用CSS sprites，網(wǎng)上有專(zhuān)門(mén)的工具可借助，或者自己根據(jù)需要去找教程，利用到圖片編輯工具和CSS，稍微麻煩些。

以上內(nèi)容就是關(guān)于SEO性能優(yōu)化之網(wǎng)站速度優(yōu)化(JavaScript和CSS優(yōu)化相關(guān)要點(diǎn))所有內(nèi)容。

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！