WP Rocket 3.7 Delaying JS Execution และ Preloading Page Before Click

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

WP Rocket เวอร์ชั่น 3.7 นี้ดูเหมือนไม่ได้เปลี่ยนแปลงอะไรมาก แต่สิ่งที่เพิ่มมานี้กลับเป็นสิ่งที่ว๊าวมาก ๆ นั่นก็คือ

• Delaying JS Execution ดีเลย์ JS บางตัวที่ไม่จำเป็นต้องรีบใช้งาน
• Preloading Pages Before Click โหลดข้อมูลไว้ก่อนที่จะเกิดการคลิกลิงค์

จะเห็นว่า WP Rocket ไม่ได้แค่ทำในส่วนของความเร็วอย่างเดียว แต่ยังใส่ใจในส่วนของ User Experience หรือประสบการณ์การใช้งานของผู้ชมด้วย

Delaying JS Execution

อันนี้จะอยู่ในเมนู File Optimization เป็นการดีเลย์ JS บางตัวที่ไม่จำเป็นต้องรีบใช้งาน เพื่อช่วยให้หน้าเว็บแสดงผลได้เร็วที่สุดก่อน หลังจากนั้นจึงค่อยโหลดมันทีหลัง คล้าย ๆ กับการทำ Lazyload กับพวกไฟล์รูปภาพนั่นเอง คือโหลดเฉพาะที่จำเป็นต้องใช้งานก่อน เราสามารถกรอกเป็น Keyword, ชื่อไฟล์ หรือโดเมนก็ได้ เมื่อระบบตรวจเจอก็จะทำการดีเลย์ให้เอง รวมไปถึงการเรียกไฟล์จากเซิฟเวอร์ข้างนอกด้วย ซึ่ง WP Rocket จะใส่พวกพื้นฐานมาหลายตัวเลยทีเดียว ส่วนใหญ่ก็พวก Social ทั้งหลายที่ไม่จำเป็นต้องใช้งานก่อนอยู่แล้ว เราสามารถที่จะใส่ของเราเพิ่มเองได้ อย่างพวกป๊อปอัพที่แสดงภายหลังก็สามารถย้ายไปโหลดทีหลังแทน เป็นต้น

PRELOAD LINKS

อยู่ในเมนู Preload ตัวนี้เป็นลูกเล่นที่นำเอาเทคนิค Link prefetching มาใส่เพื่อเพิ่มประสบการณ์ที่ดีให้กับผู้ชมโดยเฉพาะ นั่นคือ เมื่อมีการเลื่อนเม้าส์ไปวางเหนือลิงค์ (Hover) หรือการแตะ (Touch) หน้าจอเกิน 100ms ระบบจะทำการโหลดลิงค์นั้นมาไว้ก่อนแล้ว ซึ่งหากผู้ชมทำการคลิกลิงค์นั้นขึ้นมาจริง ๆ ก็จะทำให้หน้าเว็บพร้อมโหลดได้ทันที ช่วยทำให้เรารู้สึกว่ามันกดปุ๊บก็ขึ้นมาเลย แต่ไม่ได้มีผลในการทดสอบ Speed Test นะครับ เพราะมันก็ใช้เวลาโหลดหน้าของมันเท่าเดิม แต่อันนี้เป็นเพียงแค่เป็นการโหลดมาไว้ก่อนนั่นเอง ทำงานเฉพาะกับลิงค์ภายในเว็บ เสียดายที่บราวเซอร์ที่รองรับตอนนี้มีแต่ Chrome เท่านั้น หวังว่าจะมีบราวเซอร์อื่นๆ รองรับในอนาคต

ส่วนอีกอันเล็ก ๆ ที่เพิ่มมาตาม Google นั่นก็คือการเพิ่ม font-display:swap ในไฟล์ CSS ที่มีการใช้งาน font-face

ที่มา : https://wp-rocket.me/blog/wp-rocket-3-7/

จุดเด่นของ WP Rocket

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

Easy to use ใช้งานง่าย

ในทุกการตั้งค่าจะมีปุ่ม NEED HELP? เมื่อเราคลิกก็จะมีคำอธิบายและคำแนะนำเกี่ยวกับการตั้งค่านั้น ๆ ให้ทันที (แต่ไม่มีภาษาไทยนะ) เป็นสิ่งที่ปลั๊กอินอื่นไม่ค่อยมี และเราก็อยากให้มีแบบนี้ มันคือความใส่ใจเล็ก ๆ น้อย ๆ ที่ทำให้ผู้ใช้งานอย่างเรารู้สึกคุ้มค่า งงตรงไหนก็สามารถอ่านหรือหาข้อมูลเพิ่มเติมต่อได้ง่าย ไม่ต้องงมแบบไร้ทิศทาง แม้จะไม่ได้ง่ายแบบคคลิกเดียวก็เร็วเลย แต่เมื่อเทียบกับฟังชั่นที่มีเยอะในตัวขนาดนี้ก็ถือว่าทำออกมาได้ไม่สับสนมึนงงเวลาใช้งาน

