4種改善網(wǎng)站加載時(shí)間和性能的方法

2022-06-14 分類：網(wǎng)站建設(shè)

網(wǎng)站加載時(shí)間的重要性

如今，用戶已對(duì)加載速度較慢或性能不足的網(wǎng)站失去了耐心。

在Akamai進(jìn)行的一項(xiàng)研究中，大約一半的Web用戶期望網(wǎng)站在2秒或更短的時(shí)間內(nèi)加載完畢。如果3秒鐘之內(nèi)未加載該網(wǎng)站，則這些用戶傾向于放棄該網(wǎng)站。

考慮到這一點(diǎn)，讓我們看一下優(yōu)化網(wǎng)站以獲得優(yōu)異性能的方法。網(wǎng)站優(yōu)化

最小化HTTP請(qǐng)求

每當(dāng)瀏覽器從Web服務(wù)器獲取文件，頁(yè)面或圖片時(shí)，都會(huì)對(duì)HTTP （超文本傳輸協(xié)議）請(qǐng)求進(jìn)行計(jì)數(shù)。

根據(jù)Yahoo的說(shuō)法，這些請(qǐng)求通常會(huì)占用網(wǎng)頁(yè)加載時(shí)間的80％。瀏覽器還將每個(gè)域的請(qǐng)求限制在4-8個(gè)同時(shí)連接之間，這意味著無(wú)法一次加載30個(gè)以上的資產(chǎn)。

這意味著您需要加載的HTTP請(qǐng)求越多，該頁(yè)面進(jìn)入并檢索所有請(qǐng)求所花費(fèi)的時(shí)間就越長(zhǎng)，從而增加了Web頁(yè)面的加載時(shí)間。

1.如何減少HTTP請(qǐng)求

盡管似乎通過(guò)簡(jiǎn)化頁(yè)面來(lái)限制頁(yè)面設(shè)計(jì)，但是您可以使用多種策略來(lái)減少HTTP請(qǐng)求以減輕瀏覽器的負(fù)擔(dān)。

合并CSS / JS文件- 嘗試將CSS文件合并為一個(gè)更大的文件（與JS相同），而不是強(qiáng)制瀏覽器檢索要加載的多個(gè)CSS或Javascript文件。如果樣式表和腳本因頁(yè)面而異，這可能會(huì)帶來(lái)挑戰(zhàn)，但從長(zhǎng)遠(yuǎn)來(lái)看，設(shè)法將它們合并將最終幫助您縮短加載時(shí)間。

使用查詢僅加載需要的內(nèi)容- 如果發(fā)現(xiàn)只需要在臺(tái)式機(jī)上加載某些圖像或僅需要在移動(dòng)設(shè)備上運(yùn)行特定腳本，則使用條件語(yǔ)句加載它們可以是提高速度的好方法。這樣，您就不會(huì)強(qiáng)迫瀏覽器加載對(duì)某些設(shè)備或視口無(wú)用的各種腳本或圖像。

減少使用的圖像數(shù)量- 如果發(fā)現(xiàn)某些頁(yè)面上的圖像非常繁瑣，請(qǐng)嘗試刪除一些頁(yè)面，尤其是當(dāng)它們的文件大小很大時(shí)。這不僅可以幫助減少圖像HTTP請(qǐng)求，而且可以通過(guò)移除與您的書(shū)面內(nèi)容不符的分散圖像來(lái)改善用戶體驗(yàn)。

CSS Sprites- 適用時(shí)，將您在網(wǎng)站上經(jīng)常使用的圖像組合到一個(gè)Sprite工作表中，并使用CSS background-image 和background-position 來(lái)訪問(wèn)圖像可防止您的瀏覽器每次加載網(wǎng)站上的某些頁(yè)面時(shí)都不斷嘗試檢索多張圖像。這樣，瀏覽器僅通過(guò)將正確的圖像正確放置在頁(yè)面每個(gè)區(qū)域的視圖中，才能檢索頁(yè)面上可以多次使用的圖像。

2.利用CDN并刪除未使用的腳本/文件

通過(guò)將內(nèi)容分布在各種地理位置分散的服務(wù)器上來(lái)縮小距離并不是一個(gè)可行的選擇，并且實(shí)施起來(lái)有點(diǎn)太復(fù)雜了。

