SEO·15 · 11 · 24·8 MIN READ

Checklist สร้างเว็บไซต์ Mobile-First: มาตรฐานทางเทคนิคที่เว็บไทยต้องผ่านในปี 2026

Checklist สร้างเว็บไซต์ Mobile-First: มาตรฐานทางเทคนิคที่เว็บไทยต้องผ่านในปี 2026

การสร้างเว็บไซต์ในประเทศไทยปี 2026 หมายความว่าต้องสร้างสำหรับผู้ใช้มือถือเป็นหลัก — ไม่ใช่ Desktop ผู้ใช้ 95% เข้าเว็บผ่านมือถือ, Google ใช้ Mobile-First Indexing 100%, และ Core Web Vitals วัดบนมือถือเป็นหลัก Checklist นี้รวมมาตรฐานทางเทคนิคทุกข้อที่เว็บไซต์ไทยต้องผ่านก่อน Launch

Category 1: Viewport และ Responsive Foundation

Viewport Meta Tag

ข้อผิดพลาดพื้นฐานที่พบบ่อยที่สุด:

<!-- ✅ ถูกต้อง -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ❌ ผิด — ทำให้ Content Zoom ไม่ออก -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

หมายเหตุสำคัญ: user-scalable=no หรือ maximum-scale=1.0 บล็อก Accessibility Zoom ซึ่งผิด WCAG 2.1 และ อาจส่งผลต่อ Ranking

  • Viewport Meta Tag ถูกต้องบนทุกหน้า
  • ไม่บล็อก User Zoom (user-scalable=no)
  • ทดสอบด้วย Chrome DevTools → Mobile Simulation

Responsive Layout

  • Layout ใช้ CSS Grid หรือ Flexbox (ไม่ใช่ Fixed Width Table Layout)
  • ทุก Container ใช้ Relative Units: %, vw, em, rem (ไม่ใช่ Fixed px สำหรับ Width)
  • Breakpoints กำหนดสำหรับ: 375px (iPhone SE), 390px (iPhone 16), 412px (Samsung A-Series), 768px (Tablet)
  • ทดสอบ Layout บน 5 ขนาด Screen ต่างกันก่อน Launch
  • ไม่มี Horizontal Scroll บนมือถือ (ข้อบกพร่องที่พบบ่อยมาก)

Responsive Images

<!-- ✅ ถูกต้อง — ใช้ srcset สำหรับ Responsive Images -->
<img 
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="คำอธิบายภาพ"
  width="800"
  height="450"
  loading="lazy"
>
  • ทุกภาพมี srcset สำหรับ Responsive Delivery
  • ทุกภาพมี Width และ Height Attribute (ป้องกัน CLS)
  • Hero Image ใช้ loading="eager" (ไม่ใช่ lazy — เพราะ Above the Fold)
  • ภาพ Below-the-fold ใช้ loading="lazy"

Category 2: Typography สำหรับภาษาไทยบนมือถือ

Font Size Minimum

ผู้ใช้มือถือ Samsung A-Series มักมีหน้าจอ 6-6.5 นิ้ว DPI สูง:

  • Body Text ขั้นต่ำ 16px (ทั้งภาษาไทยและอังกฤษ)
  • Subheading H3-H4 ขั้นต่ำ 18px
  • H2 ขั้นต่ำ 20px, H1 ขั้นต่ำ 24px
  • ไม่มีข้อความที่เล็กกว่า 12px ที่ผู้ใช้ต้องอ่าน (ยกเว้น Legal Disclaimer)

สำหรับภาษาไทยโดยเฉพาะ: ตัวอักษรไทยมี Ascender/Descender ที่ซับซ้อนกว่าละติน ควรเพิ่ม line-height:

body {
  font-size: 16px;
  line-height: 1.8; /* สูงกว่าภาษาอังกฤษที่ 1.5 */
}

Thai Font Rendering

  • ใช้ Font ที่รองรับ Thai Unicode: Sarabun, Noto Sans Thai, Prompt, IBM Plex Sans Thai
  • Font โหลดผ่าน Google Fonts หรือ Self-hosted (ไม่ใช่ System Font ที่อาจแสดงผลต่างกันในแต่ละ Device)
  • ตั้งค่า font-display: swap เพื่อป้องกัน Flash of Invisible Text
  • ทดสอบการแสดงผลบน Android 12/13 + Samsung One UI และ iOS 17/18
  • ตัวอักษรพิเศษภาษาไทยแสดงถูกต้อง: ไม้เอก (่), ไม้โท (้), สระ-อั, ตัวอักษรผสม
