ทำเว็บ WordPress ให้โหลดเร็ว 100/100 บน Google Page Speed

หากคุณต้องการเพิ่มยอดขายบนโลกออนไลน์ การทำเว็บให้โหลดเร็วๆ เป็นสิ่งสำคัญ จากสถิติพบว่า 53 % ของคนเข้าเว็บไซต์ผ่านมือถือ จะปิดหน้าเว็บนั้นหากโหลดช้าเกิน 3 วินาที

ซึ่งการทำเว็บ WordPress ให้โหลดเร็วบน Desktop นั้นไม่ยาก แต่การทำเว็บให้โหลดเร็วบนมือถือจุดนี้ยังมีปัญหาพอสมควรสำหรับเว็บที่สร้างด้วย WordPress

หากคุณต้องการทำเว็บให้โหลดเร็วต่ำกว่า 3 วินาที ทั้งบน Desktop และบน Mobile บทความนี้มีคำแนะนำมาให้คุณได้ลองทำตามครับ

ความเร็วโหลดเว็บโหมด Mobile ทดสอบผ่าน PageSpeed Insights

ความเร็วโหลดเว็บโหมด Desktop ทดสอบผ่าน PageSpeed Insights

ความเร็วโหลดเว็บ ทดสอบผ่าน GTmetrix

เว็บที่ใช้ทดสอบ padvee.wpsource.in.th

ถ้าคุณทำตามคำแนะนำทั้งหมดของบทความนี้ได้ครบ คุณก็จะสามารถทำเว็บให้มีคะแนนสวยๆ แบบเว็บตัวอย่างที่ผมทำให้ดูได้อย่างแน่นอน

ปล. การทำ SEO นั้นมีหลายปัจจัย ความเร็วในการโหลดเว็บเป็นเพียงแค่ปัจจัยเดียว จากอีกหลายร้อยปัจจัย นั้นหมายความว่า แม้ว่าเว็บคุณจะโหลดได้เร็ว แต่ไม่ได้การันตีว่าเว็บของคุณจะติดหน้าแรกได้ เพราะการทำ SEO ยังมีอีกหลายปัจจัย หลายองค์ประกอบในการจัดอันดับเว็บไซต์

ผมแนะนำให้อ่านบทความนี้ก่อนครับ: Roadmap การทำ SEO 2020 รู้ก่อน ทำก่อนได้เปรียบ

สารบัญ วิธีทำเว็บให้โหลดเร็ว

1. เลือกโฮสที่มีคุณภาพ
2. เลือกธีมที่ดี
3. ใช้ปลั๊กอินเท่าที่จำเป็น
4. องค์ประกอบการปรับความเร็วเว็บ
5. แก้ปัญหาทางเทคนิคด้วย Wp Rocket
6. บีบอัดรูปภาพด้วย Imagify
7. ใช้ฟอนต์ฝังลงบนเว็บตรงๆ
8. ไม่ใช้ script ที่เป็น third party
9. ติด tracking code เท่าที่จำเป็น
10. ทำ Cloudflare
11. วิธีวัดความเร็วเว็บ
12. วิธีปรับเว็บให้ผ่านเกณฑ์ Core Web Vitals
13. สรุป

บทความแนะนำสำหรับผู้เริ่มต้น WordPress

สอน SEO สอน WordPress สอน WooCommerce

องค์ประกอบการทำเว็บให้โหลดเร็วๆ มีอะไรบ้าง

1. เลือกโฮสที่มีคุณภาพ

ด่านแรกของการทำเว็บ WordPress ให้โหลดเร็ว คุณต้องเลือกใช้โฮสติ้งที่มีคุณภาพดีก่อน ซึ่งจุดนี้ค่อนข้างตอบยาก ว่าโฮสไหนดี หรือไม่ดี คุณจะตอบคำถามนี้ได้คุณต้องเคยใช้ Hosting หลายๆ เจ้า แล้วเอามาเปรียบเทียบกัน

แต่แน่นอนเพื่อความง่าย หากคุณยังตัดสินใจไม่ได้ว่าจะใช้โฮสติ้งเจ้าไหนดี ผมมีตัวเลือกของโฮสที่ผมใช้งานอยู่มาแนะนำครับ เพราะการเลือกโฮสที่ดี การทำเว็บและทำ SEO ของเราจะง่ายขึ้นครับ ความเร็วของการเปิดเว็บขึ้นอยู่กับโฮสที่เราเลือกใช้ด้วย โฮสติ้งที่ผมแนะนำสำหรับการทำเว็บด้วย WordPress มีดังนี้

1) สำหรับผู้เริ่มต้นและงบน้อย เริ่มต้นปีละ 1500 บาท แต่คุณภาพเกินราคา ผมแนะนำเจ้านี้ครับ

2) ถ้าคุณต้องการความสเถียรเว็บไม่ล่ม และสามารถจ่ายค่าเช่าโฮสปีละ 8000-10,000 บาทไหว ผมแนะนำ 2 เจ้านี้ครับ

ปล. เว็บผมเอง padveewebschool.com ก็ใช้โฮส siteground อยู่ครับ