การตั้งค่าที่จะว่ายากหรือ Advanced ขึ้นมาหน่อยก็น่าจะเป็นการที่เราต้องกรอกชื่อหรือที่อยู่ของไฟล์ JS/CSS เอง เวลาที่เว็บพัง เพื่อบอกให้ WP Rocket ไม่ต้องทำการบีบอัดไฟล์เหล่านั้น ซึ่งปกติถ้าไม่พังก็แทบไม่ต้องแตะในส่วนนี้ อย่างตัว Jqurey ที่ธีมและปลั๊กอินจำนวนมากยังจำเป็นต้องใช้อยู่ ก็สามารถติ๊กเลือก Safe mode for Jquery ได้เลย เมื่อมีปัญหาจริง ๆ ก็ให้ดูตามคำแนะนำว่าจะหาไฟล์ที่มีปัญหาได้ยังไง

Integrated ทำงานร่วมกับคนอื่น

WP Rocket ปรับแต่งให้รองรับบริการที่เกี่ยวข้องที่มีคนใช้บริการมาก ๆ เสมอ เช่น Cloudflare, WP Engine, FlyWheel, Cloudways, Kinsta, Pressable, Vanish  ปลั๊กอินจะรู้และปรับให้สามารถใช้งานร่วมกันกับบริการเหล่านั้นได้อย่างราบรื่นมากขึ้น โดยที่เราแทบไม่ต้องทำอะไรเลย แต่ตัว Cloudflare ต้องกรอกนะ จะได้เคลียร์แคชจากที่เว็บเราได้เลย

และก็ยังรองรับปลั๊กอินอื่นที่เกี่ยวข้องกับการบีบอัดรูปภาพด้วย ซึ่งเป็นปัจจัยหลักอีกอย่างหนึ่งของการทำให้เว็บโหลดเร็ว แม้ว่า WP Rocket จะมี Imagify เป็นของตัวเองอยู่แล้ว แต่เราก็สามารถใช้กับปลั๊กอินอื่นเพื่อแสดงไฟล์ภาพแบบ WebP ได้ ทั้งจาก ShortPixel, EWWW, Optimus เป็นต้น ซึ่งทำให้ลดปัญหาปลั๊กอินตีกันเองได้

All in one (almost) เกือบจะครบในหนึ่งเดียว

นอกจากการ Optimize CSS และ JavaScript แล้ว WP Rocket ก็ได้พยายามเพิ่มฟังชั่นอื่นๆ ที่เกี่ยวข้องกับปัจจัยที่ทำให้เว็บของเราเร็วขึ้นได้ เช่น

Heartbeat Control ช่วยลดการเรียกใช้งานไฟล์ admin-ajax.php ที่กระทบต่อเซิฟเวอร์หากมีการเรียกใช้งานมากเกินไปจากบางปลั๊กอินหรือธีม

Database การดูแลฐานข้อมูล ล้างและทำความสะอาดตารางต่าง ๆ ที่ปลอดภัยต่อการลบทิ้ง เพื่อลดขนาดฐานข้อมูลและทำให้เรียกใช้งานได้เร็วขึ้น *ควรใช้ควบคู่กับการทำ Auto Backup อยู่เสมอ ซึ่ง WP Rocket ไม่ได้มีในส่วนของการ Backup แนะนำปลั๊กอินที่ทำ Auto Backup และส่งไปเก็บไว้ยัง Google drive อย่าง Updraft Plus เป็นต้น

Selfhost Google Analytics / Pixel แต่ก่อนเราจะใช้ปลั๊กอินเพิ่มอีกตัวเพื่อทำการดึงตัว JS ของ Google Analytics มาเก็บไว้บนโฮ้สต์แล้วอัพเดตเป็นช่วงเวลาตามที่กำหนด ที่ทำแบบนี้เพราะเวลาที่ทดสอบเว็บตามเว็บ Speed Test ต่าง ๆ มักจะโดนข้อหา Leverage browser caching ซึ่งจริง ๆ แล้วตัวนี้คือสคริปต์ที่ดึงมาใช้จากเซิฟเวอร์อื่น อย่าง Google, Facebook เป็นต้น ทำให้เราไม่สามารถกำหนดเวลาในการแคชไฟล์เหล่านี้ได้ WP Rocket จึงได้เพิ่มฟังชั่นนี้เข้ามาด้วย ซึ่งสามารถใช้ได้กับทั้ง Google Analytics และ Facebook Pixel ไว้ในตัวเลย ซึ่งหากเราได้ใส่โค้ดพวกนี้ไว้ที่ไหนในเว็บ เมื่อ WP Rocket ตรวจเจอก็จะทำงานโดยอัตโนมัติ

