英文 | https://javascript.plainenglish.io/5-ways-to-improve-your-web-page-performance-1af1f57175bb
翻譯 | web前端開發公衆号
介紹
大多數站長認為，在其網頁上産生許多令人敬畏的效果，會吸引更多的客戶。但是那些額外的功能（動畫等）隻有在客戶不必等待10秒鐘，就能加載完網站的情況下才可以。
優化你的網頁性能是改善使用者體驗的好方法，但是快速的網站會帶來很多損失。Web性能優化是一項永無止境的工作。
在本文中，我們将讨論一些改善網頁性能的有用方法。但是首先，讓我們檢查一下如何使用浏覽器中的開發人員工具來跟蹤網站的性能。
跟蹤網站效果
你可以通過在浏覽器中打開開發人員工具來跟蹤網站的性能（在Chrome中按F12鍵）。
之後，轉到“網絡”頁籤，然後在你的站點上重新加載頁面。你将看到一些類似于以下示例的結果：
在這種情況下，你可以看到，該網頁花費了22.85秒，并且有95個請求加載了頁面的全部内容。那是一個很大的加載時間，使用者不喜歡等待太多。但是我們可以通過以下技巧提高性能來解決這一問題。
1、綁定和縮小
改善網頁性能的最流行的方法之一是綁定和縮小檔案（JS-CSS等）。這對于減小檔案大小很有用。你可以使用Webpack或Parcel等網絡程式來實作。Web程式使綁定和縮小檔案變得更加容易。
如果這是你第一次了解捆包機，我強烈建議你使用Parcel，因為它易于使用并且不需要任何配置。
2、縮小圖像尺寸
您可以通過減少頁面上圖像的大小來加快網站速度。可以優化大多數圖像并将其縮小，有些有用的工具可以幫助縮小它們并減小其大小。
最後，如果你的頁面上包含很多圖像，則可能需要考慮延遲加載圖像。這意味着隻要我們滾動頁面，圖像就隻會在螢幕上可見時加載。你可以使用某些庫或僅使用交集觀察器API來實作。
3、緩存和内容傳遞網絡
你可以采取的提高性能的措施之一就是利用内容傳遞網絡（CDN）。你網站上的某些靜态檔案不會更改，例如JavaScript，CSS和圖像檔案。
你可以通過在使用者所在位置附近的伺服器上緩存這些檔案來提高網站的性能。這對于減輕伺服器的流量負擔和加快網站加載速度很有用。你可以為此使用某些工具，例如Cloudflare，它很容易設定。
4、延遲載入JavaScript
将腳本放在頁面正文的底部可以使浏覽器首先加載頁面。另一種方法是defer="true"在script标簽中使用。defer屬性指定腳本應在頁面解析完成後執行，但僅适用于外部腳本。你所要做的就是将腳本放在HTML的head标簽下面。
<script src =“ fileName.js” defer =“ true”> </ script>
br 此技巧有助于減輕同時加載多個檔案的壓力，進而影響網站性能。
5、異步加載JavaScript
提高性能的另一個技巧是異步加載JavaScript代碼。如今，大多數網站都與一些第三方内容內建在一起，例如社交媒體，聊天功能，評論服務等等。是以，在這種情況下，你必須異步加載JavaScript，這意味着你的代碼不應等待任務完成才能遷移到另一個任務。它必須同時（異步）執行許多任務，因為這将有助于加快頁面加載速度，提高性能并最終改善使用者體驗。
結論
改善性能并非易事。随着你繼續對網頁進行更改，其使用和性能也将發生變化。是以，你必須犧牲時間和精力來改善它。
感謝你閱讀本文，希望它對你有用。