網(wǎng)站速度的重要性，CTK Pro 已經(jīng)在之前的 blog 中提過(guò)許多次了。對(duì)使用者來(lái)說(shuō)，即便有再好網(wǎng)頁(yè)設(shè)計(jì)、 UX 設(shè)計(jì)、文案素材，當(dāng)網(wǎng)站速度亮起紅燈時(shí)，使用者決定要離開(kāi)你的網(wǎng)站，都是白搭。要避免這樣的慘況發(fā)生，不只在網(wǎng)站建置之初，後續(xù)維護(hù)、新增文章上稿時(shí)，也應(yīng)時(shí)常檢測(cè)網(wǎng)頁(yè)速度，並作必要之調(diào)整。

由於 Google 常用工具的 PageSpeed Insight?在改版後，有幾項(xiàng)設(shè)置是許多大網(wǎng)站也無(wú)法達(dá)成的，像是規(guī)範(fàn)要使用 Offscreen Images、Next-Gen Formats（其中還有許多網(wǎng)頁(yè)不支援，這其實(shí)也告訴我們，網(wǎng)頁(yè)的速度優(yōu)化應(yīng)做到適可而止，將重要項(xiàng)目達(dá)成，而非一味追求高分）。

這裡就以已經(jīng)分析過(guò)超過(guò)三億個(gè)網(wǎng)站的 gtmetrix 為例子，看看網(wǎng)頁(yè)速度優(yōu)化，到底要做哪些事情。

身為網(wǎng)頁(yè)設(shè)計(jì)公司，就不從進(jìn)入網(wǎng)站，輸入網(wǎng)址點(diǎn)擊分析這樣「入門(mén)」的教學(xué)開(kāi)始，完成上述步驟後，印入眼簾的其實(shí)是幾項(xiàng)網(wǎng)站基本資訊包含：Google 的 PageSpeed Score、Yahoo 的 YSlow Score，還有網(wǎng)站讀取完全的時(shí)間（Fully Loaded Time）、整體大小*（Total Page Size），以及要求存取次數(shù)（Request）。gtmetrix 幫你把這幾項(xiàng)指標(biāo)跟平均值做一個(gè)比較，若旁邊有紅色箭頭，代表低於平均，綠色箭頭代表優(yōu)於平均，持平則標(biāo)示為黃色。

*整體大小其實(shí)並不能完全體驗(yàn)網(wǎng)頁(yè)讀取的時(shí)間，現(xiàn)代許多網(wǎng)站具備 Lazy Loading 的能力，且多數(shù)網(wǎng)站在讀取一定的內(nèi)容後，即可讓使用者「正常操作」。

比起一次性檢測(cè)網(wǎng)站，持續(xù)追蹤網(wǎng)頁(yè)速度，有助於快速抓到拖慢網(wǎng)頁(yè)速度元兇，得以適時(shí)調(diào)整。若網(wǎng)站整體速度一直維持的不錯(cuò)，客戶(hù)端自己操作時(shí)，會(huì)拖慢網(wǎng)頁(yè)速度的原因，不外乎是上傳了過(guò)於肥大的圖片、改動(dòng)到網(wǎng)頁(yè)快取設(shè)定，或是更動(dòng)到 WordPress 重大更新、伺服器端出現(xiàn)問(wèn)題等等，有了速度監(jiān)測(cè)，可以更快找出原因，若是自行維護(hù)網(wǎng)站者，是一大福音。

若是註冊(cè)了帳號(hào)，還可以就測(cè)試地點(diǎn)、速度限制等調(diào)整（若是付費(fèi)方案，當(dāng)然就更多選擇）。實(shí)際上，不同的地區(qū)讀取網(wǎng)頁(yè)，跟在臺(tái)灣的實(shí)際體驗(yàn)仍會(huì)有一定的差距，只是可以調(diào)整的東西相對(duì)是固定的，一個(gè)地區(qū)速度較快，臺(tái)灣使用者的瀏覽體驗(yàn)相對(duì)也會(huì)提昇。

