ปัจจุบัน Google ได้เปลี่ยนการวิเคราะห์เป็นแบบใหม่ที่ไม่เหมือนกับในบทความนี้แล้ว

วันนี้เราจะมาแฉ เอ๊ย มาแชร์วิธีการทำคะแนนใน Google PageSpeed Insights ให้ได้ 100 คะแนน หรือได้คะแนนสูงที่สุดเท่าที่จะทำได้ ต้องขอออกตัวก่อนว่า เตยไม่ได้เป็นผู้เชี่ยวชาญทางด้านโปรแกรมเมอร์ใดๆ นะคะ บางเรื่องอาจจะไม่สามารถอธิบายโดยละเอียดหรือถูกต้องได้ ท่านใดเห็นสมควรอย่างไรสามารถแนะนำกันในคอมเม้นท์ได้เลยค่ะ เราจะไม่มีมีการแก้ไขหรือพิมพ์โค้ดใดๆ เองใน How to นี้

wpthaiuser-google-100

(บทความนี้ค่อนข้างยาวและเนื้อหาเยอะพอสมควร ใครจะลองทำจริงๆ อาจจะต้องตั้งใจอ่านนิดนึง ขนาดเขียนเองก็ยังมึน เว็บที่ใช้ทดสอบจริงๆ ก็คือเว็บของเราเอง และอีกเว็บที่โคลนนิ่งไปแล้ว Deactivate ปลั๊กอินออก ก็คือ wpthaiuserexample.com ดังนั้นทุกอย่างในเว็บจึงเหมือนกัน ต่างแค่อีกตัวนั้นไม่ได้ใช้ Jetpack เท่านั้นเอง เพราะต้องทำการเชื่อมต่อบัญชี WordPress จุดประสงค์เราเพียงแค่ทำแล้วลบ เก็บภาพบางส่วนเท่านั้น)

หมายเหตุ : การทำคะแนนได้ 100 ไม่ได้หมายความว่าเว็บไซต์จะเร็วที่สุด

  • การที่เราโหลดฟ้อนต์จาก Google Font แม้ว่าจะได้คะแนน Page Speed ลดลง แต่จริงๆ แล้วการใช้ฟ้อนต์จาก Google Font นั้นก็เร็วกว่าการโหลดฟ้อนต์จากเซิฟเวอร์ของเราเอง
  • การ Combine CSS/JS เพื่อลดรีเควสหรือเป็นการรวมไฟล์เป็นไฟล์เดียว อาจจะได้คะแนนดี แต่การแบ่งไฟล์ออกเป็นไฟล์เล็กๆ หลายไฟล์แล้วโหลดพร้อมกันนั้นทำได้เร็วกว่า
  • การโหลด 3rd party scripts เช่น Google Analytics หรือ Facebook จากโฮ้สต์ตัวเองอาจจะช้ากว่าจากต้นฉบับ
  • การที่เราตัดสคริปต์บางตัวเพื่อให้ได้แค่คะแนนสูงๆ อาจจะไม่คุ้มกัน เช่น ตัด Facebook ออก เราก็ติดพวก Facebook comments กับกล่อง Like ไม่ได้ ดังนั้นถ้าอันไหนจำเป็นต้องใช้งานก็ให้เข้าใจว่าเราต้องใช้งาน

การทดสอบเว็บด้วย Google PageSpeed Insights นั้น เป็นการวิเคราะห์ว่าเว็บไซต์ของเรานั้นมีความรวดเร็วในการเข้าชมมากแค่ไหน โดยจริงๆ แล้ว Google PageSpeed Insights นั้นไม่ได้วัดความเร็วเป็นแบบวินาทีเหมือนเว็บอื่นๆ แต่ให้คะแนนโดยวัดตามความเร็วของการแสดงผลเป็นหลัก ดังนั้นการได้คะแนนเต็ม 100 ในความเป็นจริงอาจจะช้ากว่าคะแนน 70 ก็ได้เช่นเดียวกัน

