6種簡(jiǎn)單且有效的網(wǎng)站設(shè)計(jì)方式提高網(wǎng)頁(yè)加載速度

你可能在想，網(wǎng)站速度有什么大驚小怪？平均網(wǎng)頁(yè)加載速度有什么重要？據(jù)Aberdeen Group介紹，頁(yè)面加載時(shí)間延遲1秒，結(jié)果如下：

? 頁(yè)面瀏覽量減少11％

? 客戶滿意度下降16％

? 轉(zhuǎn)化次數(shù)減少7％

亞馬遜報(bào)告，網(wǎng)站速度每100毫秒改善,而沃爾瑪則增加了1％的收益，同時(shí)發(fā)現(xiàn)每一個(gè)頁(yè)面速度每增加一秒就會(huì)增加2％的轉(zhuǎn)化。

您的網(wǎng)站的速度還會(huì)影響您的自然搜索排名，因?yàn)镚oogle 自2010年以來(lái)已將網(wǎng)站速度作為其排名算法的信號(hào)?；旧?，您的網(wǎng)頁(yè)加載速度非常重要，并確定您是否將在SERP中排名。

以下是通過(guò)修改您的網(wǎng)站設(shè)計(jì)立即提高網(wǎng)頁(yè)速度的 6種簡(jiǎn)單但非常有效的方式：

＃1優(yōu)化圖像和延遲加載的所有內(nèi)容

網(wǎng)絡(luò)上的一些最常見(jiàn)的占帶寬的便是圖像。根據(jù)HTTP存檔，圖像現(xiàn)在占頁(yè)面權(quán)重的63％?！敖刂?015年5月，平均網(wǎng)頁(yè)超過(guò)了2 MB的標(biāo)記。這幾乎是三年前平均頁(yè)面大小的兩倍。

“圖表顯示了消耗最多千字節(jié)的細(xì)目。實(shí)際上所有的資產(chǎn)類型都在增長(zhǎng)，最顯著的是圖像。

當(dāng)創(chuàng)建內(nèi)容時(shí)，有些人會(huì)使用大圖像，然后使用CSS來(lái)縮放它們。然而，他們不知道，瀏覽器仍然以全尺寸加載它們。例如，如果將800 x 800的圖像縮小到80 x 80，瀏覽器將加載十倍以上。

優(yōu)化圖像的好方法是將其壓縮成更小的尺寸，同時(shí)保持質(zhì)量。使用諸如TinyJPG和Compressor.io之類的工具，或諸如WP Smush It（WordPress）和Imgen（Joomla）之類的CMS插件來(lái)壓縮圖像將保證您的網(wǎng)站加載速度更快，從而為網(wǎng)站訪問(wèn)者提供更好的體驗(yàn)并提高轉(zhuǎn)化率。

另一種選擇是“延遲加載”圖像和網(wǎng)頁(yè)內(nèi)容。實(shí)質(zhì)上，您可以使用一些JavaScript來(lái)查找哪些圖像位于或靠近視口，并且僅下載用戶可能會(huì)看到的圖像。

根據(jù)Stackpath總結(jié)的延遲加載的好處包括：

延遲加載在優(yōu)化內(nèi)容交付和簡(jiǎn)化最終用戶體驗(yàn)之間取得平衡。

用戶更快地連接到內(nèi)容，因?yàn)橹挥幸徊糠志W(wǎng)站需要在用戶首次打開(kāi)時(shí)下載。

隨著內(nèi)容持續(xù)供給用戶，企業(yè)看到更高的客戶保留率，減少了用戶離開(kāi)網(wǎng)站的機(jī)會(huì)。

企業(yè)看到資源成本在降低，因?yàn)閮?nèi)容只有在用戶需要的時(shí)候才能傳遞，而不是一次性的傳遞。

＃2使用瀏覽器緩存

