翻譯 | 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，這意味着你的代碼不應等待任務完成才能遷移到另一個任務。它必須同時（異步）執行許多任務，因爲這將有助於加快頁面加載速度，提高性能並最終改善用戶體驗。

結論

改善性能並非易事。隨着你繼續對網頁進行更改，其使用和性能也將發生變化。因此，你必須犧牲時間和精力來改善它。

感謝你閱讀本文，希望它對你有用。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/-tnwGE9YXC6-4TrPfgzq7w