ปัญหาหลักๆ ของเว็บ WordPress ที่มักจะพบเมื่อทดสอบด้วย Google PageSpeed Insights

  1. Optimize Images ไฟล์ภาพที่มีขนาดไม่เหมาะหรือใหญ่จนเกินไป เว็บทั่วไปใครๆ ก็เจอค่ะ ปรับขนาดไหนก็ยังโดน ภาพที่ Google แนะนำบางทีก็ความละเอียดไม่โอเค อันนี้ไม่ต้องถึงกับเครียดนะคะ ปล่อยได้ปล่อยค่ะ
  2. Render-blocking JavaScript and CSS in above-the-fold content ปัญหาจากการรัน JS, CSS ที่ไปบล็อคการแสดงผลของเนื้อหาอื่นๆ เกณฑ์ในข้อนี้ถูกนำมาใช้เพื่อการปรับปรุงเว็บสำหรับ Mobile โดยเฉพาะ เพื่อไม่ให้ผู้ชมรอโหลดสคริปต์ต่างๆ
  3. Compression/Gzip/Leverage Browser Caching ถ้าเจอแนวๆ นี้คือเกี่ยวกับการแคช
  4. Minify JavaScript/CSS เกี่ยวกับการทำ Minify JavaScript และ CSS ให้มีขนาดเล็กลง
  5. User Experience ในส่วนนี้เป็นส่วนของ Design โดยเฉพาะค่ะ เช่น หากปุ่มบางปุ่มอยู่ใกล้กันเกินไป ก็จะโดนหักคะแนน คะแนนส่วนนี้จะแยกจาก Speed และมีเฉพาะบน Mobile เท่านั้น
  6. Server ตรงนี้ปรับอะไรไม่ค่อยได้ นอกจากย้าย หรือไม่บางทีเซิฟเวอร์เดียวกันแต่ก็อาจจะช้ากว่าเดิมบ้างนิดหน่อยเป็นบางเวลา
  7. External Script นี่คือสคริปต์ที่โหลดจากนอกเว็บของเรา ทั้ง Google, Facebook, Adsense, Youtube ต่างๆ เหล่านี้ ยิ่งมีเยอะก็อาจจะยิ่งทำให้เว็บของเราโหลดช้ามากขึ้น แต่ก็ไม่ทั้งหมด เราสามารถที่จะให้สคริปต์เปล่านี้โหลดภายหลังได้ เพียงแต่เราจะโดนหักคะแนนในส่วนนี้ไปบ้างเท่านั้นเอง

นอกจากนี้ในเวอร์ชั่นใหม่ของ PageSpeed Insight นั้นก็มีมาตฐานข้อแนะนำอื่นๆ เพิ่มมาด้วย ซึ่งเราก็พยายามเติมให้ในรายละเอียดต่อไป

page-speed-insights

จะเห็นว่าปัญหาส่วนใหญ่ที่เจอจะเกี่ยวกับการทำให้เว็บแสดงผลได้เร็วขึ้นทั้งนั้น ดังนั้นการทำตามคำแนะนำของ Google ก็เป็นเรื่องที่ดี ส่วนตัวมีความเชื่อที่ว่า หากเว็บที่ได้รับคะแนนในส่วนนี้เยอะ ก็อาจจะได้รับผลลัพธ์ที่ดีในผลการค้นหาด้วย ซึ่งไม่ได้มีการยืนยันนะคะ จะมีก็แต่ก่อนหน้านี้ที่ Google ยืนยันว่า เว็บที่รองรับการแสดงผลบน Mobile ได้ดีกว่า จะได้รับอันดับที่ดีกว่า (เป็นแค่ส่วนหนึ่งในการพิจารณาเท่านั้น)

ธีมและปลั๊กอิน

เพราะการแสดงผลของเว็บ WordPress นั้นขึ้นอยู่กับธีมเป็นส่วนใหญ่ และปลั๊กอินบ้างบางส่วน ดังนั้นธีมจึงเป็นตัวส่งผลหลักโดยตรง JavaScript และ CSS ส่วนใหญ่นั้นก็สร้างขึ้นจากธีมที่ เราสามารถอ่านรายละเอียดของธีมต่างๆ ได้ว่าให้ความสำคัญเกี่ยวกับ Speed มากน้อยแค่ไหน บางธีมกำหนดขนาดภาพมาอย่างละเอียด บางธีมเอาภาพใหญ่ไปใช้กับภาพขนาดเล็ก ทำให้เว็บโหลดเยอะโดยไม่จำเป็น

total-promote
เราใช้ธีม Total

