Seed 2.0 รุ่นทดสอบ – PageSpeed 100 ด้วยปลั๊กอินแคชตัวเดียว

จริงๆ ทาง SeedThemes เราย้ำหลายรอบว่า การสร้างเว็บให้ได้คะแนนความเร็วเยอะๆ เอาใจ Google PageSpeed นั้น ไม่ได้มีประโยชน์มากนัก หากไม่ติดสีแดง (คือได้สีส้มหรือเขียว ได้คะแนนตั้งแต่ 65 ขึ้นไป) คนเข้าก็ไม่รู้สึกว่าช้าเท่าไหร่แล้ว

แต่กระนั้น การทำธีมให้โหลดเร็วและใช้โค้ดตามแนวทางการเขียนเว็บสมัยใหม่ก็เป็นสิ่งที่ทีมงานเรามุ่งมั่นมาโดยตลอด เมื่อประกอบกับความรู้หลายๆ อย่าง ทำให้ธีม Seed เวอร์ชั่น 2 ของเราทำคะแนนได้สูงพอสมควร คือ

1. PageSpeed 100 หากลงปลั๊กอินแคช 1 ตัว (Breeze)

แต่จะเห็นว่า เนื้อหาก็จะไม่ใช่แนวซับซ้อน เป็นแค่ข้อความกับรูป

2. PageSpeed 94 ถ้าเปิดใช้ร่วมปลั๊กอินสไลเดอร์ (Smart Slider 3 Pro) และ Autoptimize + Breeze

สำหรับการใช้งานทั่วไป เรามักต้องลงปลั๊กอินเพิ่มเพื่อให้ใช้งานง่าย ตัวนึงที่เราชอบมากคือ Smart Slider 3 Pro ที่แถมใน ธีม Plant

แต่ยิ่งลงปลั๊กอินเพิ่ม คะแนน PageSpeed ก็จะยิ่งลดลง เพราะมีโค้ดอื่นๆ ตามมากับปลั๊กอินที่ใช้ กรณีนี้เราเลยใช้Autoptimize มาช่วย เพราะ Breeze จัดการกับ CSS/JS เองได้ไม่เก่งนัก

ส่วนคะแนนที่สูง ส่วนหนึ่งเพราะเราเลือกใช้ Cloudways โดยเลือก Amazon Web Services (AWS) ที่สิงคโปร์ ทำให้คะแนนจาก Google สูง และคนไทยก็เข้าได้เร็วครับ (ในขณะที่ Host ในประเทศ อาจจะเข้าเร็วเหมือนกัน แต่ Google เข้ามาเอาข้อมูลได้ช้ากว่า เลยให้คะแนนน้อยกว่านิดหน่อย)

ออกตัว: ไม่ใช่ว่าใช้ธีมนี้แล้วจะได้คะแนน 100 ทันทีนะครับ!

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

ประเด็นอื่นๆ ที่น่าสนใจของธีม Seed 2.0

  • ออกแบบเพื่อเป็นธีมเริ่มต้นสำหรับคนที่แก้โค้ดได้ ซึ่งจะทำให้ทุกอย่างเบามาก เร็วมาก ไม่มีโค้ดที่ไม่ได้ใช้ แต่ใครที่ต้องการเปิดใช้ Bootstrap 4, FontAwsome 5 ก็สามารถเลือกเปิดจากไฟล์ functions.php ได้ (รุ่นทดสอบยังไม่ได้ใส่ Bootstrap 4 มาให้นะครับ ขอทดสอบต่อก่อนครับ)
  • ใช้ SCSS เป็นหลักในการเขียนโค้ด ทำให้โค้ดเล็ก อ่านง่าย ปรับแต่งที่ _variables.scss ก็ได้ หรือไปรื้อโค้ดเองก็ได้
  • แบ่งโค้ด CSS ส่วน Critial ไว้ ให้ระบบนำมาใส่ก่อนโหลดตัวอื่นได้ ทำให้โหลดได้เร็ว
  • แต่คนที่อยากจัดการ CSS ส่วน Critial เอง ใช้ปลั๊กอิน Autoptimize ก็จัดการได้เช่นกัน
  • ส่วนคนที่ไม่ต้องการใช้ SCSS ก็สามารถ Override ที่ style.css ได้ตามปกติ
  • หรือคนที่ไม่ต้องการแก้ที่ธีมหลักเลย ก็ใช้ธีมเสริม Berry (Child Theme) ได้เหมือนเดิม และจะมีระบบอัพเดทธีมเหมือนเดิมครับ (อันนี้ออกพร้อมตัวเต็มนะครับ)
  • รองรับ WooCommerce ตั้งแต่เริ่ม (และจะเพิ่มเมนูไอคอนตะกร้า กับ ระบบสมาชิก เร็วๆ นี้ครับ)
  • จะทะยอยเอาตัวอย่างและเนื้อหาขึ้นที่เว็บ https://seed.seeddemos.com/ นะครับ

สนใจโหลดไปทดสอบ?

เฉพาะสมาชิก Seed Kit เท่านั้นนะครับ เข้าไปที่หน้า สมาชิก แล้วดูที่เขียนว่า ธีม: Seed 2 Beta 1 ได้เลยครับ

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments