SEO如何注重優(yōu)化網(wǎng)頁(yè)打開(kāi)速度？

　　網(wǎng)頁(yè)的打開(kāi)速度，這個(gè)細(xì)節(jié)其實(shí)對(duì)于SEO優(yōu)化來(lái)說(shuō)是很關(guān)鍵的。雖然它看起來(lái)是那樣的微不足道，但是卻在SEO中能夠起到牽一發(fā)而動(dòng)全身的效果。創(chuàng)新互聯(lián)SEO建議大家要這么去優(yōu)化你的網(wǎng)頁(yè)速度：

　　1、不要省去網(wǎng)絡(luò)主機(jī)的預(yù)算

　　我們現(xiàn)在都在努力省錢(qián)。很多人想要省錢(qián)的方法是選擇一種便宜的共享主機(jī)，它是可以容納很多網(wǎng)站，因?yàn)樗鼈兛梢园惭b在一個(gè)服務(wù)器上，但這就像一群人擠在一輛車(chē)?yán)镆粯?，它的性能是糟糕至極的!

　　當(dāng)然，你的網(wǎng)站大部分時(shí)間都可以和大多數(shù)網(wǎng)絡(luò)主機(jī)一樣使用，但它的加載速度會(huì)因此變得非常緩慢，可能會(huì)導(dǎo)致你的部分訪客沒(méi)有轉(zhuǎn)換為客戶(hù)，我想你也會(huì)因此感到失望。

　　也許原因在于你可能很難注意到頁(yè)面速度這一細(xì)節(jié)，因?yàn)樗悄慊撕芏鄷r(shí)間、精力以及金錢(qián)搭建起來(lái)的，你會(huì)滿(mǎn)意于最終呈現(xiàn)的網(wǎng)站效果。但訪問(wèn)者只在意是否能夠盡可能快地訪問(wèn)你的網(wǎng)站。

　　人們想要在你的網(wǎng)站上停留足夠長(zhǎng)的時(shí)間來(lái)做他們想做的事情，無(wú)論是得到解決方案，購(gòu)買(mǎi)產(chǎn)品，還是其他一些特定的目標(biāo)。如果他們的訪問(wèn)速度受到影響，他們很可能會(huì)討厭你的網(wǎng)站給他們帶來(lái)的體驗(yàn)，或選擇離開(kāi)，或放棄轉(zhuǎn)換。

　　根據(jù)一項(xiàng)研究數(shù)據(jù)顯示，網(wǎng)站加載速度僅僅 100 毫秒的差別就足以使他們的銷(xiāo)售額下降 1%。

　　如果這么小單位的時(shí)間對(duì)銷(xiāo)售都會(huì)產(chǎn)生很大的直接影響，你認(rèn)為要是有額外的第二個(gè)或更多的影響會(huì)有什么后果?不言而喻，這會(huì)產(chǎn)生更大的連鎖反應(yīng)。

　　但它并不局限于此，因?yàn)槟愕木W(wǎng)站加載速度緩慢也會(huì)對(duì)有機(jī)搜索排名和點(diǎn)擊付費(fèi)的成本產(chǎn)生影響。換句話(huà)說(shuō)，如果你的網(wǎng)站加載緩慢，你會(huì)是在間接地幫助你的競(jìng)爭(zhēng)對(duì)手在這個(gè)關(guān)鍵區(qū)域分食你的利益。

　　因此，你不應(yīng)該省去網(wǎng)絡(luò)主機(jī)的預(yù)算。有很多網(wǎng)絡(luò)主機(jī)都是為了速度而優(yōu)化的，問(wèn)問(wèn)周?chē)娜?，做一些測(cè)試，然后投資一個(gè)性能強(qiáng)大的網(wǎng)絡(luò)主機(jī)，滿(mǎn)足訪問(wèn)者和搜索引擎的需要。

　　2、包括尾部的斜杠(/)

　　忽略指向你的網(wǎng)站的鏈接，無(wú)論是站外來(lái)源(鏈接建設(shè)的努力)還是在你自己的網(wǎng)站內(nèi)部鏈接，都有對(duì)加載速度的不利影響。

　　原因如下：

　　當(dāng)你訪問(wèn)一個(gè)沒(méi)有末尾斜杠(/)的 URL 時(shí)，web 服務(wù)器將查找具有該名稱(chēng)的文件。如果沒(méi)有找到具有該名稱(chēng)的文件，它將把它當(dāng)作一個(gè)目錄，并在該目錄中查找默認(rèn)文件。