เราต้องยอมรับว่าธีมหรือหน้าเว็บที่มีการใช้ลูกเล่นหรือเอฟเฟคมากๆ ที่ต้องใช้ JavaScript เยอะๆ ย่อมโหลดมากกว่าธีมที่มีรูปแบบเรียบๆ อยู่แล้ว โดยเฉพาะธีมที่ใช้ปลั๊กอิน Page Builder ทั้งหลาย การปรับแต่ง JS หรือ CSS ด้วยวิธีการที่เราจะนำเสนอต่อไปนี้ก็อาจจะกระทบกับบางเว็บ ทำให้ไม่สามารถที่จะแสดงผลอย่างที่ควรจะเป็นได้ หรืออาจจะปรับได้ไม่ถึงสูงเท่าเว็บที่ลักษณะเรียบกว่า นอกจากนี้ในส่วนของความ Responsive ของธีมยังกระทบโดยตรงกับ User Experience ของเว็บด้วย จะเห็นได้ว่า กับธีม Total นั้นเราไม่ต้องปรับอะไรก็ได้ 100/100 ค่ะ

ใช้ภาพที่เหมาะสม

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

  • JPEG ใช้กับภาพที่ต้องแสดงสีสันและการไล่สีเยอะเพื่อความสมจริงเป็นพิเศษ เช่น ภาพถ่าย ซึ่งจะให้ภาพที่ขนาดบีีบอัดให้ไฟล์มีขนาดเล็กมากๆ ได้
  • PNG นิยมใช้กับภาพถ่ายที่ต้องการแสดงความละเอียดสูงเช่นกัน แต่จะให้ไฟล์ภาพที่มีขนาดใหญ่มากเมื่อใช้กับภาพที่มีการแสดงหลายเฉดสีอย่างภาพถ่าย ไฟล์จะมีขนาดใหญ่กว่า JPEG หลายเท่าตัวนัก แต่ถ้าหากเรานำมาใช้กับภาพกราฟฟิคที่มีการใช้สีไม่มาก ไม่มีการไล่สีเยอะ เช่น ภาพวาดลายเส้น โลโก้ หรือ ภาพภาพที่เราจับหน้าจอจากโปรแกรมต่างๆ ในเว็บเรานี้ซึ่งแต่ละภาพมักจะมีสีไม่เยอะ เราสามารถที่จะกำหนดจำนวนสีที่ต้องการใช้ในขั้นตอนการบีบอัดภาพได้ ซึ่งจะทำให้ได้ขนาดไฟล์ที่เล็กมากๆ และยังมีความคมชัดสูงอีกด้วย คุณสมบัติเด่นอีกข้อของ PNG ก็คือ การแสดงภาพแบบพื้นหลังใส (Transparent) นั่นเอง
  • WEBP เป็นไฟล์มาตฐานใหม่ของ Google ที่อาจจะยังไม่รองรับในบางบราวเซอร์ เช่น Safari แต่บราวเซอร์ยอดนิยมอย่าง Chrome นั้น รองรับแล้ว และใน PageSpeed Insight ตัวใหม่ของ Google ก็แนะนำให้ใช้ด้วย ภาพแบบ WebP นั้นจะมีขนาดเล็กกว่า JPEG และ PNG ถึง 34% เลยทีเดียว โดยที่ความละเอียดไม่ผิดเพี้ยนกันเลย อ่านบทความเกี่ยวกับ WebP

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

อ่านบทความเกี่ยวกับ ShortPixel

Lazy Load

ตัวเวอร์ชั่นใหม่ของ PageSpeed Insight นั้น แนะนำให้เราใช้ Lazy Load ด้วย เช่น การโหลดรูปภาพเมื่อผู้ชมเลื่อนไปถึงเท่านั้น ซึ่งจะทำให้เว็บของเราไม่ต้องโหลดไฟล์ขหนาดใหญ่หลายไฟล์พร้อมกันทั้งหมดทีเดียว ช่วยทำให้เว็บแสดงผลได้เร็วขึ้นด้วย หากใช้ WP Rocket ตัวนี้ก็จะมี Lazy Load ให้อยู่แล้ว ทั้งสำหรับภาพและวิดีโอ โดยวิดีโอนั้น ระบบจะดึงภาพ Thumbnail ของวิดีโอมาใช้เป็นภาพแทนอีกด้วย และเมื่อผู้ใช้จะชมวิดีโอจริงๆ เขาถึงจะกดเล่นวิดีโอ ทำให้ลดความช้าในการโหลดวิดีโอ โดยสนับสนุนวิดีโอจาก YouTube และ Vimeo

