แคชการส่งมอบ

ตัววางแผนส่วนหัวแคช CDN

เลือกชนิดทรัพยากรแล้วได้คำแนะนำ Cache-Control ไฟล์ที่มีแฮชใช้ immutable ยาวได้ HTML และ API ส่วนตัวควรตรวจใหม่หรือห้ามแคชร่วม

พร้อม100/100

กฎ6

immutable2

no-store1

ปัญหา0

ชนิดทรัพยากร

ชื่อไฟล์มีแฮชจึงใช้ immutable หนึ่งปีได้ HTML และ API ที่ล็อกอินไม่ได้

ชื่อไฟล์สถิตกลยุทธ์ HTML

แผนอยู่ในเบราว์เซอร์นี้ ไม่ได้อัปโหลด

ตรวจแคช

แยก HTML ไฟล์สถิตที่มีแฮช และ API ส่วนตัว อย่าใส่ immutable ให้ไฟล์ที่ทับที่เดิม

✓

ใช้ immutable เมื่อมีแฮชเท่านั้นผ่าน

app.abc123.js แคชหนึ่งปีได้ การทับ app.js จะทำให้ CDN ส่งโค้ดเก่า

✓

อย่าแคช HTML ยาวผ่าน

HTML ควร max-age=0 must-revalidate หรือ s-maxage สั้น เพื่อเห็นหน้าใหม่หลังดีพลอย

✓

อย่าใส่ API ส่วนตัวใน CDNผ่าน

JSON เซสชันและบัญชีต้อง private, no-store

–

อย่าแคช service workerข้าม

sw.js ควร no-cache เพื่อรับ worker ใหม่หลังดีพลอย

✓

แยก HTML กับไฟล์สถิตผ่าน

max-age เดียวทั้งไซต์ทำให้ HTML เก่าหรือไฟล์แฮชแคชสั้นเกินไป

ส่วนหัวที่แนะนำ

ใส่ Cache-Control ที่พาธ CDN หรือต้นทางที่ตรงกัน

ชนิด	จับคู่	Cache-Control
JS/CSS/รูปที่มีแฮช	`/assets/.[hash].`	`public, max-age=31536000, immutable`
เอกสาร HTML	`/`	`public, max-age=0, must-revalidate`
API ส่วนตัว	`/api/*`	`private, no-store`
ฟอนต์	`/fonts/*.[hash].woff2`	`public, max-age=31536000, immutable`
รูปไม่มีแฮช	`/images/*`	`public, max-age=86400, stale-while-revalidate=604800`
Sitemap XML	`/sitemap*.xml`	`public, max-age=3600, stale-while-revalidate=86400`

Nginx

location /assets/*.[hash].* {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location / {
  add_header Cache-Control "public, max-age=0, must-revalidate";
}

location /api/* {
  add_header Cache-Control "private, no-store";
}

location /fonts/*.[hash].woff2 {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

location /images/* {
  add_header Cache-Control "public, max-age=86400, stale-while-revalidate=604800";
}

location /sitemap*.xml {
  add_header Cache-Control "public, max-age=3600, stale-while-revalidate=86400";
}

Vercel

{
  "headers": [
    {
      "source": "/assets/:path*\\.[hash]\\.:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "/api/:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "private, no-store"
        }
      ]
    },
    {
      "source": "/fonts/:path*\\.[hash]\\.woff2",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/images/:path*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=86400, stale-while-revalidate=604800"
        }
      ]
    },
    {
      "source": "/sitemap:path*\\.xml",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=3600, stale-while-revalidate=86400"
        }
      ]
    }
  ]
}

เครื่องมือของฉัน · อุปกรณ์นี้