- 原文地址：A beginner’s guide to website optimization
- 原文作者：Mario Hoyos
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：Starrier
- 校對者：Clarence、dazhi1011
網站優化初學者指南
圖片由 Pexels 提供。
我是一名初學者，在 Google 優化排名中，我可以達到 99/100。如果我可以做到，那麼您也可以。
如果您和我一樣，喜歡證據。下面是 Google 的 PageSpeed Insights 結果。hasslefreebeats 是我維護的網站，我最近花了一些時間進行優化。
我的 PageSpeed Insights 分數截圖。
我對這些結果感到非常自豪，但是我想強調的是，幾周前我還不知道如何去優化一個網站。今天我要和大家分享的只是一大堆 Google 搜素和故障排除所得出的結果，我希望可以為您省去麻煩。
為了防止您想跳過，這篇文章被分成了幾個小節。
我絕不是專家，但我相信如果您實施以下技術，你會看到效果！
圖片
圖片由 Pexels 提供 (Medium 已做優化).
作為一個網站開發初學者，我並沒有想過圖片的事情。我知道向我的網站新增高質量圖片會使它看上去更專業，但是我從沒有停下來考慮它們對我的網頁載入時間的影響。
我為優化影像所做的事情主要是壓縮它們。
回想起來，這從一開始就非常直觀，只是我沒有在意，可能您也一樣。
我用來壓縮圖片的服務是 Optimizilla, 一個易於使用的網站，那您只需上傳圖片，選擇你要壓縮的級別，然後下載壓縮圖片。我看到一些資源的大小減少了 70% 以上，這對於更快的載入時間有很大的幫助。
Optimizilla 並不是您圖片壓縮需求的唯一選擇。您可以使用一些獨立的開源軟體，Mac 環境下的 ImageOptim 或者 Windows 環境下的 FileOptimizer。如果您更喜歡用構建工具進行壓縮，那麼可以使用 Gulp 和 WebPack 外掛。無論您怎麼做，只要做了，那麼即使是最小的努力，也會在效能上獲取提升。
根據您的情況，可能還需要檢視檔案格式。一般來說，jpg 會比 png更小。我是否使用其中一個的主要區別是我是否需要圖片背後的透明度：如果我需要透明度就使用 png，否則使用 jpg。您可以在 這裡更深入地瞭解這兩者的利弊。
此外，Google 已經推出了一種非常貼心的 webp 格式，但由於目前沒有在所有瀏覽器被支援，所以我還在猶豫是否使用它。會留意未來是否有進一步地更新支援！
我沒有在我的圖片上做更多的壓縮來獲得以上展示的結果，但是如果您想進一步優化 這裡有一篇很棒的文章。
視訊
照片來自 Pexels 的 Terje Sollie。
尤其是我沒有在我目前的任何專案中使用視訊，所以我只會簡單地涉及到這一點，因為我不覺得在這方面我這是最佳的解決方案。
在這種情況下我可能會讓專業人士來做繁重的工作。Vimeo 為託管視訊提供了一個很好的平臺，在那裡它們會降低視訊質量，從而降低連結速度，並壓縮您的視訊以優化效能。
您也可以在 YouTube 上託管視訊，然後使用 youtube-dl 工具從 You Tube 下載視訊，同時根據您網站的需要配置視訊。
至於其他可能的解決方案，請檢視 Brightcove, Sprout 或者 Wistia.
Gzip 壓縮
瞭解了麼? Zip 壓縮? Pexels 提供的圖片。
最初部署我的網站時，我不知道 gzip 是什麼。
長話短說，gzip 是一種大多數瀏覽器都能理解的檔案壓縮格式。它可以在幕後執行而不需要使用者知道它正在發生。
根據您應用程式所在的位置，gzip 可能非常簡單，只需開啟配置開關，以指定您希望伺服器在傳送檔案時對其進行 gzip 壓縮。就我而言，託管我網站的 Heroku 不提供這個選項。
事實證明，在伺服器程式碼中有些包可以進行顯式壓縮。這使得您只需幾行程式碼即可獲取 gzip 的好處。使用這個壓縮中介軟體，我能夠將 JavaScript 和 CSS 捆綁包大小減少 75%。
檢查一下您的託管服務是否提供 gzip 選項是值得的。如果沒有，請檢視如何將 gzip 新增到伺服器程式碼中。
最小化
最小化的菠蘿 Pexels 提供。
最小化是在不影響程式碼功能（空格、換行符等）的情況下從程式碼中刪除不必要字元的過程。這使您可以減少您正在通過網際網路傳輸檔案的大小。它也有助於混淆您的程式碼，這使得狡猾的黑客更難檢測到安全弱點。
如今，最小化功能通常是 Webpack 或 Gulp 或者其他方法作為構建過程的一部分。但是這些構建工具有一些學習曲線，因此如果您正在尋找更簡單的替代方法，Google 推薦 HTML-Minifier for HTML、 CSSNano for CSS 和 UglifyJS for Javascript。
瀏覽器快取
不太清楚瀏覽器具體如何儲存資料，但它是我所能得到的最接近的。Pexels 贊助。
將靜態檔案儲存在瀏覽器的快取中是提高網站速度的一種非常有效的方法，特別是在來自同一瀏覽器的回訪時。直到 Google 告訴我，我的一些資源沒有被適當地快取，因為我從伺服器傳送的 HTTP 響應頭中缺少標題，我才意識到這一點。
一旦載入了我的主頁，就會向我的伺服器傳送一個請求，以獲取一堆歌曲的資料，然後在音樂播放器中解析這些歌曲。我不經常更新這個網站上的歌曲，所以如果這會是我的頁面載入速度更快一些的話，我不介意使用者在我的網站上看到他們上次訪問的相同歌曲。
為了提高效能，我在伺服器的響應物件 (Express/Node server) 中新增了以下程式碼：
res.append("Cache-Control", "max-age=604800000");
res.status(200).json(response);
複製程式碼我在這裡所做的就是在我的響應中附加一個說明超過一週（毫秒）應該重新下載資源的快取控制頭。如果您經常更新這些檔案，縮短最長時間可能是個好主意。
內容分發網路
現實中的 CDN 影像，Pexels 提供。
內容分發網路（CDN）是允許來自世界各地的使用者在地理上更接近您的內容的網路。如果使用者必須載入來自日本的大影像，但您的伺服器在美國，這將比您在東京的伺服器花費更長的時間。
CDN 允許您利用分佈在世界各地的一組代理伺服器，無論您的終端使用者位於何處，都可以更快載入您的內容。
我想指出的是，實現 CDN 之前，我能夠實現上面你所看到的結果–我只是想提及它們，因為沒有網站優化的文章提及到他們。如果您計劃擁有全世界的讀者，那麼在您的網站上有一些創新是絕對必要的。
一些流行的 CDNs 包括 CloudFront 和 CloudFlare.
其他方法
這裡有些能讓您有所收穫的內容：
- 首先通過增加您網站的感知效能優先載入“首頁”來優化您的網站。一種常見的方法是延遲載入沒有顯示在登入頁面上的影像。
- 除非您的應用程式依賴於 JavaScript 來渲染 HTML，例如使用 Angular 或者 React 來構建網站，那麼它會在你 HTML 檔案的 body 底部看似安全的區域載入你的 script 標籤。即使這可能會影響您的互動時間，所以我並不會對每個情況都推薦使用這種技術。
總結
當涉及到優化您的網站時，這都只是冰山一角。根據您接受的流量和所提供的服務數量，您可能會在許多不同的領域存在效能瓶頸。也許您需要更多的伺服器，也許您需要一個擁有更多 RAM 的伺服器，也許您的三重巢狀 for 迴圈可以使用一些重構–誰知道呢？
對於加速您的網站來說，沒有一個準確無誤的方法，您最終將不得不根據您的測試來做出最好的決定。不要浪費時間去優化不需要優化的東西。分析您網站的效能，找出瓶頸，然後專門解決這些瓶頸。
我希望您能在這篇文章中找到一些有用的東西！正如我所提到的，我在這個領域還有很多東西要學。如果您有任何額外的提示或者建議，請將它們留在下面的評論中！
如果您喜歡我的文章，請為我鼓掌，還有以下內容：
當然，也可以關注我的 Twitter.
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。