Google PageSpeed Insights ทำยังไง ให้ได้ 100 2

Cache

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

pagecache1.png

ในที่นี้เราใช้ปลั๊กอิน WP Fastest Cache เพื่อช่วยในเรื่อง Cache ทั้งหลาย ทั้งพวก Gzip, Leverage browser cache เป็นต้น โดยเราไม่ได้เปิดใช้งาน Minify กับ Combine ต่างๆ เพราะเราจะใช้งานปลั๊กอิน Autoptimize แทนค่ะ

wp-fastest-cache

ผลลัพธ์ 71-78

wp-fastest-cache-result

ปลั๊กอินแคชอื่นๆ เช่น

Render-Blocking and Above The Fold Content

ส่วนนี้เป็นส่วนสำคัญที่จะโดนติเยอะที่สุด เพราะหลังจากที่ Google มาให้ความสำคัญในส่วนของ Mobile มากขึ้น ตรงนี้จึงถูกนำมาพิจารณาเป็นพิเศษ เนื่องจาก Google ต้องการให้เว็บแสดงผลบนหน้าจอให้เร็วที่สุดแม้ว่าจะอยู่บนการเชื่อมต่อของสัญญาณมือถือ โดยไม่ต้องรอให้โหลดข้อมูลจนครบทั้งหน้า แต่ให้แสดงข้อมูลที่จำเป็นต้องแสดงก่อนเลย (Above The Fold Content) อันที่เหลือก็ค่อยโหลดภายหลังเป็บแบคกราวน์ก็ได้

google-above-the-fold

ปลั๊กอินที่เราจะนำมาใช้ร่วมกันในการแก้ปัญหานี้ก็คือ Autoptimize และ Async JavaScript

Autoptimize

ปลั๊กอินนี้ช่วยในการจัดการเกี่ยวกับการบีบอัพ Minify, Combine และ Inline HTML CSS และ JavaScript ในเว็บเราโดยเฉพาะ เราจะใช้ปลั๊กอินนี้ในการ Inline CSS ที่ใช้ในหน้านั้นๆ ทำให้ไม่ต้องรอโหลด CSS แบบเต็ม ยิ่งถ้ามี CSS หลายไฟล์ก็จะทำให้ช้ามากยิ่งขึ้น

inline-and-defer-css
3. Autoptimize

หมายเหตุ: ไม่แนะนำให้เปิด Also aggregate inline JS? เพราะว่าจะทำให้แคชใหญ่และเต็มเร็วค่ะ

จากนั้นเราก็จะต้องกำหนด Above The Fold CSS ด้วย ซึ่งในขั้นตอนนี้เราจะต้องใช้วิธีที่เรียกว่า Critical CSS ซึ่งจะเป็นการนำเอา CSS ที่จะแสดงผลก่อนขึ้นมา เพื่อที่จะให้ CSS เหล่านี้แสดงผลได้เลยทันทีที่หน้าเว็บมีการโหลด โดยเราสามารถเจน CriticalCSS ได้จากเว็บ criticalcss.com

single-criticalcss

แล้วนำโค้ดที่ได้มาใส่ในช่อง Inline Defer CSS

inline-criticalcss

ปกติแล้ว CSS ของแต่ละหน้านั้นจะไม่เหมือนกัน เราจะเลือกทำเฉพาะหน้าโพสก็ได้ โดยเลือกเอาซักหน้า เพราะสำหรับเว็บบทความเช่นเว็บเรา เราเน้นที่คนเข้าอ่านบทความเป็นหลักอยู่แล้ว และเนื่องจากหน้าหลัก (Home) และหน้าบทความ (Single Post) ของเว็บเรานั้น ค่อนข้างไม่ต่างกันเท่าไหร่ ทำให้หน้า Home ได้รับอานิสงค์ไปด้วย โดยการสร้าง CritcalCSS สำหรับหน้า single post ก็พอ

Google PageSpeed Insights ทำยังไง ให้ได้ 100 3
Home (ซ้าย) Single post (ขวา)

หากเราต้องการสร้าง CriticalCSS สำหรับหน้าแต่ละแบบตามเทมเพลตและบางหน้าที่มีดีไซน์เฉพาะตัวด้วย โดยเฉพาะเว็บที่ใช้ Page Builder สร้าง ก็สามารถที่จะติดตั้งปลั๊กอิน Autoptimize criticalcss.com power-up ก็ได้

