我們?cè)陂_發(fā)網(wǎng)站時(shí)，與其在網(wǎng)站上線后花更多的時(shí)間來改善網(wǎng)站的頁面速度，不如讓我們從一開始就開發(fā)一個(gè)得分為100％的網(wǎng)站。

建立漂亮的網(wǎng)站從未如此簡單。如果建立一個(gè)人們實(shí)際上希望一次又一次回到的網(wǎng)站，自從輸入連接時(shí)代以來，這一直是一個(gè)挑戰(zhàn)。

當(dāng)您希望人們回到您的網(wǎng)站時(shí)，會(huì)想到很多因素，包括您網(wǎng)站上的內(nèi)容，圖像，用戶體驗(yàn)以及對(duì)訪問者的價(jià)值。定義因素之一是頁面速度，這是用戶體驗(yàn)的一部分。

頁面速度是網(wǎng)頁完全加載所花費(fèi)的時(shí)間。在提供出色的用戶體驗(yàn)方面，這是一個(gè)至關(guān)重要的因素。早在2018年，google正式宣布將通過“速度”更新將頁面速度作為其排名中的一個(gè)因素。

那么，什么使頁面速度如此重要呢？ 讓我們深入研究。

●①頁面速度的重要性

頁面加載緩慢會(huì)反過來影響你網(wǎng)站的銷售。 客戶的注意力跨度較短，他們不希望等待頁面加載緩慢。

實(shí)際上，曾經(jīng)谷歌的有項(xiàng)研究表明，如果您的網(wǎng)頁加載時(shí)間超過3秒，則有53％的移動(dòng)用戶會(huì)去其他地方。

在加載緩慢的頁面上失去客戶并不是一個(gè)令人滿意的前景。

頁面速度在seo中也起著至關(guān)重要的作用，緩慢加載頁面會(huì)受到搜索引擎的“處罰”。

較低的頁面速度也意味著搜索引擎可以使用分配的抓取預(yù)算來抓取更少的頁面，這會(huì)對(duì)您的索引產(chǎn)生負(fù)面影響。

●②較慢的頁面具有較低的轉(zhuǎn)換次數(shù)，較高的跳出率，最終使網(wǎng)站的訪問者數(shù)量減少。

如果你的公司將頁面速度用作吸引訪問者訪問網(wǎng)站的主要渠道，那么頁面速度過慢也會(huì)對(duì)付費(fèi)搜索產(chǎn)生影響。網(wǎng)站速度不佳會(huì)損害你的質(zhì)量得分。

質(zhì)量得分決定了您支付的費(fèi)用（每次點(diǎn)擊費(fèi)用）以及你在搜索引擎結(jié)果頁（SERP）上的排名。如果你的質(zhì)量得分較低，很可能您的廣告可能不會(huì)顯示在搜索結(jié)果的首頁上！

如您所見，頁面速度是確保潛在客戶獲得良好用戶體驗(yàn)的關(guān)鍵因素。因此，當(dāng)您單擊網(wǎng)站鏈接時(shí)會(huì)發(fā)生什么，以及如何提高頁面速度。

當(dāng)您單擊網(wǎng)頁時(shí)會(huì)發(fā)生什么

這是我們開始尋找如何優(yōu)化網(wǎng)站以提高頁面速度的起點(diǎn)。就是當(dāng)你單擊某個(gè)鏈接或者在瀏覽器中輸入名稱搜索時(shí)幕后情況的細(xì)分。

1. 您在瀏覽器中輸入名稱，瀏覽器進(jìn)入DNS查找模式。每個(gè)網(wǎng)站都映射到您的計(jì)算機(jī)可以識(shí)別的IP地址。
2. 一旦獲得IP地址，我們便開始請(qǐng)求允許瀏覽器顯示頁面的文件。
3. 這些請(qǐng)求采用標(biāo)頭的形式，可以包括html文件，圖像，css，JAVAscript，視頻等。
4. 服務(wù)器決定使用哪個(gè)請(qǐng)求處理程序，然后開始將頁面內(nèi)容發(fā)送回響應(yīng)中。
5. 瀏覽器開始呈現(xiàn)頁面，請(qǐng)求完成頁面所需的所有資源，例如圖像或CSS文件。
6. 不會(huì)一次接收所有資源，瀏覽器會(huì)發(fā)出其他請(qǐng)求，直到獲得所需的所有資源。它以串聯(lián)方式呈現(xiàn)頁面。
7. 獲得所有資源后，瀏覽器將完成頁面呈現(xiàn)。

這就是當(dāng)你單擊網(wǎng)頁時(shí)所發(fā)生的事情，但是在很多地方，您的頁面速度可能會(huì)出現(xiàn)瓶頸。當(dāng)瀏覽器請(qǐng)求資源（例如圖像，CSS文件或視頻）時(shí)，可能會(huì)遇到問題。

確保網(wǎng)站快速運(yùn)行的5大因素

當(dāng)涉及到互聯(lián)網(wǎng)時(shí)，每個(gè)人都喜歡速度。可以說，更快的加載時(shí)間，更快的緩沖速率，更快的下載速度是不可或缺的一部分。