網(wǎng)頁(yè)速度可以調(diào)整的項(xiàng)目，林林總總加起來(lái)數(shù)十項(xiàng)之多，近來(lái) CTK Pro 都以 WordPress 作為核心為客戶(hù)設(shè)計(jì)網(wǎng)頁(yè)，就讓我們看看 gtmetrix 建議 WordPress 架站者，該如何增進(jìn)他們網(wǎng)頁(yè)的效能吧。

一、使用備份 Plugin

如同之前更新 WordPress 5.0.x 的文章一樣，網(wǎng)站改動(dòng)前最好先將必要資訊備份下來(lái)

二、調(diào)整圖片大小

圖片絕對(duì)是影響網(wǎng)頁(yè)速度的關(guān)鍵因素，使用 WordPress 都可以選定圖片的大小。若能在上傳前先經(jīng)過(guò)壓縮、裁切等，當(dāng)然是最佳解法。若想要一次搞定之前過(guò)大的圖片，也有外掛如 WP Smush、tinyjpg 可以一次壓縮多張圖片。

三、使用網(wǎng)頁(yè)快取之外掛

網(wǎng)站快取是將資料打包，當(dāng)下一次有人請(qǐng)求相同資料時(shí)，就可以省下許多步驟，直接將打包好的資料一次送出，節(jié)省了大幅的作業(yè)時(shí)間，相對(duì)速度就快，可以參考之前的文章。

四、細(xì)部調(diào)整（也可參考不同的速度檢測(cè)網(wǎng)站）

剩下這個(gè)部分其實(shí)才是最難的！像是使用官方建議的配置：php7、MySQL5.6、HTTPS、mod_rewrite Apache module ，多餘的 WordPress? 設(shè)定、多餘的資料庫(kù)欄位、套件太肥大、外部的 script 檔案如css, font loaders 等。

再看看 gemetrix 長(zhǎng)長(zhǎng)一串的項(xiàng)目就知道了，這部份還是交給專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)/程式開(kāi)發(fā)公司來(lái)吧！

Serve scaled images
Leverage browser caching
Specify a cache validator
Avoid CSS @import
Minify Javascript
Defer Parsing of Javascript
Minify CSS
Specify image dimensions
Minimize request size
Specify a character set early
Minimize request size
Minify HTML
Remove query strings from static resources
Specify a Vary: Accept-Encoding header
Avoid bad requests
Avoid landing page redirects
Enable qzip compression
Enable Keep-Alive
Inline small CSS
Inline small Javascript
Minimize redirects
Optimize the order of styles and scripts
Put SCC in the document head
Serve resources from a consistent URL
Combine images using CSS sprites
Prefer asynchronous resources
Avoid a character set in the meta tag

以現(xiàn)階段來(lái)說(shuō)，即便是 B2B 網(wǎng)站，也應(yīng)該建立網(wǎng)站之內(nèi)容，達(dá)到提昇 SEO 的成效。但在更新同時(shí)，若非網(wǎng)頁(yè)設(shè)計(jì)程式碼專(zhuān)長(zhǎng)的人員，多多少少會(huì)影響到網(wǎng)頁(yè)速度。

將網(wǎng)站維護(hù)工作，交由網(wǎng)頁(yè)設(shè)計(jì)公司，除了穩(wěn)定、安全，若是開(kāi)發(fā)網(wǎng)站的公司，對(duì)於 Coding 的寫(xiě)法、邏輯也都相當(dāng)熟悉，維護(hù)的完成性及效率，自然可以更好。維護(hù)網(wǎng)站，更應(yīng)包含網(wǎng)頁(yè)速度的調(diào)整，若您有網(wǎng)站維護(hù)的需求，直接聯(lián)絡(luò) CTK?吧！