　　換句話(huà)說(shuō)，通過(guò)省略末尾的斜杠，你將強(qiáng)制服務(wù)器執(zhí)行不必要的 301 重定向。雖然它可能看起來(lái)是即時(shí)的，但它確實(shí)需要稍長(zhǎng)一點(diǎn)的時(shí)間，而且我們已經(jīng)建立了，每一點(diǎn)都需要再次添加。

　　例如：https://example.com(這是有影響的)

　　https://example.com/services(這也是有影響的)

　　https://example.com/(這很好)

　　https://example.com/services/(這也是好的)

　　3、減少 HTTP 請(qǐng)求的次數(shù)

　　網(wǎng)頁(yè)的每個(gè)文件都需要被呈現(xiàn)以及運(yùn)行，如 HTML、CSS、JavaScript、圖像和字體都需要單獨(dú)的 HTTP 請(qǐng)求。請(qǐng)求越多，頁(yè)面加載就越慢。

　　你可能不會(huì)在你的網(wǎng)站上添加一堆“臃腫”的內(nèi)容，但對(duì)于我遇到的 90% 的網(wǎng)站來(lái)說(shuō)，它仍然存在這樣的情況。

　　這是因?yàn)榇蠖鄶?shù)網(wǎng)頁(yè)設(shè)計(jì)師，不管他們的技術(shù)多強(qiáng)大或經(jīng)驗(yàn)多豐富，都不會(huì)優(yōu)先考慮頁(yè)面速度。更有甚者，大多數(shù)人甚至不知道如何去做。

　　這就解釋問(wèn)題的起因：

　　大多數(shù)網(wǎng)站加載一個(gè)或多個(gè) CSS 文件，以及幾個(gè) JavaScript 文件。一些，比如 Jquery 或 FontAwesome，通常從另一臺(tái)服務(wù)器上遠(yuǎn)程加載，這極大地增加了加載頁(yè)面的時(shí)間。

　　當(dāng)你考慮添加的附加 CSS 和 JavaScript 文件的插件時(shí)，這將變得更加困難。僅從 CSS 和 JavaScript 文件就可能很容易地得到增加更多的 HTTP 請(qǐng)求。

　　當(dāng)你在一個(gè)頁(yè)面上考慮所有的圖片時(shí)，每個(gè)頁(yè)面都需要一個(gè)單獨(dú)的 HTTP 請(qǐng)求，它很快就會(huì)失控。

　　將 JavaScript 文件合并到一個(gè)文件中。

　　將 CSS 文件合并到一個(gè)文件中。

　　減少或消除加載他們自己的 JavaScript / CSS 文件的插件。在某些情況下，如一些表單插件，你可以選擇禁用它們。

　　對(duì)經(jīng)常使用圖像使用 CSS 精靈。

　　使用像 FontAwesome 或 Ionic 圖標(biāo)這樣的字體而不是圖像文件，因?yàn)橹挥幸粋€(gè)文件需要加載。

　　4、啟用瀏覽器緩存

　　啟用瀏覽器緩存后，一個(gè)網(wǎng)頁(yè)的元素存儲(chǔ)在你的訪客的瀏覽器上，所以下次他們?cè)L問(wèn)你的網(wǎng)站，或者訪問(wèn)另一個(gè)頁(yè)面時(shí)，瀏覽器可以直接加載頁(yè)面，而不必將另一個(gè) HTTP 請(qǐng)求發(fā)送到服務(wù)器，以加載需要的緩存元素。

　　一旦加載了第一頁(yè)并將其元素存儲(chǔ)在用戶(hù)的緩存中，只需要在后續(xù)頁(yè)面上下載新元素就行。這可以大大減少需要在一個(gè)典型的瀏覽會(huì)話(huà)中下載的文件數(shù)量。

　　5、啟用壓縮

　　啟用 GZIP 壓縮可以極大地減少下載 HTML、CSS 和 JavaScript 文件所需的時(shí)間，因?yàn)樗鼈兿螺d的壓縮文件要小得多，一旦它們到達(dá)瀏覽器就會(huì)被解壓。

　　不要擔(dān)心，因?yàn)樗械默F(xiàn)代瀏覽器都支持 GZIP，并且已經(jīng)對(duì)所有的 HTTP 請(qǐng)求進(jìn)行了自動(dòng)處理，所以訪客不必再做任何額外的事情。

　　6、優(yōu)先考慮內(nèi)容

　　如果你的網(wǎng)站被編碼成優(yōu)先級(jí)以上的內(nèi)容 —— 換句話(huà)說(shuō)，在訪問(wèn)者滾動(dòng)之前可以看到的內(nèi)容，你的網(wǎng)站就會(huì)出現(xiàn)在訪問(wèn)者面前。

　　這意味著確保出現(xiàn)在折疊上方的任何元素都與 HTML 代碼的開(kāi)頭差不多，這樣瀏覽器就可以下載并呈現(xiàn)它們。

