2020-7-9 seo達(dá)人
如今，Page Speed（頁(yè)面速度）的意義非凡。
自從Google改變Googlebot's的算法以高度支持快速，適合移動(dòng)設(shè)備的網(wǎng)站以來(lái)，擁有快速網(wǎng)站變得越來(lái)越重要。如果這還不夠好，用戶通常會(huì)花更少的時(shí)間，轉(zhuǎn)化率也會(huì)更低，你的網(wǎng)站體驗(yàn)越慢，用戶的轉(zhuǎn)化率就越低。
什么是Page Speed
Page Speed是將內(nèi)容完全加載到網(wǎng)頁(yè)上所花費(fèi)的時(shí)間。
對(duì)于任何給定的用戶來(lái)說(shuō)，頁(yè)面緩慢的原因可能有很多，你的用戶可能正在火車上，通過(guò)信號(hào)弱的隧道，或者他們的互聯(lián)網(wǎng)速度很慢。
通過(guò)遵循最佳實(shí)踐，我們至少可以通過(guò)確保我們已經(jīng)做了最好的工作來(lái)緩解問(wèn)題。
現(xiàn)在你知道它是什么了，下面我就來(lái)教你如何提高頁(yè)面速度。
注意：這些是按難度順序列出的。在某個(gè)時(shí)候，你將需要開發(fā)人員來(lái)幫助優(yōu)化你的網(wǎng)站。
1.使用CDN
CDN是內(nèi)容傳輸網(wǎng)絡(luò)的縮寫。使用CDN可以讓你有效地訪問(wèn)全球數(shù)百臺(tái)小服務(wù)器，這些服務(wù)器為你提供網(wǎng)站的副本，大大減少了你的網(wǎng)站獲取時(shí)間。如果你沒(méi)有使用CDN，你的網(wǎng)站的每一個(gè)請(qǐng)求（包括圖片、CSS和JavaScript）都會(huì)被緩慢地傳送到你的服務(wù)器上。
根據(jù)HTTPArchive中的4.68億個(gè)請(qǐng)求，48%的請(qǐng)求不是來(lái)自CDN。那是超過(guò)2.24億的請(qǐng)求，如果他們花幾分鐘的時(shí)間給自己的網(wǎng)站添加一個(gè)CDN，速度可能會(huì)超過(guò)50%。
一定要檢查你的CDN配置是否正確——在你的CDN中緩存丟失意味著CDN必須向你的源服務(wù)器請(qǐng)求資源，這就違背了使用CDN的初衷！所以，你的CDN必須要有一個(gè)正確的配置。
2.啟用GZIP壓縮
在一些CDN上，GZIP壓縮只是一個(gè)標(biāo)有 "啟用壓縮 "的復(fù)選框。這大概會(huì)減少一半的文件大小，你的用戶需要下載文件才能使用你的網(wǎng)站，你的用戶會(huì)因此而喜歡你。
3.使用較小的圖像
這意味著既要降低分辨率（例如，攝像頭的輸出從4000x3000像素減少到網(wǎng)絡(luò)的1000x750），又要通過(guò)壓縮文件來(lái)減小尺寸。
如果你的網(wǎng)站使用WordPress，則有一些插件會(huì)在你上傳圖片時(shí)自動(dòng)為你執(zhí)行此操作。
在撰寫博客文章時(shí)，我個(gè)人使用TinyJPG壓縮圖像。
https://tinyjpg.com/
4.減少頁(yè)面發(fā)出的請(qǐng)求數(shù)
目標(biāo)是減少加載頁(yè)面頂部部分所需的請(qǐng)求數(shù)量。
這里有兩種思維方式，你可以：
通過(guò)刪除花哨的動(dòng)畫或不能改善網(wǎng)站體驗(yàn)的圖像，減少整個(gè)頁(yè)面上的請(qǐng)求數(shù)量。
或者，你可以通過(guò)使用延遲加載來(lái)推遲優(yōu)先級(jí)不高的加載內(nèi)容。
5.盡可能避免重定向
重定向會(huì)大大降低網(wǎng)站速度。使用響應(yīng)式CSS并從一個(gè)域?yàn)槟愕木W(wǎng)站提供服務(wù)，而不是為移動(dòng)用戶提供特殊的子域。
有些重定向是不可避免的，比如 www-> 根域 或 根域 ->www，但你的大部分流量不應(yīng)該經(jīng)歷重定向來(lái)查看你的網(wǎng)站。
6.減少到第一個(gè)字節(jié)的時(shí)間
到第一個(gè)字節(jié)的時(shí)間是指你的瀏覽器在發(fā)出資源請(qǐng)求后，從服務(wù)器接收到第一個(gè)字節(jié)的數(shù)據(jù)所花費(fèi)的時(shí)間。
有兩個(gè)部分：
在服務(wù)器上花費(fèi)的時(shí)間
發(fā)送數(shù)據(jù)所花費(fèi)的時(shí)間
你可以通過(guò)優(yōu)化你的服務(wù)器端渲染、數(shù)據(jù)庫(kù)查詢、API調(diào)用、負(fù)載平衡、你的應(yīng)用程序的實(shí)際代碼以及服務(wù)器的負(fù)載本身（特別是如果你使用的是廉價(jià)的虛擬主機(jī)——這將影響你的網(wǎng)站的性能），來(lái)改善你在服務(wù)器上花費(fèi)的時(shí)間。
你可以使用CDN大大減少發(fā)送數(shù)據(jù)所花費(fèi)的時(shí)間。
7.減少并刪除阻止渲染的JavaScript
外部腳本（特別是那些用于營(yíng)銷的外部腳本）往往會(huì)寫得很差，會(huì)阻止你的頁(yè)面加載，直到它運(yùn)行完畢。
你可以通過(guò)將外部腳本標(biāo)記為異步來(lái)減少這種影響：
<script async src="https://example.com/external.js"></script>
你還可以延遲加載市場(chǎng)營(yíng)銷腳本，直到用戶開始滾動(dòng)為止：
window.addEventListener(
'scroll',
() =>
setTimeout(() => {
// 在此插入營(yíng)銷片段
}, 1000),
{ once: true }
);
8.縮小CSS和JS
Minifying是指使用工具來(lái)刪除空格、換行符和縮短變量名。通常情況下，這將作為構(gòu)建過(guò)程的一部分自動(dòng)完成。
要縮小JavaScript，請(qǐng)查看UglifyJS。
http://lisperator.net/uglifyjs/
要縮小CSS，請(qǐng)查看cssnano。
9.刪除未使用的CSS
自Chrome 59（2017年4月發(fā)布）以來(lái)，在Chrome DevTools中可以看到未使用的JS和CSS。
要看這個(gè)，打開DevTools，顯示控制臺(tái)抽屜（就是點(diǎn)擊Esc時(shí)出現(xiàn)的那個(gè)煩人的東西），點(diǎn)擊左下角的三個(gè)小點(diǎn)，打開 "Coverage"，就可以看到。
點(diǎn)擊帶有重新加載圖標(biāo)的按鈕將刷新頁(yè)面，并審核CSS和JS的使用情況。
在Google Chrome瀏覽器中審核初始頁(yè)面時(shí)，外觀如下所示：
10.定期跟蹤網(wǎng)站速度
在你的網(wǎng)站速度變慢的瞬間，修復(fù)網(wǎng)站速度問(wèn)題就會(huì)容易得多。除此之外，如果你把檢查網(wǎng)站速度作為一種習(xí)慣，那么修復(fù)網(wǎng)站速度慢的問(wèn)題就會(huì)變成一件小得多的事情。
有免費(fèi)的工具可以監(jiān)視你網(wǎng)站的速度，其中的兩個(gè)是WebPageTest和Google Lighthouse。這些工具的缺點(diǎn)是你需要記住在進(jìn)行更改之前和之后都必須運(yùn)行它們。
PerfBeacon是一項(xiàng)服務(wù)（由本文的作者創(chuàng)建），該服務(wù)定期運(yùn)行Google Lighthouse，并讓你隨時(shí)跟蹤網(wǎng)站的速度。
藍(lán)藍(lán)設(shè)計(jì)( www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn