E樂堂電子報 第 1 期|十年之後:這套系統從哪裡來,被搬到哪裡去

E樂堂電子報第 1 期封面

這是 E樂堂電子報的第一期。

從這一期開始,我們會把產品與技術上真正發生的事寫成刊物:完整版放在官方部落格,重點版寄給正在使用 E樂堂的網校管理者。理由很簡單——一套開了十年的系統,中間做的每一件事,如果沒有寫下來,對使用者來說就等於什麼都沒變。

這一期先講「沿革」:這套系統從哪裡來、這一年被搬到哪裡去,以及你最近用起來應該有感覺的幾件事。

一、E樂堂的技術沿革:從 2017 年的第一筆程式碼開始

技術上,E樂堂的第一筆程式碼紀錄是 2017-11-03。

當年選擇的執行環境是 PHP 5.6——一個 2014 年釋出、2018 年底就停止安全支援的版本。也就是說,這些年來,這個每天處理課程、訂單與學員資料的系統,其實一直跑在一個不再收到安全修補的環境上。

它也不是那種可以先關起來重寫的小網站:系統裡存著每一位學員的上課紀錄,光是最大的那張表就累積超過 9,000 萬筆。課程在上、學員在用、網校在收單,所以我們選的是比較慢、但不會斷的路——在不中斷服務的前提下,一段一段搬到可維護的狀態。

這條路上的第一份完整紀錄,是九月公開的這一篇:

〈舊系統的技術債,不是老舊而已〉

那篇講的是「我們面對什麼」。這一期要講的是「後來到底變好了沒」,以及最近新增了哪些你會用到的功能。

二、PHP 8 升級完成之後:使用者最有感的改變

今年我們把執行環境從 PHP 5.6 搬到 PHP 8.3。升級本身不是目的,它只是讓後面所有改善變成可能——先讓頁面能正常打開,才看得到接下來該修什麼。

以下是升級完成後,使用者應該直接感覺得到的改變。每一項都寫上「為什麼做」與「效果」。

1. 學生端首頁:課程卡片早了將近 4 秒出現

為什麼:學生打開網校首頁,第一眼要看的就是課程。原本 150 張課程卡片要 10 秒才出現,這段等待就是流失。

做了什麼:移除課程區塊裡「先轉圈、硬等 2 秒」的老保險;把第三方追蹤與廣告腳本延後到頁面就緒才載入(事件照常送出,實測 GA4、Pixel、廣告都正常投遞);後端把重複查詢加上快取,頁面 TTFB 從 0.47 秒降到 0.19 秒(正式站部署後實測 0.185–0.199 秒)。

效果:課程卡片從 10.01 秒變成約 6.2 秒(大型網校 HOWTO好好學 正式站實測,150 張卡片)。另外有一個不是速度、但很多人有感的修正:首頁原本會在載入 2 秒後強制把畫面捲回頂端,使用者往下滑、正在看圖卡載入時就被拉走——這個行為已經取消。

2. 網校後台統計頁:從「一開就卡死」變成瞬間打開

為什麼:管理者打開統計頁想看排行與趨勢,結果整頁空白 7 分鐘,還把資料庫佔住,拖慢其他原本只要數百毫秒的頁面。

做了什麼:那兩張表原本只有主鍵索引,任何依「網校+時間」的查詢都得全表掃描;我們補上索引。調整用 INPLACE/LOCK=NONE 執行,期間每 3 秒打一次真實前台請求,共 37 個樣本全部正常,最慢 0.53 秒,沒有使用者受影響。

效果:逐日統計 3 分 20 秒 → 1 毫秒;熱門課程排行 1 分 33 秒 → 4 毫秒;活躍學員排行 7 分 23 秒 → 3 毫秒。資料逐筆相同,只是不再全表掃描。

3. 網校後台的每一頁都變輕了

為什麼:後台頁面原本夾帶大量示範用的檔案——每一頁 41–43 個請求,其中 9 張圖根本不存在,等於每次點選都在等不存在的東西。

效果:這些多餘請求全部歸零,頁面不再為不存在的檔案空等。

4. 課程頁的「成果分享」不再空等

為什麼:學生想看其他學員的學習成果,這個區塊原本要 14–18 秒才出來。

效果:回到正常載入時間,學生真的看得到別人的學習成果。

5. 該出現的東西,現在都會出現

為什麼:PHP 8 升級初期,有幾個頁面是直接致命錯誤、整塊空白的——首頁區塊、課程圖卡、登入頁、學習軌跡頁。使用者看到的只是「網站壞了」。

效果:這些頁面全部修好;某類舊函式呼叫造成的錯誤,從 30 分鐘 14 次降到 0。

6. 搜尋引擎終於看得到網校的課程

為什麼:課程內容做得再好,搜尋不到,等於少了被找到、被報名的機會。

做了什麼:修正全站標題結構——34 個站台原本每一頁都夾帶 7 個示範用的 H1,現在只剩 1 個正確的;課程頁、分類頁與影片加上結構化資料;sitemap 不存在的檔案改回 404,不再回一個「看起來正常」的錯誤頁給搜尋引擎。

