Web加載速度優化清單

時間  2019-11-07
標籤 web 加載 速度 優化 清單 欄目 HTML 简体版
原文   原文鏈接

網頁加載速度是衡量一個網頁好壞的重要標準，網頁遺棄率隨網頁加載時間的增長而增長。聽說近一半的用戶但願網頁加載時間不超過2s，超過3s通常就放棄該網頁。時間就是生命，乾等着，誰願意無緣無故地+1s呀，因此今天來整理下具體如何加快網頁javascript

HTML

  • 壓縮 HTML: HTML代碼壓縮，將註釋、空格和新行從生產文件中刪除。css

    爲何：html

    刪除全部沒必要要的空格、註釋和中斷行將減小HTML的大小，加快網站的頁面加載時間，並顯著減小用戶的下載時間。

    怎麼作：前端

    大多數框架都有插件用來壓縮網頁的體積。你可使用一組能夠自動完成工做的NPM模塊。

  • 刪除沒必要要的註釋： 確保從您的網頁中刪除註釋。java

    爲何：git

    註釋對用戶來講是沒有用的，應該從生產環境文件中刪除。可能須要保留註釋的一種狀況是：保留遠端代碼庫（keep the origin for a library）。

    怎麼作：github

    大多數狀況下，可使用HTML minify插件刪除註釋。

  • 刪除沒必要要的屬性： 像 type="text/javascript" or type="text/css" 這樣的屬性應該被移除。web

    <!-- Before HTML5 -->
<script type="text/javascript">
    // Javascript code
</script>

<!-- Today -->
<script>
    // Javascript code
</script>

    爲何npm

    類型屬性不是必需的，由於HTML5把text/css和text/javascript做爲默認值。沒用的代碼應在網站或應用程序中刪除，由於它們會使網頁體積增大。

    怎麼作：瀏覽器

    ⁃ 確保全部link和script標記都沒有任何type屬性。

   

  • 在JavaScript引用以前引用CSS標記： 確保在使用JavaScript代碼以前加載CSS。

    爲何：

    在引用JavaScript以前引用CSS能夠實現更好地並行下載，從而加快瀏覽器的渲染速度。

    怎麼作：

    確保 head 中的 link 和 style 始終位於 script 以前。
  • 最小化iframe的數量： 僅在沒有任何其餘技術可行性時才使用iframe。儘可能避免使用iframe。

  • DNS預取： 一次 DNS 查詢時間大概在60-120ms之間或者更長，提早解析網頁中可能的網絡鏈接域名

    <link rel="dns-prefetch" href="http://example.com/">

CSS

  • 壓縮: 全部CSS文件都須要被壓縮，從生產文件中刪除註釋，空格和空行。

    爲何：

    縮小CSS文件後，內容加載速度更快，而且將更少的數據發送到客戶端，因此在生產中縮小CSS文件是很是重要，這對用戶是有益的，就像任何企業想要下降帶寬成本和下降資源。

    怎麼作：

    使用工具在構建或部署以前自動壓縮文件。

  • Concatenation: CSS文件合併（對於HTTP/2效果不是很大）。

    <!-- 不推薦 -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- 推薦 -->
<link rel="stylesheet" href="foobar.css"/>

    爲何：

    若是你還在使用HTTP/1，那麼你就須要合併你的文件。不過在使用HTTP/2的狀況下不用這樣（效果待測試）。

    怎麼作：

    在構建或部署以前使用在線工具或者其餘插件來合併文件。
    固然，要確保合併文件後項目能夠正常運行。

  • 非阻塞： CSS文件須要非阻塞引入，以防止DOM花費更多時間才能渲染完成。

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    爲何：

    CSS文件能夠阻止頁面加載並延遲頁面呈現。使用 preload實際上能夠在瀏覽器開始顯示頁面內容以前加載CSS文件。

    怎麼作：

    須要添加 rel屬性並賦值 preload，並在 <link>元素上添加 as=「style」。

  • CSS類(class)的長度: class的長度會對HTML和CSS文件產生（輕微）影響。

    爲何：

    甚至性能影響也是有爭議的，項目的命名策略會對樣式表的可維護性有重大影響。若是使用BEM，在某些狀況下可能會寫出比所須要的類名更長的字符。重要的是要明智的選擇名字和命名空間。

    怎麼作：

    可能有些人更關注類名的長度，可是網站按組件進行劃分的話能夠幫助減小類名的數量和長度。

  • 不用的CSS: 刪除未使用的CSS選擇器。

    爲何：

    刪除未使用的CSS選擇器能夠減少文件的大小，提升資源的加載速度。

    怎麼作：

    ⚠️ 檢查要使用的CSS框架是否已包含reset/normalize代碼，可能不須要用到reset/normalize文件中的內容。

JavaScript

  • JS 壓縮: 全部JavaScript文件都要被壓縮，生產環境中刪除註釋、空格和空行（在HTTP/2仍然有效果）。

    爲何：

    刪除全部沒必要要的空格、註釋和空行將減小JavaScript文件的大小，並加快網站的頁面加載時間，提高用戶體驗。

    怎麼作：

    建議使用下面的工具在構建或部署以前自動縮小文件。

  • 非阻塞JavaScript： 使用defer屬性或使用async來異步加載JavaScript文件。

    <!-- Defer Attribute -->
<script defer src="foo.js">

<!-- Async Attribute -->
<script async src="foo.js">

    爲何：

    JavaScript阻止HTML文檔的正常解析，所以當解析器到達script標記時（特別是在<head>內），它會中止解析而且執行腳本。若是您的腳本位於頁面頂部，則強烈建議添加 async和 defer，但若是在</body>標記以前加載，沒有太大影響。可是，使用這些屬性來避免性能問題是一種很好的作法。

    怎麼作：

    添加 async（若是腳本不依賴於其餘腳本）或 defer（若是腳本依賴或依賴於異步腳本）做爲script腳本標記的屬性。
    若是有小腳本，能夠在異步腳本上方使用內聯腳本。

    • 使用 tree shaking 技術減小 js 大小: 經過構建工具分析 JavaScript 代碼並移除生產環境中用不到的 js 模塊或方法

      • 📖 [

Reduce JavaScript Payloads with Tree Shaking](https://developers.google.com...

  • 使用 code splitting 分包加載 js: 經過分包加載，減小首次加載所需時間

    怎麼作：

    Vendor splitting 根據庫文件拆分模塊，例如 React 或 lodash 單獨打包成一個文件
    Entry point splitting 根據入口拆分模塊，例如經過多頁應用入口或者單頁應用路由進行拆分
    Dynamic splitting 根據動態加載拆分模塊，使用動態加載語法 import() ，實現模塊按需加載

圖片資源

    • 服務部署

    以上清單僅爲節選，來源 https://github.com/w3cay/Fron...

    原文連接： Web加載速度優化清單-安望雲海

    相關文章
    相關標籤/搜索
    每日一句
      每一个你不满意的现在，都有一个你没有努力的曾经。
    本站公眾號
       歡迎關注本站公眾號,獲取更多信息
    聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程