เพิ่มคะแนน Core Web Vitals สำหรับ WordPress

Categories

Core Web Vitals เป็นตัวชี้วัดประสิทธิภาพเว็บไซต์ของ Google ที่ส่งผลโดยตรงต่ออันดับ SEO และประสบการณ์ผู้ใช้งาน ประกอบด้วย LCP (Largest Contentful Paint), INP (Interaction to Next Paint) และ CLS (Cumulative Layout Shift) ในบทความนี้จะแนะนำวิธีเพิ่มคะแนน Core Web Vitals สำหรับ WordPress บน Cloud VPS ของ Dot Enterprise อย่างละเอียดและเข้าใจง่าย

ทำความเข้าใจ Core Web Vitals

Core Web Vitals ประกอบด้วยตัวชี้วัดสามตัวที่สำคัญ ซึ่งต่างก็ส่งผลต่อการจัดอันดับของเว็บไซต์ในการค้นหา Google และความสอบใจของผู้เยี่ยมชม:

  • LCP (Largest Contentful Paint): วัดเวลาที่เนื้อหาหลัก (เช่น รูปภาพ หรือข้อความบล็อก) ที่มีขนาดใหญ่ที่สุดใน viewport โหลดเสร็จสิ้น ค่าที่ดี คือน้อยกว่า 2.5 วินาที
  • INP (Interaction to Next Paint): วัดความเร็วในการตอบสนองของเว็บไซต์เมื่อผู้ใช้โต้ตัวบน เช่น คลิกปุ่ม หรือเรียกดูแบบฟอร์ม ค่าที่ดี คือน้อยกว่า 200 มิลลิวินาที
  • CLS (Cumulative Layout Shift): วัดความเสถียรของ Layout ขณะโหลดหน้า หากเนื้อหาเลื่อนไปหรือเปลี่ยนตำแหน่ง ก็จะมี Layout Shift เกิดขึ้น ค่าที่ดี คือน้อยกว่า 0.1

การปรับปรุง Core Web Vitals นี้ไม่เพียงแต่ช่วยให้อันดับ SEO ดีขึ้น แต่ยังช่วยให้ผู้เยี่ยมชมมีประสบการณ์ที่ดีขึ้นและนั่งหนึ่งเว็บไซต์ของคุณยาวนานขึ้น

ปรับปรุง LCP (Largest Contentful Paint)

LCP เป็นตัวชี้วัดที่สำคัญที่สุดเพราะมันเกี่ยวข้องกับความเร็วในการแสดงเนื้อหาหลัก วิธีหลักในการปรับปรุง LCP บน Cloud VPS ของ Dot Enterprise คือ:

1. เปิดใช้งาน OPcache และ Redis Caching

OPcache จะ cache PHP bytecode เพื่อให้สคริป PHP ทำงานเร็วขึ้น ในขณะที่ Redis Object Cache จะ cache ข้อมูลฐานข้อมูล WordPress:

# เปิด OPcache สำหรับ PHP
opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000
opcache.revalidate_freq=60

# ติดตั้ง Redis Object Cache
wp plugin install redis-cache --activate
wp redis enable

# ตั้งค่า Nginx FastCGI Cache
fastcgi_cache_path /tmp/nginx_cache levels=1:2 keys_zone=WPCACHE:100m inactive=60m;
fastcgi_cache_key "$scheme$request_method$host$request_uri";

2. Preload เนื้อหาที่สำคัญ

การ Preload ทำให้เบราว์เซอร์เริ่มโหลดเนื้อหาที่สำคัญก่อนเนื้อหาอื่น โดยเพิ่ม preload link ในส่วน HEAD ของเว็บไซต์:

# เพิ่มใน functions.php
add_action('wp_head', function() {
    echo '';
    echo '';
    echo '';
    echo '';
});

Optimize รูปภาพ

รูปภาพมักเป็น LCP Element หลักที่สำคัญ การ Optimize รูปภาพอย่างเหมาะสมจึงเป็นสิ่งจำเป็น:

1. ติดตั้ง Plugin Optimize รูปภาพ

# ติดตั้ง Plugin สำหรับ Optimize รูปภาพ
wp plugin install imagify --activate
# หรือใช้ Plugin อื่น เช่น
wp plugin install shortpixel-image-optimiser --activate
# หรือ
wp plugin install ewww-image-optimizer --activate

2. แปลงเป็น WebP Format

WebP เป็นรูปแบบรูปภาพที่ทันสมัยซึ่งมีขนาดเล็กกว่า JPG หรือ PNG มากโดยไม่เสีย quality

# เปิดใช้งาน WebP ใน Plugin
# ไปที่ Plugin Settings และเปิดตัวเลือก "Convert to WebP" หรือ "Generate WebP Versions"

# หรือใช้ Nginx Rewrite Rule
if ($http_accept ~* "webp") {
    rewrite ^(.*)\.(jpg|jpeg|png)$ $1.webp break;
}

3. ตั้งค่า Lazy Loading

Lazy Loading ทำให้รูปภาพที่อยู่นอก viewport (ไม่เห็นในหน้าจอ) ไม่โหลดจนกว่าผู้ใช้จะเลื่อนหน้า

# เพิ่มใน functions.php
add_filter('wp_img_tag_add_loading_attr', '__return_true');

# หรือใช้ Plugin เช่น a3 Lazy Load
wp plugin install a3-lazy-load --activate