　　還需要包含任何 CSS 和 JavaScript，以?xún)?nèi)聯(lián)方式呈現(xiàn)該區(qū)域，而不是在外部 CSS 文件中。

　　7、縮小資源

　　縮小你的 CSS 和 JavaScript 文件，刪除不必要的留白和注釋?zhuān)詼p少文件大小，這樣會(huì)幫助減少下載它們所需的時(shí)間。

　　這并不需要手動(dòng)操作，因?yàn)橛幸恍┕ぞ呖梢栽诰€將文件轉(zhuǎn)換成較小的、縮小版的文件。還有一些插件可以在你的網(wǎng)站上替換你的網(wǎng)站上的鏈接，你的常規(guī) CSS 和 JavaScript 文件可以不修改你的原始文件。

　　這樣做可能需要花費(fèi)一些精力，因?yàn)榭s小文件經(jīng)常會(huì)破壞 CSS 和 JavaScript，所以一旦你縮小了所有的內(nèi)容，一定要徹底測(cè)試你的網(wǎng)站。

　　8、優(yōu)化媒體文件

　　因?yàn)閹в懈哔|(zhì)量相機(jī)的移動(dòng)設(shè)備是常見(jiàn)的，而現(xiàn)代的內(nèi)容管理系統(tǒng)，可以方便上傳圖像，很多人只是簡(jiǎn)單地拍了一張照片，然后上傳，卻沒(méi)有意識(shí)到，圖像通常比必要的要大 4 倍。這大大降低了你的網(wǎng)站加載速度，特別是對(duì)于移動(dòng)用戶(hù)。

　　在你的網(wǎng)站上優(yōu)化媒體文件有可能極大地提高你的頁(yè)面速度，而且這樣做相對(duì)容易，所以這是一個(gè)很好的時(shí)間投資。

　　(1)優(yōu)化視頻

　　選擇理想的格式。MP4 在大多數(shù)情況下是最好的，因?yàn)樗a(chǎn)生最小的文件大小。

　　根據(jù)訪問(wèn)者的屏幕尺寸提供好尺寸。

　　如果在背景中使用視頻作為設(shè)計(jì)元素，記得取消自動(dòng)播放功能。

　　壓縮的視頻文件。我大部分時(shí)間都在使用 Adobe Premiere，但 Camtasia 也是一個(gè)可靠的選擇。

　　減少視頻長(zhǎng)度。

　　考慮將視頻上傳至優(yōu)酷土豆或騰訊視頻，而不是在本地使用它們，并使用它們的 iframe 嵌入代碼。

　　為了真正優(yōu)化你的網(wǎng)站上的媒體，你需要根據(jù)屏幕尺寸提供合適大小的圖片，而不是簡(jiǎn)單地調(diào)整大小?；谟诚竦膶?shí)現(xiàn)，有兩種方法可以處理此問(wèn)題。

　　在你的網(wǎng)站的 html 中可以使用 src 設(shè)置，它允許瀏覽器選擇，下載，并根據(jù)訪問(wèn)者使用的設(shè)備的屏幕大小顯示適當(dāng)?shù)膱D像。

　　通過(guò) CSS 放置的圖像 —— 通常作為背景圖像，可以使用媒體查詢(xún)來(lái)選擇合適的圖像，基于訪問(wèn)者正在使用的設(shè)備的屏幕大小。

　　(2)優(yōu)化圖片

　　選擇理想的格式。JPG 是好的攝影圖像，而 GIF 或 PNG 最好的圖像有大面積的純色。8 位 PNG 文件是用于沒(méi)有 alpha 通道(透明背景)和 24 位文件的圖像，它們是帶有 alpha 通道的圖像。

　　確保圖像尺寸正確。如果你的網(wǎng)站上只支持 800 像素的圖片，那么使用 1600 像素的圖片是沒(méi)有任何好處的。

　　壓縮圖像文件。

　　9、利用緩存和 CDN

　　緩存使你的 web 服務(wù)器來(lái)存儲(chǔ)你的網(wǎng)頁(yè)的靜態(tài)副本，這樣他們可以更快地交付到訪問(wèn)者的瀏覽器。而 CDN 允許將這些副本分發(fā)到世界各地的服務(wù)器，以便訪問(wèn)者的瀏覽器從最接近他們的位置的服務(wù)器下載內(nèi)容。這大大提高了頁(yè)面加載速度。

　　一個(gè)流暢的網(wǎng)頁(yè)打開(kāi)體驗(yàn)對(duì)用戶(hù)、對(duì)搜索引擎爬行蜘蛛來(lái)說(shuō)都是非常有用處的。