[譯] 網站優化初學者指南

時間 2019-11-16

原文原文鏈接

原文地址：A beginner’s guide to website optimization

原文做者：Mario Hoyos

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：Starrier

校對者：Clarence、dazhi1011

網站優化初學者指南

圖片由 Pexels 提供。css

我是一名初學者，在 Google 優化排名中，我能夠達到 99/100。若是我能夠作到，那麼您也能夠。html

若是您和我同樣，喜歡證據。下面是 Google 的 PageSpeed Insights 結果。hasslefreebeats 是我維護的網站，我最近花了一些時間進行優化。前端

個人 PageSpeed Insights 分數截圖。android

我對這些結果感到很是自豪，可是我想強調的是，幾周前我還不知道如何去優化一個網站。今天我要和你們分享的只是一大堆 Google 搜素和故障排除所得出的結果，我但願能夠爲您省去麻煩。webpack

爲了防止您想跳過，這篇文章被分紅了幾個小節。ios

我毫不是專家，但我相信若是您實施如下技術，你會看到效果！git

圖片

圖片由 Pexels 提供 (Medium 已作優化).github

做爲一個網站開發初學者，我並無想過圖片的事情。我知道向個人網站添加高質量圖片會使它看上去更專業，可是我從沒有停下來考慮它們對個人網頁加載時間的影響。web

我爲優化圖像所作的事情主要是壓縮它們。express

回想起來，這從一開始就很是直觀，只是我沒有在乎，可能您也同樣。

我用來壓縮圖片的服務是 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 標籤。即便這可能會影響您的交互時間，因此我並不會對每一個狀況都推薦使用這種技術。