這就是內(nèi)容交付網(wǎng)絡(luò)（CDN）進(jìn)入的地方。CDN 是分布在多個(gè)位置的Web服務(wù)器的集合，因此可以將內(nèi)容更有效地交付給用戶。CDN通常用于靜態(tài)內(nèi)容或上傳后確實(shí)需要觸摸的文件。

服務(wù)器是根據(jù)用戶對(duì)網(wǎng)絡(luò)鄰近程度的度量來(lái)選擇的。例如，選擇響應(yīng)時(shí)間最快和/或網(wǎng)絡(luò)跳數(shù)最少的服務(wù)器。

較大的公司傾向于擁有自己的CDN，而中型企業(yè)將使用EdgeCast等CDN提供商。

3.瀏覽器緩存

瀏覽器緩存允許將網(wǎng)站上的資產(chǎn)一次下載到硬盤(pán)驅(qū)動(dòng)器或臨時(shí)存儲(chǔ)空間中，然后再下載到硬盤(pán)驅(qū)動(dòng)器中。這些文件現(xiàn)在存儲(chǔ)在您的系統(tǒng)本地上，這可以提高后續(xù)頁(yè)面加載的速度。

CSS，JS和圖像以及媒體文件的有效期應(yīng)為一周，但理想情況下為一年，因?yàn)樽仙玆FC準(zhǔn)則不再適用。

4.壓縮圖像并優(yōu)化文件

當(dāng)前，圖像占用每頁(yè)加載的平均字節(jié)的60％，大約1504KB。與腳本（399KB），CSS（45KB）和視頻（294KB）等其他頁(yè)面資產(chǎn)相比，圖像占用了大量發(fā)送的HTTP請(qǐng)求。

如前所述，請(qǐng)刪除您認(rèn)為不需要的任何資產(chǎn)圖像。這包括僅使用其中兩種圖標(biāo)的圖標(biāo)庫(kù)，您認(rèn)為可能會(huì)使用但未使用的那三種額外字體，以及可以用CSS復(fù)制的圖像（例如彩色背景或漸變）。

清除這些資產(chǎn)后，請(qǐng)查看整個(gè)站點(diǎn)中的圖像并查看其大小。通常，許多人傾向于從庫(kù)存圖片站點(diǎn)下載圖像并將其上傳到他們的服務(wù)器上并使用它們，而無(wú)需費(fèi)心為網(wǎng)絡(luò)進(jìn)行優(yōu)化。

如果您發(fā)現(xiàn)使用大圖像，尤其是英雄圖像，請(qǐng)通過(guò)Compressor.io或Image Optimizer之類的優(yōu)化軟件運(yùn)行它們。將所有圖像的平均質(zhì)量/中/ 72dpi的水平保持在150KB以下，寬度不超過(guò)1920px。如果更大，您會(huì)注意到頁(yè)面渲染后很晚才加載圖像，以及對(duì)用戶行為的響應(yīng)時(shí)間很慢。

當(dāng)涉及到什么文件擴(kuò)展名時(shí)，可以將其用作基本公式：

SVG適用于要接收大量細(xì)節(jié)的矢量圖像。

某些圖標(biāo)可以利用諸如FontAwesome之類的字體庫(kù)來(lái)呈現(xiàn)某些圖形，而不是保存單個(gè)圖像。

對(duì)于需要透明背景的圖像，請(qǐng)使用PNG，例如人的圓形圖像或Facebook的“ F”徽標(biāo)。

JPG最適合照片或其他細(xì)節(jié)不重要的應(yīng)用。

盡管圖像仍將占據(jù)您的HTTP請(qǐng)求的大部分，但優(yōu)化它們和其他資產(chǎn)最終將使它們的大小減小并提高網(wǎng)站的整體性能。

分享標(biāo)題：4種改善網(wǎng)站加載時(shí)間和性能的方法
本文鏈接：http://jinyejixie.com/news/166881.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、定制開(kāi)發(fā)、自適應(yīng)網(wǎ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)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

4種改善網(wǎng)站加載時(shí)間和性能的方法