那么，確保快速網(wǎng)站的決定因素是什么？我們列出了幾個(gè)起最重要作用的：

●①共享服務(wù)器：單擊網(wǎng)站時(shí)，瀏覽器最初會(huì)向服務(wù)器發(fā)出請(qǐng)求，要求服務(wù)器提供構(gòu)成網(wǎng)頁的各種元素-圖片，文本，視頻等。廉價(jià)的Web托管服務(wù)將您的網(wǎng)頁托管在共享服務(wù)器上，這實(shí)際上意味著您正在與許多其他網(wǎng)站共享Web資源。 事實(shí)證明，這可以顯著增加頁面加載時(shí)間，并帶來較差的用戶體驗(yàn)。

解決方案：如果您考慮為要快速擴(kuò)展的業(yè)務(wù)提供免費(fèi)的虛擬主機(jī)服務(wù)，則可能是時(shí)候放棄免費(fèi)服務(wù)并考慮為您提供專用服務(wù)器的主機(jī)了。

●②過大的圖像：對(duì)于任何瀏覽器來說，圖像都是棘手的部分，圖像越大，瀏覽器就越難加載它們。無論連接速度或服務(wù)器質(zhì)量如何，擁有大量未經(jīng)優(yōu)化的圖像都會(huì)降低你的網(wǎng)頁速度。另一個(gè)重要因素是圖像格式。發(fā)現(xiàn)JPEG圖像的加載速度比GIF / PNG快得多。

解決方案：優(yōu)化圖像，使用JPEG代替PNG，并確保圖像小于1 mb。

●③JavaScript的問題：Javascript是使您的網(wǎng)頁具有交互性和動(dòng)態(tài)性的魔力，沒有它，您的網(wǎng)頁的確會(huì)變得很呆板。但是未優(yōu)化的JS代碼可能會(huì)對(duì)您的頁面速度產(chǎn)生負(fù)面影響。這是因?yàn)椋?dāng)您的網(wǎng)頁加載時(shí)，它必須首先處理它遇到的所有Javascript文件。這導(dǎo)致所謂的“阻止渲染Javascript”（又稱為Javascript），阻止網(wǎng)頁快速加載。

解決方案：檢查你的Javascript代碼，顯示你網(wǎng)頁真正需要的內(nèi)容。推遲Javascript加載，直到用戶看到網(wǎng)頁的其余部分為止。

●④不使用緩存：緩存是一種將常用數(shù)據(jù)點(diǎn)存儲(chǔ)在“緩存內(nèi)存”中的技術(shù)。從緩存的內(nèi)存中檢索服務(wù)器收到的針對(duì)同一項(xiàng)目的下一個(gè)請(qǐng)求，從而節(jié)省了時(shí)間。

解決方案：對(duì)一堆不同的元素（包括HTTP，圖像和數(shù)據(jù)庫查詢）使用緩存。

●⑤廣告過多/ Flash內(nèi)容過多：每增加一個(gè)廣告，HTTP請(qǐng)求就會(huì)增加，這需要額外的處理時(shí)間。這意味著對(duì)用戶的瀏覽器以及你的服務(wù)器造成了額外的負(fù)擔(dān)，這極大地減慢了頁面加載時(shí)間。還發(fā)現(xiàn)Flash內(nèi)容龐大且下載時(shí)間變慢。減少或消除Flash文件的大小勢必會(huì)極大地提高你的頁面速度。

解決方案：少用廣告，尤其是在它們占用大量服務(wù)器資源的情況下，例如視頻廣告或大量圖片廣告。嘗試使用HTML5替代而不是Flash。

盡管我們已經(jīng)為人們傾向于犯下的大多數(shù)常見網(wǎng)頁愚蠢問題提供了解決方案，但是這里有一些其他方法可以提高頁面速度。

3個(gè)方案[+ 2個(gè)技巧]可提高您的頁面速度

●①使用內(nèi)容傳送網(wǎng)絡(luò)（CDN）：

主要的優(yōu)點(diǎn)是提高了向用戶發(fā)送內(nèi)容的速度。CDN能幾乎涵蓋國內(nèi)所有線路。而在可靠性上， CDN 在結(jié)構(gòu)上實(shí)現(xiàn)了多點(diǎn)的冗余，即使某一個(gè)節(jié)點(diǎn)由于意外發(fā)生故障，對(duì)網(wǎng)站的訪問能夠被自動(dòng)導(dǎo)向其他的健康節(jié)點(diǎn)進(jìn)行響應(yīng)。CDN能輕松實(shí)現(xiàn)網(wǎng)站的全國鋪設(shè)，不必考慮服務(wù)器的投入與托管、不必考慮新增帶寬的成本、不必考慮多臺(tái)服務(wù)器的鏡像同步、不必考慮更多的管理維護(hù)技術(shù)人員。

例如，如果您坐在北京時(shí)正在查看美國旅行網(wǎng)站，則請(qǐng)求將由本地PoP處理，以防止請(qǐng)求穿越大西洋。 CDN還具有其他優(yōu)勢，例如減少帶寬消耗，處理大量流量的能力以及幫助您保持負(fù)載平衡。