ปรับปรุง INP (Interaction to Next Paint)

INP ขึ้นอยู่กับ JavaScript เป็นหลัก การลด JavaScript ที่ไม่จำเป็นและใช้ Defer/Async Loading เป็นสิ่งสำคัญ:

1. ติดตั้ง Autoptimize Plugin

# ติดตั้ง Plugin สำหรับ Optimize JavaScript
wp plugin install autoptimize --activate

# หรือใช้ WP Rocket (เสียเงิน แต่มีประสิทธิภาพดีมาก)
# WP Rocket จัดการ Defer JS, Delay JS, Remove Unused CSS โดยอัตโนมัติ

2. Defer JavaScript

Defer ทำให้ JavaScript ทำงานหลังจากที่หน้าเว็บโหลดเสร็จแล้ว:

# เพิ่มใน functions.php เพื่อ Defer JavaScript ทั้งหมด
add_filter('script_loader_tag', function($tag, $handle) {
    if (is_admin() || is_customize_preview()) return $tag;
    return str_replace(' src', ' defer src', $tag);
}, 10, 2);

# หรือเลือกเฉพาะ Script บางตัวที่ต้อง Defer
add_filter('script_loader_tag', function($tag, $handle) {
    if ($handle === 'my-non-critical-script') {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

3. ลบ Unused CSS

Unused CSS เป็นไฟล์ CSS ที่ไม่ได้ใช้ในหน้าเพจ ลบมันออกจะช่วยลด file size

# ใช้ Autoptimize เพื่อลบ Unused CSS
# ไปที่ Plugin Settings และเปิด "Remove unused CSS"

# หรือใช้ Plugin เช่น PurgeCSS
wp plugin install purge-css --activate

ปรับปรุง CLS (Cumulative Layout Shift)

CLS เกิดจากการโหลดเนื้อหาโดยไม่กำหนดขนาดหรือรูปแบบที่ถูกต้อง วิธีแก้ไขได้แก่:

1. กำหนด Width และ Height สำหรับรูปภาพ

เมื่อรูปภาพมี width และ height ที่กำหนด เบราว์เซอร์จะรักษาพื้นที่สำหรับรูปภาพเสมอ


Description


img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

2. ใช้ Font-Display: Swap

Font-display: swap ทำให้ Web Font แสดงผลโดยใช้ fallback font ก่อน จากนั้นจึงแทนที่ด้วย Web Font เมื่อโหลดเสร็จ

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

3. กำหนดพื้นที่สำหรับ Ads และ Embed

หากเว็บไซต์มี Ads หรือ Embed (เช่น YouTube video) ให้กำหนดพื้นที่สำหรับพวกมันเสมอ

ตรวจสอบคะแนน Core Web Vitals

เมื่อทำการปรับปรุงแล้ว สำคัญต้องตรวจสอบและติดตามคะแนน Core Web Vitals โดยใช้เครื่องมือต่อไปนี้:

  • Google PageSpeed Insights: ที่ https://pagespeed.web.dev – ป้อนโดเมนของเว็บไซต์ เครื่องมือจะแสดงคะแนน Core Web Vitals และข้อแนะนำการปรับปรุง
  • Google Search Console: ที่ส่วน “Core Web Vitals Report” – แสดงข้อมูลจริงจากผู้เยี่ยมชม Desktop, Mobile และ Tablet
  • GTmetrix: ที่ https://gtmetrix.com – เครื่องมือสมบูรณ์สำหรับวิเคราะห์ประสิทธิภาพเว็บไซต์
  • Chrome DevTools: ที่แท็บ Lighthouse – ใช้ได้ฟรีและ built-in ในเบราว์เซอร์ Chrome

เทคนิคเพิ่มเติมสำหรับ Cloud VPS

หาก WordPress ของคุณโฮสต์บน Cloud VPS ของ Dot Enterprise มีวิธีการเพิ่มเติมที่ช่วยปรับปรุง Core Web Vitals:

  • เพิ่ม PHP Version: ใช้ PHP 8.1 ขึ้นไป เนื่องจากมี performance ดีกว่า PHP 7.x มาก
  • ติดตั้ง HTTP/2: HTTP/2 ช่วยให้การส่งผ่านข้อมูล parallel ได้ และเร็วกว่า HTTP/1.1
  • ใช้ Nginx แทน Apache: Nginx มีประสิทธิภาพและการใช้หน่วยความจำน้อยกว่า Apache มากมาย
  • ตั้งค่า Gzip Compression: ลด file size ของ HTML, CSS, JavaScript ก่อนส่งไปยังผู้เยี่ยมชม

สรุป

การเพิ่มคะแนน Core Web Vitals สำหรับ WordPress บน Cloud VPS ต้องทำทั้งฝั่ง Server (OPcache, Redis, Caching) และ WordPress (Optimize Plugin, รูปภาพ, JavaScript) การมี Cloud VPS ที่แรงและตั้งค่าที่ถูกต้องเป็นพื้นฐานที่ดีในการทำให้คะแนนเหล่านี้ดีขึ้น นอกจากนี้ต้องติดตามและทดสอบคะแนนอย่างสม่ำเสมอเพื่อให้มั่นใจว่าเว็บไซต์ของคุณมีประสิทธิภาพสูงสุดและผู้เยี่ยมชมได้รับประสบการณ์ที่ดี