Up to date ตามเทรนอยู่เสมอ

หากใครเคยทำ Test Speed มาก่อน จะทราบว่าฟังชั่นทั้งหลายที่กล่าวมาด้านบนนั้นล้วนเกี่ยวกับเกณฑ์ในการวัดผลของเว็บ Test Speed ที่เรานิยมใช้กันนั่นเอง WP Rocket มีการปรับปรุงให้สอดคล้องกับเว็บทดสอบ Speed Test อันไหนเก่าแล้วก็เอาออก และอัพเดตตามมาตฐานใหม่ แม้ WP Rocket เอง จะบอกว่า เราไม่ควรอ้างอิงความเร็วเว็บด้วยตัวเลข Score จาก Google PageSpeed Insight มากเกินไปก็ตาม แต่ WP Rocket ก็พัฒนาให้เข้ากับมาตฐานใหม่ ๆ ที่ถูกนำมาใช้เสมอ ปัจจุบัน Google นำเอาเกณฑ์ Cor Web Vitals มาใช้ในการให้คะแนนเว็บซึ่งจะเน้นไปที่ User Experience โดยเฉพาะ ร่วมกับความเร็วใน Web Vitals แต่ละส่วนมาคำนวน

ยกตัวอย่างเช่น Layout Shift อาการที่หน้าเว็บกระตุกหรือมีการเปลี่ยนเลย์เอาท์ในขณะโหลด อาจจะเพราะการใช้ Critical CSS ที่ไม่ได้สร้างมาเพื่อหน้านั้นโดยเฉพาะ หรือเวลาที่ไม่ได้กำหนดพื้นที่ไว้ให้รูปภาพ ทำให้เวลาโหลดภาพขึ้นมาแล้วมันดันข้อความลงไป แบบนี้ก็ถือว่ามันเหมาะสมแล้ว ซึ่งสามารถเกิดขึ้นได้จากทั้งธีมและปลั๊กอินที่ใช้ในการออกแบบต่างๆ หรือปลั๊กอินที่ใช้ Optimize เองด้วย แม้ว่าเราจะทำเพื่อให้มันเร็วขึ้นก็ตาม ซึ่งถ้าจะให้ดีที่สุดก็ต้องดูตามที่ Google แนะนำว่าให้แก้ไขเกี่ยวกับอะไร หากทางแก้ไขได้หรือไม่

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

แม้แต่ Google เองก็ยังแบ่งคะแนนออกเป็นหลายระดับ เขียว เหลือง แดง คือคุณอาจจะไม่จำเป็นต้องเขียวก็ได้ แค่เหลืองก็พอ แดงก็คือควรปรับปรุงนะ ไม่ได้แปลว่า ผิด แต่เราควรจะรู้คร่าว ๆ ว่า มันเป็นแบบนี้เพราะอะไร แก้ไขได้หรือไม่ เหมาะที่จะแก้ไขมั๊ย อยากให้ Yslow ขึ้นมาเต็ม 100 แต่ต้องแลกกับการจ่ายรายเดือนให้บางบริการหรือบางปลั๊กอิน ถ้าเป็นเว็บที่ไม่ก่อรายได้ก็ถือว่าไม่คุ้มเท่าไหร่ เพราะคะแนนที่เพิ่มขึ้นมาอาจจะความเร็วเท่าเดิมอยู่ก็ได้

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

คำแนะนำให้ทำคะแนน PageSpeed Insight ได้ง่าย ๆ

