深圳
網(wǎng)站建設(shè)公司詳解網(wǎng)站頁面大小的原始指標(biāo)。
網(wǎng)站建設(shè)公司資深設(shè)計師提醒網(wǎng)站性能最基本的測試是看渲染頁面所需要的資源，包括這些資源的大小和總數(shù)。網(wǎng)站頁面正變得越來越大。深圳網(wǎng)站建設(shè)公司資深設(shè)計師舉例說明從 2014 年 4 月到 2015 年 4 月，網(wǎng)站頁面的平均大小從 1762KB 增長到 2061KB，以每年 17％ 的速率增長。而回到現(xiàn)在，一個高用戶體驗的商城網(wǎng)站頁面的平均大小只有不到 769KB！雖然頁面大小并非影響網(wǎng)站加載速度的唯一因素，但它確實對此影響重大。頁面過大還有其他副作用，我們知道越來越多的用戶通過移動設(shè)備訪問網(wǎng)站，而他們要為數(shù)據(jù)流量付費。你的網(wǎng)站頁面越大，用戶就將支付越多的費用，尤其是在發(fā)展中國家。不然試試訪問 What Dose My Site Cost（http://whatdoesmysitecost.com/）來看看新的圖片輪播功能讓德國的手機(jī)用戶花了多少錢。
當(dāng)你希望縮減頁面的大小時，可以從以下幾個顯而易見的地方開始。
· 圖片占據(jù)頁面平均大小的 61％。
· 優(yōu)化 PNG 圖片，并降低 JPEG 圖片的質(zhì)量。
· 利用新的響應(yīng)式的 <picture> 標(biāo)記和 srcset 屬性來下載大小合適的圖片。
· 制定一個預(yù)算，如果沒有移除任何圖片，就不增加圖片大小。
· 太多自定義字體很快會使網(wǎng)頁變得臃腫。
· 制定一個字體預(yù)算，不考慮增加第二種或第三種字體。
· 考慮必要的字體粗細(xì)，因為每增加一種粗細(xì)變化，都會使字體文件增加幾千個字節(jié)。
· 雖然圖標(biāo)字體很不錯，但要注意文件大小，因為圖標(biāo)字體會使字體文件迅速變大。如果一個網(wǎng)站只使用字體文件的一部分，其他網(wǎng)站使用另外的部分，那就拆分字體文件。也可以考慮使用內(nèi)聯(lián) SVG 代替圖標(biāo)字體，只加載需要的 SVG 就可以得到很多圖標(biāo)字體了。
· JavaScript 框架、jQuery 插件和 CSS 框架常常使頁面大小增加很多，卻收效甚微。
· 很多網(wǎng)站都已遠(yuǎn)離 jQuery，因為 vanilla JS 就可以滿足其需求，尤其是網(wǎng)站只針對現(xiàn)代瀏覽器時。
· jQuery 插件雖然可能會提供一些很厲害的功能，卻常常使頁面大小顯著增加?？紤]在現(xiàn)代瀏覽器上使用 CSS 能否達(dá)到同樣的效果，并在低版本瀏覽器上合理地回退。
· 像 Angular 或者 Ember 這樣的大型 JavaScript 框架也許能完成你的工作，但生成的網(wǎng)頁大小會超出實際工作的需要。如果只需要使用 Angular 的視圖層，那么最好使用 React 或 Mustache 來替換。
· CSS 框架往往是亂七八糟的。它包含可能會用到的所有想象得到的樣式。雖然這對于網(wǎng)頁快速成型很有幫助，但從現(xiàn)有的幾千字節(jié)的 CSS 和 JavaScript 出發(fā)來構(gòu)建網(wǎng)站，會讓你在開始寫第一行代碼之前就陷入困境。
· 使用壓縮。
◎JavaScript 可以在構(gòu)建流程中以編程的方式進(jìn)行壓縮，而且可以在服務(wù)器將文件發(fā)送到瀏覽器之前使用 gzip 壓縮。這些都是縮減網(wǎng)頁大小的關(guān)鍵步驟。
深圳網(wǎng)站建設(shè)公司詳解網(wǎng)站頁面大小的原始指標(biāo)之HTTP請求次數(shù)
瀏覽器對頁面渲染所需的每個文件都要進(jìn)行 HTTP 請求。因為每個瀏覽器對 HTTP 請求的次數(shù)有單域名并發(fā)限制，所以大量單獨的文件意味著瀏覽器必須進(jìn)行多輪并發(fā)請求。在速度較慢的網(wǎng)絡(luò)環(huán)境中，這么多并發(fā)請求會造成很復(fù)雜的影響。因此，減少獲取所需文件的并發(fā)請求次數(shù)，效果會很顯著。網(wǎng)站建設(shè)公司提醒可以通過如下的方法減少并發(fā)請求次數(shù)。
· 減少 HTTP 請求的次數(shù)。
· 不要提供數(shù)十個單獨的 CSS 文件和 JavaScript 文件，而是把它們合并到一個文件中。
· 把多個單獨的圖像文件合并成一個圖像映射或者圖標(biāo)字體。有很多不錯的工具（例如 Compass 和 Grunt/Gulp 插件）可以幫你自動化地完成這些任務(wù)。
· 延遲加載頁面最初加載所不需要的資源。這可能是直到用戶與頁面交互才需要的 JavaScript 文件，也可能是初始加載窗口之下距離較遠(yuǎn)的圖片。
· 增加瀏覽器每次并發(fā)請求的資源個數(shù)。
◎分拆你的資源到不同的服務(wù)器（或者 CDN），可以使得瀏覽器單次并發(fā)下載更多的資源，因為瀏覽器的并發(fā)請求數(shù)量限制是針對單個服務(wù)器的。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“深圳網(wǎng)站建設(shè)公司詳解網(wǎng)站頁面大小的原始指標(biāo)”經(jīng)驗就分享到這里。如果您需要尋找深圳高端網(wǎng)站建設(shè)定制服務(wù)商，請您聯(lián)系我們。撥打網(wǎng)站制作聯(lián)系電話，我們會有專人為您提供免費的設(shè)計制作方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
