日照網站建設公司告訴你網站的原始指標是什么!
網站性能基本的測試是看渲染頁面所需要的資源,包括這些資源的大小和總數。
1. 頁面大小
網站頁面正變得越來越大。從 2014 年 4 月到 2015 年 4 月,網站頁面的平均大小從 1762KB 增長到 2061KB,以每年 17% 的速率增長。而回到 2011 年 4 月,網站頁面的平均大小只有不到 769KB !
雖然頁面大小并非影響網站加載速度的因素,但它確實對此影響重大。頁面過大還有其他副作用,我們知道越來越多的用戶通過移動設備訪問網站,而他們要為數據流量付費。你的網站頁面越大,用戶就將支付越多的費用,尤其是在發展中國家。不然試試訪問 What Dose My Site Cost來看看新的圖片輪播功能讓德國的手機用戶花了多少錢。
當你希望縮減頁面的大小時,可以從以下幾個顯而易見的地方開始。
圖片占據頁面平均大小的 61%。
優化 PNG 圖片,并降低 JPEG 圖片的質量。
利用新的響應式的 <picture> 標記和 srcset 屬性來下載大小合適的圖片。
制定一個預算,如果沒有移除任何圖片,就不增加圖片大小。
太多自定義字體很快會使網頁變得臃腫。
制定一個字體預算,不考慮增加2種或3種字體。
考慮必要的字體粗細,因為每增加一種粗細變化,都會使字體文件增加幾千個字節。
雖然圖標字體很不錯,但要注意文件大小,因為圖標字體會使字體文件迅速變大。如果一個網站只使用字體文件的一部分,其他網站使用另外的部分,那就拆分字體文件。也可以考慮使用內聯 SVG 代替圖標字體,只加載需要的 SVG 就可以得到很多圖標字體了。
JavaScript 框架、jQuery 插件和 CSS 框架常常使頁面大小增加很多,卻收效甚微。
很多網站都已遠離 jQuery,因為 vanilla JS 就可以滿足其需求,尤其是網站只針對現代瀏覽器時。
jQuery 插件雖然可能會提供一些很厲害的功能,卻常常使頁面大小顯著增加。考慮在現代瀏覽器上使用 CSS 能否達到同樣的效果,并在低版本瀏覽器上合理地回退。
像 Angular 或者 Ember 這樣的大型 JavaScript 框架也許能完成你的工作,但生成的網頁大小會超出實際工作的需要。如果只需要使用 Angular 的視圖層,那么要使用 React 或 Mustache 來替換。
CSS 框架往往是亂七八糟的。它包含可能會用到的所有想象得到的樣式。雖然這對于網頁快速成型很有幫助,但從現有的幾千字節的 CSS 和 JavaScript 出發來構建網站,會讓你在開始寫一行代碼之前就陷入困境。
使用壓縮。
JavaScript 可以在構建流程中以編程的方式進行壓縮,而且可以在服務器將文件發送到瀏覽器之前使用 gzip 壓縮。這些都是縮減網頁大小的關鍵步驟。
2. HTTP請求次數
瀏覽器對頁面渲染所需的每個文件都要進行 HTTP 請求。因為每個瀏覽器對 HTTP 請求的次數有單域名并發限制,所以大量單獨的文件意味著瀏覽器必須進行多輪并發請求。在速度較慢的網絡環境中,這么多并發請求會造成很復雜的影響。因此,減少獲取所需文件的并發請求次數,效果會很顯著。
可以通過如下的方法減少并發請求次數。
減少 HTTP 請求的次數。
不要提供數十個單獨的 CSS 文件和 JavaScript 文件,而是把它們合并到一個文件中。
把多個單獨的圖像文件合并成一個圖像映射或者圖標字體。有很多不錯的工具(例如 Compass 和 Grunt/Gulp 插件)可以幫你自動化地完成這些任務。
延遲加載頁面期初加載所不需要的資源。這可能是直到用戶與頁面交互才需要的 JavaScript 文件,也可能是初始加載窗口之下距離較遠的圖片。
增加瀏覽器每次并發請求的資源個數。
分拆你的資源到不同的服務器(或者 CDN),可以使得瀏覽器單次并發下載更多的資源,因為瀏覽器的并發請求數量限制是針對單個服務器的。
以上是日照網站建設公司(昊諾網絡公司)分享,如果你想了解更多的網站建設知識請關注我們網站的動態!
建站咨詢熱線
15163346885