สำหรับโฮสติ้ง Siteground คือ Host ที่ WordPress แนะนำให้ใช้ทำเว็บอย่างเป็นทางการด้วยครับ Officially Recommended by WordPress.org ซึ่งตอนนี้มีอยู่ 3 โฮสได้แก่ 1. Bluehost 2. Dreamhost และ 3. Siteground นั้นเอง

สำหรับคนที่มีโฮสอยู่แล้ว คุณอาจไม่จำเป็นต้องเปลี่ยนโฮสใหม่ ถ้าคุณได้เลือกโฮสที่ดีอยู่แล้ว ใครยังไม่รู้ว่า Hosting ที่เหมาะกับ WordPress ต้องมีองค์ประกอบอะไรบ้าง

ลองเข้าไปอ่านบทความนี้ก่อนได้เลยครับ: Hosting WordPress ที่ไหนดี เลือกโฮสอย่างไรให้คุ้มค้าที่สุด

ถ้าโฮสของใครสเปคไม่ผ่านเกณฑ์ขั้นต่ำของ WordPress ผมแนะนำให้คุณเปลี่ยนโฮสครับ หากต้องการทำเว็บให้โหลดเร็วๆ

2. เลือกธีมที่ดี

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

ดังนั้น จึงมีธีมที่ดีและไม่ดี มีธีมที่เร็ว และธีมที่ช้า เช่นเดียวกัน การจะรู้ว่าธีมไหนโหลดช้า โหลดเร็วมันดูยาก ถ้าคุณยังไม่เคยได้ใช้ธีมอื่นๆ มาเปรีบเทียบกัน คำแนะนำง่ายที่สุด ถ้าคุณเป็นมือใหม่อยากลองใช้ธีมไหน ลองเอาชื่อธีมที่คุณต้องการไปโพสถามใน Facebook group นี้ WordPress Bangkok ดูครับ

เอาชื่อ Theme ที่คุณสนใจใช้ไปสอบถามได้เลย ถ้า Feedback ที่ได้รับเป็นคำชมเชิงบวก คุณก็สามารถเลือกใช้ธีมนั้นได้เลย ถ้า Feedback กลับมาไม่ดี คุณก็แค่เปลี่ยนไปเลือกใช้ธีมอื่นๆ นั้นเอง จะได้ไม่ต้องเสียเวลาลองผิดลองถูกด้วยครับ

แต่ถ้าถามผมในบรรดาธีม Bestseller บนเว็บ themeforest.net ธีมไหนที่มีฟังชั่นหลากหลายและโหลดไวที่สุด ผมแนะนำธีมนี้ครับ Flatsome Theme

เว็บผมเองก็ใช้ธีมนี้เช่นเดียวกันครับ

3. ใช้ปลั๊กอินเท่าที่จำเป็น

เว็บโหลดเร็วหรือโหลดช้า ขึ้นอยู่กับจำนวนปลั๊กอินที่คุณเลือกใช้ด้วย ดังนั้นหลักการเกี่ยวกับการเลือกใช้ปลั๊กอินที่ถูกต้องมีดังนี้

• ห้ามใช้ปลั๊กอิน เพราะเห็นว่าคนอื่นๆ เขาใช้กัน
  เช่นบางคนบอกว่า ใช้ WordPress ต้องลงปลั๊กอิน Jetpack ด้วยนะ คุณจะลงปลั๊กอิน Jetpack ได้ คุณต้องรู้ก่อนว่าปลั๊กอิน Jetpack เขาเอาไว้ทำอะไรบ้าง ถ้าคุณยังไม่รู้ว่าปลั๊กอินตัวนี้เอาไว้ทำอะไร ผมแนะนำให้คุณไม่ต้องใช้มันครับ
• ใช้ปลั๊กอินเท่าที่จำเป็นเท่านั้น
  ฝึกใช้ Theme option ของธีมที่คุณเลือกให้เต็มประสิทธิภาพ หลายคนๆ มักจะใจร้อนไม่ศึกษาฟังชั่นต่างๆ ของธีมให้ดีก่อน เช่น บางธีมมี option สร้างรูปภาพแบบ slider ได้เองจากธีมเลย แต่บางคนไม่รู้ ก็ไปโหลดปลั๊กอิน slider มาใส่อีก แบบนี้เราเรียกว่าการใช้งานปลั๊กอินที่เกินความจำเป็น
• ปลั๊กอินทีเป็น Third party ที่ต้องโหลด script มาจากเว็บอื่นเพื่อให้มาแสดงบนเว็บเรา ต้องเลือกใช้ให้น้อยที่สุด พวกนี้จะทำให้เว็บเราโหลดช้า เช่นพวกปลั๊กอิน Live chat หรือปลั๊กอินโชว์สถิติ คนเข้าเว็บ เป็นต้น

อ่านเพิ่มเติมเกี่ยวกับหลักการเลือกปลั๊กอิน: WordPress Plugin Best Practices: Why Less Is More

4. องค์ประกอบการปรับความเร็วเว็บ

