ตัวอย่างการตั้งค่า Autoptimize

จากตัวอย่างเว็บที่ https://try.seedwebs.app/plant/ เราสามารถทำคะแนน Page Speed บนมือถือได้สูงสุด 99/100 และบนเดสท็อป ได้ถึง 100/100 นะครับ (แต่ไม่ทุกครั้งนะครับ เนื่องจาก Server สำหรับทดสอบนี้ไม่มี CDN ช่วย ดังนั้นบางจังหวะที่คนใช้เยอะ ก็จะช้าลง คะแนนตกลงครับ)

การปรับแต่งให้โหลดเร็ว (Page Speed Optimization)

เราใช้ระบบแคชจาก SpinupWP ดังนั้นผู้ใช้งานก็ไม่ต้องทำอะไรครับ

ส่วนการ Optimize เราใช้ Autoptimize ซึ่งแนะนำการตั้งค่าดังนี้นะครับ

1. JavaScript Options

ติ๊กข้อแรกเพื่อเปิดใช้
ส่วนข้อ 2 เพื่อให้รวมไฟล์ JS ต่างๆ เข้าด้วยกัน (Aggregate = รวม)
ส่วน aggregate inline JS จะติ๊กหรือไม่ก็ได้ ปกติไม่ค่อยมีอยู่แล้ว
ส่วน Force JS in <head> อันนี้ติ๊กแล้วทำให้โหลดช้า (แต่ถ้ามีปัญหา อาจจะต้องติ๊กตรงนี้)
นอกนั้นปล่อยตามรูปครับ

2. CSS Options

ติ๊กข้อแรกเพื่อเปิดใช้
ส่วนข้อ 2 เพื่อให้รวมไฟล์ CSS ต่างๆ เข้าด้วยกัน
ส่วน aggregate inline CSS จะติ๊กหรือไม่ก็ได้ ปกติไม่ค่อยมีอยู่แล้ว
Generate data แปลงรูป (พื้นหลังใน CSS) ให้กลายเป็นโค้ดก้อนเดียวเลย ลดเวลาโหลด แต่ถ้ามีรูปพื้นหลังใหญ่ๆ ก็ไม่ควรติ๊ก
Inline and Defer CSS ตรงนี้ถ้าติ๊ก เราต้องไปสร้าง CriticalCSS เพื่อให้โหลด CSS ส่วนบนๆ ก่อน แล้วระบบจะเอา CSS อื่นๆ ไปโหลดทีหลัง ทำให้เว็บโหลดเร็ว แต่มันจัดการยาก ต้องทำทุกหน้าไม่เหมือนกัน (หรือถ้าเป็นโค้ดชุดเดียวกัน ก็ต้องรองรับทุกหน้าในเว็บ) ดังนั้นไม่แนะนำเท่าไหร่ครับ
Inline all CSS คือการรวม CSS ทุกไฟล์ มาใส่ในหน้านั้นเลย ไม่มีการโหลด CSS แยก อันนี้ติ๊กได้เฉพาะใช้ธีมเล็กๆ และปลั๊กอินแนว Block นะครับ ถ้าไฟล์ใหญ่จะกลายเป็นหน้านั้นโหลดเยอะมาก ช้ากว่าเดิม - ส่วนคนที่ใช้ระบบ Seed Webs แนะนำให้ลองติ๊กดูครับ ส่วนใหญ่จะเร็วขึ้น เพราะธีมเราเล็กอยู่แล้ว :D
นอกนั้นปล่อยตามเดิมครับ

3. HTML Options

เลือกติ๊กเพื่อเปิดใช้งาน

4. CDN Options / Cache Info

ปล่อยไว้ได้เลย

5. Misc Options

ติ๊กทั้งหมดเลยก็ได้ ง่ายดี ส่วนอันล่างสุด ถ้าติ๊ก จะทำให้คนที่ล็อกอิน กับ คนไม่ล็อกอิน เห็นผลลัพธ์เหมือนกัน ข้อดีคือ ถ้ามีอะไรพังจะได้เห็นเนิ่นๆ

เสร็จแล้วกด Save Changes and Empty Cache นะครับ

6. Image optimization

หลังจาก save ข้อบนแล้ว ให้ไปที่แท็บ Images

เนื่องจากระบบ Seed Webs จะมี ShortPixel ให้อยู่แล้ว ดังนั้นติ๊กตามรูปได้เลย ระบบจะไปเรียก API ของ ShortPixel ให้ทำการลดขนาดรูปและสร้างไฟล์ WebP ให้อัตโนมัติ

ส่วน Lazy-load images จะทำให้เว็บไซต์ไม่โหลดรูป ถ้ายังไม่ scroll ไปถึง วิธีนี้ทำให้โหลดรอบแรกได้เร็วขึ้นมากครับ

เสร็๗แล้วกด Save Changes

เคลียร์แคช

หากต้องการมั่นใจว่า คนอื่นๆ จะเห็นข้อมูลตามค่าที่ตั้งไว้ ให้คลิกที่ Cache เลือก Purge All Caches ระบบจะลบ Cache ทั้งหมดทิ้งให้

หากต้องการเช็ค Page Speed ก็ไปที่ https://developers.google.com/speed/pagespeed/insights/ แล้วพิมพ์ url ที่ต้องการไปได้

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