Google PageSpeed Insights ทำยังไง ให้ได้ 100 4

ซึ่งจะทำให้เราสามารถกำหนด CriticalCSS ในแต่ละหน้าได้

Google PageSpeed Insights ทำยังไง ให้ได้ 100 5

ปัจจุบันมีหลายปลั๊กอินที่สามารถทำ CriticalCSS ได้ เช่น

  • WP Rocket ตัวนี้เป็นปลั๊กอินแคช premium และมีฟังชั่นสร้าง CriticalCSS มาอัตโนมัติด้วย แต่จะอ้างอิงจากเทมเพลต ไม่สามารถสร้างทีละหน้าหรือเงื่อนไขได้ยืดหยุ่นเท่าปลั๊กอินด้านบน
  • Swift Performance Lite ปลั๊กอินแคชเวอร์ชั่นฟรีก็สามารถแก้สามารถแก้ปัญหานี้ได้เช่นกัน

Async JavaScript

Google PageSpeed Insights ทำยังไง ให้ได้ 100 6


ปลั๊กอินนี้ช่วยในการ Defer JavaScript ต่างๆ ในเว็บ ทำให้เว็บไม่ต้องรอโหลด JavaScript จนหมด ก็สามารถที่จะปล่อยให้เว็บเราแสดงเนื้อหาขึ้นมาก่อนได้เลย สามารถทำงานร่วมกันกับปลั๊กอิน Autoptimize ได้

async-javascript

ผลลัพธ์ 78-97

after-criticalcss

เปรียบเทียบกับเว็บต้นฉบับด้านล่างที่ใช้ Jetpack ร่วมด้วย

ผลลัพธ์ 100!

wpthaiuser-page-score

นอกจากหน้า Home ที่ได้ 100 ไปแล้ว ทีนี้เรามาดูหน้า Single Post หรือ หน้าบทความ นั่นเอง เป็นที่น่าเสียดายว่า ตราบใดที่เรายังใช้ Facebook Comments, Facebook Like อยู่ เราจะไม่สามารถที่จะได้คะแนนเต็มในหน้าบทความได้ ต่างจากหน้า Home นะคะ ที่เราไม่ได้ใส่พวกนี้ไว้ เพราะ Facebook Comments และ Facebook Like นั้นเป็น Iframe ที่เป็นหน้าของ Facebook เราแค่นำมาฝังไว้เฉยๆ ดังนั้นเราจึงจำเป็นต้องโหลดสคริปต์ของ Facebook รวมถึงรูปภาพของเขาที่เราไม่สามารถที่จะทำการบีบอัดเพิ่มเติมได้ด้วย หากใครไม่จำเป็นที่จะต้องใช้ก็ปลดออกได้เลย แต่เว็บเราจำเป็นจริงๆ ที่จะต้องคงไว้ เผื่อว่ามีใครสงสัยอะไรหรือต้องการพูดคุยอะไรก็จะได้สะดวก เพราะสามารถเขียนที่หน้าโพสได้เลย คนอื่นก็จะเห็นด้วย อันนี้เราก็ต้องตัดใจเลือกเช่นกัน

facebook-comment
facebook-on-page

สำหรับเว็บที่มีหน้าต่างกันเยอะๆ เช่น เว็บที่ใช้ Page Builder สร้างหน้าต่างๆ ขึ้นมา เว็บบริษัท ที่ส่วนใหญ่เน้นดีไซน์หน้าเดี่ยวๆ หลายๆ หน้าที่ไม่เหมือนกัน เราจะไม่สามารถที่จะใช้ CriticalCSS ชุดเดียวกันกับหน้าอื่นๆ ได้ เพราะ CSS ที่ใช้มันเป็นคนละชุดกัน ยกตัวอย่างเช่น ถ้าเราใช้ CriticalCSS ที่เรา generate จากหน้าบทความ ไปใช้กับหน้า Home ยังโอเค แต่หากเราไปใช้กับหน้า Knowledge Base ซึ่งใช้ Page Builder สร้าง และมีโครงสร้างหน้าที่ต่างกันมากๆ จะไม่ได้ผล จะเกิดปรากฏการณ์ที่เรียกว่า Flash แทน

