台灣長期照顧家庭關懷協會
V92 效能與 UI/UX 檢查提案
讓溫暖的陪伴,留在每一次閱讀與相遇裡。
資源閱讀
分享的是公開頁面連結,不包含您的閱讀筆記。
新一頁水彩日常
門廊上的傾聽、廚房裡的交流、公園裡的相遇,以及日光中的相伴。以下都是原創生成情境插畫,不是真實服務照片。

放大後可按 Escape 或關閉按鈕返回;未啟用 JavaScript 時仍可閱讀插畫。
水彩繪本・日常的陪伴
從視訊裡的問候,到留給自己的休息。插畫描繪的是綜合情境,不是真實服務照片,也不代表影片內容。


圖片為原創生成作品。原有照片與文件仍留在原始頁面;影片播放內容保持原樣。
以下是原創生成的水彩情境插畫,不是真實服務照片或影片劇照。陪伴可以從閱讀、一起討論、散步和一張餐桌開始。

本頁一般照片與封面改用原創水彩情境插畫;不是真實活動照片或影片截圖。Logo、文件、QR Code 與資訊圖表保留。影片點擊後仍播放原影片。



V92 效能與視覺體驗雙重檢查提案與安裝備註 日期:2026-10-06(臺灣) 本次只新增文件與腳本,不更動 V91 的 955 個追蹤檔案。未將腳本加入任何原頁,因此原網站不會自動套用。下列安裝動作請先在測試副本進行,取得允許增加引用後才整合原頁。不得宣稱手機分數已達 90 或已完成實機驗收。 一、查核結果與限制 V86:面板寬度 min(330px, viewport-24px),最大高度65vh、底部96px;已有安全區與手動播放。多個浮動元件一起嵌入時仍可能互遮。 V87祝福牆:已有自適應grid與圖片100%寬;V92在600px以下改單欄、縮內距並保留原字體與控制功能。 V89:六張內嵌SVG已有loading=lazy與尺寸。其base64仍在HTML內,loading不能節省HTML傳輸;3D為CSS視角,無外部3D套件。大圖原本點擊才指定src。 V83/V85:原本按播放才載入YouTube。V92不提前載入iframe,不取代它們的事件處理。 本次未測原主機PageSpeed、未做iPhone/Android實機測試、未取得正式影片或圖片。 二、一次一個動作的安裝 1. 備份全站,建立測試副本;保留原HTML/CSS/JS與設定。 2. 新增addons/v92-performance-opt.js。不能覆蓋同名檔;若已存在先核對版本。 3. 只在測試頁頁尾新增: <script src="/addons/v92-performance-opt.js" defer></script> 子目錄網站請調整根路徑。此腳本無第三方套件、無資料送出、無Cookie。 4. 將選定外掛區放入指定容器;不要把原站整個body包進去: <div class="tlfca-performance-v92" data-v92-bottom-reserve="72"> <!-- 放一套完整外掛 section,包含其既有樣式與邏輯 --> </div> 5. 若底部原導覽有固定選擇器,可把容器改為: <div class="tlfca-performance-v92" data-v92-bottom-nav="#actual-mobile-nav" data-v92-bottom-reserve="72"> <!-- 原外掛區塊 --> </div> #actual-mobile-nav 必須改成實際DOM選擇器;沒有確認前採72px預留。腳本只量測導覽,不修改它。動態新增內容或導覽高度改變後呼叫 TLFCA_V92.refresh()。不會自動處理所有懸浮按鈕的碰撞。 三、藝廊真正延後請求(新整合卡片適用) <img data-v92-lazy data-v92-src="/assets/approved-gallery.webp" width="1200" height="750" loading="lazy" decoding="async" alt="經授權並確認的畫面描述"> <noscript><img src="/assets/approved-gallery.webp" width="1200" height="750" alt="經授權並確認的畫面描述"></noscript> 必須提供真實存在、尺寸正確的圖片。不要把已有src在頁尾才搬到data-src,那時下載可能已開始。新卡片可添加data-v92-srcset/data-v92-sizes,滾入視窗才轉成正式屬性。頁面首屏主圖不能用此策略。 若要沿用V89大圖邏輯,在卡片設定data-full-image為真實圖片,避免卡片未載入時src空白。原V89檔不變,只有新整合副本採這些欄位。內嵌SVG仍可沿用,但不會減少HTML大小。 四、YouTube策略 推薦保持V83/V85的點擊才載入:進入視窗只顯示封面,點擊播放才建立iframe,關閉時移除。 若新頁明確選擇「滾入就連到YouTube」(第三方連線,不等於播放),可在帶class容器內放: <template data-v92-template> <iframe width="560" height="315" loading="lazy" title="協會核准影片" src="https://www.youtube-nocookie.com/embed/REPLACE_WITH_REAL_ID?autoplay=0" allow="fullscreen; picture-in-picture" allowfullscreen></iframe> </template> REPLACE_WITH_REAL_ID 必須換成正式11字元ID;未提供前不要啟用。template不是影片外掛原邏輯的替代品。V92模板僅插入靜態HTML,移除script;不能把含初始化腳本的整套藝廊藏入模板。影片比例請在整合頁的限定樣式設定,不套全站iframe。模板無JS時不顯示,應另加文字連結fallback。 IntersectionObserver不支援時以立即載入作降級,不承諾所有舊瀏覽器都嚴格延後。 五、可調色調變數(只作用容器內指定卡片) <div class="tlfca-performance-v92" style="--tlfca-v92-glow:rgba(224,165,91,.18);--tlfca-v92-radius:20px;--tlfca-v92-shadow:0 10px 28px rgba(37,45,50,.15)"> <!-- 模組 --> </div> 光暈目標加入data-v92-glow。保留文字色與底色以免降低可讀性;正式改色仍要量測對比。想更樸素:glow透明度改.10、圓角16px、陰影透明度.08。非首屏普通內容可加data-v92-offscreen跳過離屏渲染,但此功能不延後網路下載;含搜尋定位、列印或高度敏感元件需先測。 六、驗收與回復 開開發者工具Network:圖片尚未滾入前無外部圖片請求;滾入後才載入。YouTube按播放前無播放器請求(原點擊模組)。 測320/375/390px、200%字級、橫向、小高度、虛擬鍵盤開啟;確認聲景面板可捲、電話與原導覽不被遮擋。另測同時開啟多個浮動面板;必要時減少浮動入口。 鍵盤、朗讀、減少動態、關閉JS、網路失敗、列印逐項確認。 上線後再測PageSpeed手機版;不得以本機語法檢查當作速度提升證據。 回復:只移除新引用與新容器配置,原頁從備份還原;不刪除原始故事或資料。
把閱讀變成一個小小的下一步
把資訊帶回生活,可以先選一件最需要的小事。
筆記只在這個頁面暫留,不會送到協會;重新整理或離開後不會保存。請勿填寫身分證、病歷或其他敏感資料。
最多 400 字
需要真人協助?0800-009-995|服務時間:【待協會確認】|回到正式首頁
把公開資源頁傳給家人,方便一起討論。分享按鈕只傳送本頁網址,不包含您填寫的表單、筆記或查詢參數。
LINE 或手機分享會開啟您選擇的平台;列印前請先預覽,確認是否包含您不想分享的個人填寫資料。