提高Web應用程序性能的權威指南

一份能夠提高你的速度和效率的工具和資源列表。

如果你的網站不能在3秒內加載，谷歌會將它標記爲慢。這樣想就很恐怖，因爲現在很多網站事實上都很慢。人類正着手登陸火星，而地球上的網站卻還在以糟糕的方式構建和維護，從而導致互聯網上到處都是反應遲緩的網站。除非你正在構建一個漸進式Web應用程序，否則很大可能你的網站會被認爲很慢。

因此，解決方案很簡單：不要構建一個網站，而是構建一個漸進式Web應用程序！

這樣做，你就成功了一半。剩下的一半，你需要指南和工具。當我在Hyperware堅持構建高質量、快速的Web應用程序的過程中，我學到了一件事：如果你在互聯網上尋找建議和工具，網上比比皆是，但是隻有很少一部分對完成工作有所幫助。而找到這些對你有幫助的建議和工具是一份艱鉅的任務。

本文將介紹我個人認爲有用，並且嘗試和測試過的工具和優化方法，以及一些我在爲企業構建漸進式Web應用程序時仍會參考的有用文章。

當你聚焦於某事時，繼續尋找東西是很痛苦的。因此，我爲你們做了這個髒活，寫了這篇值得收藏的文章。

這些很棒的工具的用途是：

優化或壓縮圖片
檢查網站性能
提高Web應用程序性能

優化或壓縮圖片

Squoosh

Squoosh是我用過的最棒的優化工具。我真希望早點發現這個工具。Squoosh是由谷歌工程師構建的，其中最棒的是，你在調整質量參數的時候可以實時看到優化過的圖片和沒有優化過的圖片的差異。Squoosh很好用，能讓你清楚知道壓縮後的圖片是什麼樣子。

ImageOptim

ImageOptim是一個簡單易用的圖片優化器。它會自動縮減圖片尺寸而不會丟失圖片的原始質量。ImageOptim有一個友好的拖拽界面和多文件上傳選項，因此非常易用。由於ImageOptim只在Mac上可用，FileOptimmizer對於Windows用戶是一個不錯的選擇。

檢查網站性能

網站性能測分工具並不僅僅是提供100分能得幾分的數字——他們應該用來反覆尋找和修復你的網站中薄弱的部分。

Lighthouse

沒有其他工具比Lighthouse更瞭解網站性能的了。性能上90+的得分對於Web應用程序來說是一個絕對的基準。我強烈建議你讀一讀《Lighthouse | Tools for Web Developers | Google Developers》來更好地瞭解谷歌的Lighthouse。

專業建議：使用Lighthouse chrome擴展來更快地審覈任何頁面。

GTmetrix

GTmmetrix可能是你除了Lighthouse外唯一需要的工具，來進一步檢查你的網站是否還有需要修復的地方。它顯示了相關機會來提高頁面速度以及頁面加載時間和頁面大小。