ปรับเว็บให้เร็วด้วย WP Rocket

WP Rocket

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

ความสามารถ

• Auto generate Critical CSS ช่วยสร้าง  Critical CSS ให้อัตโนมัติโดยเราไม่ต้องไปวุ่นวายสร้างเองและใช้ปลั๊กอินเสริม
• ระบบแยกแคช Desktop/Mobile
• Minify & Combine JS/CSS รวมและบีบอัดไฟล์ JS และ CSS และสามารถแบ่งออกเป็นไฟล์ย่อยให้สามารถโหลดพร้อมกันได้เร็วขึ้น
• Load JS Deferred โหลด JavaScript หลังจากโหลดข้อมูลเสร็จแล้ว
• LazyLoad Image, iFrame, Video
• Disable Emoji
• Sitemap Preloading
• Database optimization
• Google font optimization
• Remove query string from static resource
• CloudFlare compatibility
• DNS Prefetching

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

แยกแคชระหว่าง Desktop และ Mobile

การแยกแคชออกจากกันระหว่าง Desktop และ Mobile นั้นช่วยให้การโหลดในมือถือโหลดเร็วขึ้นได้จริงๆ ถึงแม้ว่าปัจจุบันธีมจะเป็น Responsive อยู่แล้ว แต่ปลั๊กอินตัวนี้จะฉลาดยิ่งกว่านั้น มันจะตัดส่วนเกินที่ไม่จำเป็นสำหรับมือถืออกให้เราได้ ทำให้เว็บของเราเบากว่าเมื่อผู้ชมเข้าใช้งานผ่านมือถือ

ถ้าเราดูจาก Google PageSpeed Insight จะเห็นเลยว่าขนาดของหน้าเว็บระหว่างแบบ Mobile และ Desktop นั้น มีขนาดเล็กและมีจำนวน Request ที่น้อยลงจริงๆ

Minify CSS & JS

ยิ่งเว็บของเรามีการใช้งานปลั๊กอินมากแค่ไหน ก็จะยิ่งมี CSS และ JS เยอะมากเท่านั้น ซึ่งเราสามารถใช้ปลั๊กอินนี้ในการบีบอัดให้มันเล็กลงได้ อันแรกก็คือ

HTML & Google Font

เป็นการลบในส่วนของพวก whitespace และ comments ต่างๆ ในไฟล์ออกเพื่อให้ไฟล์เล็กลง ส่วนการ Combine Google Fonts files ก็จะเป็นการลดการรีเควสไฟล์ฟ้อนต์ของ Google Font

เราไม่ได้แตะในส่วนของ Remove query strings from static resources เพราะส่วนใหญ่แล้ว query strings ในส่วนนี้มักจะมาจากพวก CSS ของธีมหรือปลั๊กอินที่จะช่วยให้เว็บเราทำงานได้อย่างถูกต้อง แต่เวลาที่เรานำเว็บไปทดสอบกับเครื่องมือบางตัวมันจะไม่สนใจอะไรทั้งสิ้น จะให้เราต้องเอาออกอย่างเดียว เราจึงละตรงนี้ไว้เพราะถือว่าไม่ได้จำเป็นอะไร

CSS

ตอนต่อมาก็คือต้องมา Minify CSS ต่อ ซึ่งปกติแล้วเราจะติ๊กเฉพาะอันแรกก็ได้ ก็คือ Minify CSS Files หากมีการแสดงผลผิดพลาด ให้ลองหาดูว่ามาจาก CSS ไฟล์ไหน แล้วก็เอา URL ของไฟล์ไปใส่ในช่อง Exclude ด้านล่าง

สำหรับตัวเลือกที่ 2 ที่เราติ๊ก Combine CSS นั้น เขาจะแจ้งเตือนให้ตรวจสอบให้ดีนะ เพราะการ Combine นั้นก็คือการรวมเอาไฟล์ CSS หลายๆ ไฟล์มาไว้ด้วยกัน แถมในตัวเลือกก็ยังแนะนำอีกด้วยว่า การโหลดเล็กๆ หลายๆ ไฟล์พร้อมกันนั้นเร็วกว่าการรอโหลดไฟล์ใหญ่ไฟล์เดียวจนเสร็จ ซึ่งมันก็ฟังดูมีเหตุผลดี โดยเฉพาะเว็บที่มีการเปิดใช้งาน HTTP/2 ที่ต้องเป็นเว็บที่เป็น https ซึ่งว่ากันว่า HTTP/2 จะทำให้เว็บสามารถโหลดหลายไฟล์พร้อมกันได้รวดเร็ว จึงไม่จำเป็นที่จะต้องรวมไฟล์แต่อย่างใด

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

อันล่างสุดก็คือ Optimize CSS delivery ก็คือการสร้าง Critical CSS นั่นเอง โดยจะไม่ได้เป็นการทำให้ทุกหน้านะ แต่ระบบจะทำการสร้างตัวไฟล์ Critical CSS สำหรับเทมเพลตของหน้าต่างๆ ในเว็บ แล้วแต่ว่ามีอะไรบ้าง เช่น Post, Shop, Archive เป็นต้น ซึ่งเราไม่ได้ติ๊กในตรงนี้ เพราะของเรานั้นถ้าใช้ร่วมกับ Combine เมื่อไหร่ หน้าเว็บพังทันที

JavaScript

ใช้หลักการเช่นเดียวกับ CSS ทุกอย่าง สำคัญคือ ปรับแล้วต้องทดสอบดูด้วย หมายถึงเปิด Incognito mode ของบราวเซอร์เพื่อดูว่ามีอะไรผิดพลาดหรือเปล่านะครับ