效果:搜尋引擎能正確理解每一頁的主題,課程資訊有機會直接出現在搜尋結果裡。

7. 讓學員與管理者用得安心

為什麼:對網校來說,網站就是生財工具,學員資料不能出事。

效果:全站 Cookie 加上 SameSite=Lax、HttpOnly、Secure;對外目錄裡可被下載的稽核文件與含憑證的測試殘留檔全部清除,共用安全規則套用到 8 個生產站台。

三、近期新增的功能

網校後台

  • 版型風格可自選切換(目前 2 種,未來會陸續增加):以前想要不同氣質的版面,得客製、得排隊等。現在在「網站設定 → 網站視覺」一顆按鈕就能切換版型(目前有簡約、清新 2 種),前台立即生效、可隨時改回;網站 LOGO、主色與頁面文案都不受影響。未來我們會陸續推出更多風格,讓每個網校都能找到符合自己品牌氣質的版面。
  • 網站視覺設定優化(含主色調整):以前 LOGO 設定分散,也不確定前台實際顯示多大;主色更是完全不能自己調。現在 4 個 LOGO 併成一列管理(各自可更換/清除),直接顯示原圖尺寸與前台顯示大小,網站主色可自訂並套用到全站(含登入後)。
  • 首頁「資訊區塊」可自行設定:每個網校想在首頁強調的資訊都不一樣,現在 12 個項目自己勾。
  • 首頁「常見問題」+課程頁 FAQ 頁籤:管理者最常被問的就是重複問題,同一題要回幾十次。現在寫一次,首頁與課程頁都會顯示。更關鍵的是:這些問答帶有結構化資料,可以被 Google 與各種 AI 助理直接收錄、引用——當學員在 ChatGPT 或搜尋引擎問「XX 課程怎麼上課、能不能退款」,回答裡就可能出現你的內容。等於你寫一次的答案,同時在招生頁、搜尋結果與 AI 對話裡替你說話。
  • 課程影片字幕(最新上線):這是我們最新做的一塊。新上傳的影片會自動抓取、產生字幕檔;已經上傳的影片則會排程處理,不需要你手動做任何事。如果你希望某幾支影片優先處理,跟我們說一聲就好。字幕完成後,後台章節挑選影片時就看得到字幕標記,你一眼就知道哪幾支已經有字幕。對學員來說,字幕讓學習更順;對招生來說,有字幕的影片也更容易被搜尋與 AI 理解。
  • 課程分類可在清單頁直接調整:以前要改一門課的分類,得進課程設置一層層點;現在在課程清單頁就能直接改。
  • 首頁「推薦老師」可左右滑動:現在學員選課前,最在意的是「這門課是誰教的」——信任感往往比折扣更能決定要不要報名。但以前桌機只固定看到前 5 位老師,等於把其他老師藏起來。現在推薦老師區塊可以左右滑動,把你所有的師資都推到學員眼前,讓老師的專業自己說話。
  • 課程圖卡顯示「可試聽」:試聽是最快讓學員產生興趣的方式——先讓他聽一段,比看一百字介紹有用。所以我們在首頁的課程圖卡上直接標示「可試聽」,學員不必點進去才知道,看到就能直接開始聽。
  • 管理者清單新增「收取超時費通知」「收取合約通知」欄位:不是每位管理者都想收到每一種通知,現在可以自己決定。

學生端

  • 課前必填個資改為一步完成:以前要繞到別的頁面補完資料再回來上課,學生很容易放棄。現在點「去上課」直接彈窗填寫,填完直接進上課頁。
  • 「聯絡我們」加上防護:以前會被機器人灌信,真正學員的問題被淹沒。現在加上圖形驗證碼、蜜罐與同 IP 頻率限制。

四、這些改變是怎麼發生的

不是一次大改版,而是一直小步上線:2026-09-13 到 10-05,合計有 316 個更新上線,其中 09-27 之後的 9 天就佔了 230 個。同一個方法也用在整理文件上——使用手冊從 160 頁補到 175 頁。

每個改動都留了可查證的證據:改動前的基線、逐檔比對、錯誤次數、實際花費的時間。因為我們最怕的不是改得慢,而是修了一個地方卻弄壞另一個地方——而最後承受的人是你。

五、還沒做完的部分

  • 首頁還有約 221 KB 用不到的 plugin,以及約 397 KB 的主題 bundle 可以精簡。
  • 後台部分頁面仍在逐一實測。
  • 使用手冊還有章節結構要整理。

六、下一期

下一期想聊「AI 可以怎麼幫網校管理」:例如用 AI 幫你檢查課程設定有沒有漏、把教材與說明整理成可搜尋的內容,或分擔重複的學員問題。我們也會一併公開第一份「課程設定檢查清單」——每一欄該填什麼、沒填會發生什麼事。

我們想知道你的想法。如果你希望 E樂堂用 AI 幫你做哪一件事,回信告訴我們你的想法與提議,你的意見會直接進到我們的改善清單。