WordPress 必裝外掛(一) 三+1個加速瀏覽網站的外掛

優化程式碼 / 優化快取 / 壓縮圖片最佳化 + 網頁圖片優化工具
Autoptimize / Hyper Cache / Imagify + kraken.io

8 min readDec 4, 2018

2018年2月Google統計如果行動裝置載入網頁的時間到10秒時，跳出比率就會增加了123%。

出處 Find out how you stack up to new industry benchmarks for mobile page speed

相信上述Google的分析就可以讓知道加速網站的瀏覽速度是一件很重要的事情，Google 也曾於2010年正式公告，網站速度是SEO搜尋排名的因素之一。即使不是為了盈利，是為了傳播知識、信念、或其他原因而開始架設網站，只要沒有人瀏覽也很難將你的信念透過網站告訴更多的人，所以儘可能的優化網站瀏覽速度變是一件很重要的事。

此篇會介紹三個建議安裝的外掛來加速網站，分別為優化程式碼/優化快取/壓縮圖片最佳化

而圖片大小是除了程式優化跟快取之外蠻重要的一個大關鍵，圖片檔案太大或者圖片太多想當然網站的Loading一定會變重，所以建議要上傳的檔案都先經過壓縮處理在使用，否則檔案太大對網站的loading會有很大的影響。
在處理之前也可以想一下這個圖片要怎麼使用，如果是要保留大圖，那當然解析度可以設定高些，如果是商品類得小圖，就可以設定小一些。在GTMetrix的統計中顯示平均一個網站了瀏覽大小在3.14MB左右，所以可以斟酌一下你的圖片使用量，及圖片大小。除了推薦的自動上傳壓縮圖檔，也會在最後也會再外加推薦一個額外的網頁圖片優化工具。

如何測試你的WordPress網站速度？ — GTmetrix

在開始優化之前可以先測試一下目前的網站的瀏覽速度。

可以看到還沒優化的時候 PageSpeed Score 只有D(62%)

以下開始介紹建議三個安裝的外掛來加速網站

推薦一：Autoptimize
自動優化你的HTML、JaveScript、CSS的程式碼

在設定中可以找到Autoptimize 在main 中將三個都打勾，在滑到最下面點Save Change。

在你的網站中不會用到的表情符號話，可以在Extra中勾選Remove emojis，在滑到最下面點Save Change。

而之後每次有更新內容的時候，記得點在上方點Autoptimize 中的Delete Cache來清除快取，不然有時候網站不會更新。

加上 Autoptimize 後 YSlow從68% 升到 84% Request降到47

推薦二：Hyper Cache
網站快取外掛，Autoptimize 官方推薦搭配的快取外掛之一

啟用後，檢查一下Banner上方，跟設定 > Hyper Cache ，看有沒有這個紅色警告，如果有請到WordPress根目錄的wp-config.php中，加入此行程式：
define(“WP_CACHE”, true);

加上之後，沒出現錯誤訊息的話，基本上其他都不用再設定了～～

推薦三：Imagify
上傳圖片，自動圖片壓縮最佳化

免費版的一個月可以轉50MB容量的圖，如果一張圖大概200Kb的話大概可以轉256張，一開始算是蠻夠用的。

再來之後要設定的話是從設定 > Imagify

上方工具列會出現Imagify 這邊也會告訴你還剩多少空間可轉，跟網頁的是共用一樣的Email歐~

圖片壓縮設定：有三種壓縮方式，我選的是預設 AGGRESSIVE，可以點右邊的try the Visual Comparison去看他們的差別在做選擇。

再往下設定自動在上傳的時候壓縮影像跟保留原圖(如果不需要保留原圖也可以勾掉第二點，第三點就看有沒有需要摟～

再往下設定圖片最大值，像我是設定1920px，那只要超過1920的px，就會壓到1920px。
而下面是要將圖片縮成幾種圖形來使用，他會判斷說如果是要用較小的圖片，會選比較小張的圖來顯示，但同樣的表示他會保留更多種Size的圖，站更多空間，但其實一張圖經處理後都大概剩幾K，我個人都會把它都勾掉，只保留上面勾選的保留原圖跟壓縮過的圖，但如果是要要架設商店的，我會多勾一個商品縮圖的大小以Woocommerce為例就會勾300 x 300的縮圖。同時他有提醒每多新增一個縮圖都會增加壓縮的使用量，這也要注意一下。