網站速度優化插件Autoptimize 是一款非常優秀的wordpress插件，它能夠使優化站點變得非常容易。它可以聚合、縮小和緩存腳本和樣式，默認情況下在頁眉中注入CSS，但也可以內聯關鍵CSS和延遲聚合的完整CSS，將腳本移動到頁腳並縮小HTML。
它也可以優化和延遲加載圖像、優化Google字體、異步非聚合JavaScript、刪除WordPress 代碼 表情 cruft等等。因此，它可以提高我們的網站的性能，即使已經在HTTP/2.0，它依然有大量的API可供您根據每個站點的特定需求定製autotimize.（以上文字來自Autoptimize官網介紹）
一.Autoptimize插件安裝
如上圖所示，左邊紅色框中是Autoptimize插件安裝示意圖，在我們自己網站後臺wordpress的插件菜單中，點擊安裝插件，然後在搜索框中輸入「Autoptimize」就會跳出來這個插件安裝選項，點擊「現在安裝」按鈕之後，它就會自動安裝在你的網站主機上，稍後我們自行點擊「啟用」即可。右邊紅色方框是該插件收到的客戶評價，現階段該插件有超過100萬次以上安裝使用量，其中有效評價是978個，評分等級是4.5個星。我大略的瀏覽了下它的好評內容，應該不是刷的好評。
二.Autoptimize插件相關設置
1.CSS,Javascript和Html優化
同學們都知道Javascript是網頁前端設置三劍客（html，CSS,Javascript）中最難的，
也是前端展示效果最炫酷的，上圖中標紅框的那兩項設置很容易導致前端展示效果出現問題，建議勾選之後再去前端看每一個頁面的具體效果（要先清除瀏覽器和網站內容緩存），如果有發生比較大的變動，那就放棄勾選這兩個選項。
之前有同學反饋說勾選後再取消，頁面內容沒法再恢復到勾選前的樣子，但是我測試過之後發現並沒有這種問題存在，為了以防萬一，建議同學們還是慎重。最後一個「添加捕捉異常包裝」解釋起來可能會有點複雜，簡單的說javascript的原始碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。
這種解釋型語言的弱點是安全性較差，而且在JavaScript中，如果一條運行不了，那麼下面的語言也無法運行。而其解決辦法就是於使用異常處理.所以可以選擇添加捕捉異常包裝，來解決後面的語言無法運行的問題。
CSS就是我們常說的疊層樣式表，如果說html是小學生，那麼CSS就相當於初中生，Javascript相當於高中生。主要功能體現在文字的樣式修改方面，比方說文字大小，字體顏色，下劃線，加粗，段落列表，數據圖表等多方面。CSS有三種形式：內聯式，嵌入式和外部式。
上圖中紅框標出的兩部分我不建議大家勾選，因為我嘗試過勾選發現前端的一些原有的設置出現了錯位和混淆的情況，所以大家還是謹慎些為好，如果想嘗試的建議多刷新幾次瀏覽器緩存，比對一下CSS設置之後頁面的變化情況.
HTML選項可以勾選，Html部分不會有太大的變動，Autoptimize對這部分的內容優化主要集中在多餘內容清除和注釋刪除部分。html注釋部分在前端頁面上是看不到的，是代碼部分中用來說明某段代碼的具體含義和內容，以便後期代碼修改的方便。
CDN選項可以不用管，因為Jack老師用的是Cloudflare的免費CDN加速服務，相關的速度優化可以在cloudflare後臺部分進行修改和設置
2.圖像優化
圖像優化部分的設置主要分為兩方面，一方面是圖像的優化，另外一方面是圖像的加載方式優化。在第一點中Autoptimize採用的是ShortPixel插件對其進行圖像優化，這裡我不是很建議勾選（雖然我在上圖中進行了勾選），因為我的習慣是在圖片用Photoshop做好之後及時用tinypng進行圖像優化然後再上傳到網站的媒體庫中，如果這裡再次優化圖像，可能前端展現圖片的時候會顯得模糊。
如果同學們在上傳圖片之前沒有用tinypng進行圖片優化，這裡是需要進行勾選的，而且它提供了三種圖像優化方式：有損優化，無損優化，光滑是介於這兩者之間的優化水準（具體的優化方式我沒有仔細研究過，有興趣的同學可以去搗鼓搗鼓）
延遲加載圖片就是我們平時常說的「Lazy load」，一般都是當滑鼠或者圖片出現在屏幕區域才會選擇圖片加載，這樣的好處就在於，網站先顯示首屏中的圖片或者文字內容，不會等到其他內容全部下載完整才出現頁面內容，這樣會給訪客該網站打開速度很快的錯覺。
3.自動優化
a.谷歌字體
谷歌字體建議是刪除，它比較拖慢網頁加載速度，其中的兩段英文意思如下
Combine and link in head (fonts load fast but are render-blocking), includes display:swap.（在head中的合併和連結（字體加載速度快，但呈現阻塞），包括display:swap）Combine and preload in head (fonts load late, but are not render-blocking), includes display:swap（在head中的合併和預加載（字體加載延遲，但不是渲染塊），包括display:swap）
這兩種字體優化方式各有千秋，我個人比較喜歡第二種，這樣不會阻塞字體的前端特效，雖然會損失一定的字體加載速度優勢，但文字部分總的加載速度還是可以接受的
b.移除emojis
emoji就是表情的意思，沒有特別重要的地方，建議勾選以便移除表情從而提升網頁加載速度（雖然並不能提升太多，不過前端的效果可能不會太好）
c.從靜態資源中刪除查詢字符串
這個也建議刪除，不過從整體速度提升效果來看，好像最終的速度提升並不是很明顯。
後面的兩項內容不建議建站新手去處理，需要有一定的網站代碼基礎，如果有興趣的同學可以聯繫Jack老師，我會告訴你們怎麼處理這方面的問題。
Autoptimize插件的後面兩個功能選項「」和「」，主要是添加其他的優化插件來進一步提升網站頁面加載速度，我大體上看了一下都不是什麼特別優秀的插件，很多功能和Autoptimize插件有重疊的地方，有的還需要付費才能使用相關功能，所以不建議同學們去搞這兩個東西了。
好了，以上就是本章關於外貿自建網站速度優化插件Autoptimize的全部內容，
如果有不理解的地方，
請使用百度或者谷歌瀏覽器搜索關鍵詞--「Jack外貿建站」，排名首頁首位的就是我的網站，網站上有更多外貿建站、谷歌SEO優化和外貿客戶開發等免費的實操乾貨內容在等著你哦！
原作者：JACK SEO
原出處：邦閱網