ก่อนที่เราจะปรับแต่งเว็บให้โหลดเร็วขึ้นได้นั้น เราต้องรู้องค์ประกอบการปรับความเร็วบน WordPress ก่อน ว่ามีจุดไหนที่เราต้องปรับแต่งกันบ้าง ซึ่งเรื่องนี้อาจเป็นเรื่องทางเทคนิคสักเล็กน้อย

องค์ประกอบหลักๆ ของการทำเว็บให้โหลดเร็ว มีดังนี้

4.1) Page Caching

Cache คือ ส่วนของข้อมูลที่ถูกเก็บซ้ำไว้ในคอมพิวเตอร์ เพื่อใช้ในการใช้งานครั้งต่อไปโดยไม่ต้องเรียกข้อมูลจากแหล่งกำเนิดอีกครั้ง เมื่อแคชถูกสร้างขึ้น การเรียกใช้ข้อมูลในครั้งต่อไปจะถูกอ่านข้อมูลจากแคช แทนที่จะอ่านข้อมูลจากต้นฉบับเพื่อประหยัดเวลาและค่าใช้จ่าย รวมถึงการเพิ่มความเร็วในการเรียกใช้งาน

สำหรับการปรับความเร็วเว็บ เรานิยมทำ เก็บ Cache ใน Browser (Leverage Browser Caching) คือการเก็บ cache บน Chrome, IE หรือ Firefox ของคนที่เข้ามาเยี่ยมชมเว็บของเรา และในครั้งหน้าที่เขากลับมาเยี่ยมชมเว็บของเราอีกครั้ง ข้อมูลส่วนใหญ่ก็จะถูกเรียกจาก Cache แทนที่จะต้องเรียกใหม่ทั้งหมด

อ่านเพิ่มเติม: การเก็บ Cache ใน Browser (Leverage Browser Caching)

ในความเป็นจริงการทำ Cache บนเว็บนั้นสามารถแบ่งได้ทั้งหมด 4 ประเภท

• Page Caching
• Cache Preloading
• Sitemap Preloading
• Browser Caching

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

4.2) Database Optimization

โดยพื้นฐานของ WordPress ตั้งแต่การติดตั้งครั้งแรกจนถึงตอนใช้งานต่างๆ การติดตั้งปลั๊กอิน ลงธีม เขียนบทความ ทุกอย่างล้วนแล้วถูกเขียนลงในฐานข้อมูลของ WordPress ทั้งสิ้น ยิ่งนานฐานข้อมูลก็ยิ่งหนาขึ้นบวมขึ้น ทั้งๆ ที่ข้อมูลในเว็บไซต์มีไม่เยอะ

ซึ่งส่วนหนึ่งมาจากไฟล์ตารางฐานข้อมูลที่เป็นขยะ เกิดจากการติดตั้งปลั๊กอินและถอนไปแล้ว คอมเมนต์ต่างๆ บทความที่ถูกลบไปแล้ว สแปมต่างๆ การอัพเดท การแก้ไข(Revisions) ถึงแม้ข้อมูลเหล่านี้ถูกลบไปเรียบร้อยแล้ว แต่มันยังค้างอยู่ในฐานข้อมูลอยู่ ใน WordPress

หากคุณต้องการให้เว็บโหลดเร็วขึ้น คุณจำเป็นต้องเคลียร์และทำความสะอาดข้อมูลใน database อยู่เป็นประจำ

อ่านเพิ่มเติม: จัดการฐานข้อมูล WordPress ให้เบาลงในไม่กี่คลิก!

4.3) Minification / Concatenation

ลดขนาดของ CSS, JavaScript และ  HTML คือการลบโค้ดที่ไม่จำเป็น เช่นลบอัขระตัวอักษรของโค้ด ลบช่องไฟ การเว้นบรรทัด เป็นต้น เพื่อให้เว็บของเราโหลดเร็วที่สุดนั้นเอง

4.4) GZIP Compression

GZIP Compression คือการย่อขนาดไฟล์ข้อมูลต่างๆ บนเว็บของเรา อารมณ์เดียวกับการทำ Zip ไฟล์ ด้วยโปรแกรม WinZip เพื่อทำให้เว็บเราโหลดข้อมูลเร็วขึ้น และลดการใช้งาน Bandwidth ทำให้เว็บเราสามารถรองรับ Traffic คนเข้าเว็บได้มากขึ้น จะให้ดี 1 หน้าเว็บของเราไม่ควรมีขนาดไฟล์เกิน 1 Mb ครับ

4.5) Lazy Load

Lazy load คือ การเรียกข้อมูลให้แสดงที่ละช่วง ไม่ต้องโหลดข้อมูลพร้อมกันทั้งหมดในครั้งเดียว การทำให้ข้อมูลปรากฎที่ละส่วน ช่วยให้เว็บของเราโหลดเร็วขึ้นได้นั้นเอง สำหรับเว็บไซต์ที่มีรูปภาพเยอะๆ ใน 1 หน้า จำเป็นต้องเปิดใช้งาน Image Lazy Load ซึ่งฟังชั่นนี้ทุกเว็บควรทำครับ

4.6) Image optimization