設(shè)置瀏覽器緩存可以讓你暫時(shí)的數(shù)據(jù)存儲(chǔ)在網(wǎng)站訪問(wèn)者的計(jì)算機(jī)上。這確保了他們每次訪問(wèn)您的網(wǎng)站時(shí)不必等待您的網(wǎng)頁(yè)（標(biāo)志，CSS文件和其他資源）加載。

您的服務(wù)器端緩存及其瀏覽配置可確定存儲(chǔ)數(shù)據(jù)的時(shí)間。在您的服務(wù)器上設(shè)置瀏覽器緩存可以通過(guò)聯(lián)系您的托管公司或通過(guò)查看以下資源來(lái)完成：

? Apache緩存

? IIS緩存

? Nginx緩存

利用瀏覽器緩存來(lái)指定Web瀏覽器保存CSS，JS和圖像存儲(chǔ)的時(shí)間。對(duì)于回訪客戶讓您的網(wǎng)頁(yè)加載速度更快，導(dǎo)致了流暢的體驗(yàn)，同時(shí)在導(dǎo)航和在搜索結(jié)果頁(yè)面（SERP）上更好的排名。

另外，安裝緩存插件會(huì)對(duì)您的頁(yè)面加載時(shí)間產(chǎn)生巨大的影響。緩存插件通過(guò)生成內(nèi)容的靜態(tài)副本并將其傳遞給站點(diǎn)訪問(wèn)者來(lái)處理此問(wèn)題。這可以大大減少您的頁(yè)面加載時(shí)間。

緩存插件可以幫助你看到你的網(wǎng)站的整體性能10倍左右的改善。緩存插件的示例包括W3 Total Cache。

＃3壓縮網(wǎng)頁(yè)內(nèi)容

Google將壓縮定義為使用較少位編碼信息的過(guò)程。盡管最新的網(wǎng)絡(luò)瀏覽器都支持內(nèi)容壓縮功能，許多網(wǎng)站仍然沒(méi)有釋放壓縮內(nèi)容。

訪問(wèn)這些網(wǎng)站的訪問(wèn)者與網(wǎng)頁(yè)的互動(dòng)速度緩慢。 這些不利的網(wǎng)站行為的主要原因包括舊的或錯(cuò)誤的瀏覽器，網(wǎng)絡(luò)代理，配置錯(cuò)誤的主機(jī)服務(wù)器和防病毒軟件。

未壓縮的內(nèi)容使得對(duì)于具有有限帶寬的用戶，接收到Web內(nèi)容和頁(yè)面加載時(shí)間非常慢。為了有效的壓縮策略提供高效的網(wǎng)站內(nèi)容，Google建議如下：

1）Minify，HTML，CSS和JavaScript

2）在CSS和HTML中使用一致的代碼，方法如下：

? 使用一致的規(guī)格 - 大多是小寫的。

? 確保引用HTML標(biāo)簽屬性。

? 以相同的順序顯示HTML屬性。

? 使用Adobe DreamWeaver和MAMP等工具分別在PC上本地創(chuàng)建/編輯CSS并測(cè)試運(yùn)行網(wǎng)站，按照相同的順序來(lái)指示CSS鍵-值對(duì)（KVP）。

3）啟用Gzip壓縮

Gzip找到類似的字符串和代碼實(shí)例，并用較短的字符臨時(shí)替換它們。根據(jù)Google說(shuō)法：“啟用Gzip壓縮可以將傳輸響應(yīng)的大小減少高達(dá)90％，這可以顯著減少下載資源的時(shí)間量，減少客戶端的數(shù)據(jù)使用量，并改善首次渲染頁(yè)面的時(shí)間”

＃4優(yōu)化CSS代碼和傳遞

CSS的引入是一個(gè)關(guān)鍵的改進(jìn)，幾乎沒(méi)有任何缺點(diǎn)。 但是，必須考慮CSS腳本對(duì)頁(yè)面速度的影響，特別是它涉及到一個(gè)網(wǎng)頁(yè)的表現(xiàn)時(shí)。