/* ✅ ตัวอย่าง Font Stack ที่ถูกต้องสำหรับเว็บไทย */
body {
  font-family: 'Sarabun', 'Noto Sans Thai', 'Helvetica Neue', Arial, sans-serif;
  font-display: swap;
}

ขนาดและระยะห่างของ Text Link

  • Text Links มีความกว้างอย่างน้อย 44px และสูง 44px (Touch Target)
  • ระยะห่างระหว่าง Links อย่างน้อย 8px เพื่อป้องกัน Accidental Tap
  • Links ใน Body Text มีการทำ Underline หรือ Color Contrast ที่ชัดเจน (ไม่ใช่แค่เปลี่ยนสี)

Category 3: Touch Targets และ Interactive Elements

Minimum Touch Target Size

มาตรฐาน WCAG 2.1 และ Google Recommendation:

  • ปุ่มทุกปุ่ม: ขั้นต่ำ 44×44px (กว้าง×สูง)
  • Navigation Menu Items: ขั้นต่ำ 44px สูง
  • Form Input Fields: ขั้นต่ำ 44px สูง
  • Checkbox และ Radio Buttons: Clickable Area ขั้นต่ำ 44×44px

Thumb Zone Design: ผู้ใช้มือถือส่วนใหญ่ถือด้วยมือเดียว นิ้วหัวแม่มือเข้าถึงพื้นที่ตรงกลาง-ล่างของจอได้สะดวกที่สุด:

  • CTA หลัก (Buy Now, Contact Us) อยู่ใน Thumb Zone (ครึ่งล่างของหน้าจอ)
  • Navigation ที่ใช้บ่อยไม่อยู่มุมบนสุด (ถ้าเป็นไปได้)

Form Design บนมือถือ

  • Input Type ถูกต้อง: type="email" สำหรับ Email, type="tel" สำหรับโทรศัพท์, type="number" สำหรับตัวเลข
  • Keyboard ที่ถูกต้องเด้งขึ้นมาอัตโนมัติ (Email Keyboard, Number Keyboard)
  • autocomplete Attribute ตั้งค่า เช่น autocomplete="name", autocomplete="email"
  • Form Labels อยู่เหนือ Input (ไม่ใช่ข้างๆ) เพื่อให้พื้นที่พิมพ์กว้างขึ้น
  • Error Messages ชัดเจนและอยู่ใกล้ Field ที่ผิดพลาด

Category 4: Image และ Media Optimization

Image Format

  • ภาพทั้งหมดใช้ WebP (ลดขนาดได้ 25-35% เทียบ JPEG) หรือ AVIF
  • Fallback PNG/JPG สำหรับ Browser เก่าที่ไม่รองรับ WebP (ใช้ <picture> element)
  • Logo: SVG (Vector ไม่ Pixelate ทุก Resolution)
<!-- ✅ ตัวอย่าง WebP พร้อม Fallback -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="คำอธิบาย" width="800" height="450">
</picture>

Image Compression Targets

ประเภทภาพ ขนาดไฟล์เป้าหมาย
Hero Image (Above Fold) <150KB
Product Image <80KB
Blog Thumbnail <50KB
Icon / Logo SVG <10KB

Tools: Squoosh.app (ฟรี), TinyPNG, Cloudflare Image Optimization

Video บนมือถือ

  • ไม่ใช้ autoplay Video โดยไม่มี muted Attribute (Mobile Browser บล็อก)
  • ถ้า Autoplay ใช้: autoplay muted loop playsinline
  • สำหรับ Hero Video: ใช้ Background Image เป็น Fallback ในกรณี Video โหลดช้า
  • Video File Size: ใช้ MP4 H.264 หรือ WebM VP9 ขนาด <3MB สำหรับ Short Loop Video

Category 5: Performance Configuration

Caching

  • Browser Caching ตั้งค่า: Static Assets (Images, CSS, JS) Cache อย่างน้อย 1 ปี
  • สำหรับ WordPress: ติดตั้ง WP Rocket หรือ LiteSpeed Cache
  • Server-side Caching เปิดใช้งาน