Image optimization คือ การบีบขนาดภาพให้เล็กที่สุด คุณควรย่อไฟล์รูปให้เล็กที่สุดเท่าที่จะเล็กได้ ผมแนะนำรูปที่ใช้ประกอบบทความอย่าใช้ไฟล์ใหญ่เกิน 100kb รวมถึงขนาดกว้างxยาวด้วย อย่าใช้รูปภาพที่มีขนาดใหญ่เกิน Dimension ที่เราออกแบบ

อ่านเพิ่มเติม: การทำ SEO รูปภาพ บน WordPress ให้เป็นมิตรกับการค้นหาของ Google

5. แก้ปัญหาทางเทคนิคด้วย Wp Rocket

จากหัวข้อด้านบน ที่เป็นองค์ประกอบการปรับความเร็วเว็บด้านเทคนิค ถ้าคุณจะปรับให้ครบทั้ง 6 องค์ประกอบ คือ ทำ Cache, เคลียร์ Database, ทำ Minification, GZIP Compression, Lazy Load และ Image optimization คุณคิดว่าต้องใช้ปลั๊กอินสักกี่ตัวถึงจะทำครบ?

คำตอบของการปรับแต่งทั้ง 6 องค์ประกอบเราจะใช้ปลั๊กอินเพียงแค่ 2 ตัวเท่านั้น คือ Wp Rocket กับ Imagify

Wp Rocket คืออะไร

Wp Rocket คือ ปลั๊กอินที่ช่วยปรับแต่งเว็บ WordPress ของคุณให้โหลดเร็วขึ้น และมีขั้นตอนใช้งานที่ง่ายมาก โดยที่คุณไม่จำเป็นต้องมีความรู้ด้าน Technical เลย คุณก็สามารถปรับแต่งเว็บในจุดที่เป็นองค์ประกอบด้านเทคนิคได้ครบทั้งหมด

ความสามารถของ Wp Rocket

ปลั๊กอิน Wp Rocket 1 ตัว มีความสามารถในการปรับแต่งในจุดที่จำเป็นและสำคัญในการทำเว็บให้โหลดเร็วขึ้นได้ครบทั้งหมด

ภาพเล็กเกินไปมองไม่ชัด ดูความสามารถของ Wp Rocket ฉบับเต็มได้ที่: Wp Rocket  Features

แต่ปลั๊กอิน Wp Rocket ไม่ใช่ปลั๊กอินฟรี ถ้าคุณอยากใช้ คุณจำเป็นต้องซื้ออย่างเดียวครับ โดยราคาแพคเกจเริ่มต้นคือ 49 us และต้องเสียเงินต่ออายุทุกปีนะ

 

วิธีการใช้งาน Wp Rocket

ดาวน์โหลดปลั๊กอินที่เราซื้อไว้ มาอัพโหลดใส่บนเว็บของเราให้เรียบร้อยครับ

หลังจากติดตั้งปลั๊กอินลงบนเว็บของเราแล้ว ให้คลิก setting Wp Rocket ที่อยู่เมนูบาร์ด้านบนครับ

ปรับความเร็วเว็บด้วยปลั๊กอิน WP Rocket ตั้งค่าตรงไหนบ้าง? ให้ติ๊กตามรูปได้เลยครับ แต่ทั้งนี้การแสดงผลลัพธ์ของแต่ละธีมนั้นอาจมีความแตกต่างกันบ้าง

การตั้งค่า Cache

File Optimization

Media setting LazyLoad, emojis

Preload Cache

Database

Add-ons

วิธีการใช้งาน Wp Rocket

สำหรับการใช้งานปลั๊กอิน Wp Rocket จะมีอยู่ด้วยกัน 4 คำสั่งหลักๆ

Remove all cached files: เคลียร์ไฟล์แคชที่เก็บไว้ทั้งหมดบน Browser

คำสั่งนี้เราจะใช้ทุกครั้ง หลังจากที่เรามีการแก้ไขข้อมูลต่างๆ บนเว็บของเรา

Purge OPCache content: เคลียร์แคชบน PHP Server

คุณจะใช้ฟังชั่นนี้ได้ โฮสที่คุณเลือกใช้อยู่ต้องรันอยู่บน PHP 5.5 ขึ้นไป ซึ่งโดยส่วนใหญ่สำหรับคนที่ทำเว็บด้วย WordPress ต้องทำงานบน PHP 7.3 ขึ้นไปเท่านั้น ตรงจุดนี้คุณต้องเช็คทางโฮสตัวที่ใช้อยู่ ว่าเว็บคุณรันอยู่บน PHP เวอร์ชั่นอะไร

หากเว็บของคุณรันอยู่บน PHP 5.5 ขึ้นไป ทุกครั้งที่มีการแก้ไขข้อมูลบนเว็บ คุณต้องกดเคลียร์ เคลียร์แคชบน PHP Server ร่วมด้วยเสมอ

Start cache preloading: การเตรียมโหลดแคชไว้ล่วงหน้าอัตโนมัติ

ฟังชั่นนี้เราจะใช้งานก่อนที่คุณจะ Logout ออกจากเว็บ เพื่อระบบสร้างแคชหน้าต่างๆ รอไว้ล่วงหน้า ดังนั้นก่อนที่คุณจะ Logout ออกจากเว็บให้กดปุ่ม Start cache preloading ด้วยเสมอ

