在 https://gallery.ligen.net 上线测试过程中，旧版本相册主题逐渐暴露出了不少问题：Google 字体阻塞渲染、首屏图片加载延时、图片体积过大、重复加载脚本等。为了提升访问体验，我对相册主题进行了多处优化。经过实测，优化后的网站在桌面端与移动端均达 90+ 高分。如果你在访问中发现问题，希望能得到你的反馈。

性能与安全优化：

一、后端 PHP & 网络传输优化

  1. 配置提前提取与安全默认值：缓存配置变量，减少多处读取开销与未定义错误。
  2. Early Hints 预加载首图：通过 HTTP Link 头告知浏览器提前下载首张图片。
  3. CDN 域名资源预解析与立连：对图片 CDN 使用 dns-prefetch 和 preconnect 提升加载。
  4. Cloudflare 图像压缩集成：服务端拼接 URL 动态生成压缩版图源，降低带宽开销。

二、CSS & 字体加载优化

  1. 核心 CSS 高优先级预加载：使用 rel=”preload” 提前获取关键样式文件。
  2. 图标库非阻塞异步加载：利用 media=”print” 巧解 FontAwesome 阻塞渲染问题。
  3. 本地 WebFont 内联及 swap 策略：避免第三方字体加载延迟，启用 font-display: swap。
  4. 无闪烁 Fallback 字体处理：在 noscript 中保留降级样式，提升无 JS 环境体验。

三、图像与前端性能优化

  1. 首屏 LCP 图像高优先级加载：对前 2 张关键图片添加 fetchpriority=”high” 提升 LCP。
  2. 基于 Base64 的图片懒加载：使用占位图结合 data-src 延迟非首屏图片下载。
  3. 原生 IntersectionObserver 监听：高性能监听视口滚动，支持 fallback 兼容机制。
  4. 图片加载失败优雅降级：通过 onerror 绑定替代图，避免裂图影响视觉。

四、安全防护与代码细节优化

  1. 跨站脚本 (XSS) 转义过滤：使用 htmlspecialchars 对图片链接与标题安全输出。
  2. 外链安全属性重定向：新窗口打开链接添加 noopener,noreferrer 防止原点攻击。
  3. 邮箱地址防爬虫反垃圾策略：利用 JS 事件延迟拼接 Mailto 链接，防止邮箱被抓取。
  4. 底部 JS 脚本 defer 延迟执行：所有底部 Script 加上 defer，保障 DOM 顺畅解析。