CDN

  • CDN Deploy เพื่อเสิร์ฟ Static Assets จาก Edge Server ใกล้ผู้ใช้
  • แนะนำ Cloudflare Free Tier สำหรับ SMEs
  • ทดสอบ TTFB ก่อนและหลัง CDN: ควรลดลง >30%

Critical CSS

  • CSS ที่จำเป็นสำหรับ Above-the-fold Content Inline ใน <head>
  • CSS ไม่จำเป็น Defer หรือ Async Load
  • Remove Unused CSS (ใช้ PurgeCSS หรือ WordPress Plugins)

JavaScript

  • Scripts ที่ไม่จำเป็น Below-the-fold ใช้ defer หรือ async
  • Third-party Scripts (Analytics, Chat Widget, Social) Load แบบ Async
  • ไม่มี JavaScript ที่บล็อก Render ใน <head>

Category 6: Pre-Launch Testing

Device Testing Matrix

Device OS Resolution
Samsung Galaxy A35 Android 14 1080×2340
Samsung Galaxy S24 Android 14 1080×2340
iPhone 16 iOS 18 1179×2556
iPhone SE 3rd Gen iOS 17 750×1334
iPad Air iPadOS 17 1640×2360

Final Checklist ก่อน Launch

  • PageSpeed Insights Mobile Score: >80 (Green)
  • Core Web Vitals: LCP <2.5s, INP <200ms, CLS <0.1
  • No Mobile Usability Errors ใน GSC
  • No Horizontal Scroll บนทุก Device
  • All Touch Targets ≥44×44px
  • Thai Font แสดงผลถูกต้องบน Android และ iOS
  • Forms กรอกได้สะดวกบนมือถือ
  • Checkout Flow (ถ้ามี) ทดสอบจาก Start ถึง Confirmation บนมือถือ

Key Takeaways

  • Viewport Meta Tag ที่ถูกต้องคือรากฐาน — อย่าบล็อก User Zoom
  • Body Text ขั้นต่ำ 16px, Line-height 1.8 สำหรับภาษาไทย
  • Touch Target ขั้นต่ำ 44×44px ทุก Interactive Element
  • ใช้ WebP/AVIF สำหรับภาพ, SVG สำหรับ Logo และ Icon
  • ทดสอบบน Samsung A-Series จริงเพราะเป็น Device ที่ผู้ใช้ไทยใช้มากที่สุด
  • PageSpeed Insights Mobile >80 คือมาตรฐานขั้นต่ำก่อน Launch

FAQ

Q: WordPress Theme ส่วนใหญ่บอกว่า Responsive แล้ว ยังต้องทำ Checklist นี้อีกหรือ?
A: จำเป็นมาก — "Responsive" ของ Theme Builder หมายถึง Layout ไม่แตก แต่ไม่ได้รับประกันว่า Touch Target ขนาดพอ, Thai Font แสดงผลถูกต้อง, Image ถูก Optimize, หรือ Core Web Vitals ผ่าน Checklist นี้ตรวจสอบในสิ่งที่ Theme ไม่ได้ทำให้

Q: ควรเลือก Responsive Design หรือ Separate Mobile Site (m.domain.com)?
A: Responsive Design เสมอสำหรับ SMEs ใหม่ — Separate Mobile Site ต้องดูแล 2 Version, มีปัญหา Canonical, และ Google เองแนะนำ Responsive เป็น Best Practice ปัจจุบัน Separate Mobile Site ยังใช้ได้ถ้ามี Legacy Infrastructure แต่ไม่แนะนำสร้างใหม่

Q: ถ้า PageSpeed Insights Score ต่ำมาก ควรแก้จากตรงไหนก่อน?
A: ลำดับการแก้ที่ให้ผลเร็วที่สุด: (1) Compress Images เป็น WebP — มักช่วยได้ 20-40 คะแนน, (2) ติดตั้ง Caching Plugin, (3) เปิด CDN, (4) Defer Non-critical JavaScript, (5) Inline Critical CSS ตามลำดับนี้จะเห็นผลเร็วที่สุดก่อนลงลึกด้าน Advanced Optimization

แชตทาง LINE@tectony