Regenerate Critical CSS: กำจัด CSS ที่บล็อกการแสดงในเนื้อหาส่วนบน

สาเหตุของปัญหาที่ทำให้คะแนน Google page speed บนมือถือได้น้อย เกิดจากการเรียกเนื้อหาส่วนบนได้ช้า (Above-the-fold content) ซึ่งตัว Wp Rocket ช่วยแก้ไขปัญหานี้ให้เราได้ สำหรับการใช้งาน เราจะใช้คำสั่งนี้เป็นคำสั่งสุดท้ายให้กดทุกครั้งก่อนที่เราจะ Logout ออกจากเว็บครับ

6. บีบอัดรูปภาพด้วยปลั๊กอิน Imagify

 

Google ให้ความสำคัญกับเว็บที่เป็น mobile friendly เป็นอย่างมาก คือต้องโหลดไว และแสดงบนมือถือได้ชัดเจน ปัญหาเว็บโหลดช้า ส่วนใหญ่นั้นเกิดจากรูปภาพที่มีขนาดใหญ่เกินไป เพราะรูปภาพที่ปรากฏบนเว็บเราไม่ได้จำเป็นต้องนำภาพนั้นออกไปปริ้น ความละเอียดของรูปเราจึงควรย่อให้เหมาะสมกับการแสดงบนเว็บไซต์ด้วย

ดังนั้นรูปภาพที่เราอัพโหลดขึ้นเว็บ จะมีขนาดกว้างxยาว เท่าไหร่ก็ได้ (ขึ้นอยู่กับที่เราออกแบบหน้าเว็บ) แต่ขนาดของไฟล์ของรูปภาพต้องอย่าให้เกิน 200 kb ซึ่งเราควรบีบไฟล์ตั้งแต่ตอนการออกแบบรูปเลย

หลักการบีบไฟล์ให้เล็กมีดังนี้

• หากเราใช้ photoshop ออกแบบรูป เราควรตั้งค่า resolution แค่ 72 ก็พอนะ
  
• ไฟล์ที่ใช้ถ้ารูปทั่วไปควรใช้ไฟล์ .JPG หรือ .WebP เป็นหลัก และถ้ารูปไหนต้องการพื้นหลังโปร่งใส่ก็ใช้ไฟล์ .PNG ครับ
• การ save ภาพเพื่อให้รูปภาพมีขนาดไฟล์เล็กที่สุด ตรง Quality ของภาพเราเลือกเป็น low หรือ medium ก็พอเพื่อให้ขนาดไฟล์มีขนาดเล็กที่สุด
  

ควรใช้โปรแกรมช่วยบีบอัดไฟล์หลักจากออกแบบรูปภาพและย่อไฟล์เรียบร้อยแล้ว ก่อนที่เราจะอัพโหลดรูปภาพขึ้นบนเว็บ เราควรบีบอัดไฟล์ ให้เล็กลงอีก ด้วยโปรแกรม หรือเว็บไซต์บีบอัดรูป เช่น tinypng, JPEGMini หรือ Imagify

เดี๋ยวเรื่องการย่อรูปด้วยปลั๊กอิน Imagify จะอธิบายวิธีการทำในหัวข้อถัดไปครับ

ขนาด กว้างxยาว ของรูปควรใส่ให้พอดี

หมายความว่า รูปภาพประกอบเว็บบางจุดหากเป็นส่วนที่ไม่จำเป็นต้องแสดงเต็มหน้า การใส่รูปที่มีขนาดใหญ่เกินไปก็อาจเกินความจำเป็น และทำให้เว็บของเราโหลดช้าอีกด้วย ลองเช็คขนาดรูปภาพ ด้วยการ inspect element ดูครับ เราจะได้เห็นขนาดที่แท้จริงของภาพแต่ละส่วน บนเว็บของเรา

จากรูปจะสังเกตเห็น ตรงชิ้นส่วนนี้ ควรใส่รูปภาพที่มีขนาดกว้างxยาว 512.91×280.41 px ก็เพียงพอแล้ว

(คลิปวิธีวัดขนาดไซต์รูปภาพ)

การใช้งานปลั๊กอิน Imagify

 

ปลั๊กอิน Imagify คือปลั๊กอินที่ใช้สำหรับย่อขนาดไฟล์รูปภาพ สั่งย่อภาพที่ละหลายๆ รูปได้ในการคลิกเพียงแค่ครั้งเดียว ช่วยให้คุณประหยัดเวลา และช่วยให้เว็บโหลดได้เร็วขึ้นด้วย

ความสามารถของ Imagify

1) บีบรูปภาพได้หลายหลายนามสกุล เช่น .JPG .PNG .GIF

2) เลือกการบีบรูปได้ 3 ระดับ

4) มีการ Backup รูปให้อัตโนมัติ รูปในที่บีบแล้วแตก เราสามารถกู้ลืม original กลับมาได้

5) สามารถแปลงไฟล์ PNG JPG มาเป็นไฟล์ WebP ได้

