新手網站設計時,如何 速度優化?- 2024更新

98
更新時間:
Ez2提要:

這是一篇,協助不同層級架站的朋友,可以獲得高效、與 80分~90分(橙色)以上評分的 核心原理 ,為什麼不是95分以上?因為不符合邊際效應,與其浪費在高分,不如花時間在原創內容上。

有的人會誤以為,簡單只有文字、或空洞沒啥內容的網頁,才會容易高分,其實部份原理是這樣沒錯,能用更不花悄的方式、就不花稍的方式,來節省更多的資源是正確的,

但有時你可能為了滿足客戶體驗,也是需要一些特效、影片等等的,所以你也可以先到 我準備好的 高分頁 ,去玩看看、這樣你就會更有真實性,

就算功能、特效、影片都有的網頁,一樣也是可以高分,但其實大可不必,你可以著重在 秒開效能,但高分這件事、其實同樣時間拿來 原創高品質文章 是最划算的,如果你玩過了,也想嚐試秒開、高分,那麼就可以繼續看下去,

但我不保證你這篇文章會看多久,有經驗的可能三五分鐘、有的可能三五個禮拜還沒搞定,所以我說,別花時間玩高分、但可以花時間 高效秒開。

最常看見人問的就是,

webp 是一種由Google推動的新式圖片格式、主要可分有損壓縮與無損壓縮,它的優點是:更小、更美、可以支援透明度( 也就能取代png ),對於網路傳輸來說,這是非常重要的優化細節,以2024的環境來說大多的瀏灠器已經都支援了 webp 這樣的圖片格式,詳閱 維基百科,但優化了..

1、圖片,其實你還有以下多種因素要優化調校的,你可以參考我以下 15項 Check List:

2、影片鏈結 ( YouTube )

3、地圖鏈結 ( Google Map )

4、第三方外部串接 ( GA/FB象素 等等 )

5、CSS / JS

6、啟用Gzip壓縮

7、資料庫優化

8、程式等級 ( 快取外掛設定 )

9、WP Heartbeat Control

10、伺服器等級優化

11、後台外掛挑選

12、後台佈景挑選

13、外部CDN

14、SSL

15、ICON

如果看不到完整 15項Check Lisk 內容者,請登入

對於每一種快取,有它適合的主環境,但大致上可以分為:LiteSpeed、Nginx、Apache、Varnish,為了以下好書寫,我個人會這樣分,L派( LiteSpeed派 )、NA派 ( Nginx、Apache ),而Varnish 雖然效能我個人覺得最出眾,但曲高和寡,在管理與設定上的門嵌就註定無法與 L派、NA派比較了。

為什麼用了還會慢?
1、用錯外掛 ( 在LiteSpeed上就用 L外掛 )
2、混用外掛 ( 外掛通常只要用一種就好,除非你知道 每個外掛彼此間,該怎麼錯開設定 )
3、亂設置外掛 ( 不知道每個設定的意義,功能當盲盒開、你的網站就會變盲盒 )
3、CSS / JS 在不正確的時機點上壓縮 or 推遲 or 延遲 ( 在Woo上禁用JS ??? 別鬧了… )
4、一言不合 就全站清除外掛 ( 要知道文章越多,一次全站清除外掛 要花費非常多效能重置 )
5、濫裝外掛、佈景主題
6、資料庫肥大

排除主機問題以外,大多是,都是造成你外掛怎麼裝、怎麼調校都無法高效的因素之一。

如果你只是寫文章,作形象網站,不想花太多力氣去管理,那麼5~10美金的hosting 例如:A2/SiteGround 等等都可以,但就是主機共享,便宜是優點以外,大多是缺點、你的隔壁棚玩大水管,那麼你自然就沒水,隔壁棚得罪方杖、你也跑不了 (同IP被DDOS),最需要注意的是:一人中毒全家餐。