โหลด JavaScript แบบ Defer จะทำให้มันไม่ไปบล็อกการเรนเดอร์ของหน้าเว็บ ซึ่ง Google จะต้องการให้คนเข้าเว็บมาแล้วเห็นเนื้อหาโดยเร็วที่สุด โดยเฉพาะส่วนแรกนี้เขาจะถือว่าเป็น Critical ถ้าอันไหนไม่จำเป็นก็ให้ดีเลย์ไปก่อน เพราะหากมี JS ที่รอโหลดก่อน ก็จะทำให้มันช้านั่นเอง แต่อาจจะมีบางเว็บบางธีมและบางปลั๊กอินที่เราจำเป็นจะต้องยกเว้นไฟล์ Jquery ไว้ ไม่เช่นนั้นมันจะทำให้การทำงานผิดพลาด อย่าลืมเชคดูทุกปุ่ม อย่างที่เราเจอ แค่ปุ่ม Search ก็อาจจะมีปัญหาได้ การแก้ปัญหาก็คือ ให้ติ๊กที่ Safe Mode for Jquery ไว้ด้วย แน่นอนว่าอาจจะโดนหักคะแนนตรงนี้ แต่ก็เลือกเอาว่าจะเอาคะแนนดีหรือเว็บพัง ในเมื่อมันก็ไม่ได้ทำให้ช้ากว่าเดิมซักเท่าไหร่

LazyLoad

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

ซึ่งไม่เฉพาะรูปภาพเท่านั้น แม้แต่ iframe และ video ก็ยังทำ LazyLoad ได้ด้วย ใครเคยใส่ YouTbue ในเว็บหลายๆ คลิป จะเข้าใจว่าเวลาเปิดหน้านั้นมามันจะนานกว่าหน้าอื่นๆ มาก ซึ่งหากใครไม่มีปัญหา จะลองติ๊กตรง Replace YouTube iframe with preveiw image ด้วยก็ได้ คือมันจะใช้ภาพ Thumbnail ของคลิปนั้นๆ แหละ มาขึ้นเป็นภาพแทน แล้วคนดูกดเมื่อไหร่มันถึงจะโหลดและเล่นวิดีโอจริงๆ ซึ่งของเราลองแล้ว ไม่รู้ไปตีกับตัวไหน มีปัญหามันไม่ขึ้นให้ ก็เลยเว้นไปก่อน แต่ถ้าใครไม่มีปัญหา ก็ให้ใช้เลย ดีมาก เคยใช้

นอกจากนี้เรายัง Disable Emoji ด้วย เพราะปกติไม่ค่อยได้ใช้อยู่แล้ว จะโหลดมาทำไมทุกหน้า ใช่มั๊ย

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

ตัวเลือกอื่นๆ ในปลั๊กอินนี้ที่เป็นตัวเสริมที่เราสามารถใช้เพื่อเพิ่มความเร็วให้กับเว็บก็สำคัญเช่นกัน อาทิเช่น

• Preload เป็นการเตรียมแคชไว้พร้อมใช้งาน เพราะปกติมันจะสร้างแคชไปเป็นหน้าๆ ตามที่มีคนเรียกดู
• Heartbeat อันนี้ไว้สำหรับปรับด้าน Dashboard ให้เร็วขึ้นโดนลดการทำงานอื่นๆ ถี่ๆ ที่ไม่จำเป็นลง
• Database ตัวนี้ก็ช่วยเรื่องทำความสะอาดฐานข้อมูลอัตโนมัติ ถ้ามันบวมแล้วเวลาเรียกใช้งานมันก็จะอืดๆ ช้าๆ นั่นเอง
• CDN ใครที่ใช้ CDN จะมีตั้งค่าในส่วนนี้ แต่ถ้าใช้ CloudFlare ก็ง่ายเลย แค่เอา CloudFlare API มากรอก มันก็จะเชื่อมต่ออัตโนมัติ เวลาเราล้างแคชที่เครื่อง มันก็จะล้างของ CloudFlare ให้ด้วยเช่นกัน
• Google Tracking อันนี้จะอยู่ในส่วนของ Add-on คือมันจะช่วยในเรื่อง Leverage browser cache สำหรับพวก Google Analytics โดยการโฮ้สต์สคริปต์ไว้ที่เครื่องเราแทน แต่ไม่รองรับ Google Tag Manager นะครับ
• Image Optimization เขาจะแนะนำปลั๊กอิน Imagify ของเขาเอง แต่เราแนะนำ ShortPixel แทนละกัน

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

ปลั๊กอินอื่นๆ ที่แนะนำให้ใช้ด้วยกันก็คือ

• Assets Manager ตัวนี้ช่วยปิด CSS และ JavaScript ที่ไม่ได้ใช้งานในหน้านั้น
• ShortPixel ช่วยบีบอัดภาพดีมาก ทำ WebP ด้วยก็ได้ จริงๆ เขามี Adaptive Image มาเสริมด้วย ซึ่งดีมากๆ มันจะช่วยทั้งในเรื่องของ Cookie free domain สำหรับพวกรูปภาพเพราะมันเป็น CDN ในตัว ช่วยเรื่อง Serve scaled images ด้วย ช่วยทำ WebP ด้วย แต่ต้องจ่ายรายเดือน เลยขอละไว้ในฐานที่ฐานะยากจน โอกาสหน้าจะมารีวิวเพิ่มอีกที ใครมีเงินเยอะก็เล่นไปก่อน

ผลทดสอบ

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