當(dāng)CSS交付不當(dāng)時(shí)，導(dǎo)致瀏覽器在下載和處理樣式數(shù)據(jù)時(shí)延遲，在它可以徹底完成呈現(xiàn)，以顯示給你網(wǎng)頁(yè)的訪問(wèn)者之前。這就是為什么至關(guān)重要的是優(yōu)化CSS交付，并確定可能減慢您的網(wǎng)頁(yè)的陷阱。

CSS可以通過(guò)網(wǎng)頁(yè)以多種方式使用，并且仍然可以工作。鑒于有各種方法可以使用它，有幾種不同的CSS設(shè)置。無(wú)論您如何在網(wǎng)頁(yè)上進(jìn)行設(shè)置，您的CSS應(yīng)該幫助您的網(wǎng)頁(yè)呈現(xiàn)更快的速度，而不會(huì)減慢速度。

您可以利用不同的在線工具來(lái)壓縮，優(yōu)化和清理CSS交付。另外，您可以參考Google關(guān)于優(yōu)化CSS交付的建議。

＃5使用非常快的服務(wù)器托管公司

有一段時(shí)間，我更換了我的托管公司，我的網(wǎng)站的平均速度在其他任何不改變情況下顯著增加。當(dāng)時(shí)我意識(shí)到，當(dāng)涉及到網(wǎng)站的加載速度托管公司并不都是平等的。

在瀏覽網(wǎng)站或打開(kāi)網(wǎng)頁(yè)時(shí)，您將從遠(yuǎn)程計(jì)算機(jī)（即托管公司的Web服務(wù)器）打開(kāi)文件。遠(yuǎn)程計(jì)算機(jī)越快，您的網(wǎng)頁(yè)可以打開(kāi)的速度越快。

有各種各樣的托管公司在那里供您使用。只要確保您進(jìn)行適當(dāng)?shù)难芯浚㈤喿x足夠的評(píng)論，然后再?zèng)Q定用任何一個(gè)主辦來(lái)托管您的網(wǎng)站。

在研究可靠的網(wǎng)絡(luò)托管公司時(shí)，您應(yīng)該注意的最重要的因素包括速度/加載時(shí)間，正常運(yùn)行時(shí)間/可靠性，客戶支持和價(jià)格/價(jià)值。

＃6停用不使用的插件

插件通常是減慢WordPress托管網(wǎng)站速度的主要原因。刪除您不再使用或不是必需的插件。您可以通過(guò)選擇性地禁用插件和衡量服務(wù)器性能來(lái)識(shí)別可能損害您速度的插件。

另外，為了加快您的WordPress網(wǎng)站在手機(jī)上的體驗(yàn)，請(qǐng)查看我們的指南，盡快在您的WordPress網(wǎng)站上實(shí)施Google AMP。

結(jié)論

用戶將繼續(xù)要求更豐富的在線體驗(yàn)，并且會(huì)有更快更清晰的JavaScript，更多的CSS竅門和其他第三方分析工具，以增加您的網(wǎng)頁(yè)的大小和衡量您的網(wǎng)站。

作為一個(gè)在線營(yíng)銷人員，你不能讓這個(gè)讓你迷惑。 您必須定期努力擴(kuò)展您的網(wǎng)頁(yè)設(shè)計(jì)，以提高您的網(wǎng)頁(yè)加載速度。一點(diǎn)點(diǎn)持續(xù)關(guān)注你的網(wǎng)站加載速度會(huì)走很長(zhǎng)的路。記住：只需在您的網(wǎng)站加載速度一秒鐘的延遲就是失去。

譯者：李振喃、審校：袁帥

新聞名稱：6種簡(jiǎn)單且有效的網(wǎng)站設(shè)計(jì)方式提高網(wǎng)頁(yè)加載速度
文章起源：http://www.muchs.cn/news14/155664.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)