這兩天再給我自己的網站提速，像我這個破網站，隨便優化優化，收益高得不得了。
之前有說過我的服務器是學生價買的最低配的服務器，當前使用帶寬： 1Mbps，這玩意隨便幾張圖就急得不行。
歡迎頁面是仿的鳳凰網招聘頁，第一次看被驚豔到了，一番摸索，發現css關鍵屬性是mask，然後就…然後就做出來了。但是用到了很多圖，有些圖達到了500k以上，這些圖呢顏色又很豐富，去壓縮，也壓縮不了多少。
所以我網站在任何人電腦上第一次打開都得卡個十來秒來下圖，辛辛苦苦做的動畫啥都看不到，這可不行。
第一步：上傳cdn
因爲這些圖片都是一些靜態文件，是可以丟到cdn而不走自身服務器的，所以第一步就是在阿里雲開了個oss，把這些圖片丟上去。過程很簡單，找個最便宜的資源包，買它！再弄個Bucket，新建個目錄，上傳圖片。完事。這樣一操作，圖片加載速度一下就快了很多。
第二步：使用Webp
但是圖片依舊是4、500k的大小，太大了，是不是有別的更小的圖片類型呢？
哈！Webp!
厲害了，同樣的圖，342k的圖壓縮到了57k，就這麼定了！
第二部就是將全部靜態圖片都換成webp然後壓縮一番再傳到cdn上，這樣一來，我這個動畫效果就能完美展示，再也不會出現少圖的情況了！
但是！Webp並不是所有瀏覽器都支持，特別是Safari，從頭到位沒一點綠，這就很難受，Safari上就是完全看不到這個動畫了！
…這個…目前還沒想到怎麼解決，可能…全部換回png或者jpg吧…
先不糾結這個了，還是看看網站哪裏還能再加加速。
第三部：使用GZIP
GZIP!又是壓縮！要加快就是要將同樣的內容用更少的數據傳給客戶端。
加這個也很容易，在nginx的總配置的http裏添加
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_static on;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
# 每個屬性都有對應的效果，可以去看看對應的文檔。
配置好後重新啓動一下nginx就好了。在看網站的對資源的請求，可以看到有Content-Encoding: gzip這麼一條屬性，這就說明GZIP配置成功了。
到目前位置，我的網站也就做了這三部來提高頁面加載速度，不多，也不麻煩，但是效果很好（因爲底子太差），其實很多正經項目都會有第一步和第三部的操作，可以說是基本操作，我在這只是作爲一個初學者來學習這些東西。
其實之後還可以有第四步。
第四步：使用http 2.0
目前我所見的網站大多都還是使用的http 1.1，其實http 2.0老早就出了，http 2.0相比http 1.1/1.0優化了好多好多，簡單點說就是：多路複用，二進制分幀，首部壓縮，服務端推送，更多可以參考這個。
以我目前的水平來看http 2.0能給我帶來啥好的，我就是覺得多路複用挺好的。之前的http 1.1/1.0協議中，瀏覽器客戶端在同一時間，針對同一域名下的請求有一定數量限制。超過限制數目的請求會被阻塞。
對我的個人網站來說，歡迎頁面有很多圖片，但是圖片不能同時請求，只能幾個幾個的分批請求，但是如果使用了http 2.0則沒有這個限制。
看着就很舒服是不是。
但是
http 2.0需要https，這個其實也很簡單，關鍵詞：certbot，按着步驟來1、2、3分分鐘就好了。
以上就是我已經或者將要對網站加載速度做的優化操作，很簡單，有的也很基礎，但是對那種完全沒做過優化的網站來說，這些操作帶來的收益是非常非常高的，一定得做。
前端菜狗，還在禿頭學習，有啥不對的，敬請拍磚，🧱！
謝謝閱讀～