ลองสังเกตุหลังจากที่คลิกเมนู เริ่มต้นที่นี่ หน้าเว็บจะโหลดแต่เนื้อหาจะว่างอยู่พักนึงก่อนที่จะปรากฏภายหลัง คล้ายๆ โดนแฟลช

no-critical

ซึ่งหากทดสอบด้วย Google ก็จะแจ้งเราว่ามีปัญหากับ Prioritize Visible Content นะ แล้วถ้าคลิกลิงค์ see screenshot เราก็จะพบความจริงปรากฏในสิ่งที่ Google เห็น

prioritize-visible-content-2

วิธีแก้โดยเราต้องซื้อตัวเสริมของ Autoptimize ที่ชื่อว่า AO CriticalCSS Powerup (เสียเงินอีกแล้ว) โดยเราต้องล็อกอินตัว CriticalCSS เว็บไซต์ไว้ก่อนนะคะ ถึงจะอัพเกรดได้ เพราะจริงๆ แล้วมันเป็นของ crticalCSS.com ค่ะ แต่เป็นส่วนที่ใช้สำหรับเสริม Autoptimize เมื่อทำการอัพเกรดเรียบร้อยแล้วเราจะได้ Licence Key  มาใส่ในปลั๊กอิน Autoptimize CriticalCSS.com ดาวน์โหลดและวิธีติดตั้งใช้งาน

จากนั้นปลั๊กอิน Autoptimize ของเราจะมีแท็บเพิ่มขึ้นมา ชื่อว่า CriticalCSS แท็บนี้จะช่วยให้เราสามารถที่จะฟิลเตอร์หรือกรองหน้าที่มีเทมเพลตแตกต่างกัน เพื่อใช้ CriticalCSS ที่แตกต่างกันได้ โดยสามารถกรองจาก

  • Part of the Path (URL) ส่วนหนึ่งของ url ในกรณีนี้เราใช้กับหน้าที่สร้างด้วย Page Builder หรือ หน้าของ Post Serie ที่จะมีโครงสร้างต่างจากหน้าของ Categories เล็กน้อย
  • Conditional tags ใช้เงื่อนไข เช่น is home, is single, is archive เป็นต้น

โดยให้ทำการลบโค้ด Above The Fold CSS ที่เราใช้ในรูป 3.2 ออกก่อนได้เลย

ao-criticalcss
criticalcss-after

ผลลัพธ์

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

after-criticalcss

อย่างที่บอกว่าใครไม่อยากเสียเงินเพิ่มก็อาจจะทำเฉพาะหน้าบทความเฉยๆ ก็ได้ค่ะ แต่นี่เราทดสอบ ก็เลยลองทำหมดค่ะ หน้า Home, Knowledge Base, Contact, Post Series ไหนๆ ก็จ่ายแล้วก็ทำไว้ให้หมดทุกหน้าค่ะ 😀

ปิดการทำงานของ JS/CSS ที่ไม่ได้ใช้งาน

เนื่องจากในบางธีมหรือปลั๊กอินนั้น จะมี CSS และ JavaScript ติดมาด้วยในทุกหน้า แม้ว่าหน้านั้นๆ จะไม่ได้มีการเรียกใช้งานปลั๊กอินนั้นๆ เลยก็ตาม เราสามารถปิด JS และ CSS จากปลั๊กอินเหล่าหรือธีมเหล่านี้ได้ ด้วยปลั๊กอิน Assets Manager ซึ่งสามารถที่จะกำหนดเงื่อนไขได้ว่าจะให้หยุดทำงานในทุกๆ หน้า หรือเฉพาะหน้าที่ต้องการเท่านั้น หรือสามารถที่จะเปิดในหน้าที่เป็น Post, Page หรือ Category ไหนก็ได้ เรียกว่าเป็นการตามล้างตามเช็ดเลยก็ว่าได้ ซึ่งการปิดสคริปต์เหล่านี้ก็จะทำให้หน้าเว็บของเราขนาดเล็กลง มี Request ที่น้อยลง และโหลดได้ไวขึ้น แต่มีข้อควรระวังอย่างมากเช่นเดียวกับการใช้ปลั๊กอิน Optimize อื่นๆ นั่นก็คือ ทุกครั้งที่เปิดปิดอันไหนก็อย่าลืมเชคให้ดีว่ากระทบการแสดงผลและการทำงานในจุดอื่นหรือไม่

Google PageSpeed Insights ทำยังไง ให้ได้ 100 7
ปลั๊กอิน Assets Manager