●②縮小CSS，JavaScript和HTML

如果要加快網(wǎng)頁速度，除了使圖像等Web內(nèi)容最小化之外，還需要減少客戶端服務(wù)器請(qǐng)求的數(shù)量。 縮小和壓縮所有不必要的和可壓縮的代碼行是初學(xué)者朝這個(gè)方向邁出的一步。

縮小對(duì)于內(nèi)聯(lián)JavaScript和未緩存的外部文件非常方便。為了實(shí)現(xiàn)最佳頁面速度，建議縮小所有4096位以上的JavaScript文件。

利用所有可用的編碼空間編寫簡潔的代碼，刪除額外的空間，縮進(jìn)和行空間，同時(shí)保持代碼的可讀性，從而減少了網(wǎng)站核心文件和前端文件的大小。

最小化HTML，CSS和JavaScript文件的其他好處包括減少網(wǎng)絡(luò)延遲，減少HTML請(qǐng)求，增強(qiáng)壓縮，更快的瀏覽器下載，從而提高頁面速度。

●③使用簡約框架

一個(gè)好的前端框架可以幫助你避免很多業(yè)余前端優(yōu)化錯(cuò)誤。一些較大的框架提供了大量的附加功能，但是你的網(wǎng)站可能并不需要全部。想象一下你的框架，就像要轉(zhuǎn)換為美麗花園的一塊空地。您需要修剪草并在預(yù)定的位置種植樹苗，但不能讓花園里堆滿雜草和不必要的植物。同樣，您有責(zé)任不要讓框架被冗余代碼，過多的HTTP請(qǐng)求和大圖像破壞。

2個(gè)技巧

●①擺脫后端服務(wù)器

第一個(gè)技巧是丟棄后端服務(wù)器。 我們并不是要完全避免使用后端，而是要一種解決方法，使依靠后端提供所有內(nèi)容成為過去。

后端是你的網(wǎng)頁的一部分，該部分在服務(wù)器上運(yùn)行，并以Node.js / Express，Java或.NET編寫。 后端在每次請(qǐng)求后動(dòng)態(tài)獲取HTML數(shù)據(jù)。

當(dāng)后端向API，數(shù)據(jù)庫發(fā)出請(qǐng)求以獲取應(yīng)插入HTML的數(shù)據(jù)時(shí)，這些集成點(diǎn)很容易出現(xiàn)漏洞。緩慢的數(shù)據(jù)庫，損壞的API，網(wǎng)絡(luò)問題只是后端可能出錯(cuò)的部分原因。

輸入JAM堆棧。 JAM代表JavaScript，API和標(biāo)記。它是一種前端體系結(jié)構(gòu)，在該結(jié)構(gòu)中，您不必構(gòu)建每個(gè)用戶一次的HTML，而是為用戶提供靜態(tài)HTML，而不是在每個(gè)用戶每次請(qǐng)求后都呈現(xiàn)HTML。

您可以將靜態(tài)HTML，JavaScript和CSS文件托管在AWS S3，Netlify或其他可提供靜態(tài)文件的提供程序上。

如果不能僅使用靜態(tài)網(wǎng)頁來運(yùn)行站點(diǎn)，則仍然可以通過許多方法來實(shí)現(xiàn)JAM堆棧技術(shù)。第一種選擇是將您的網(wǎng)站分為JAM堆棧部分和基于服務(wù)器的部分。另一種技術(shù)是使用客戶端API來獲取數(shù)據(jù)。

●②將所有靜態(tài)內(nèi)容移動(dòng)到CDN

前面部分討論了CDN的優(yōu)點(diǎn)。 CDN是一組地理上分散的服務(wù)器，可使用存在點(diǎn)（POP）幫助減少原始服務(wù)器上的負(fù)載。

當(dāng)您即將達(dá)到服務(wù)器的帶寬容量時(shí)，卸載視頻，圖像，JavaScript和CSS文件之類的靜態(tài)資產(chǎn)將減少服務(wù)器的帶寬使用量。

CDN已優(yōu)化為提供靜態(tài)內(nèi)容，而邊緣CDN服務(wù)器將為該靜態(tài)內(nèi)容提供客戶端請(qǐng)求。

如果您的流量的一小部分來自遙遠(yuǎn)的地理區(qū)域，CDN也將派上用場，CDN可以通過將這些靜態(tài)資產(chǎn)緩存在距離最終用戶更近的邊緣服務(wù)器上來減少延遲。

總結(jié)

根據(jù)對(duì)大量客戶網(wǎng)站測試的結(jié)果，有4成網(wǎng)站可以在5秒內(nèi)打開，7成網(wǎng)站可以在10秒內(nèi)打開，您可以參照這個(gè)范圍來設(shè)定您自己的標(biāo)準(zhǔn)。可以根據(jù)上述方案提高網(wǎng)站打開速度。

網(wǎng)站，尤其是企業(yè)網(wǎng)站，身為企業(yè)的身份照，就必須各方面都要符合用戶的喜愛，保證用戶擁有良好的體驗(yàn)感，這樣才會(huì)產(chǎn)生合作的可能。