所以 共享主機 標榜無上限空間、無上限流量,但換來的就是,大家搶資源、搶效能 ( 誰跟你搶空間啊… ) 畢竟一台主機資源就那些,就算包含可自動擴充方案,也輪不到5~10美金的你用得到的、何況你的IP有沒有被黑還不知道呢?對吧!當然 也還是有非常好的 hosting ,例如:kinsta,如果真的想要好好開始,那麼純小白從 kinsta入手,我覺得門嵌最低,你的成本長期看來最少,不然你會變成 被工程擔誤的布落客。

總結:
共享主機 ( hosting ),大多是:
1、CPU共享
2、記憶體共享
3、空間共享
4、頻寬共享
5、最可怕的是 ( 底層的 Linux 也共享,一人中毒全家飽 ),這得額外說明:各家都有專門技術、可以防範這塊,甚至提供額外的掃毒服務,以目前大環境知名的 hosting 基本上沒問題,但如果是 自架空間來賣的,那麼就要問清楚這個地方,如果同個主機、同個IP別人中毒了,自已不會有中毒的風險。
.
綜合上述~共享主機方案:你能升級的不外是:多分配一點共用CPU資源、共用記憶體資源給你而已,但最終你還是有很多上面的問題,這也就是你買了很多升級方案,但成效不佳,最後還是乖乖的回到VPS吧! ( CloudWays 通常就是一種半自主的 VPS )

簡單來說,上面這些問題,是一個一聯串的問題造成的,舉個例子:一個人的身體健康是由很多條件綜合而成的( 網站速度也是 ),就好比有的人頭痛、這時叫你吃webp頭痛藥,你吃了這個專治頭痛的webp藥、頭痛就好了,但你拿頭痛的webp藥,來治香港腳鐵定不行的,雖然這個例子舉得有點爛,但事實就是如此,並不是只看單點就可以藥到病除的,有時搞不好會藥到命除也說不定。

一個網站的速度,為了方便更多人一開始,不必理解那麼多文謅謅的專業文字時( 我盡力降低專業文字 =.= ),我個人會這樣定義它,讓大家方便快速了解,有興趣的人,再逐步自行進行研究即可,而我個人會建議要考量的有五個大方向,再由這五個大方向,細分成各種執行項目:

大方向01:主機面向 ( 簡單說 不要買 低階主機 )

如果你只是想要玩票性質,那麼買個每月5~10美金的主機,效能通常不會太好,但也就湊合著用,但要注意的是 hosting ( 共享主機:房客分租 ),寫寫文章還行、但如果要到 電子商務 這個層級,有金流、有物流、有會員、有點數顯然非常不適合的,以後有機會再來獨立說 電子商務主機 這塊;當然如果你有能力,可以自已動手玩 VPS ( 獨立主機:透天獨棟 ) ,那麼10~20美金的VPS,足夠玩到 全綠標 ( 90/90/90/90 )以上了,如同下圖所示:( 點我查看:Google PageSpeed Insights 評分記錄 )

項目包含:主機到底要選 Hosting(房客分租),還是 VPS(透天獨棟),然後再來要接著選 LiteSpeed?還是 Nginx ( apache )?
這是個多元的選擇題,但以一般的小資族、一人公司來說,是可以用 Hosting的,但如果要高效可以選:Kinsta ,如果你不想要花很多時間去管理,那麼這樣一來,你就也選擇了 Nginx,但由 Kinsta幫你管理了主機效能,這對於新手來說,是非常大的幫助,唯一的可能就是一些 備份外掛、或 Kinsta認定高耗能的外掛會被禁用,不過對於一些用的用戶,到也是足夠了,為了更直覺讓你可以了解 Hosting 與 VPS 的差異,我以下方表格來分析更多的差異吧:

