網(wǎng)站速度不僅影響用戶體驗(yàn)，也影響Google robot對網(wǎng)站的爬取，進(jìn)而影響網(wǎng)站收錄;所以網(wǎng)站速度對于SEO的重要性不可小覷。Google Page Speed 主要用于分析檢測頁面加載速度和元素，提出建議。技術(shù)人員從而可以依據(jù)Page Speed的要點(diǎn)來修正和提高網(wǎng)頁網(wǎng)站的質(zhì)量。對于網(wǎng)頁需要改進(jìn)的地方，PageSpeed不僅提供了優(yōu)化建議，甚至還直接把優(yōu)化的最終結(jié)果都給提供出來。
Page speed來自于Google，可以下載插件安裝在Firefox或Chrome上。插件一般都是英文版，F(xiàn)irefox也有中文版本，但缺乏詳細(xì)解釋。這里先把主要檢測事項(xiàng)的中英文對比出來。然后針對細(xì)致的項(xiàng)進(jìn)行解釋并盡可能提供技術(shù)上操作說明。也可以用另一種方法，直接用Googlehttps://developers.google.com/speed/pagespeed/insights 網(wǎng)站性能檢測工具檢測網(wǎng)站需要優(yōu)化的細(xì)節(jié)。
今天我將介紹JavaScript和CSS優(yōu)化相關(guān)要點(diǎn)，所有的整理資料都是來自于falconhan。
一、壓縮JavaScript (Minify JavaScript)
壓縮JavaScript的方法跟壓縮HTML和壓縮CSS在本質(zhì)上的好處是一樣的。一般的方式就是3種：壓縮多余的空格和換行符;刪除注釋;把較長的變量名稱和過程名稱統(tǒ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é)或以上。猜測原因是緩存器的容量是4K，如果JS超過此大小將不會(huì)放入緩存中?
另外不確定的是，可被縮減的25bytes的文件是JS本身還是指其它文件，why? 高手請指示一二…………….
二、合并外部JavaScript (Combine external JavaScript)
合并外部的JavaScript文件，跟合并外部CSS是類似的原理，都能夠有效減少往返時(shí)間(RTT)及在下載其它資源時(shí)減少延遲。過多的JS和CSS文件會(huì)導(dǎo)致過度的HTTP開銷，簡單有效的處理方式就是將外部的JS文件簡化后再合并。
關(guān)于外部JavaScript的使用，有一些建議：
將頁面的JavaScript分割為2個(gè)文件，一個(gè)包含那些必須的代碼，這樣在頁面加載之初會(huì)率先調(diào)用。另一個(gè)就是可以等到其它HTML內(nèi)容都加載完再調(diào)用的JS。在頁面的之前使用的JavaScript，盡可能將其簡化，這樣能避免加載和解析時(shí)間過長而阻止其它內(nèi)容能快速展現(xiàn)。將那些極少被大多數(shù)頁面使用到的JavaScript代碼，放置在獨(dú)立的文件中，這樣可避免多數(shù)頁面不要調(diào)用它而浪費(fèi)時(shí)間。對于那些不需要緩存的小段的JavaScript代碼，考慮將其放在HTML頁面代碼當(dāng)中。JS在頁面中放置的位置也有講究的，重要的內(nèi)容優(yōu)先展示是基本原則，還要考慮到JS或其它資源的并行下載以進(jìn)一步節(jié)省時(shí)間。
三、內(nèi)嵌小型 JavaScript (Inline small JavaScript)
內(nèi)嵌小型JavaScript能夠節(jié)省JS請求所導(dǎo)致的服務(wù)器請求/響應(yīng)時(shí)間開銷。就是對于小段的JS代碼，直接嵌入在頁面中會(huì)比單獨(dú)的外部調(diào)用會(huì)好一些。但是更理想的解決方法是將小段JS整合起來再進(jìn)行外部調(diào)用，參見合并外部的JavaScript。從節(jié)省時(shí)間的角度來考慮，JavaScript代碼跟CSS用法類似，僅用于某個(gè)特效的小段代碼可以寫入在頁面里，用于多個(gè)地方的JS可以合并來外部調(diào)用。
四、優(yōu)化樣式表和腳本的排列順序 (Optimize the order of styles and scripts)
正確地部署外部樣式和不管內(nèi)外的Scripts腳本，能夠合理并行下載資源，從而縮減瀏覽器對頁面進(jìn)行渲染的時(shí)間。由于JavaScript能夠改變網(wǎng)頁的內(nèi)容和樣式布局等，瀏覽器在遇到j(luò)s時(shí)就會(huì)延遲執(zhí)行渲染任何內(nèi)容，而讓位于先下載、解析和執(zhí)行Script腳本內(nèi)容。然而，比請求的時(shí)間更重要的是，瀏覽器在碰到Script時(shí)，其它資源沒辦法并行下載處理，會(huì)導(dǎo)致頁面停頓，可能影響用戶體驗(yàn)。
關(guān)于樣式表和腳本之間的順序關(guān)系，有幾個(gè)推薦的處理順序，一是盡可能把頁面的重要內(nèi)容在腳本和樣式表前先加載，二是外部的腳本放在外部的樣式之后，三是把內(nèi)部的腳本放在所以其它內(nèi)容之后。
五、壓縮CSS (Minify CSS)
壓縮CSS和壓縮JS是一個(gè)道理，就是減少文件體積提高下載速度，瀏覽器在解析和執(zhí)行CSS的時(shí)候也能提高速度。一個(gè)可用的工具是 YUI Compressor。
CSS自己壓縮也可以，有一些方法，如使用CSS縮寫塊狀間隔，
” padding-top:5px
padding-right:6px
padding-bottom:7px
padding-left:8px”
可以縮寫為 padding:5px 6px 7px 8px;
每兩位的顏色值都一樣可簡寫，#aabb11 可寫為 #ab1
去掉沒必要的空格、換行、注釋，去掉沒必要的字體選項(xiàng)等。
六、去掉無用的CSS (Remove unused CSS)
PageSpeed告訴你，當(dāng)前頁面里面有多少CSS樣式是沒有被用到的，去掉它們可以進(jìn)一步加快瀏覽器對CSS的解析量，提供整個(gè)頁面的加載速度。
很多網(wǎng)站的做法都是大部分頁面會(huì)沿用統(tǒng)一的CSS文件，這樣在管理上比較容易些。但會(huì)導(dǎo)致了很多樣式并不會(huì)被頁面中的元素所使用，對單頁面來講造成一定的資源冗余。PageSpeed雖然把每個(gè)沒有被當(dāng)前頁用到的CSS樣式都列出來，但覺得這個(gè)實(shí)際的指導(dǎo)意義不夠明顯，因?yàn)?，為每個(gè)頁單獨(dú)配一個(gè)CSS文件顯得特二。
最好的處理辦法是盡可能把CSS進(jìn)行分類管理，比如針對不同頻道頁的(模板可能不同)，針對圖片形式的，針對表格的等，不同的頁面會(huì)調(diào)用到不同的CSS。如果在建站時(shí)就規(guī)劃好，這種方法就能兼顧C(jī)SS精簡和管理上的便利。還有一點(diǎn)需要注意，就是在”合并外部的CSS”這個(gè)優(yōu)化選項(xiàng)里提到的，多個(gè)較小的CSS應(yīng)該合并到一個(gè)文件里以減少HTTP請求量，或者使用內(nèi)聯(lián)樣式。
七、內(nèi)嵌小型CSS (Inline small CSS)
將CSS代碼進(jìn)行外部調(diào)用是有好處的(最主要是方便統(tǒng)一管理)，但是不能盲目地把所有CSS都改為外部調(diào)用。把一些小型(片段或體積不大)的CSS代碼嵌入在頁面HTML里，讓瀏覽器直接下載解析，可以減少服務(wù)器請求/應(yīng)答的時(shí)間開銷，從而加快頁面的加載速度。另外也可以把小型CSS都聚合為較大的單個(gè)CSS文件，再進(jìn)行外部調(diào)用。
Google Pagespeed光說小型CSS，但到底體積大小是多少才算小。。。一說是768bytes，另外從某人試驗(yàn)中(基于Apache)得出另一個(gè)結(jié)論：體積小于2K(2046 bytes)的CSS代碼算是小型，可以節(jié)省整體時(shí)間。以上2個(gè)說法都可作為參考，實(shí)際情況還需要進(jìn)行測試，但小于768的就肯定適合去合并外調(diào)或內(nèi)聯(lián)使用。
八、合并外部的CSS (Combine external CSS)
合并外部樣式表文件，能夠減少往返時(shí)間(RTT)及在下載其它資源時(shí)減少延遲。外部過多的JS和CSS文件會(huì)導(dǎo)致過度的HTTP開銷，簡單處理方式就是合并，最好不要超過3個(gè)CSS文件的調(diào)用。
關(guān)于CSS的使用上，有一些建議：
將CSS分割為2個(gè)文件，一個(gè)是包含必須的樣式，就是在頁面加載之初會(huì)影響視覺效果的。另一個(gè)就是可以等到其它HTML內(nèi)容都加載完再調(diào)用的。
對于那些不常被大多數(shù)頁面用到的CSS樣式，考慮放入到單獨(dú)文件(比如有些表格樣式CSS，只針對某些頁面有效)。而對于那些只是對某個(gè)元素應(yīng)用的CSS，則推薦使用內(nèi)聯(lián)樣式。不要在CSS里使用 @import 來再調(diào)用其它的CSS，要么合并到主CSS里，要么單獨(dú)再外部調(diào)用一次。
九、使用高效的CSS選擇符 (Use efficient CSS selectors)
使用高效的CSS選擇符能夠加速頁面展現(xiàn)，盡可能避免使用那些能夠匹配很多元素的選擇符。當(dāng)瀏覽器在解析HTML時(shí)，先把CSS樣式表中指定的元素，根據(jù)標(biāo)準(zhǔn)CSS重疊和順序規(guī)則，建造為所有元素展現(xiàn)的結(jié)構(gòu)文檔樹。在火狐瀏覽器里(其它類似)，樣式渲染器將為每個(gè)元素，按照從右到左的規(guī)則進(jìn)行匹配(最右邊的選擇符叫做”Key”)，為所有元素找到渲染的次序規(guī)則。
越少的CSS規(guī)則將會(huì)使用更少的時(shí)間。因此，對于CSS樣式來講，最好就先刪除沒用的CSS，然后將應(yīng)用了大量CSS規(guī)則的元素作優(yōu)化。以下是一些來自David Hyatt的針對高效CSS的建議：
避免使用通配規(guī)則(*)，星號這種通配符就盡量少或不用，對頁面的渲染影響比較大，直接用ID、類和標(biāo)簽選擇符比較好。不要限定ID選擇符，文檔中ID就是唯一的，沒必要像這樣：div#top{} ，直接就用#top{}就可以。不要限定類選擇符，比如，將 li.cnt{} 更改為 .li-cnt{}。規(guī)則具體化，避免長串選擇符，最好不要出現(xiàn) div ul li a{} 類似的選擇符，建議直接用 .li-anchor{}，避免使用偽類選擇符(Pseudo-Class)，其開銷很高。避免使用子選擇符，如果有像#toc>li>a這樣的基于標(biāo)簽的子選擇符，那么應(yīng)該使用一個(gè)類來關(guān)聯(lián)標(biāo)簽元素，如.toc-anchor。用類選擇符來代替子選擇符。比如你需要給兩個(gè)列表來使用不同的樣式：
ul li {color: blue;}
ol li {color: red;}
可以將其改為2個(gè)類
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
十、將CSS放在文檔標(biāo)頭處 (Put CSS in the document head)
對于外部CSS文件，瀏覽器會(huì)將其完全下載再對頁面進(jìn)行解析。內(nèi)聯(lián)CSS樣式(在< style >里)也會(huì)導(dǎo)致回溯和重解析。因此，建議把所有樣式都放到外部CSS文件里，再將其放在頭部來確保頁面打開時(shí)就先下載，有助于加速頁面展現(xiàn)。
HTML 4.01規(guī)范里也建議把CSS都放到里，用Link來調(diào)用，而不要用@import來調(diào)用。百度統(tǒng)計(jì)工具中的“網(wǎng)站速度診斷”功能里也有相應(yīng)的建議：CSS說明出現(xiàn)在之后，會(huì)導(dǎo)致頁面重新渲染，降低網(wǎng)站打開速度。解決方法不難，查一遍可能存在的< style >標(biāo)簽，挪到之前。
十一、避免在 CSS 中使用 @import (Avoid CSS @import)
在外部的CSS文件中使用@import會(huì)使得頁面在加載時(shí)增加額外的延遲。雖然規(guī)則允許在樣式中調(diào)用@import來導(dǎo)入其它的CSS，但瀏覽器不能并行下載樣式，就會(huì)導(dǎo)致頁面增添了額外的往返耗時(shí)。比如，第一個(gè)CSS文件first.css包含了以下內(nèi)容：@import url(“second.css”)。那么瀏覽器就必須先把first.css下載、解析和執(zhí)行后，才發(fā)現(xiàn)及處理第二個(gè)文件second.css。
簡單的解決方法是使用標(biāo)記來替代@import，比如下面的寫法就能夠并行下載css文件，從而加快頁面加載速度：
注意的是之前文章提到過一個(gè)頁面中的CSS文件不宜過多，否則應(yīng)該簡化及合并外部的CSS (Combine external CSS) 以節(jié)省往返請求時(shí)間(RTT)。
十二、將圖片組合為 CSS 貼圖定位 (Combine images using CSS sprites)
使用CSS貼圖定位，也叫CSS精靈，能減少下載資源時(shí)的往返次數(shù)、縮減請求的開銷及Web頁面所請求的總字節(jié)數(shù)。
原理與減少JavaScript和CSS是一樣的，就是如果網(wǎng)站內(nèi)有多個(gè)圖片，理想情況下是把眾多的可拼合的圖片組織成一個(gè)較大的圖，從而減少HTTP請求次數(shù)和時(shí)間。最常見的一種情況是網(wǎng)站的文本編輯框，里面大量的小圖標(biāo)，如果網(wǎng)速較慢可看得出一個(gè)一個(gè)加載顯示，如果能拼合為一張圖片，就能大幅節(jié)省加載時(shí)間。那么如何使用CSS sprites，網(wǎng)上有專門的工具可借助，或者自己根據(jù)需要去找教程，利用到圖片編輯工具和CSS，稍微麻煩些。
以上內(nèi)容就是關(guān)于SEO性能優(yōu)化之網(wǎng)站速度優(yōu)化(JavaScript和CSS優(yōu)化相關(guān)要點(diǎn))所有內(nèi)容。
申請創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
