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