WP Rocket

สำหรับใครที่ใช้ปลั๊กอิน WP Rocket นั้นจะได้เปรียบตรงที่ การทำ Critical CSS นั้น สามารถเปิดได้โดยตรงจากปลั๊กอินเลย ที่ File Optimization ซึ่งปลั๊กอินจะสร้าง Critical CSS สำหรับแต่ละเทมเพลต ซึ่งอาจะไม่ได้ละเอียดแยกเป็นหน้าๆ แบบที่เราใช้ปลั๊กอิน Autoptimize ทำแยกแต่ละหน้า แต่ก็ถือว่าสะดวกมากเลยทีเดียว

Google PageSpeed Insights ทำยังไง ให้ได้ 100 8

Hosting

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

  • Location หากผู้เข้าชมหลักอยู่ที่ไหนก็เลือกที่ตั้งของโฮ้สต์อยู่ที่นั่นหรือที่ที่ใกล้ที่สุด หรืออาจจะใช้ CDN ในการช่วยส่งข้อมูลจากแหล่งที่อยู่ใกล้ที่สุดได้
  • Spec เลือกสเปคให้เหมาะกับเว็บไซต์ที่เราจะต้องทำ เช่น เว็บบทความธรรมดา กับเว็บที่เป็น Ecommerce มีสินค้าหลายชิ้น ก็ต้องการสเปคที่แตกต่างกัน
  • Performance การทำงานของโฮ้สต์ ทั้งในด้านของความเร็ว ความเสถียร ไม่ล่มบ่อย อัตราการตอบกลับที่เร็ว ส่งผลโดยตรงต่อความเร็วในการเปิดหน้าเว็บ
  • Security นอกจากเราจะใช้ปลั๊กอินในการป้องกันการแฮคได้แล้ว โฮ้สต์ก็ควรจะมี Firewall ในการป้องกันอีเยอร์นึงด้วย และมีการอัพเดตอยู่เสมอ
  • Support ควรมีการช่วยเหลือที่ดี ติดต่อได้ง่ายและรวดเร็ว
  • Price ราคาและคุณภาพควรไปด้วยกันได้ แต่ไม่ควรเลือกเพียงเพราะราคาถูกอย่างดี

Hosting ที่เราแนะนำ สำหรับของไทย แน่นอนสปอนเซอร์ของเรา Hostatom มีเสียงตอบรับจากลูกค้าที่ดีมากเลยทีเดียว ส่วนโฮสต์ต่างประเทศเราจะเน้นที่เป็น VPS ราคาถูกอย่าง DigitalOcean ซึ่งถ้าใครอยากจะติดตั้ง WordPress ง่ายๆ และรวดเร็ว ทรงพลังจริงๆ แนะนำให้ใช้บริการผ่าน Cloudways

CDN

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

CDN นั้นมีทั้งแบบฟรีและเสียเงิน สำหรับแบบฟรีที่เราใช้อยู่ก็คือบริการจาก CloudFlare นั่นเอง

Google PageSpeed Insights ทำยังไง ให้ได้ 100 9

GTMetrix กับ Pingdom

2 เว็บนี้คือ GTMetrix.com กับ Pindgom จะให้คะแนนต่างจาก Google PageSpeed Insights เล็กน้อย โดยนอกจากจะมีการวัดไปที่คะแนนหรือที่เรียกว่าเกรดแล้ว จะวัดที่ความเร็วแบบเป็น milisecond ด้วย แต่เนื่องจากว่าเว็บไซต์เหล่านี้นั้นจะทำการทดสอบเว็บด้วยเซิฟเวอร์ที่กระจายอยู่ตามตำแหน่งต่างๆ ในหลายๆ ประเทศ ดังนั้นเว็บเหล่านี้ก็มักจะนำเอา CDN หรือ Content Delivery Network มาคำนวนด้วย เพราะมันมีผลโดยตรงกับเวลาที่ใช้ในการทดสอบ โดยเมื่อเราใช้ CDN เว็บของเราก็จะโหลดจากเซิฟเวอร์ที่ใกล้กับสถานีที่ทำการทดสอบมากที่สุด ดังนั้นเว็บที่ไม่ได้ใช้ CDN นอกจากจะได้คะแนนน้อยกว่าแล้วก็ยังจะใช้เวลาในการโหลดมากกว่าอีกด้วย  CDN ฟรีที่แนะนำเช่น CloudFlare