WebP image คืออะไร อ่านเพิ่มเติมที่บทความนี้ได้ครับ ทำรูปภาพให้โหลดเร็วด้วย WebP image

ราคาปลั๊กอินนี้ มีทั้งแบบให้ใช้ฟรี และเสียเงิน

ตัวฟรีเราจะได้สิทธิ์ย่อรูปภาพได้เดือนละ ไม่เกิน 25 MB เพื่อความสะดวกผมแนะนำให้เลือกใช้แพคเกจ One Time Plans 1GB ที่ราคา 9.99$ เราสามารถย่อรูปได้ถึง 1GB หรือประมาณ 10,000 รูปซึ่งถือว่าคุ้มมากครับ

การตั้งค่า และเริ่มต้นใช้งาน

หลังจากที่คุณซื้อปลั๊กอิน Imagify เรียบร้อยแล้ว

• ให้เข้าไปที่ส่วนของ My Account
• คลิกตรง API – Integration
• คัดลอก Access Token เก็บไว้ก่อน

กลับไปที่เว็บของคุณ ไปที่ Plugin > add new > ค้นหาปลั๊กอินชื่อ Imagify ให้ install และ Activate ปลั๊กอินให้เรียบร้อย

หลังจากติดตั้งปลั๊กอินเรียบร้อยแล้ว ดูที่ส่วนเมนูบาร์ด้านบน คลิกที่ Imagify > Settings > จากนั้นเราวาง API key ที่เราได้คัดลอกเก็บไว้ วางลงไปที่ช่อง จากนั้นคลิก save ให้เรียบร้อยครับ

หลักจากกรอก API Key เรียบร้อยแล้ว ระบบจะพาเราเข้าสู้หน้าตั้งค่า ให้ติ๊กต่างๆ ตามรูปด้านล่างได้เลยครับ

การแปลงรูป .JPG .PNG ให้เป็น .WebP

สำหรับคนที่ต้องการใช้รูปภาพ WebP ตัวปลั๊กอิน Imagify สามารถแปลงรูปภาพให้เราได้แบบอัตโนมัติ ให้ติ๊กตั้งค่าตามรูปได้เลยครับ

การใช้งาน Bulk Optimization

Bulk Optimization คือ คำสั่งบีบอัดรูปทั้งเว็บภายในคลิ๊กเดียว ระบบจะทยอยไล่บีบรูปให้เราแบบอัตโนมัติ

คลิกปุ่ม IMAGF’EM ALL ระบบจะบีบรูปทั้งเว็บแบบอัตโนมัติครับ

7. ใช้ฟอนต์ฝั่งลงบนเว็บตรงๆ

สิ่งที่อยากจะอธิบายให้ทุกคนเข้าใจ เว็บเปิดช้า กับเว็บที่คะแนน page speed ได้น้อย นั้นบางที่มันขัดแย้งกัน หมายความ บางเว็บให้คุณเปิดแล้วก็รู้สึกเปิดเว็บเร็วดีปกติ แต่พอไปเช็คคะแนน page speed กับได้คะแนนต่ำ ตรงจุดนี้เดี๋ยวผมจะอธิบายอีกทีว่า ระหว่างความรู้ว่าเว็บเปิดเร็ว กับตัวเลข page speed อะไรสำคัญกว่ากัน

แต่สำหรับคนที่ต้องการทำให้ตัวเลข page speed สูงๆ ถ้าเราลองเอาเว็บไปเช็คที่ GTmetrix ดูในส่วนของ YSlow ตรงคะแนน Add Expires headers ถ้าเว็บคุณมีการเรียกใช้ Google Font คะแนนจุดนี้คุณจะไม่ได้ 100 คะแนนเต็ม ถ้าคุณอยากแก้ไขเพื่อให้มันได้คะแนนสูงขึ้น คุณต้องเอาฟอนต์ฝังลงบนเว็บแทนการเรียกใช้ Google Font ครับ

วิธีการนำฟอนต์ฝังลงบนเว็บตรงๆ ภาษาทางเทคนิคเขาเรียกว่า การเปลี่ยนฟอนต์ด้วย font-face ของ CSS หากใครไม่ถนัดเรื่องการแก้โค้ด ผมแนะนำให้คุณทำ Font face ด้วยปลั๊กอิน Seed Font แทนครับ

หลังจากโหลดและติดตั้งปลั๊กอินเรียบร้อยแล้ว ให้เข้าไปดูที่ส่วนการตั้งค่าฟอนต์ครับ ให้เราเลือกฟอนต์จากตัวปลั๊กอินตรงๆ แทนการใช้งาน Google font

นอกจากนี้คุณต้องเข้าไปปิดการเรียกใช้งาน Google Font ที่ theme option ของธีมที่คุณเลือกใช้ด้วย เช่น เว็บของผมใช้ธีม Flatsome ก็ให้ไปที่ Theme option > Style > Typography > แล้วติ๊กที่ Disable Google Fonts. No fonts will be loaded from Google.

ถ้าธีมคุณไม่มีฟังชั่นนี้ก็ต้องใช้ปลั๊กอิน Disable Google Fonts มาสั่งปิดแทนครับ

