ปรับธีม Flatsome ให้ได้คะแนน Page Speed 90+

WordPress เปรียบเหมือนรถ Eco car
แต่ Google ชอบเว็บที่เป็น Super car

ดังนั้น สำหรับเว็บที่ใช้งานจริง การจะปรับคะแนน 90+ หรือให้ผ่านเกณฑ์ Core Web Vitals จึงไม่ใช่เรื่องง่าย เพราะด้วยข้อจำกัดของ WordPress บางจุดเราก็ทำอะไรไม่ได้

วิธีง่ายที่สุดสำหรับการทำเว็บให้ผ่านเกณฑ์

ให้ซื้อรถ Super car มาใช้งานแทนเลย หมายถึงให้คุณเลิกใช้ WordPress แต่ให้ไปสร้างเว็บจากการเขียนโค้ดขึ้นมาแทน

แน่นอนคุณจะเปลี่ยนรถมาเป็น Super car คุณต้องมีทุนเยอะ และต้องมีเวลาด้วย แต่หากพวกเราทุนไม่เยอะ งบน้อย เราอาจต้องเอารถ Eco car มาปรับแต่งแทน เท่าที่เราจะทำได้
ปรับยังไง เดี๋ยวผมมีคำแนะนำ

ข้อดีของการใช้งานธีม+Page Builder คือ มันใช้งานง่าย

แต่ข้อเสีย มันมีการโหลด Script ต่างๆ มากเกินไป ทำให้คะแนน Google page speed ไม่ค่อยดี

ธีม Flatsome ก็เป็นหนึ่งธีมที่ใช้งานง่าย เพราะมี Page builder มาให้พร้อมใช้เลย ด้วยตัวธีมของมันเอง โดยธรรมชาติ นั้นเขาโหลดไวอยู่แล้ว

แต่ปัญหาของทุกคน ไม่ว่าคุณจะใช้ธีมอะไร เว็บที่ใช้งานจริงๆ มันต้องใส่ปลั๊กอินเพิ่ม เพื่อเพิ่มฟังชั่นการใช้งาน ให้มันเหมาะกับธุรกิจของแต่ละคน

ดังนั้นปัญหาที่ทำให้เว็บเราช้า ก็คือ ความต้องการฟังชั่นต่างๆ ของเรานั้นแหละ แต่ถ้าไม่ใส่เพิ่มก็ไม่ได้ บางอย่างมันก็ส่งผลดีต่อลูกค้า ดังนั้น เราต้องสร้างเว็บให้เหมาะกับลูกค้าของเราเป็นหลัก 

ทุกปลั๊กอินทำให้คะแนน Page speed ลดเสมอ

หากเว็บคุณต้องติดตั้ง
Woocommerce
ทำปุ่ม live chat
เปลี่ยนฟอนต์
ต้องมี Social share
ต้องติด tag google
ติด Facebook pixel
ทำฟอร์มเก็บข้อมูล
ลงปลั๊กอิน SEO
ใส่ระบบความปลอดภัย
ติดตั้ง Recaptcha
ใส่ effect มีสไลเดอร์ สวยๆ
ใส่คลิป youtube
ใส่ google map
ฯลฯ

ดังนั้นแต่ละเว็บล้วนมีปลั๊กอินหลายสิบตัว ฟังชั่นต่างๆ ก็อยากได้ เว็บโหลดเร็ว เราก็อยากได้ แต่ปัญหา คือ แล้วจะทำยังไง

ผมก็เลยต้องหาวิธี เพราะเว็บผมเองก็ใช้ธีม Flatsome และมีใช้งาน WooCommere ด้วยและมีการใช้ปลั๊กอินต่างๆ อีก 19 ปลั๊กอิน

จากการทดลองปรับไป ปรับมา จึงได้คำตอบ สำหรับคนที่ต้องการ ปรับแต่งธีม Flatsome ที่เป็นรถ Eco Car ให้เครื่องแรง มาพอสู้กับพวกเว็บ Super Car

เครื่องมือต่างๆ และค่าใช้จ่ายของแต่ละเครื่องมือ ที่ผมใช้สำหรับการปรับแต่งเพื่อเพิ่มคะะแนน page speed มีดังนี้

– Host ใช้ Siteground (10,000 บาท)

– ปลั๊กอิน Autoptimize (ฟรี)
เอาไว้ optimizing CSS, JS

– ปลั๊กอิน Wp-rocket (49 us)
เอาไว้ทำ Page Caching และ GZIP Compression

– ปลั๊กอิน Perfmatters (25 us)
เอาไว้ปิด Script Css, Js ที่ไม่ได้ใช้ของแต่ละหน้า

– ใช้งาน CriticalCSS.com (3 us ต่อเดือน)
เอาไว้แก้ปัญหา render blocking resources

– ปลั๊กอิน Imagify (5 us ต่อเดือน)
เอาไว้ย่อขนาดไฟล์รูปภาพ และแปลงภาพเป็น Webp

– ปลั๊กอิน Use Any Font (10 us)
เอาไว้ฝั่งฟนอต์ลงเว็บ และแปลงฟอนต์เป็น .woff2

โพสนี้พวกเราดูเครื่องมือต่างๆ ที่ผมใช้ก่อน แล้วเดี๋ยวผมจะเขียนบทความ การตั้งค่าใช้งานปลั๊กอินแต่ละตัวให้อีกทีครับ

เว็บที่ใช้เช็คคะแนน page speed จะมีอยู่ 3 เว็บ

**หมายเหตุ

หากปรับตามด้วยเครื่องมือตามผม ตอนเช็คคะแนน page speed จะอยู่ในช่วง 80-95 นะ ไม่ใช่ทุกครั้งเราจะได้ 90+ เสมอไป เนื่องจากเว็บผมไม่ได้มีการทำ CDN มาช่วย ดังนั้นบางจังหวะที่คนใช้เยอะ ก็จะช้าลง คะแนนตกลงครับ) แต่ก็ถือว่าภาพรวมดีขึ้นครับ

การปรับแต่งรถ Eco car ให้สู้กับพวกรถ Super Car ก็จะมีประมาณนี้ครับ

คู่มือปรับเว็บให้ผ่านเกณฑ์ Core web vitals

อ่านบทความนี้