cdn-example

แต่ในเว็บของเราเองตอนนี้เราไม่ได้ใช้ CloudFlare นะคะ ใช้ Jetpack เพื่อที่จะใช้ตัว Photon ซึ่งเป็น CDN แบบเฉพาะรูปภาพ โดย Photon จะทำการเสริฟรูปภาพผ่านเครือข่ายของ WordPress แทน ที่ใช้ Photon ของ Jetpack เพราะเราต้องการคุณสมบัติการแปลงภาพเป็น WebP ของ Photon นั่นเอง และเซิฟเวอร์ของ WPThaiuser นั้นอยู่ที่สิงคโปร์อยู่แล้ว เครือข่ายที่ใกล้ที่สุดของ CloudFlare ในกรุงเทพยังเชื่อมต่อเฉพาะของ Jastel นอกนั้นก็ยังต้องวิ่งไปที่สิงคโปร์กับฮ่องกงอยู่ดี เราเลยเลือกใช้ลูกครึ่ง CDN คือใช้เฉพาะรูปภาพ ไม่ได้ใช้ทั้งเว็บ

GTMetrix

why-slow-cdn

จากภาพด้านบน วัดจากฮ่องกงซึ่งเป็นเซิฟเวอร์ที่ใกล้ที่สุดแล้ว จะเห็นว่าคะแนน CDN ในส่วนของ YSlow นั้นเราได้แค่ 50 เพราะว่าเราใช้ CDN เฉพาะกับรูปภาพ ไฟล์อื่นๆ อย่าง .js และ .css ก็เลยไม่ได้รับอานิสงค์จาก CDN ด้วย หากใครใช้ CloudFlare ก็จะได้เยอะกว่านี้ค่ะในส่วนของ CDN

Pingdom

คะแนนจาก Tools Pingdom ส่วนใหญ่ก็จะติดที่ Query String เพราะการที่เราใช้ Photon ของ Jetpack นั้น ก็จะมี Query String ติดท้ายมาด้วย เช่น ถ้ารูปภาพก็จะมี wepp-compare.png?w=555&ssl=1 โดย w=555 ก็คือความกว้างของภาพ อย่างที่เราบอกว่ามันจะเสริฟภาพตามขนาดที่ปรากฏให้ เหมือนเป็นการย่อภาพอัตโนมัตินั่นเอง ข้อเสียคือเวลาเราทดสอบสปีดตามเว็บเหล่านี้ก็อาจจะโดนหักคะแนนมี Query String เยอะเกินไปได้ค่ะ ยิ่งภาพเยอะก็ยิ่งเยอะตาม ตอนใช้ CloudFlare จะไม่เจอแบบนี้กับกรณีของ CDN เลยนะคะ ได้อย่างเสียอย่าง ก็แบบนี้แหละ 😀 ส่วนเวลานั้นได้ช้ากว่า เพราะเซิฟเวอร์ที่ทดสอบส่วนใหญ่อยู่ไกลๆ ทั้งนั้นค่ะ ถ้าใช้ CloudFlare น่าจะลดได้ประมาณครึ่ง ยังไม่เคยได้ลองกับธีมนี้แต่คิดจากประสบการณ์ที่เคยใช้มาทุกรอบ

tools-pingdom

บทสรุป

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

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

ปัจจุบันเราใช้ปลั๊กอินสำหรับการ Optimize เหล่านี้เพียง 3 ตัว นั่นก็คือ

  • ShortPixel สำหรับรูปภาพ
  • WP Rocket สำหรับการแคช การจัดการกับ CSS, JS, Lazy Load, เชื่อมต่อกับ CloudFlare และอื่นๆ อีกหลายอย่าง
  • Assets Manager สำหรับการปิดสคริปต์ที่ไม่จำเป็นต้องใช้งานในแต่ละหน้า

เนื่องจาก 3 ปลั๊กอินนี้ก็ค่อนข้างครอบคลุมแล้วสำหรับการจัดการกับตัวแปรหลักๆ ที่ทำให้เว็บเราโหลดช้า

Google PageSpeed Insights ทำยังไง ให้ได้ 100 10
คะแนน PageSpeed Insight แบบใหม่

หวังว่าบทความนี้จะเป็นประโยชน์สำหรับ Optimizer ทุกท่าน ไม่มากก็น้อย