[{"data":1,"prerenderedAt":1245},["ShallowReactive",2],{"blog":3},[4,687,1013],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":681,"_id":682,"_source":683,"_file":684,"_stem":685,"_extension":686},"\u002Fblog\u002Fcore-web-vitals-thai-2025","blog",false,"","Core Web Vitals Thai 2025",{"type":11,"children":12,"toc":669},"root",[13,18,32,44,49,56,66,71,79,108,116,313,319,328,333,341,373,380,516,522,531,536,543,577,583,627,633,638,648,653,658,663],{"type":14,"tag":15,"props":16,"children":17},"element","hr",{},[],{"type":14,"tag":19,"props":20,"children":22},"h2",{"id":21},"title-core-web-vitals-2025-ทำไมเว็บไทยถึง-fail-และวิธีแก้จริงๆexcerpt-หลังตรวจสอบเว็บไทยกว่า-200-รายการ-เราพบปัญหาที่ทำให้-fail-cwv-ซ้ำๆ-กัน-และทุกอย่างแก้ได้ถ้ารู้ว่าต้องทำอะไรdate-2025-01-22author-ทีม-venocttags-performance-seo-core-web-vitals-lighthouse",[23,26],{"type":24,"value":25},"text","title: Core Web Vitals 2025 ทำไมเว็บไทยถึง fail และวิธีแก้จริงๆ\nexcerpt: หลังตรวจสอบเว็บไทยกว่า 200 รายการ เราพบปัญหาที่ทำให้ fail CWV ซ้ำๆ กัน และทุกอย่างแก้ได้ถ้ารู้ว่าต้องทำอะไร\ndate: 2025-01-22\nauthor: ทีม Venoct\ntags: ",{"type":14,"tag":27,"props":28,"children":29},"span",{},[30],{"type":24,"value":31},"Performance, SEO, Core Web Vitals, Lighthouse",{"type":14,"tag":33,"props":34,"children":35},"p",{},[36,38],{"type":24,"value":37},"Google ใช้ Core Web Vitals (CWV) เป็นส่วนหนึ่งของ ranking signal มาตั้งแต่ปี 2021 แต่จากการที่เราตรวจสอบเว็บลูกค้าและ website ไทยทั่วไปกว่า 200 รายการ พบว่า ",{"type":14,"tag":39,"props":40,"children":41},"strong",{},[42],{"type":24,"value":43},"มากกว่า 70% fail อย่างน้อยหนึ่ง metric",{"type":14,"tag":19,"props":45,"children":47},{"id":46},"สามตัวชี้วัดที่ต้องรู้",[48],{"type":24,"value":46},{"type":14,"tag":50,"props":51,"children":53},"h3",{"id":52},"lcp-largest-contentful-paint-โหลดเร็วแค่ไหน",[54],{"type":24,"value":55},"LCP (Largest Contentful Paint) — โหลดเร็วแค่ไหน?",{"type":14,"tag":33,"props":57,"children":58},{},[59,61],{"type":24,"value":60},"เป้าหมาย: ",{"type":14,"tag":39,"props":62,"children":63},{},[64],{"type":24,"value":65},"\u003C 2.5 วินาที",{"type":14,"tag":33,"props":67,"children":68},{},[69],{"type":24,"value":70},"LCP วัดเวลาที่ element ที่ใหญ่ที่สุดบนหน้า (มักเป็นรูปหรือ heading ใหญ่) โหลดเสร็จ",{"type":14,"tag":33,"props":72,"children":73},{},[74],{"type":14,"tag":39,"props":75,"children":76},{},[77],{"type":24,"value":78},"ปัญหาที่พบบ่อยในเว็บไทย:",{"type":14,"tag":80,"props":81,"children":82},"ul",{},[83,89,103],{"type":14,"tag":84,"props":85,"children":86},"li",{},[87],{"type":24,"value":88},"Hero image ที่ไม่ได้ optimize — ไฟล์ขนาด 3-8 MB เป็นเรื่องปกติ",{"type":14,"tag":84,"props":90,"children":91},{},[92,94,101],{"type":24,"value":93},"ไม่มี ",{"type":14,"tag":95,"props":96,"children":98},"code",{"className":97},[],[99],{"type":24,"value":100},"fetchpriority=\"high\"",{"type":24,"value":102}," บน hero image",{"type":14,"tag":84,"props":104,"children":105},{},[106],{"type":24,"value":107},"ใช้ Google Fonts โดยไม่ preconnect",{"type":14,"tag":33,"props":109,"children":110},{},[111],{"type":14,"tag":39,"props":112,"children":113},{},[114],{"type":24,"value":115},"วิธีแก้:",{"type":14,"tag":117,"props":118,"children":122},"pre",{"className":119,"code":120,"language":121,"meta":8,"style":8},"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",[123],{"type":14,"tag":95,"props":124,"children":125},{"__ignoreMap":8},[126,137,194,253,263,272],{"type":14,"tag":27,"props":127,"children":130},{"class":128,"line":129},"line",1,[131],{"type":14,"tag":27,"props":132,"children":134},{"style":133},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[135],{"type":24,"value":136},"\u003C!-- ✅ ถูก -->\n",{"type":14,"tag":27,"props":138,"children":140},{"class":128,"line":139},2,[141,147,153,159,164,170,175,179,184,189],{"type":14,"tag":27,"props":142,"children":144},{"style":143},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[145],{"type":24,"value":146},"\u003C",{"type":14,"tag":27,"props":148,"children":150},{"style":149},"--shiki-default:#22863A;--shiki-dark:#85E89D",[151],{"type":24,"value":152},"link",{"type":14,"tag":27,"props":154,"children":156},{"style":155},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[157],{"type":24,"value":158}," rel",{"type":14,"tag":27,"props":160,"children":161},{"style":143},[162],{"type":24,"value":163},"=",{"type":14,"tag":27,"props":165,"children":167},{"style":166},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[168],{"type":24,"value":169},"\"preconnect\"",{"type":14,"tag":27,"props":171,"children":172},{"style":155},[173],{"type":24,"value":174}," href",{"type":14,"tag":27,"props":176,"children":177},{"style":143},[178],{"type":24,"value":163},{"type":14,"tag":27,"props":180,"children":181},{"style":166},[182],{"type":24,"value":183},"\"https:\u002F\u002Ffonts.gstatic.com\"",{"type":14,"tag":27,"props":185,"children":186},{"style":155},[187],{"type":24,"value":188}," crossorigin",{"type":14,"tag":27,"props":190,"children":191},{"style":143},[192],{"type":24,"value":193},">\n",{"type":14,"tag":27,"props":195,"children":197},{"class":128,"line":196},3,[198,202,207,212,216,221,226,230,235,240,244,249],{"type":14,"tag":27,"props":199,"children":200},{"style":143},[201],{"type":24,"value":146},{"type":14,"tag":27,"props":203,"children":204},{"style":149},[205],{"type":24,"value":206},"img",{"type":14,"tag":27,"props":208,"children":209},{"style":155},[210],{"type":24,"value":211}," src",{"type":14,"tag":27,"props":213,"children":214},{"style":143},[215],{"type":24,"value":163},{"type":14,"tag":27,"props":217,"children":218},{"style":166},[219],{"type":24,"value":220},"\"\u002Fhero.avif\"",{"type":14,"tag":27,"props":222,"children":223},{"style":155},[224],{"type":24,"value":225}," fetchpriority",{"type":14,"tag":27,"props":227,"children":228},{"style":143},[229],{"type":24,"value":163},{"type":14,"tag":27,"props":231,"children":232},{"style":166},[233],{"type":24,"value":234},"\"high\"",{"type":14,"tag":27,"props":236,"children":237},{"style":155},[238],{"type":24,"value":239}," alt",{"type":14,"tag":27,"props":241,"children":242},{"style":143},[243],{"type":24,"value":163},{"type":14,"tag":27,"props":245,"children":246},{"style":166},[247],{"type":24,"value":248},"\"Hero\"",{"type":14,"tag":27,"props":250,"children":251},{"style":143},[252],{"type":24,"value":193},{"type":14,"tag":27,"props":254,"children":256},{"class":128,"line":255},4,[257],{"type":14,"tag":27,"props":258,"children":260},{"emptyLinePlaceholder":259},true,[261],{"type":24,"value":262},"\n",{"type":14,"tag":27,"props":264,"children":266},{"class":128,"line":265},5,[267],{"type":14,"tag":27,"props":268,"children":269},{"style":133},[270],{"type":24,"value":271},"\u003C!-- ❌ ผิด -->\n",{"type":14,"tag":27,"props":273,"children":275},{"class":128,"line":274},6,[276,280,284,288,292,297,301,305,309],{"type":14,"tag":27,"props":277,"children":278},{"style":143},[279],{"type":24,"value":146},{"type":14,"tag":27,"props":281,"children":282},{"style":149},[283],{"type":24,"value":206},{"type":14,"tag":27,"props":285,"children":286},{"style":155},[287],{"type":24,"value":211},{"type":14,"tag":27,"props":289,"children":290},{"style":143},[291],{"type":24,"value":163},{"type":14,"tag":27,"props":293,"children":294},{"style":166},[295],{"type":24,"value":296},"\"\u002Fhero-original-8mb.jpg\"",{"type":14,"tag":27,"props":298,"children":299},{"style":155},[300],{"type":24,"value":239},{"type":14,"tag":27,"props":302,"children":303},{"style":143},[304],{"type":24,"value":163},{"type":14,"tag":27,"props":306,"children":307},{"style":166},[308],{"type":24,"value":248},{"type":14,"tag":27,"props":310,"children":311},{"style":143},[312],{"type":24,"value":193},{"type":14,"tag":50,"props":314,"children":316},{"id":315},"cls-cumulative-layout-shift-หน้าขยับไหมระหว่างโหลด",[317],{"type":24,"value":318},"CLS (Cumulative Layout Shift) — หน้าขยับไหมระหว่างโหลด?",{"type":14,"tag":33,"props":320,"children":321},{},[322,323],{"type":24,"value":60},{"type":14,"tag":39,"props":324,"children":325},{},[326],{"type":24,"value":327},"\u003C 0.1",{"type":14,"tag":33,"props":329,"children":330},{},[331],{"type":24,"value":332},"CLS วัดการขยับของ layout ระหว่างโหลด ซึ่งทำให้ผู้ใช้กดผิดปุ่ม",{"type":14,"tag":33,"props":334,"children":335},{},[336],{"type":14,"tag":39,"props":337,"children":338},{},[339],{"type":24,"value":340},"ปัญหาที่พบบ่อย:",{"type":14,"tag":80,"props":342,"children":343},{},[344,363,368],{"type":14,"tag":84,"props":345,"children":346},{},[347,349,355,357],{"type":24,"value":348},"รูปที่ไม่กำหนด ",{"type":14,"tag":95,"props":350,"children":352},{"className":351},[],[353],{"type":24,"value":354},"width",{"type":24,"value":356}," และ ",{"type":14,"tag":95,"props":358,"children":360},{"className":359},[],[361],{"type":24,"value":362},"height",{"type":14,"tag":84,"props":364,"children":365},{},[366],{"type":24,"value":367},"Font fallback ที่ขนาดต่างจาก web font มาก",{"type":14,"tag":84,"props":369,"children":370},{},[371],{"type":24,"value":372},"Banner โฆษณาที่ inject เข้ามาทีหลัง",{"type":14,"tag":33,"props":374,"children":375},{},[376],{"type":14,"tag":39,"props":377,"children":378},{},[379],{"type":24,"value":115},{"type":14,"tag":117,"props":381,"children":385},{"className":382,"code":383,"language":384,"meta":8,"style":8},"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",[386],{"type":14,"tag":95,"props":387,"children":388},{"__ignoreMap":8},[389,397,409,443,470,491,499,507],{"type":14,"tag":27,"props":390,"children":391},{"class":128,"line":129},[392],{"type":14,"tag":27,"props":393,"children":394},{"style":133},[395],{"type":24,"value":396},"\u002F* ✅ กำหนด aspect ratio ให้รูปเสมอ *\u002F\n",{"type":14,"tag":27,"props":398,"children":399},{"class":128,"line":139},[400,404],{"type":14,"tag":27,"props":401,"children":402},{"style":149},[403],{"type":24,"value":206},{"type":14,"tag":27,"props":405,"children":406},{"style":143},[407],{"type":24,"value":408}," {\n",{"type":14,"tag":27,"props":410,"children":411},{"class":128,"line":196},[412,418,423,428,433,438],{"type":14,"tag":27,"props":413,"children":415},{"style":414},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[416],{"type":24,"value":417},"  aspect-ratio",{"type":14,"tag":27,"props":419,"children":420},{"style":143},[421],{"type":24,"value":422},": ",{"type":14,"tag":27,"props":424,"children":425},{"style":414},[426],{"type":24,"value":427},"16",{"type":14,"tag":27,"props":429,"children":430},{"style":143},[431],{"type":24,"value":432}," \u002F ",{"type":14,"tag":27,"props":434,"children":435},{"style":414},[436],{"type":24,"value":437},"9",{"type":14,"tag":27,"props":439,"children":440},{"style":143},[441],{"type":24,"value":442},";\n",{"type":14,"tag":27,"props":444,"children":445},{"class":128,"line":255},[446,451,455,460,466],{"type":14,"tag":27,"props":447,"children":448},{"style":414},[449],{"type":24,"value":450},"  width",{"type":14,"tag":27,"props":452,"children":453},{"style":143},[454],{"type":24,"value":422},{"type":14,"tag":27,"props":456,"children":457},{"style":414},[458],{"type":24,"value":459},"100",{"type":14,"tag":27,"props":461,"children":463},{"style":462},"--shiki-default:#D73A49;--shiki-dark:#F97583",[464],{"type":24,"value":465},"%",{"type":14,"tag":27,"props":467,"children":468},{"style":143},[469],{"type":24,"value":442},{"type":14,"tag":27,"props":471,"children":472},{"class":128,"line":265},[473,478,482,487],{"type":14,"tag":27,"props":474,"children":475},{"style":414},[476],{"type":24,"value":477},"  height",{"type":14,"tag":27,"props":479,"children":480},{"style":143},[481],{"type":24,"value":422},{"type":14,"tag":27,"props":483,"children":484},{"style":414},[485],{"type":24,"value":486},"auto",{"type":14,"tag":27,"props":488,"children":489},{"style":143},[490],{"type":24,"value":442},{"type":14,"tag":27,"props":492,"children":493},{"class":128,"line":274},[494],{"type":14,"tag":27,"props":495,"children":496},{"style":143},[497],{"type":24,"value":498},"}\n",{"type":14,"tag":27,"props":500,"children":502},{"class":128,"line":501},7,[503],{"type":14,"tag":27,"props":504,"children":505},{"emptyLinePlaceholder":259},[506],{"type":24,"value":262},{"type":14,"tag":27,"props":508,"children":510},{"class":128,"line":509},8,[511],{"type":14,"tag":27,"props":512,"children":513},{"style":133},[514],{"type":24,"value":515},"\u002F* หรือกำหนด width\u002Fheight attribute ใน HTML *\u002F\n",{"type":14,"tag":50,"props":517,"children":519},{"id":518},"inp-interaction-to-next-paint-ตอบสนองเร็วแค่ไหน",[520],{"type":24,"value":521},"INP (Interaction to Next Paint) — ตอบสนองเร็วแค่ไหน?",{"type":14,"tag":33,"props":523,"children":524},{},[525,526],{"type":24,"value":60},{"type":14,"tag":39,"props":527,"children":528},{},[529],{"type":24,"value":530},"\u003C 200ms",{"type":14,"tag":33,"props":532,"children":533},{},[534],{"type":24,"value":535},"INP แทนที่ FID ตั้งแต่ปี 2024 วัด responsiveness ของทุก interaction ไม่ใช่แค่ครั้งแรก",{"type":14,"tag":33,"props":537,"children":538},{},[539],{"type":14,"tag":39,"props":540,"children":541},{},[542],{"type":24,"value":340},{"type":14,"tag":80,"props":544,"children":545},{},[546,551,572],{"type":14,"tag":84,"props":547,"children":548},{},[549],{"type":24,"value":550},"JavaScript bundle ใหญ่เกินไป blocking main thread",{"type":14,"tag":84,"props":552,"children":553},{},[554,556,562,564,570],{"type":24,"value":555},"Animation ที่ไม่ใช้ ",{"type":14,"tag":95,"props":557,"children":559},{"className":558},[],[560],{"type":24,"value":561},"transform",{"type":24,"value":563}," หรือ ",{"type":14,"tag":95,"props":565,"children":567},{"className":566},[],[568],{"type":24,"value":569},"opacity",{"type":24,"value":571}," (ทำให้ browser ต้อง reflow)",{"type":14,"tag":84,"props":573,"children":574},{},[575],{"type":24,"value":576},"Event handlers ที่ทำงานหนักใน click\u002Finput events",{"type":14,"tag":19,"props":578,"children":580},{"id":579},"เครื่องมือที่เราใช้ในการ-debug",[581],{"type":24,"value":582},"เครื่องมือที่เราใช้ในการ debug",{"type":14,"tag":584,"props":585,"children":586},"ol",{},[587,597,607,617],{"type":14,"tag":84,"props":588,"children":589},{},[590,595],{"type":14,"tag":39,"props":591,"children":592},{},[593],{"type":24,"value":594},"Chrome DevTools > Performance",{"type":24,"value":596}," — ดู long tasks และ main thread blocking",{"type":14,"tag":84,"props":598,"children":599},{},[600,605],{"type":14,"tag":39,"props":601,"children":602},{},[603],{"type":24,"value":604},"PageSpeed Insights",{"type":24,"value":606}," — ดูคะแนน field data จาก real users",{"type":14,"tag":84,"props":608,"children":609},{},[610,615],{"type":14,"tag":39,"props":611,"children":612},{},[613],{"type":24,"value":614},"web.dev\u002Fmeasure",{"type":24,"value":616}," — analyze โดยละเอียด",{"type":14,"tag":84,"props":618,"children":619},{},[620,625],{"type":14,"tag":39,"props":621,"children":622},{},[623],{"type":24,"value":624},"Lighthouse",{"type":24,"value":626}," — ใช้ใน CI\u002FCD pipeline เพื่อ prevent regression",{"type":14,"tag":19,"props":628,"children":630},{"id":629},"สิ่งที่ทำให้-lighthouse-score-ไม่ตรงกับ-field-data",[631],{"type":24,"value":632},"สิ่งที่ทำให้ Lighthouse score ไม่ตรงกับ field data",{"type":14,"tag":33,"props":634,"children":635},{},[636],{"type":24,"value":637},"Lighthouse รันบน simulated slow mobile network ซึ่งจะ show score ต่ำกว่า real-world เสมอ ส่วน CrUX (Chrome User Experience Report) ใช้ข้อมูลจาก real users ซึ่งจะต่างกันมาก",{"type":14,"tag":33,"props":639,"children":640},{},[641,646],{"type":14,"tag":39,"props":642,"children":643},{},[644],{"type":24,"value":645},"แนะนำให้ดูทั้งสอง",{"type":24,"value":647}," — Lighthouse สำหรับ detect issues, CrUX สำหรับดูผลกระทบจริง",{"type":14,"tag":19,"props":649,"children":651},{"id":650},"บทสรุป",[652],{"type":24,"value":650},{"type":14,"tag":33,"props":654,"children":655},{},[656],{"type":24,"value":657},"Core Web Vitals ไม่ใช่เรื่องเทคนิคที่ซับซ้อน แต่ต้องใส่ใจรายละเอียดตั้งแต่ออกแบบ เช่น กำหนด aspect-ratio ให้รูป, compress รูปให้ดี, lazy load ที่ถูกต้อง — สิ่งเหล่านี้ถ้าทำตั้งแต่ต้นแทบไม่มี overhead เพิ่มเติม",{"type":14,"tag":33,"props":659,"children":660},{},[661],{"type":24,"value":662},"ถ้าเว็บคุณ fail CWV อยู่ ติดต่อเราได้ เรามี Performance Audit service ที่ให้ action items ชัดเจนทุกข้อ",{"type":14,"tag":664,"props":665,"children":666},"style",{},[667],{"type":24,"value":668},"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":8,"searchDepth":139,"depth":139,"links":670},[671,673,678,679,680],{"id":21,"depth":139,"text":672},"title: Core Web Vitals 2025 ทำไมเว็บไทยถึง fail และวิธีแก้จริงๆ\nexcerpt: หลังตรวจสอบเว็บไทยกว่า 200 รายการ เราพบปัญหาที่ทำให้ fail CWV ซ้ำๆ กัน และทุกอย่างแก้ได้ถ้ารู้ว่าต้องทำอะไร\ndate: 2025-01-22\nauthor: ทีม Venoct\ntags: Performance, SEO, Core Web Vitals, Lighthouse",{"id":46,"depth":139,"text":46,"children":674},[675,676,677],{"id":52,"depth":196,"text":55},{"id":315,"depth":196,"text":318},{"id":518,"depth":196,"text":521},{"id":579,"depth":139,"text":582},{"id":629,"depth":139,"text":632},{"id":650,"depth":139,"text":650},"markdown","content:blog:core-web-vitals-thai-2025.md","content","blog\u002Fcore-web-vitals-thai-2025.md","blog\u002Fcore-web-vitals-thai-2025","md",{"_path":688,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":689,"description":8,"body":690,"_type":681,"_id":1010,"_source":683,"_file":1011,"_stem":1012,"_extension":686},"\u002Fblog\u002Fflutter-vs-react-native-2025","Flutter Vs React Native 2025",{"type":11,"children":691,"toc":993},[692,695,706,711,717,722,730,851,857,863,868,873,879,884,890,895,901,907,912,918,923,929,934,940,945,955,960],{"type":14,"tag":15,"props":693,"children":694},{},[],{"type":14,"tag":19,"props":696,"children":698},{"id":697},"title-flutter-vs-react-native-ในปี-2025-ประสบการณ์จาก-20-โปรเจกต์excerpt-เราพัฒนาแอปทั้งสองมาหลายปี-มีข้อสรุปชัดเจนว่าควรเลือกอะไรและเมื่อไหร่-โดยอ้างอิงจากโปรเจกต์จริง-ไม่ใช่แค่-benchmarkdate-2024-11-05author-ทีม-venocttags-flutter-react-native-mobile-ios-android",[699,701],{"type":24,"value":700},"title: Flutter vs React Native ในปี 2025 — ประสบการณ์จาก 20+ โปรเจกต์\nexcerpt: เราพัฒนาแอปทั้งสองมาหลายปี มีข้อสรุปชัดเจนว่าควรเลือกอะไรและเมื่อไหร่ โดยอ้างอิงจากโปรเจกต์จริง ไม่ใช่แค่ benchmark\ndate: 2024-11-05\nauthor: ทีม Venoct\ntags: ",{"type":14,"tag":27,"props":702,"children":703},{},[704],{"type":24,"value":705},"Flutter, React Native, Mobile, iOS, Android",{"type":14,"tag":33,"props":707,"children":708},{},[709],{"type":24,"value":710},"ทุกครั้งที่ลูกค้ามาถามว่า \"ควรทำ Flutter หรือ React Native?\" เราไม่เคยตอบได้ทันทีโดยไม่ถามกลับก่อน เพราะทั้งสองมีจุดแข็งที่แตกต่างกันชัดเจน",{"type":14,"tag":19,"props":712,"children":714},{"id":713},"ภาพรวมในปี-2025",[715],{"type":24,"value":716},"ภาพรวมในปี 2025",{"type":14,"tag":33,"props":718,"children":719},{},[720],{"type":24,"value":721},"Flutter และ React Native ต่างก็ mature มากแล้ว ทั้งสองรองรับ iOS และ Android ได้ดี ทั้งสองมี hot reload ที่ทำให้ development เร็ว ทั้งสองมี ecosystem ที่ใหญ่พอสำหรับโปรเจกต์ส่วนใหญ่",{"type":14,"tag":33,"props":723,"children":724},{},[725],{"type":14,"tag":39,"props":726,"children":727},{},[728],{"type":24,"value":729},"ความต่างหลักที่เหลืออยู่:",{"type":14,"tag":731,"props":732,"children":733},"table",{},[734,756],{"type":14,"tag":735,"props":736,"children":737},"thead",{},[738],{"type":14,"tag":739,"props":740,"children":741},"tr",{},[742,746,751],{"type":14,"tag":743,"props":744,"children":745},"th",{},[],{"type":14,"tag":743,"props":747,"children":748},{},[749],{"type":24,"value":750},"Flutter",{"type":14,"tag":743,"props":752,"children":753},{},[754],{"type":24,"value":755},"React Native",{"type":14,"tag":757,"props":758,"children":759},"tbody",{},[760,779,797,815,833],{"type":14,"tag":739,"props":761,"children":762},{},[763,769,774],{"type":14,"tag":764,"props":765,"children":766},"td",{},[767],{"type":24,"value":768},"Language",{"type":14,"tag":764,"props":770,"children":771},{},[772],{"type":24,"value":773},"Dart",{"type":14,"tag":764,"props":775,"children":776},{},[777],{"type":24,"value":778},"JavaScript\u002FTypeScript",{"type":14,"tag":739,"props":780,"children":781},{},[782,787,792],{"type":14,"tag":764,"props":783,"children":784},{},[785],{"type":24,"value":786},"Rendering",{"type":14,"tag":764,"props":788,"children":789},{},[790],{"type":24,"value":791},"Own engine (Skia\u002FImpeller)",{"type":14,"tag":764,"props":793,"children":794},{},[795],{"type":24,"value":796},"Native components",{"type":14,"tag":739,"props":798,"children":799},{},[800,805,810],{"type":14,"tag":764,"props":801,"children":802},{},[803],{"type":24,"value":804},"Performance",{"type":14,"tag":764,"props":806,"children":807},{},[808],{"type":24,"value":809},"เร็วกว่าในกรณี animation",{"type":14,"tag":764,"props":811,"children":812},{},[813],{"type":24,"value":814},"ใกล้เคียง native feel",{"type":14,"tag":739,"props":816,"children":817},{},[818,823,828],{"type":14,"tag":764,"props":819,"children":820},{},[821],{"type":24,"value":822},"Ecosystem",{"type":14,"tag":764,"props":824,"children":825},{},[826],{"type":24,"value":827},"เติบโตเร็ว",{"type":14,"tag":764,"props":829,"children":830},{},[831],{"type":24,"value":832},"ใหญ่กว่า",{"type":14,"tag":739,"props":834,"children":835},{},[836,841,846],{"type":14,"tag":764,"props":837,"children":838},{},[839],{"type":24,"value":840},"Learning curve",{"type":14,"tag":764,"props":842,"children":843},{},[844],{"type":24,"value":845},"ต้องเรียน Dart",{"type":14,"tag":764,"props":847,"children":848},{},[849],{"type":24,"value":850},"ใช้ JS ที่รู้อยู่แล้ว",{"type":14,"tag":19,"props":852,"children":854},{"id":853},"flutter-เหมาะกับอะไร",[855],{"type":24,"value":856},"Flutter เหมาะกับอะไร",{"type":14,"tag":50,"props":858,"children":860},{"id":859},"custom-ui-ที่ต้องการ-pixel-perfect",[861],{"type":24,"value":862},"Custom UI ที่ต้องการ pixel-perfect",{"type":14,"tag":33,"props":864,"children":865},{},[866],{"type":24,"value":867},"Flutter render ด้วย engine ของตัวเอง ทำให้ UI เหมือนกันทุก platform 100% ถ้า design ต้องการ custom animation หรือ UI component ที่ไม่มีใน native library — Flutter ทำได้ง่ายกว่ามาก",{"type":14,"tag":33,"props":869,"children":870},{},[871],{"type":24,"value":872},"ตัวอย่างที่เราทำ: animated progress indicator ที่มี particle effects — ใน Flutter ทำได้ใน 30 นาที ถ้าเป็น React Native ต้องเขียน native module แยกสำหรับ iOS และ Android",{"type":14,"tag":50,"props":874,"children":876},{"id":875},"mvp-ที่ต้องการ-ship-เร็ว",[877],{"type":24,"value":878},"MVP ที่ต้องการ ship เร็ว",{"type":14,"tag":33,"props":880,"children":881},{},[882],{"type":24,"value":883},"codebase เดียว compile เป็น iOS + Android ได้เลย ไม่มี platform-specific code ที่ต้องดูแลแยก ทีมเล็กๆ ดูแลได้คนเดียว",{"type":14,"tag":50,"props":885,"children":887},{"id":886},"performance-sensitive-apps",[888],{"type":24,"value":889},"Performance-sensitive apps",{"type":14,"tag":33,"props":891,"children":892},{},[893],{"type":24,"value":894},"Impeller (rendering engine ใหม่ของ Flutter) ให้ frame rate ที่สม่ำเสมอกว่า โดยเฉพาะ animation ซับซ้อน",{"type":14,"tag":19,"props":896,"children":898},{"id":897},"react-native-เหมาะกับอะไร",[899],{"type":24,"value":900},"React Native เหมาะกับอะไร",{"type":14,"tag":50,"props":902,"children":904},{"id":903},"ทีมที่มี-javascriptreact-background",[905],{"type":24,"value":906},"ทีมที่มี JavaScript\u002FReact background",{"type":14,"tag":33,"props":908,"children":909},{},[910],{"type":24,"value":911},"Onboarding ทีม web developer เข้า React Native ใช้เวลาเพียง 1-2 สัปดาห์ เพราะ pattern ที่ใช้คือ React เดิม ต่างจาก Flutter ที่ต้องเรียน Dart + widget system ใหม่ทั้งหมด",{"type":14,"tag":50,"props":913,"children":915},{"id":914},"apps-ที่ต้องการ-native-look-feel-อย่างเคร่งครัด",[916],{"type":24,"value":917},"Apps ที่ต้องการ native look & feel อย่างเคร่งครัด",{"type":14,"tag":33,"props":919,"children":920},{},[921],{"type":24,"value":922},"React Native render ด้วย native components จริง ทำให้ text rendering, scrolling และ gestures รู้สึก native มากกว่า Flutter ในบางกรณี",{"type":14,"tag":50,"props":924,"children":926},{"id":925},"การ-share-code-กับ-web",[927],{"type":24,"value":928},"การ share code กับ web",{"type":14,"tag":33,"props":930,"children":931},{},[932],{"type":24,"value":933},"ถ้า project มีทั้ง web app (Next.js\u002FReact) และ mobile app React Native ทำให้ share business logic, types และ some UI components ได้",{"type":14,"tag":19,"props":935,"children":937},{"id":936},"case-study-เราเลือก-flutter-ครั้งหนึ่ง-แต่ไม่ควรเลือก",[938],{"type":24,"value":939},"Case study: เราเลือก Flutter ครั้งหนึ่ง แต่ไม่ควรเลือก",{"type":14,"tag":33,"props":941,"children":942},{},[943],{"type":24,"value":944},"โปรเจกต์หนึ่งที่เราเลือก Flutter แต่ควรใช้ React Native คือแอปที่ต้องการ deep integration กับ native iOS features (ARKit สำหรับ try-on feature) — เราใช้เวลา 3 สัปดาห์เขียน Flutter-to-native bridge ที่ React Native มี library สำเร็จรูปอยู่แล้ว",{"type":14,"tag":33,"props":946,"children":947},{},[948,953],{"type":14,"tag":39,"props":949,"children":950},{},[951],{"type":24,"value":952},"บทเรียน:",{"type":24,"value":954}," ก่อนเลือก framework ให้ list native features ที่ต้องใช้ออกมาก่อน แล้วดูว่า ecosystem ของ framework ไหนรองรับดีกว่า",{"type":14,"tag":19,"props":956,"children":958},{"id":957},"คำแนะนำสุดท้าย",[959],{"type":24,"value":957},{"type":14,"tag":80,"props":961,"children":962},{},[963,973,983],{"type":14,"tag":84,"props":964,"children":965},{},[966,971],{"type":14,"tag":39,"props":967,"children":968},{},[969],{"type":24,"value":970},"เลือก Flutter ถ้า:",{"type":24,"value":972}," UI ซับซ้อน, ทีมยินดีเรียน Dart, หรืองบประมาณจำกัดแต่ต้องการทั้ง iOS+Android",{"type":14,"tag":84,"props":974,"children":975},{},[976,981],{"type":14,"tag":39,"props":977,"children":978},{},[979],{"type":24,"value":980},"เลือก React Native ถ้า:",{"type":24,"value":982}," ทีมเป็น JavaScript, ต้องการ native feel อย่างเคร่ง, หรือต้อง share code กับ web",{"type":14,"tag":84,"props":984,"children":985},{},[986,991],{"type":14,"tag":39,"props":987,"children":988},{},[989],{"type":24,"value":990},"ทั้งสองดีพอ",{"type":24,"value":992}," สำหรับ 90% ของ app ทั่วไป — อย่าให้ \"เลือก framework\" กลายเป็น blocker สำหรับการเริ่มต้น",{"title":8,"searchDepth":139,"depth":139,"links":994},[995,997,998,1003,1008,1009],{"id":697,"depth":139,"text":996},"title: Flutter vs React Native ในปี 2025 — ประสบการณ์จาก 20+ โปรเจกต์\nexcerpt: เราพัฒนาแอปทั้งสองมาหลายปี มีข้อสรุปชัดเจนว่าควรเลือกอะไรและเมื่อไหร่ โดยอ้างอิงจากโปรเจกต์จริง ไม่ใช่แค่ benchmark\ndate: 2024-11-05\nauthor: ทีม Venoct\ntags: Flutter, React Native, Mobile, iOS, Android",{"id":713,"depth":139,"text":716},{"id":853,"depth":139,"text":856,"children":999},[1000,1001,1002],{"id":859,"depth":196,"text":862},{"id":875,"depth":196,"text":878},{"id":886,"depth":196,"text":889},{"id":897,"depth":139,"text":900,"children":1004},[1005,1006,1007],{"id":903,"depth":196,"text":906},{"id":914,"depth":196,"text":917},{"id":925,"depth":196,"text":928},{"id":936,"depth":139,"text":939},{"id":957,"depth":139,"text":957},"content:blog:flutter-vs-react-native-2025.md","blog\u002Fflutter-vs-react-native-2025.md","blog\u002Fflutter-vs-react-native-2025",{"_path":1014,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1015,"description":8,"body":1016,"_type":681,"_id":1242,"_source":683,"_file":1243,"_stem":1244,"_extension":686},"\u002Fblog\u002Fwhy-nextjs-vs-nuxt","Why Nextjs Vs Nuxt",{"type":11,"children":1017,"toc":1233},[1018,1021,1032,1037,1043,1048,1054,1062,1067,1075,1080,1088,1093,1099,1107,1112,1120,1131,1139,1144,1150,1162,1185,1190,1223],{"type":14,"tag":15,"props":1019,"children":1020},{},[],{"type":14,"tag":19,"props":1022,"children":1024},{"id":1023},"title-nextjs-vs-nuxt-3-เลือกอะไรดีสำหรับโปรเจกต์ไทยในปี-2025excerpt-เราใช้ทั้งสองมาหลายปี-และมีคำตอบที่ชัดเจนว่าควรเลือกอะไร-ขึ้นอยู่กับ-team-use-case-และ-ecosystem-ที่ต้องการdate-2025-03-10author-ทีม-venocttags-nextjs-nuxt-vue-react-frontend",[1025,1027],{"type":24,"value":1026},"title: Next.js vs Nuxt 3 เลือกอะไรดีสำหรับโปรเจกต์ไทยในปี 2025?\nexcerpt: เราใช้ทั้งสองมาหลายปี และมีคำตอบที่ชัดเจนว่าควรเลือกอะไร ขึ้นอยู่กับ team, use case และ ecosystem ที่ต้องการ\ndate: 2025-03-10\nauthor: ทีม Venoct\ntags: ",{"type":14,"tag":27,"props":1028,"children":1029},{},[1030],{"type":24,"value":1031},"Next.js, Nuxt, Vue, React, Frontend",{"type":14,"tag":33,"props":1033,"children":1034},{},[1035],{"type":24,"value":1036},"หลายปีที่ผ่านมา ลูกค้าที่มาหาเรามักถามคำถามนี้บ่อยมาก: \"ควรใช้ Next.js หรือ Nuxt ดี?\" คำตอบของเราก็คือ \"ขึ้นอยู่กับ\" — แต่ไม่ใช่คำตอบแบบหลีกเลี่ยง เพราะมีปัจจัยที่ชัดเจนมากที่ช่วยตัดสินใจได้",{"type":14,"tag":19,"props":1038,"children":1040},{"id":1039},"ทำไมถึงถามคำถามนี้กัน",[1041],{"type":24,"value":1042},"ทำไมถึงถามคำถามนี้กัน?",{"type":14,"tag":33,"props":1044,"children":1045},{},[1046],{"type":24,"value":1047},"ทั้งสอง framework ทำงานได้คล้ายกันมากในระดับ high-level — SSR, SSG, file-based routing, API routes แต่ ecosystem, developer experience และ community support แตกต่างกันพอที่จะส่งผลต่อ project ยาวๆ",{"type":14,"tag":19,"props":1049,"children":1051},{"id":1050},"เลือก-nextjs-เมื่อ",[1052],{"type":24,"value":1053},"เลือก Next.js เมื่อ...",{"type":14,"tag":33,"props":1055,"children":1056},{},[1057],{"type":14,"tag":39,"props":1058,"children":1059},{},[1060],{"type":24,"value":1061},"ทีม React \u002F JavaScript ecosystem",{"type":14,"tag":33,"props":1063,"children":1064},{},[1065],{"type":24,"value":1066},"ถ้าทีม developer คุ้นเคยกับ React อยู่แล้ว Next.js เป็นตัวเลือกที่สมเหตุสมผลที่สุด Onboarding time สั้นกว่ามาก และ npm ecosystem ของ React ใหญ่กว่า",{"type":14,"tag":33,"props":1068,"children":1069},{},[1070],{"type":14,"tag":39,"props":1071,"children":1072},{},[1073],{"type":24,"value":1074},"ต้องการ Vercel AI SDK หรือ Server Actions",{"type":14,"tag":33,"props":1076,"children":1077},{},[1078],{"type":24,"value":1079},"Vercel ลงทุนกับ Next.js โดยตรง ถ้าโปรเจกต์ต้องการ AI features ที่ integrate ได้ง่าย หรือต้องการ Server Actions ที่ mature มาก Next.js คือ first-class choice",{"type":14,"tag":33,"props":1081,"children":1082},{},[1083],{"type":14,"tag":39,"props":1084,"children":1085},{},[1086],{"type":24,"value":1087},"Startup ที่ต้องการ hire ง่าย",{"type":14,"tag":33,"props":1089,"children":1090},{},[1091],{"type":24,"value":1092},"React developer มีมากกว่า Vue developer ในตลาดไทย ถ้า plan ว่าจะ hire team เพิ่มในอนาคต Next.js ทำให้หาคนได้ง่ายกว่า",{"type":14,"tag":19,"props":1094,"children":1096},{"id":1095},"เลือก-nuxt-3-เมื่อ",[1097],{"type":24,"value":1098},"เลือก Nuxt 3 เมื่อ...",{"type":14,"tag":33,"props":1100,"children":1101},{},[1102],{"type":14,"tag":39,"props":1103,"children":1104},{},[1105],{"type":24,"value":1106},"ต้องการ DX ที่ดีกว่าออกกล่อง",{"type":14,"tag":33,"props":1108,"children":1109},{},[1110],{"type":24,"value":1111},"Nuxt 3 มี auto-imports, composables, components — ทุกอย่างที่ setup ให้เรียบร้อย ไม่ต้อง config อะไรเพิ่ม ทีมที่ไม่อยากเสียเวลา setup เลือก Nuxt ได้เลย",{"type":14,"tag":33,"props":1113,"children":1114},{},[1115],{"type":14,"tag":39,"props":1116,"children":1117},{},[1118],{"type":24,"value":1119},"Content-heavy site หรือ Blog",{"type":14,"tag":33,"props":1121,"children":1122},{},[1123,1129],{"type":14,"tag":95,"props":1124,"children":1126},{"className":1125},[],[1127],{"type":24,"value":1128},"@nuxt\u002Fcontent",{"type":24,"value":1130}," เป็น best-in-class ใน Vue ecosystem และทำงานได้ดีมากกับ Nuxt รองรับ MDX-like, content queries และ live editing ออกกล่อง",{"type":14,"tag":33,"props":1132,"children":1133},{},[1134],{"type":14,"tag":39,"props":1135,"children":1136},{},[1137],{"type":24,"value":1138},"Vue 3 Composition API + TypeScript",{"type":14,"tag":33,"props":1140,"children":1141},{},[1142],{"type":24,"value":1143},"ถ้าทีม prefer Vue syntax และ Composition API ที่ \"ง่ายกว่า\" React hooks ในหลายๆ กรณี Nuxt ให้ DX ที่ดีกว่ามาก",{"type":14,"tag":19,"props":1145,"children":1147},{"id":1146},"performance-จริงๆ-ต่างกันไหม",[1148],{"type":24,"value":1149},"Performance จริงๆ ต่างกันไหม?",{"type":14,"tag":33,"props":1151,"children":1152},{},[1153,1155,1160],{"type":24,"value":1154},"ในประสบการณ์ของเรา ",{"type":14,"tag":39,"props":1156,"children":1157},{},[1158],{"type":24,"value":1159},"ไม่ต่างกันมาก",{"type":24,"value":1161}," ถ้า implement ถูกต้องทั้งคู่ Lighthouse 95+ เป็นเรื่องที่ทำได้ด้วยทั้งสอง framework สิ่งที่ส่งผลมากกว่าคือ:",{"type":14,"tag":584,"props":1163,"children":1164},{},[1165,1170,1175,1180],{"type":14,"tag":84,"props":1166,"children":1167},{},[1168],{"type":24,"value":1169},"Image optimization ที่ถูกต้อง",{"type":14,"tag":84,"props":1171,"children":1172},{},[1173],{"type":24,"value":1174},"Font loading strategy",{"type":14,"tag":84,"props":1176,"children":1177},{},[1178],{"type":24,"value":1179},"JavaScript bundle size",{"type":14,"tag":84,"props":1181,"children":1182},{},[1183],{"type":24,"value":1184},"Server response time (hosting)",{"type":14,"tag":19,"props":1186,"children":1188},{"id":1187},"คำตอบสุดท้ายของเรา",[1189],{"type":24,"value":1187},{"type":14,"tag":80,"props":1191,"children":1192},{},[1193,1203,1213],{"type":14,"tag":84,"props":1194,"children":1195},{},[1196,1201],{"type":14,"tag":39,"props":1197,"children":1198},{},[1199],{"type":24,"value":1200},"React\u002FNext.js",{"type":24,"value":1202},": เลือกถ้าทีมเป็น React หรือต้องการ hire ง่าย",{"type":14,"tag":84,"props":1204,"children":1205},{},[1206,1211],{"type":14,"tag":39,"props":1207,"children":1208},{},[1209],{"type":24,"value":1210},"Vue\u002FNuxt",{"type":24,"value":1212},": เลือกถ้าต้องการ DX ที่ดีกว่า หรือทีมชอบ Vue syntax",{"type":14,"tag":84,"props":1214,"children":1215},{},[1216,1221],{"type":14,"tag":39,"props":1217,"children":1218},{},[1219],{"type":24,"value":1220},"ไม่มีคำตอบผิดถูก",{"type":24,"value":1222},": ทั้งสองเป็น production-grade framework ที่ใช้งานได้ดีในองค์กรขนาดใหญ่",{"type":14,"tag":33,"props":1224,"children":1225},{},[1226,1228],{"type":24,"value":1227},"ที่ Venoct เราใช้ทั้งสองขึ้นอยู่กับโปรเจกต์ และเราเชี่ยวชาญทั้งคู่ เพราะเราเชื่อว่า ",{"type":14,"tag":39,"props":1229,"children":1230},{},[1231],{"type":24,"value":1232},"เลือก tool ให้เหมาะงาน ไม่ใช่เลือกงานให้เหมาะ tool",{"title":8,"searchDepth":139,"depth":139,"links":1234},[1235,1237,1238,1239,1240,1241],{"id":1023,"depth":139,"text":1236},"title: Next.js vs Nuxt 3 เลือกอะไรดีสำหรับโปรเจกต์ไทยในปี 2025?\nexcerpt: เราใช้ทั้งสองมาหลายปี และมีคำตอบที่ชัดเจนว่าควรเลือกอะไร ขึ้นอยู่กับ team, use case และ ecosystem ที่ต้องการ\ndate: 2025-03-10\nauthor: ทีม Venoct\ntags: Next.js, Nuxt, Vue, React, Frontend",{"id":1039,"depth":139,"text":1042},{"id":1050,"depth":139,"text":1053},{"id":1095,"depth":139,"text":1098},{"id":1146,"depth":139,"text":1149},{"id":1187,"depth":139,"text":1187},"content:blog:why-nextjs-vs-nuxt.md","blog\u002Fwhy-nextjs-vs-nuxt.md","blog\u002Fwhy-nextjs-vs-nuxt",1780350561144]