[{"data":1,"prerenderedAt":697},["ShallowReactive",2],{"blog-core-web-vitals-thai-2025":3,"related-core-web-vitals-thai-2025":676},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"author":11,"tags":12,"body":17,"_type":670,"_id":671,"_source":672,"_file":673,"_stem":674,"_extension":675},"\u002Fblog\u002Fcore-web-vitals-thai-2025","blog",false,"","Core Web Vitals 2025 ทำไมเว็บไทยถึง fail และวิธีแก้จริงๆ","Google ใช้ Core Web Vitals (CWV) เป็นส่วนหนึ่งของ ranking signal มาตั้งแต่ปี 2021 แต่จากการที่เราตรวจสอบเว็บลูกค้าและ website ไทยทั่วไปกว่า 200 รายการ พบว่า มากกว่า 70% fail อย่างน้อยหนึ่ง metric","2025-01-22","ทีม Khantuna",[13,14,15,16],"Performance","SEO","Core Web Vitals","Lighthouse",{"type":18,"children":19,"toc":660},"root",[20,34,40,47,57,62,70,99,107,305,311,320,325,333,365,372,508,514,523,528,535,569,575,618,624,629,639,644,649,654],{"type":21,"tag":22,"props":23,"children":24},"element","p",{},[25,28],{"type":26,"value":27},"text","Google ใช้ Core Web Vitals (CWV) เป็นส่วนหนึ่งของ ranking signal มาตั้งแต่ปี 2021 แต่จากการที่เราตรวจสอบเว็บลูกค้าและ website ไทยทั่วไปกว่า 200 รายการ พบว่า ",{"type":21,"tag":29,"props":30,"children":31},"strong",{},[32],{"type":26,"value":33},"มากกว่า 70% fail อย่างน้อยหนึ่ง metric",{"type":21,"tag":35,"props":36,"children":38},"h2",{"id":37},"สามตัวชี้วัดที่ต้องรู้",[39],{"type":26,"value":37},{"type":21,"tag":41,"props":42,"children":44},"h3",{"id":43},"lcp-largest-contentful-paint-โหลดเร็วแค่ไหน",[45],{"type":26,"value":46},"LCP (Largest Contentful Paint) — โหลดเร็วแค่ไหน?",{"type":21,"tag":22,"props":48,"children":49},{},[50,52],{"type":26,"value":51},"เป้าหมาย: ",{"type":21,"tag":29,"props":53,"children":54},{},[55],{"type":26,"value":56},"\u003C 2.5 วินาที",{"type":21,"tag":22,"props":58,"children":59},{},[60],{"type":26,"value":61},"LCP วัดเวลาที่ element ที่ใหญ่ที่สุดบนหน้า (มักเป็นรูปหรือ heading ใหญ่) โหลดเสร็จ",{"type":21,"tag":22,"props":63,"children":64},{},[65],{"type":21,"tag":29,"props":66,"children":67},{},[68],{"type":26,"value":69},"ปัญหาที่พบบ่อยในเว็บไทย:",{"type":21,"tag":71,"props":72,"children":73},"ul",{},[74,80,94],{"type":21,"tag":75,"props":76,"children":77},"li",{},[78],{"type":26,"value":79},"Hero image ที่ไม่ได้ optimize — ไฟล์ขนาด 3-8 MB เป็นเรื่องปกติ",{"type":21,"tag":75,"props":81,"children":82},{},[83,85,92],{"type":26,"value":84},"ไม่มี ",{"type":21,"tag":86,"props":87,"children":89},"code",{"className":88},[],[90],{"type":26,"value":91},"fetchpriority=\"high\"",{"type":26,"value":93}," บน hero image",{"type":21,"tag":75,"props":95,"children":96},{},[97],{"type":26,"value":98},"ใช้ Google Fonts โดยไม่ preconnect",{"type":21,"tag":22,"props":100,"children":101},{},[102],{"type":21,"tag":29,"props":103,"children":104},{},[105],{"type":26,"value":106},"วิธีแก้:",{"type":21,"tag":108,"props":109,"children":113},"pre",{"className":110,"code":111,"language":112,"meta":7,"style":7},"language-html shiki shiki-themes github-light github-dark","\u003C!-- ✅ ถูก -->\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Cimg src=\"\u002Fhero.avif\" fetchpriority=\"high\" alt=\"Hero\">\n\n\u003C!-- ❌ ผิด -->\n\u003Cimg src=\"\u002Fhero-original-8mb.jpg\" alt=\"Hero\">\n","html",[114],{"type":21,"tag":86,"props":115,"children":116},{"__ignoreMap":7},[117,129,186,245,255,264],{"type":21,"tag":118,"props":119,"children":122},"span",{"class":120,"line":121},"line",1,[123],{"type":21,"tag":118,"props":124,"children":126},{"style":125},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[127],{"type":26,"value":128},"\u003C!-- ✅ ถูก -->\n",{"type":21,"tag":118,"props":130,"children":132},{"class":120,"line":131},2,[133,139,145,151,156,162,167,171,176,181],{"type":21,"tag":118,"props":134,"children":136},{"style":135},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[137],{"type":26,"value":138},"\u003C",{"type":21,"tag":118,"props":140,"children":142},{"style":141},"--shiki-default:#22863A;--shiki-dark:#85E89D",[143],{"type":26,"value":144},"link",{"type":21,"tag":118,"props":146,"children":148},{"style":147},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[149],{"type":26,"value":150}," rel",{"type":21,"tag":118,"props":152,"children":153},{"style":135},[154],{"type":26,"value":155},"=",{"type":21,"tag":118,"props":157,"children":159},{"style":158},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[160],{"type":26,"value":161},"\"preconnect\"",{"type":21,"tag":118,"props":163,"children":164},{"style":147},[165],{"type":26,"value":166}," href",{"type":21,"tag":118,"props":168,"children":169},{"style":135},[170],{"type":26,"value":155},{"type":21,"tag":118,"props":172,"children":173},{"style":158},[174],{"type":26,"value":175},"\"https:\u002F\u002Ffonts.gstatic.com\"",{"type":21,"tag":118,"props":177,"children":178},{"style":147},[179],{"type":26,"value":180}," crossorigin",{"type":21,"tag":118,"props":182,"children":183},{"style":135},[184],{"type":26,"value":185},">\n",{"type":21,"tag":118,"props":187,"children":189},{"class":120,"line":188},3,[190,194,199,204,208,213,218,222,227,232,236,241],{"type":21,"tag":118,"props":191,"children":192},{"style":135},[193],{"type":26,"value":138},{"type":21,"tag":118,"props":195,"children":196},{"style":141},[197],{"type":26,"value":198},"img",{"type":21,"tag":118,"props":200,"children":201},{"style":147},[202],{"type":26,"value":203}," src",{"type":21,"tag":118,"props":205,"children":206},{"style":135},[207],{"type":26,"value":155},{"type":21,"tag":118,"props":209,"children":210},{"style":158},[211],{"type":26,"value":212},"\"\u002Fhero.avif\"",{"type":21,"tag":118,"props":214,"children":215},{"style":147},[216],{"type":26,"value":217}," fetchpriority",{"type":21,"tag":118,"props":219,"children":220},{"style":135},[221],{"type":26,"value":155},{"type":21,"tag":118,"props":223,"children":224},{"style":158},[225],{"type":26,"value":226},"\"high\"",{"type":21,"tag":118,"props":228,"children":229},{"style":147},[230],{"type":26,"value":231}," alt",{"type":21,"tag":118,"props":233,"children":234},{"style":135},[235],{"type":26,"value":155},{"type":21,"tag":118,"props":237,"children":238},{"style":158},[239],{"type":26,"value":240},"\"Hero\"",{"type":21,"tag":118,"props":242,"children":243},{"style":135},[244],{"type":26,"value":185},{"type":21,"tag":118,"props":246,"children":248},{"class":120,"line":247},4,[249],{"type":21,"tag":118,"props":250,"children":252},{"emptyLinePlaceholder":251},true,[253],{"type":26,"value":254},"\n",{"type":21,"tag":118,"props":256,"children":258},{"class":120,"line":257},5,[259],{"type":21,"tag":118,"props":260,"children":261},{"style":125},[262],{"type":26,"value":263},"\u003C!-- ❌ ผิด -->\n",{"type":21,"tag":118,"props":265,"children":267},{"class":120,"line":266},6,[268,272,276,280,284,289,293,297,301],{"type":21,"tag":118,"props":269,"children":270},{"style":135},[271],{"type":26,"value":138},{"type":21,"tag":118,"props":273,"children":274},{"style":141},[275],{"type":26,"value":198},{"type":21,"tag":118,"props":277,"children":278},{"style":147},[279],{"type":26,"value":203},{"type":21,"tag":118,"props":281,"children":282},{"style":135},[283],{"type":26,"value":155},{"type":21,"tag":118,"props":285,"children":286},{"style":158},[287],{"type":26,"value":288},"\"\u002Fhero-original-8mb.jpg\"",{"type":21,"tag":118,"props":290,"children":291},{"style":147},[292],{"type":26,"value":231},{"type":21,"tag":118,"props":294,"children":295},{"style":135},[296],{"type":26,"value":155},{"type":21,"tag":118,"props":298,"children":299},{"style":158},[300],{"type":26,"value":240},{"type":21,"tag":118,"props":302,"children":303},{"style":135},[304],{"type":26,"value":185},{"type":21,"tag":41,"props":306,"children":308},{"id":307},"cls-cumulative-layout-shift-หน้าขยับไหมระหว่างโหลด",[309],{"type":26,"value":310},"CLS (Cumulative Layout Shift) — หน้าขยับไหมระหว่างโหลด?",{"type":21,"tag":22,"props":312,"children":313},{},[314,315],{"type":26,"value":51},{"type":21,"tag":29,"props":316,"children":317},{},[318],{"type":26,"value":319},"\u003C 0.1",{"type":21,"tag":22,"props":321,"children":322},{},[323],{"type":26,"value":324},"CLS วัดการขยับของ layout ระหว่างโหลด ซึ่งทำให้ผู้ใช้กดผิดปุ่ม",{"type":21,"tag":22,"props":326,"children":327},{},[328],{"type":21,"tag":29,"props":329,"children":330},{},[331],{"type":26,"value":332},"ปัญหาที่พบบ่อย:",{"type":21,"tag":71,"props":334,"children":335},{},[336,355,360],{"type":21,"tag":75,"props":337,"children":338},{},[339,341,347,349],{"type":26,"value":340},"รูปที่ไม่กำหนด ",{"type":21,"tag":86,"props":342,"children":344},{"className":343},[],[345],{"type":26,"value":346},"width",{"type":26,"value":348}," และ ",{"type":21,"tag":86,"props":350,"children":352},{"className":351},[],[353],{"type":26,"value":354},"height",{"type":21,"tag":75,"props":356,"children":357},{},[358],{"type":26,"value":359},"Font fallback ที่ขนาดต่างจาก web font มาก",{"type":21,"tag":75,"props":361,"children":362},{},[363],{"type":26,"value":364},"Banner โฆษณาที่ inject เข้ามาทีหลัง",{"type":21,"tag":22,"props":366,"children":367},{},[368],{"type":21,"tag":29,"props":369,"children":370},{},[371],{"type":26,"value":106},{"type":21,"tag":108,"props":373,"children":377},{"className":374,"code":375,"language":376,"meta":7,"style":7},"language-css shiki shiki-themes github-light github-dark","\u002F* ✅ กำหนด aspect ratio ให้รูปเสมอ *\u002F\nimg {\n  aspect-ratio: 16 \u002F 9;\n  width: 100%;\n  height: auto;\n}\n\n\u002F* หรือกำหนด width\u002Fheight attribute ใน HTML *\u002F\n","css",[378],{"type":21,"tag":86,"props":379,"children":380},{"__ignoreMap":7},[381,389,401,435,462,483,491,499],{"type":21,"tag":118,"props":382,"children":383},{"class":120,"line":121},[384],{"type":21,"tag":118,"props":385,"children":386},{"style":125},[387],{"type":26,"value":388},"\u002F* ✅ กำหนด aspect ratio ให้รูปเสมอ *\u002F\n",{"type":21,"tag":118,"props":390,"children":391},{"class":120,"line":131},[392,396],{"type":21,"tag":118,"props":393,"children":394},{"style":141},[395],{"type":26,"value":198},{"type":21,"tag":118,"props":397,"children":398},{"style":135},[399],{"type":26,"value":400}," {\n",{"type":21,"tag":118,"props":402,"children":403},{"class":120,"line":188},[404,410,415,420,425,430],{"type":21,"tag":118,"props":405,"children":407},{"style":406},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[408],{"type":26,"value":409},"  aspect-ratio",{"type":21,"tag":118,"props":411,"children":412},{"style":135},[413],{"type":26,"value":414},": ",{"type":21,"tag":118,"props":416,"children":417},{"style":406},[418],{"type":26,"value":419},"16",{"type":21,"tag":118,"props":421,"children":422},{"style":135},[423],{"type":26,"value":424}," \u002F ",{"type":21,"tag":118,"props":426,"children":427},{"style":406},[428],{"type":26,"value":429},"9",{"type":21,"tag":118,"props":431,"children":432},{"style":135},[433],{"type":26,"value":434},";\n",{"type":21,"tag":118,"props":436,"children":437},{"class":120,"line":247},[438,443,447,452,458],{"type":21,"tag":118,"props":439,"children":440},{"style":406},[441],{"type":26,"value":442},"  width",{"type":21,"tag":118,"props":444,"children":445},{"style":135},[446],{"type":26,"value":414},{"type":21,"tag":118,"props":448,"children":449},{"style":406},[450],{"type":26,"value":451},"100",{"type":21,"tag":118,"props":453,"children":455},{"style":454},"--shiki-default:#D73A49;--shiki-dark:#F97583",[456],{"type":26,"value":457},"%",{"type":21,"tag":118,"props":459,"children":460},{"style":135},[461],{"type":26,"value":434},{"type":21,"tag":118,"props":463,"children":464},{"class":120,"line":257},[465,470,474,479],{"type":21,"tag":118,"props":466,"children":467},{"style":406},[468],{"type":26,"value":469},"  height",{"type":21,"tag":118,"props":471,"children":472},{"style":135},[473],{"type":26,"value":414},{"type":21,"tag":118,"props":475,"children":476},{"style":406},[477],{"type":26,"value":478},"auto",{"type":21,"tag":118,"props":480,"children":481},{"style":135},[482],{"type":26,"value":434},{"type":21,"tag":118,"props":484,"children":485},{"class":120,"line":266},[486],{"type":21,"tag":118,"props":487,"children":488},{"style":135},[489],{"type":26,"value":490},"}\n",{"type":21,"tag":118,"props":492,"children":494},{"class":120,"line":493},7,[495],{"type":21,"tag":118,"props":496,"children":497},{"emptyLinePlaceholder":251},[498],{"type":26,"value":254},{"type":21,"tag":118,"props":500,"children":502},{"class":120,"line":501},8,[503],{"type":21,"tag":118,"props":504,"children":505},{"style":125},[506],{"type":26,"value":507},"\u002F* หรือกำหนด width\u002Fheight attribute ใน HTML *\u002F\n",{"type":21,"tag":41,"props":509,"children":511},{"id":510},"inp-interaction-to-next-paint-ตอบสนองเร็วแค่ไหน",[512],{"type":26,"value":513},"INP (Interaction to Next Paint) — ตอบสนองเร็วแค่ไหน?",{"type":21,"tag":22,"props":515,"children":516},{},[517,518],{"type":26,"value":51},{"type":21,"tag":29,"props":519,"children":520},{},[521],{"type":26,"value":522},"\u003C 200ms",{"type":21,"tag":22,"props":524,"children":525},{},[526],{"type":26,"value":527},"INP แทนที่ FID ตั้งแต่ปี 2024 วัด responsiveness ของทุก interaction ไม่ใช่แค่ครั้งแรก",{"type":21,"tag":22,"props":529,"children":530},{},[531],{"type":21,"tag":29,"props":532,"children":533},{},[534],{"type":26,"value":332},{"type":21,"tag":71,"props":536,"children":537},{},[538,543,564],{"type":21,"tag":75,"props":539,"children":540},{},[541],{"type":26,"value":542},"JavaScript bundle ใหญ่เกินไป blocking main thread",{"type":21,"tag":75,"props":544,"children":545},{},[546,548,554,556,562],{"type":26,"value":547},"Animation ที่ไม่ใช้ ",{"type":21,"tag":86,"props":549,"children":551},{"className":550},[],[552],{"type":26,"value":553},"transform",{"type":26,"value":555}," หรือ ",{"type":21,"tag":86,"props":557,"children":559},{"className":558},[],[560],{"type":26,"value":561},"opacity",{"type":26,"value":563}," (ทำให้ browser ต้อง reflow)",{"type":21,"tag":75,"props":565,"children":566},{},[567],{"type":26,"value":568},"Event handlers ที่ทำงานหนักใน click\u002Finput events",{"type":21,"tag":35,"props":570,"children":572},{"id":571},"เครื่องมือที่เราใช้ในการ-debug",[573],{"type":26,"value":574},"เครื่องมือที่เราใช้ในการ debug",{"type":21,"tag":576,"props":577,"children":578},"ol",{},[579,589,599,609],{"type":21,"tag":75,"props":580,"children":581},{},[582,587],{"type":21,"tag":29,"props":583,"children":584},{},[585],{"type":26,"value":586},"Chrome DevTools > Performance",{"type":26,"value":588}," — ดู long tasks และ main thread blocking",{"type":21,"tag":75,"props":590,"children":591},{},[592,597],{"type":21,"tag":29,"props":593,"children":594},{},[595],{"type":26,"value":596},"PageSpeed Insights",{"type":26,"value":598}," — ดูคะแนน field data จาก real users",{"type":21,"tag":75,"props":600,"children":601},{},[602,607],{"type":21,"tag":29,"props":603,"children":604},{},[605],{"type":26,"value":606},"web.dev\u002Fmeasure",{"type":26,"value":608}," — analyze โดยละเอียด",{"type":21,"tag":75,"props":610,"children":611},{},[612,616],{"type":21,"tag":29,"props":613,"children":614},{},[615],{"type":26,"value":16},{"type":26,"value":617}," — ใช้ใน CI\u002FCD pipeline เพื่อ prevent regression",{"type":21,"tag":35,"props":619,"children":621},{"id":620},"สิ่งที่ทำให้-lighthouse-score-ไม่ตรงกับ-field-data",[622],{"type":26,"value":623},"สิ่งที่ทำให้ Lighthouse score ไม่ตรงกับ field data",{"type":21,"tag":22,"props":625,"children":626},{},[627],{"type":26,"value":628},"Lighthouse รันบน simulated slow mobile network ซึ่งจะ show score ต่ำกว่า real-world เสมอ ส่วน CrUX (Chrome User Experience Report) ใช้ข้อมูลจาก real users ซึ่งจะต่างกันมาก",{"type":21,"tag":22,"props":630,"children":631},{},[632,637],{"type":21,"tag":29,"props":633,"children":634},{},[635],{"type":26,"value":636},"แนะนำให้ดูทั้งสอง",{"type":26,"value":638}," — Lighthouse สำหรับ detect issues, CrUX สำหรับดูผลกระทบจริง",{"type":21,"tag":35,"props":640,"children":642},{"id":641},"บทสรุป",[643],{"type":26,"value":641},{"type":21,"tag":22,"props":645,"children":646},{},[647],{"type":26,"value":648},"Core Web Vitals ไม่ใช่เรื่องเทคนิคที่ซับซ้อน แต่ต้องใส่ใจรายละเอียดตั้งแต่ออกแบบ เช่น กำหนด aspect-ratio ให้รูป, compress รูปให้ดี, lazy load ที่ถูกต้อง — สิ่งเหล่านี้ถ้าทำตั้งแต่ต้นแทบไม่มี overhead เพิ่มเติม",{"type":21,"tag":22,"props":650,"children":651},{},[652],{"type":26,"value":653},"ถ้าเว็บคุณ fail CWV อยู่ ติดต่อเราได้ เรามี Performance Audit service ที่ให้ action items ชัดเจนทุกข้อ",{"type":21,"tag":655,"props":656,"children":657},"style",{},[658],{"type":26,"value":659},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":131,"depth":131,"links":661},[662,667,668,669],{"id":37,"depth":131,"text":37,"children":663},[664,665,666],{"id":43,"depth":188,"text":46},{"id":307,"depth":188,"text":310},{"id":510,"depth":188,"text":513},{"id":571,"depth":131,"text":574},{"id":620,"depth":131,"text":623},{"id":641,"depth":131,"text":641},"markdown","content:blog:core-web-vitals-thai-2025.md","content","blog\u002Fcore-web-vitals-thai-2025.md","blog\u002Fcore-web-vitals-thai-2025","md",[677,687],{"_path":678,"title":679,"date":680,"tags":681},"\u002Fblog\u002Fwhy-nextjs-vs-nuxt","Next.js vs Nuxt 3 เลือกอะไรดีสำหรับโปรเจกต์ไทยในปี 2025?","2025-03-10",[682,683,684,685,686],"Next.js","Nuxt","Vue","React","Frontend",{"_path":688,"title":689,"date":690,"tags":691},"\u002Fblog\u002Fflutter-vs-react-native-2025","Flutter vs React Native ในปี 2025 — ประสบการณ์จาก 20+ โปรเจกต์","2024-11-05",[692,693,694,695,696],"Flutter","React Native","Mobile","iOS","Android",1779878303705]