Hosting | 共享主機 ( 房客分租 )自架 VPS | 獨立主機 ( 透天獨棟 )
費用相對低 ( 5~10美/月 )
🌕🌕🌕
相對貴些 (20美以上/月)
🌕🌗
效能時快時慢,受室友影嚮
🌕🌗
相對高效(維運得宜)
🌕🌕🌕🌕🌕
穩定度時好時壞,受室友影嚮
🌕🌗
穩定很多(維運得宜)
🌕🌕🌕🌕🌕
空間通常較大 ( or 無上限 )
🌕🌕🌕🌕🌕
買多少用多少 ( 通常10G以上 )
🌕🌗
管理方便
🌕🌕🌕🌕
需要維運技能
🌕🌗
備份通常內附週備份/月備份
🌕🌕🌕
自定義 (日/週/月 or 差異備份)
🌕🌕🌕
希望以上Andy的簡易分類,能幫助你了解,更多 Hosting 與 VPS的選擇,簡單站在 穩定與效能 的面向上,你可以選擇:用錢買效能、還是用時間與技術換效能,當然還有很多不同的條件、會造就不同的結果;例如 CloudWay,就是站在這二者中間的一個很好的服務,它協助了一般用戶可以獲得高效的獨立主機(VPS),也提供了友好的技能服務降低使用門檻,這也就是為什麼會有非常多的人推薦它了。
Kinsta Hosting | 共享主機自架 VPS | 獨立主機 ( 透天獨棟 )
費用(30美以上/月)
🌕🌗
相對貴些 (20美以上/月)
🌕🌗
效能相對高效
🌕🌕🌕🌕🌕
相對高效(維運得宜)
🌕🌕🌕🌕🌕
穩定度穩定很多
🌕🌕🌕🌕🌕
穩定很多(維運得宜)
🌕🌕🌕🌕🌕
空間買多少用多少 ( 通常10G以上 )
🌕🌗
買多少用多少 ( 通常10G以上 )
🌕🌗
管理方便
🌕🌕🌕🌗
需要維運技能
🌕🌗
備份手動備份/週備份/月備份
🌕🌕🌕🌕🌕
自定義 (日/週/月 or 差異備份)
🌕🌕🌕
外掛部份外掛限定不能安裝
( 50美金以下不能裝 Woo )
🌕🌕🌗
可自由安裝外掛
🌕🌕🌕🌕🌕
客服正常上班日
🌕🌕🌕🌕
雙手萬能靠自已
🌕🌕🌗
流量每月訪問量25,000
🌕🌕🌕
不限流量
🌕🌕🌕🌕🌕
備註:高效的Kinsta 你要注意的是25,000訪問數,他也只有1個WordPress的安裝,買一年下方顯示的是:350美金,但有個更好的Kinsta方案,你可以找勇哥,他在Kinsta方面是專家,如果有任何問題 請教 勇哥 就對啦~~

對於布落客來說,我想你一定想解放雙手吧,不需要再擔心、管理任何主機的部份了對嗎?那麼我再告訴你一個超殺服務!那就是阿腸網頁設計,當然如果你想還是回到自有主機,那麼 一極圖 本身就提供 商用主機代管,以下就提供相關說明與比較,

阿腸主機 | 共享主機Ez2 VPS | 獨立主機 ( 透天獨棟 )
費用(15~40美金 以上/月)
🌕🌕🌗
相對貴些 (35美以上/月)
🌕🌗
效能相對高效(維運得宜)
🌕🌕🌕🌕🌕
相對高效(維運得宜)
🌕🌕🌕🌕🌕
穩定度穩定很多(維運得宜)
🌕🌕🌕🌕🌕
穩定很多(維運得宜)
🌕🌕🌕🌕🌕
空間買多少用多少 ( 通常5G以上 )
🌕🌗
買多少用多少 ( 通常10G以上 )
🌕🌕🌗
管理解放雙手超方便
🌕🌕🌕🌕🌕
解放雙手超方便
🌕🌕🌕🌕🌕
備份日/週/月/差異備份
🌕🌕🌕🌕🌕
日/週/月/差異備份
🌕🌕🌕🌕🌕
外掛有限程度協助安裝
🌕🌕🌕🌗
可自由安裝外掛
🌕🌕🌕🌕🌕
客服正常上班日
🌕🌕🌕🌕🌕
正常上班日
🌕🌕🌕🌕🌕
流量依照方案:提供日/月流量限制
🌕🌕🌗
不限流量
🌕🌕🌕🌕🌕
備註: 阿腸的服務受過近千家客戶的歷練,對於客服上沒話說的,但要注意每日流量/月流量的差異即可。