8. ไม่ใช้ script ที่เป็น third party

สิ่งที่ทำให้เว็บโหลดช้า คือ มีการเรียก Script จากเว็บอื่นบนเว็บของเรา อาทิเช่น พวกที่เป็นปลั๊กอิน Social Live Chat ทั้งหลาย

ถ้าคุณอยากได้คะแนน page speed สูงๆ คุณต้องยอมตัดใจไม่ใช้มันครับ

พวกที่เป็น iframe ต่างๆ ที่เราเอามาฝั่งที่เว็บเรา ทำให้เว็บเปิดช้าทั้งหมดครับ

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

รวมถึง แชร์ YouTube Vimeo Facebook video พวกนี้ทำให้คะแนน page speed ลดลงทั้งหมดครับ

9. ติด tracking code เท่าที่จำเป็น

พวกบรรดา Tracking เก็บพฤติกรรมลูกค้าเหล่านี้ ให้ใส่เฉพาะเท่าที่จำเป็นเท่านั้น ใส่เยอะเกินไปทำให้คะแนน page speed ของเราได้น้อยลงไปด้วยครับ

หรือให้คุณเลือกใช้ Google tag manager (GTM) ตัวเดียวพอ แล้วค่อยไปบริหารจัดการ Tracking Code ผ่าน GTM อีกทีนึงครับ

เปรียบเทียบระหว่างมี GTM กับไม่มี GTM

• ด้านซ้ายคือก่อนที่จะมี GTM ซึ่ง tag ต่างๆอาจจะวางไว้ไม่เป็นระเบียบเท่าไหร่และเข้าไปแก้ไขได้ยาก
• ด้านขวาคือหลังจากใช้ GTM เข้าไปจัดการติด tag ต่างๆ tag ดูเป็นระเบียบขึ้นจะเข้าไปแก้ไปจัดการก็ง่ายขึ้นผ่าน interface ที่ใช้ง่านได้ง่ายกว่า

อ่านเพิ่มเติม: Google tag manager คืออะไร จะอธิบายให้ลูกค้าเข้าใจได้ยังไง ?

10. ทำ CloudFlare (CDN)

CloudFlare คือ ผู้ให้บริการ CDN (Content Delivery Network) ตัว CDN จtทำหน้าที่กระจายเนื้อหาของเราออกไปตามเซิฟเวอร์ต่างๆ ทั่วโลก และเมื่อมีผู้เข้าชมจากจุดไหน ระบบก็จะส่งข้อมูลให้ชมจากเซิฟเวอร์จุดที่อยู่ใกล้ที่สุด ดังนั้นจึงทำให้เว็บของเราเปิดเข้าชมได้เร็วขึ้นจากสถานที่ต่างๆ ทั่วโลก เพราะมันโหลดจากที่ที่ใกล้ที่สุดนั่นเอง

อ่านเพิ่มเติมเรื่อง CloudFlare ที่บทความนี้ การเชื่อมต่อเว็บกับ CloudFlare CDN

การทำ CloudFlare ช่วยให้คนที่อยู่ต่างประเทศเปิดเว็บเราเร็วขึ้นแต่ไม่ได้ช่วยให้คะแนน Google page speed สูงขึ้น นั้นหมายความว่าหากลูกค้าคุณส่วนใหญ่คือคนไทย เว็บของคุณไม่จำเป็นต้องทำ CloundFlare แต่ถ้าลูกค้าอยู่ต่างประเทศ ถ้าอยากทำเว็บให้โหลดเร็วขึ้น เว็บคุณต้องทำ CloundFlare ด้วย

ข้อควรระวังในการทำ CloudFlare

• ต้องเลือกโฮสที่ Server อยู่ต่างประเทศเท่านั้น ห้ามเลือกโฮสที่ Server ตั้งอยู่เมืองไทย
• ต้องทำ HTTPS ให้สมบูรณ์ที่ฝั่งโฮสติ้งให้เรียบร้อยก่อนเชื่อม CloudFlare
• ถ้ากลุ่มลูกค้าเป็นอยู่ต่างประเทศต้องทำ CloudFlare
• ถ้ากลุ่มลูกค้าเป็นคนไทยเป็นหลักไม่ต้องทำ CloudFlare
• แต่สำหรับเว็บที่ Traffic เกิน 1 แสน page view ไม่ว่ากลุ่มลูกค้าจะเป็นคนไทยหรือต่างประเทศ ควรทำ CloudFlare เพราะตัว CloudFlare ช่วยแคชข้อมูลเก็บไว้ ทำให้ Server ของโฮสจริงไม่ต้องทำงานหนัก ช่วยให้โฮสล่มได้ยากขึ้น

11.เครื่องมือวัดความเร็วเว็บ

เครื่องมือหลักๆ ที่คนส่วนใหญ่ใช้วัดความเร็วเว็บกันนั้นจะมีอยู่ 4 เว็บหลักๆ ได้แก่

1) Google PageSpeed insight

2) gtmetrix.com

3) webpagetest.org

4) Pingdom Website Speed Test

