commit 优化首页加载速度

app.py

@@ -33,6 +33,18 @@ os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 os.makedirs(_HOME_IMAGES_DIR, exist_ok=True)
 os.makedirs(_HOME_FONTS_DIR, exist_ok=True)
 
+import mimetypes
+mimetypes.add_type('image/webp', '.webp')
+mimetypes.add_type('font/woff2', '.woff2')
+
+
+@app.after_request
+def add_static_cache_headers(response):
+    if request.path.startswith('/manager/static/'):
+        cache_max_age = 30 * 24 * 3600
+        response.headers['Cache-Control'] = f'public, max-age={cache_max_age}'
+    return response
+
 
 @app.context_processor
 def inject_home_assets():

templates/home.html

@@ -8,27 +8,24 @@
     <style>
         @font-face {
             font-family: "HuakangWeibei";
-            src: url("{{ home_font('HuakangWeibei.ttf') }}") format("truetype");
+            src: url("{{ home_font('HuakangWeibei.woff2') }}") format("woff2");
             font-weight: normal;
             font-style: normal;
+            font-display: swap;
         }
         @font-face {
             font-family: "AdobeKaiti";
-            src: url("{{ home_font('AdobeKaitiStd-Regular.otf') }}") format("opentype");
-            font-weight: normal;
-            font-style: normal;
-        }
-        @font-face {
-            font-family: "SourceHanSans";
-            src: url("{{ home_font('SourceHanSansSC-Regular.otf') }}") format("opentype");
+            src: url("{{ home_font('AdobeKaitiStd-Regular.woff2') }}") format("woff2");
             font-weight: normal;
             font-style: normal;
+            font-display: swap;
         }
         @font-face {
             font-family: "SourceHanSerif";
-            src: url("{{ home_font('SourceHanSerifCN-Regular.otf') }}") format("opentype");
+            src: url("{{ home_font('SourceHanSerifCN-Regular.woff2') }}") format("woff2");
             font-weight: normal;
             font-style: normal;
+            font-display: swap;
         }
 
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -45,6 +42,11 @@
             z-index: 0;
             background: url("{{ home_img('bg.png') }}") center center / cover no-repeat;
         }
+        @supports (background-image: image-set(url("{{ home_img('bg.webp') }}") type("image/webp"))) {
+            .page-bg {
+                background-image: image-set(url("{{ home_img('bg.webp') }}") type("image/webp"), url("{{ home_img('bg.png') }}") type("image/png"));
+            }
+        }
 
         .page-wrap {
             position: relative;
@@ -118,18 +120,38 @@
         .action-btn--members {
             background-image: url("{{ home_img('btn-members-gold.png') }}");
         }
+        @supports (background-image: image-set(url("{{ home_img('btn-members-gold.webp') }}") type("image/webp"))) {
+            .action-btn--members {
+                background-image: image-set(url("{{ home_img('btn-members-gold.webp') }}") type("image/webp"), url("{{ home_img('btn-members-gold.png') }}") type("image/png"));
+            }
+        }
 
         .action-btn--scan {
             background-image: url("{{ home_img('btn-scan-silver.png') }}");
         }
+        @supports (background-image: image-set(url("{{ home_img('btn-scan-silver.webp') }}") type("image/webp"))) {
+            .action-btn--scan {
+                background-image: image-set(url("{{ home_img('btn-scan-silver.webp') }}") type("image/webp"), url("{{ home_img('btn-scan-silver.png') }}") type("image/png"));
+            }
+        }
 
         .action-btn--members:hover {
             background-image: url("{{ home_img('btn-members-gold.png') }}");
         }
+        @supports (background-image: image-set(url("{{ home_img('btn-members-gold.webp') }}") type("image/webp"))) {
+            .action-btn--members:hover {
+                background-image: image-set(url("{{ home_img('btn-members-gold.webp') }}") type("image/webp"), url("{{ home_img('btn-members-gold.png') }}") type("image/png"));
+            }
+        }
 
         .action-btn--scan:hover {
             background-image: url("{{ home_img('btn-scan-gold.png') }}");
         }
+        @supports (background-image: image-set(url("{{ home_img('btn-scan-gold.webp') }}") type("image/webp"))) {
+            .action-btn--scan:hover {
+                background-image: image-set(url("{{ home_img('btn-scan-gold.webp') }}") type("image/webp"), url("{{ home_img('btn-scan-gold.png') }}") type("image/png"));
+            }
+        }
 
         .action-btn-text {
             position: relative;
@@ -172,6 +194,11 @@
             background: url("{{ home_img('nav-frame.png') }}") center / 100% 100% no-repeat;
             margin-bottom: 16px;
         }
+        @supports (background-image: image-set(url("{{ home_img('nav-frame.webp') }}") type("image/webp"))) {
+            .nav-frame {
+                background-image: image-set(url("{{ home_img('nav-frame.webp') }}") type("image/webp"), url("{{ home_img('nav-frame.png') }}") type("image/png"));
+            }
+        }
 
         .nav-frame-title {
             font-family: "HuakangWeibei", "STSong", serif;
@@ -232,6 +259,11 @@
             padding: 24px var(--committee-content-right) 24px var(--committee-content-left);
             margin-bottom: 36px;
         }
+        @supports (background-image: image-set(url("{{ home_img('committee-bg.webp') }}") type("image/webp"))) {
+            .committee-panel {
+                background-image: image-set(url("{{ home_img('committee-bg.webp') }}") type("image/webp"), url("{{ home_img('committee-bg.png') }}") type("image/png"));
+            }
+        }
 
         .committee-side-label {
             position: absolute;
@@ -282,6 +314,11 @@
             flex-shrink: 0;
             background: url("{{ home_img('committee-dot.png') }}") center / contain no-repeat;
         }
+        @supports (background-image: image-set(url("{{ home_img('committee-dot.webp') }}") type("image/webp"))) {
+            .cm-dot {
+                background-image: image-set(url("{{ home_img('committee-dot.webp') }}") type("image/webp"), url("{{ home_img('committee-dot.png') }}") type("image/png"));
+            }
+        }
 
         .cm-label {
             font-family: "HuakangWeibei", "STSong", serif;
@@ -348,7 +385,10 @@
 <div class="page-wrap">
     <div class="page-inner">
 
-        <img src="{{ home_img('logo.png') }}" alt="留" class="logo">
+        <picture>
+            <source srcset="{{ home_img('logo.webp') }}" type="image/webp">
+            <img src="{{ home_img('logo.png') }}" alt="留" class="logo">
+        </picture>
 
         <h1 class="main-title">留氏（衢州）族谱信息管理系统</h1>
         <p class="edition">二〇二五年度版</p>
@@ -373,7 +413,10 @@
                 <span class="sep">/</span>
                 <a href="{{ url_for('tree') }}">关系树状图</a>
                 <span class="sep">/</span>
+                <picture>
+                <source srcset="{{ home_img('nav-seal.webp') }}" type="image/webp">
                 <img src="{{ home_img('nav-seal.png') }}" alt="系统管理" class="nav-seal">
+            </picture>
                 <span class="sep">/</span>
                 <a href="{{ url_for('index') }}">扫描件管理</a>
                 <span class="sep">/</span>