分析網(wǎng)站
elementvape.com
vapordna.com
優(yōu)化網(wǎng)站
www.eightvape.com
工具選取
similarweb.com
http://yslow.org/
https://developers.google.com/speed/pagespeed/insights/ （或者在谷歌瀏覽器的開發(fā)者工具里柄延，選擇audits標(biāo)簽）
https://gtmetrix.com/
https://analyze.speedboostr.com/queue/fl75guw3ug，有專門分析shopify網(wǎng)站的工具
刪除css文件中無用代碼萨醒，推薦github上的purgecss
對示例代碼稍微修改具帮。將網(wǎng)站所有頁面都保存在src目錄下，只留html文件与倡，將待清理ccs文件也放到src目錄下
import fs from 'fs'
import PurgeCSSObj from 'purgecss'
const PurgeCSS = PurgeCSSObj.PurgeCSS
// const purgeCSSResult = await
new PurgeCSS().purge({
content: ['./src/**/*.html'],
css: ['./src/**/*.css']
}).then((resArray) => {
console.log(resArray);
for (var i = 0; i < resArray.length; i++) {
const res = resArray[i];
fs.writeFile('out/'+ i + '.css' , res.css, 'utf8', writeRes => { console.log('寫入完成') });
}
})
總結(jié)
引自http://yslow.org/
web性能提示的最佳實踐和原則：
-
Minimize HTTP Requests
通過以下方式減少網(wǎng)絡(luò)請求合并文件
css sprite
Inline images
cdn(如果有圖片轉(zhuǎn)webp格式功能谜叹，順便轉(zhuǎn)webp交煞，減少圖片大小)
為靜態(tài)資源設(shè)置永久緩存 Expires header
為動態(tài)資源設(shè)置適當(dāng)?shù)腸ache-control header
gzip壓縮文本資源，圖片砖第、pdf不要壓縮撤卢，因為已經(jīng)是壓縮的了
樣式表放在html的head標(biāo)簽里，這樣網(wǎng)頁會漸進式渲染
js放在body最后
js css外鏈
減少dns查詢次數(shù)：域名控制在2到4個（太少會可能會阻塞并發(fā)請求梧兼，太多dns查詢太頻繁）
壓縮css js文件
避免重定向
ETags緩存
ajax緩存
自定義友好404頁面
gtmetrix.com 使用技巧
可以導(dǎo)出分析報告記錄優(yōu)化過程中網(wǎng)頁的狀態(tài)
備注
- 服務(wù)端是否由http1轉(zhuǎn)向http2（http請求頭的字段小寫開頭）