สำหรับการใช้งาน การวัดความเร็วแต่ละครั้งจะแสดงผลลัพธ์แตกต่างกันบ้างเล็กน้อย ดังนั้นการวัดความเร็ว เราต้องทดสอบสัก 2-3 ครั้ง นอกจากนี้ความเร็วการเปิดเว็บขึ้นอยู่กับที่ตั้ง server ที่เราใช้ทดสอบด้วย

GTmetrix  Webpagetest และ Pingdom เราสามารถเลือกที่ตั้ง Server สำหรับการทดสอบได้ ดั้งนั้นถ้าคุณใช้โฮสที่ server ตั้งอยู่ที่เมืองไทย ลูกค้าคนไทย คุณต้องเลือกที่ตั้ง Server ที่อยุ่ในโซนเอเชีย หรือประเทศในเอเชีย ในขั้นตอนทดสอบความเร็วด้วยครับ

เรียน SEO ออนไลน์ฟรี 4 บทเรียน ซึ่งเป็นพื้นฐานสำคัญที่สุดของการทำ SEO 

คลิกเข้าเรียนที่นี่

วิธีปรับเว็บให้ผ่านเกณฑ์ Core Web Vitals

Core Web Vitals คือ เมตริกที่ใช้วัด Page Experience (ประสบการณ์การใช้งานหน้าเว็บ) โดยทาง Google จะประกาศใช้หลักเกณฑ์นี้อย่างเป็นทางการในเดือนมิถุนายน 2021 นี้ครับ แน่นอนย่อมส่งผลกระทบต่ออันดับในหน้าผลการค้นหา (SERP) สำหรับเว็บที่ยังไม่ผ่านเกณฑ์นี้ด้วย

อ่านแนวทางการปรับได้จากบทความนี้ครับ: ปรับเว็บให้ผ่านเกณฑ์ Core Web Vitals

12. สรุป

การทำเว็บให้โหลดเร็วสำคัญก็จริง แต่ความเร็วไม่ใช่ทุกอย่างสำหรับการทำ SEO การทำให้คนมาเว็บแล้วหลงรักเว็บของคุณนั้นสำคัญกว่า บางครั้งเราจำเป็นต้องเพิ่มรูปภาพให้มีไฟล์ขนาดใหญ่บ้าง เพื่อให้ภาพมันชัดขึ้น ใส่คลิป YouTube ลงบนเว็บเราบ้างเพื่อให้เวลามันน่าสนใจขึ้น แม้ว่าเว็บเราอาจได้คะแนน page speed ลดลง แค่อย่าใส่ทุกอย่างให้มันดู Overload เท่านั้นเป็นพอ

เพราะการทำ SEO ในยุค 2020 เราไม่ได้ทำเพื่อเอาใจ search engine แต่ทำ SEO เพื่อเอาใจคนอ่าน ที่เราเรียกกันว่า Searcher Experience Optimization แทน Search Engine Optimization ซึ่งเป็นนิยามการทำ SEO ในยุคเก่า

ประชาสัมพันธ์

สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการทำ SEO บน WordPress แบบจริงจัง ในวันเสาร์ที่ 14 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน SEO WordPress แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 10 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้ 

รายละเอียดคอร์สเรียน

SEO WordPress

• ค่าเรียน 6,500 บาท
• เรียนวันเสาร์ที่ 14 สิงหาคม 2564
• ระยะเวลาเรียน 6 ชั่วโมง
• เราเปิดสอน 1 รอบ
  รอบเช้า 10.00 – 16.00 น. (ว่าง)
• เรียนกลุ่มเล็กรอบละ 10 คนเท่านั้น
• สถานที่เรียน Seatz Station
• ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
• จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ

  ทุกคอร์สเรียนรอบสอนสด ได้คอร์สเรียนออนไลน์แถมฟรีครับ  

  ทุกคอร์สเรียนรอบสอนสด  
 ได้คอร์สเรียนออนไลน์แถมฟรีครับ  

ดูรายละเอียดเพิ่มเติม ดูตารางเรียนรอบถัดไป

ตัวอย่างผลงาน
SEO Ranking ของเรา

**ประกาศ**

สำหรับการเรียนแบบส่วนตัว 1 ต่อ 1 หรือกลุ่มส่วนตัว แบบสอนนอกสถานที่ ผมไม่รับสอนเว็บพนัน เว็บบอล เว็บหวย เว็บสายเทาทุกชนิดครับ

จะเว็บสายขาว หรือเว็บสายเทา การทำ SEO ใช้หลักการเดียวกันหมดครับ เพราะการทำ SEO ในยุคปัจจุบัน ไม่มีใครสามารถโกง Google ได้นั้นเอง

หากเว็บคุณเป็นสายเทา แต่สนใจเรียน SEO ด้วยวิธีการที่ถูกต้องตามหลัก Google ก็มาเรียนได้ครับ แต่ให้ลงเรียนรอบสอนกลุ่มปกติ ที่สอนรอบละ 10 คนแทนนะ

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

แจ้งไว้ให้ทราบทั่วกัน และขออภัยในความไม่สะดวกครับผม...

• แชร์
• ส่งไลน์