再來是:LiteSpeed 與 Nginx 的差異,這部份,國外也非常激烈的討論,目前兩派各有很好的使用見證,與穩定的使用經驗,實在是不好說優缺點,我就以個人在優化的過程中,我遇到的部份分享一下心得:

LiteSpeed:

我個人覺得 它非常容易使用,套一句國外說的,它近乎開箱即用,對於新手來說,以效能為考慮的話,它的入門檻是非常低的,因為它免費的外掛 LiteSpeed Cache 足以涵既市面上九成的外掛功能,加上主機是自家體系的,如果再結合LiteSpeed CDN,如果說是 新手神器 也不為過,你看到的這個 Ez2.SHOP,就是以LiteSpeed架設而成的,

加上國外的一些相關資訊,表示LiteSpeed對於 這種突然性的高暴性訪問,有一定的優勢,所以我也試過一些簡易的 同時在線人數測試:最高可以來到 1000~2000人次/30秒內,0%出錯率,但這些都只是實驗數據,但就算只有10%的參考價值也有 100人在線,所以我自已也覺得蠻不錯了。

每30秒/1000人次訪問

Nginx + Apache:( 簡單說:如果你是 Nginx 基本上,就是用 WP Rocket 與 下方類似的快取外掛了 )

首先,我並不想科普這個技術與名稱的由來,我反而比較想分享,這個場景可以應用的是什麼?舉例來說:我們常常聽到的 WP Rocket 與 其他的快取外掛,其實大部份都是為了 Nginx + Apache 而設計的,WP Rocket 它是一個 軟體層面 的快取,所以你會看到例如:SiteGround / A2 / Kinsta / 都有人用 WP Rocket ,但對上述已經 自已有快取的Hosting 來說,如果它本身提供的快取,已經非常不錯,也能達到秒開效過,那麼其實 裝不裝 WP Rocket 就無所謂了,

當然 WP Fastest CacheWP Super CacheW3 Total Cache 這些也都是前十名的快取外掛,
但有一個蠻值得介紹的:快取外掛、同時也是蠻多國外大神使用的,它就是:Perfmatters 它可以協助各種外掛在不同頁面、關閉不同的 JS 這是非常實用的功能,而這篇文章是 調校效能的核心大綱,未來會針對不同 主機與外掛 的設定來分享更多內容。

大方向02:程式面向

項目包含:php快取、php版本、css壓縮與推遲、js壓縮與推遲、延遲、頁面DOM內容等等
( 補文中 )

大方向03:素材面向

項目包含:圖片格式最佳化、影片格式最佳化、ICON最佳化
( 補文中 )

大方向04:管理面向

項目包含:外掛挑選、佈景挑選、錯誤排除、資料庫優化、有經驗的更新外掛
( 補文中 )

大方向05:外部面向

項目包含:GA4、fb象素處理、YouTube嵌入優化、地圖嵌入優化、CDN設置
( 補文中 )

總結:( 千萬不要用來路不明的外掛,再加上以下即可 )

新手:1.好的主機 / 2.不亂裝外掛、佈景 / 3.圖片優化 / 4.只用一種快取外掛 / 5.達成秒開即可

進階:1.高階主機 / 2.不亂裝外掛、佈景 / 3.圖片優化 / 4.適當混用快取外掛 / 5、掛上CDN / 6、達成全球秒開

找虐:1.客製主機 / 2.不亂裝外掛、佈景 / 3.圖片優化 / 4.適當混用快取外掛 / 5、掛上CDN / 6、達成全球秒開 / 7、Google 高分

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 標記為 * 的為必填字段

購物車
返回頂端