1. Hosting เริ่มจากพื้น คือเลือก Hosting ดี ๆ ถ้าไม่เกี่ยงว่าในประเทศก็ใช้พวก VPS อย่าง Cloudways ก็ได้ เพราะติดตั้งและใช้งานค่อนข้างง่าย เวลาเราตั้งเซิฟเวอร์ไว้ต่างประเทศ ตอนทดสอบกับพวก Speed Test ก็มักจะทำเวลาได้ดีกว่าโฮ้สต์ในประเทศอยู่แล้ว ราคาก็มีให้เลือกหลายหลายแล้วแต่เว็บที่เราจะทำ มีเครื่องมืออำนวยความสะดวกให้หลายอย่าง
2. Speed Optimized Theme เลือก Theme ที่เน้นทางด้านนี้โดยเฉพาะ เช่น ของ SeedThemes ที่พี่เม่นและทีมงานคนไทยเรานี่เอง พัฒนาขึ้นมาเพื่อเน้นด้านความเร็วโดยเฉพาะ ยิ่ง User Experience ในส่วน Mobile ยิ่งหายห่วง ลื่นปรู๊ด ๆ ดีไซน์เรียบหรูสวยงามเพราะเขาเน้น Mobile First อยู่แล้ว ทำให้มีส่วนเกินน้อย โครงสร้างต่าง ๆ ที่จะนำมาประกอบกันก็คำนึงถึงเรื่องความเบาเป็นหลัก ตัดอะไรที่หนักและไม่จำเป็นออกตามเทรนเว็บสมัยใหม่เหมือนกับว่าเรา custom ขึ้นมาเองเลยทีเดียว แค่ตัวธีมอย่างเดียวก็ออกแบบเว็บมาได้คะแนนสูงลิ่วแล้ว เหมาะกับเว็บที่ต้องการจบงานได้ไว ดีไซน์ไม่ซับซ้อนมาก ทำแล้วไม่ต้องมานั่งปวดหัวตามแก้คะแนน Page Speed เยอะ อย่างที่บอกว่าอันนี้เราเน้นให้ชีวิตง่ายไว้ก่อน
3. Cache ปลั๊กอินแคช แนะนำ WP Rocket หรือตัวฟรีตัวไหนก็ได้ที่เราลองแล้วได้ผลดีกับเว็บของเรา WP Fastest Cache, WP Super Cache, Breeze เป็นต้น เพราะถ้าใช้ธีมดี ออกแบบดีแล้ว อาจจะเหลืออยู่แค่ไม่กี่อย่างที่ต้องทำการ Optimize อันนี้ต้องทดสอบดูเองว่าขาดเหลืออะไร แต่แคชนั้นควรต้องมีอยู่แล้ว แทบทุกตัวมีการทำ Optimize CSS/JS ให้ด้วย หรือจะใช้คู่กับ Autoptimize ก็ได้ แต่ถ้าเน้นง่ายและครอบคลุมไว้ก่อนเราก็เสนอ WP Rocket นี่แหละ แล้วก็อะไรที่โฮ้สต์ไว้บนเว็บเราได้ก็โฮ้สต์ไว้เลยก็ได้ จะได้คะแนนดีขึ้นเพราะไม่ต้องโหลดจากที่อื่น เช่น พวก Google font เป็นไปได้อย่าใช้เยอะและให้อัพไว้ที่โฮ้สต์เราเลย WP Rocket มีฟังชั่น Preload font ให้ใช้ด้วย
4. Image optimization อย่าลืม Optimize รูปภาพ ถ้าอยากให้ได้คะแนนดีจริง ๆ และง่าย ๆ ด้วย ก็แนะนำปลั๊กอิน Adaptive Image by ShortPixel ไปเลย เจ้าของเดียวกันกับตัวที่เราบีบอัดภาพบนโฮ้สต์ของเรานั่นแหละ แต่ตัวนี้มันดีกว่าตรงที่เป็นการใช้งานแบบ CDN เดี๋ยวนี้เขาฮิตท่านี้กัน กล่าวคือ เขาจะดึงภาพจากเว็บเราไปทำการบีบอัด แล้วสร้างภาพไฟล์ขนาดต่าง ๆ ตามที่เราใช้บนหน้าเว็บเรา ไม่ว่าจะเป็นหน้าจอขนาดไหน ระบบของเขาก็จะเสิร์ฟภาพที่เหมาะสมให้เองทั้งหมด ไฟล์ภาพต่าง ๆ ที่แสดงบนเว็บเรา จะถูกแทนที่ด้วยภาพที่จากผู้ให้บริการ CDN หมดปัญหาเวลาโดนตัดคะแนนว่าภาพใหญ่เกินขนาดแสดงผลจริง และที่โดนกันตลอดคือเรื่อง Cookie-free domains จะหมดไปเช่นกัน และที่มันง่ายก็เพราะ ทั้งหมดนี้เกิดขึ้นโดยเราไม่ต้องทำอะไรเลย ไม่ต้องมานั่งเปิดหน้าจอแล้วรอบีบอัดภาพแบบข้ามวัน เพราะระบบจะทะยอยอัพเดตให้เราเอง ไม่เปลืองทรัพยากรของเรา จะเปลืองก็แต่ค่าบริการรายเดือน ซึ่งก็ไม่แพงมาก แต่ตัดจบปัญหาเรื่องภาพไปได้เลย

4 ข้อนี้คือการทำคะแนน PageSpeed ให้สูงได้ง่าย ๆ แบบไม่วุ่นวายมากนัก เพราะปัจจัยหลักในการทำให้เว็บโหลดเร็วและได้คะแนนดีด้วยมันก็มีอยู่แค่นี้ (ณ ตอนนี้) คือ

• โฮ้สต์ดี
• ธีมที่ดี ดีไซน์ดี ทั้งเบื้องหน้าและเบื้องหลัง (โค้ด)
• แคช จะได้ไม่ต้องดึงข้อมูลใหม่ทุกครั้ง
• ภาพต้องผ่านการบีบอัด

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