สรุปผลการพยายามเอาชนะ Page Insight และ Web Page Test
by Blast Piruin Panichphol,หลังจากที่เว็ปนี้เริ่มเป็นรูปเป็นร่าง ผมก็ตั้งใจว่าจะทำให้ Performance ดีๆด้วย เลยลองทดสอบกับ Page Insight และ Web Page Test ดู ปรากฎว่าคะแนนไม่ค่อยน่าพอใจเท่าไหร่ ก็ปรับแก้ไปเรื่อยๆจนได้ระดับนึง เลยบันทึกไว้ก่อนว่าทำไปบ้าง และควรทำอะไรต่อ
Cloudfare
มันช่วยได้เรื่อง Cache control ได้ดีเลย ไม่ต้องทำอะไรเองเลยครับ ของเค้าดีจริง แถมยังทำให้เว็ปเป็น https แบบที่เราไม่ต้องเสียตังค์เลย (อะไรจะใจดีปานนั้น) น่าเสียได้ว่าลองเปิด Feature minify html, css และ js แล้วไม่เป็นผลกับ Web ที่ Host บน Github Pages แฮะ ไม่รู้ทำอะไรผิดรึเปล่า แต่แค่นี้ก็รักแล้วหละ ช่วยเพิ่มคะแนนให้ผมไปได้เยอะเลย
แต่การต้องพึ่งพา Css Framework และ jQuery นี้หละปัญหา
CSS
การใช้ CSS ที่จะทำให้เว็ปประสิทธิภาพดีที่สุดคือการ Inline style ใช่แล้วยัดไปใน tag style ภายใต้ช่วง head เลย แต่ Bootstrap มันใหญ่มากเลยนะจะยัดเข้าไปใน Head จริงๆหรอ นั้นหละครับปัญหา CSS Framework ส่วนใหญ่มักเยอะเกินความต้องการของเรา
วิธีแก้คือ
1. โหลดแบบ CSS Async
วิธีนี้ช่วยให้ PageInsight และ WebPageTest ไม่ว่าเราเรื่อง block การแสดงผล แต่แลกมาด้วย user จะเป็นหน้าเราแบบ Plainๆ ไม่มี style ก่อนแป๊บนึง แต่จะเป็นเฉพาะที่เข้าเว็บเราครั้งแรก วิธีนี้ง่ายที่สุดและ
2. Inline CCS Style ทั้งหมด
ฝังสไคล์ทั้งหมดไปเลย วิธีนี้ User จะไม่เป็นช่วงที่เว็ปเราไม่สวยเลย ไม่โดนว่าเรื่อง CSS ไป Block การแสดงผลเช่นกัน แต่ต้องระวังเรื่องขนาดของ Html การจะยัดทั้ง Bootstrap เข้าไปใน <head> จะทำให้ทุกหน้าเว็ปช้าแทน
ถ้าเลือกวิธีนี้เราจะคัดเฉพาะบางส่วนของ Framework เอาเฉพาะที่เราใช้ เพื่อให้มันเล็กพอที่จะเอาไปยัดแบบ inline หรือ คุณอาจจะหา CSS Framework เจ้าใหม่ที่เล็กหน่อยมีเฉพาะสิ่งที่คุณใช้ มาแทนที่เลย
3. Inline ส่วนหลัก และโหลด CSS หลักแบบ Async
คัดเฉพาะส่วนเล็กให้เว็ปไม่ดูน่าเกลียด ระหว่างรอ CSS ของจริงโหลด ยังก็อย่าลืมลดขนาด CSS หลักให้เล็กที่สุดด้วยนะครับ ใช้แรงเยอะหน่อยได้ได้ผลดีนะ
ลองดูว่าแบบไหนจะเหมาะกับงาน และความขยันของคุณที่สุด
JavaScript
ถ้าเป็นไปได้พยายามอย่าใช้เยอะ โดนเฉพาะกับเว็ป Blog ทั่วไป หรือถ้าจะใช้ ให้โหลดแบบ Async แต่ระวังปัญหาเรื่อง Dependency ของ JS เนื่องจาก ส่วนใหญ่จะใช้ JQuery แต่มันใหญ่ถ้าเราโหลด Async แล้วมีอีก Script ที่จะเป็น ต้องใช้ jQuery งานจะงอกทันที
จำเป็นต้องใช้ JS จริงรึเปล่า?
ตอบคำถามนี้ให้ได้ก่อน ค่อยทำอย่างอื่นๆ ถ้าคำตอบคือไม่จำเป็นก็สบายเลย ลบออกให้หมดโล้ด
โหลด Async ให้หมด
มี Snippet ที่ช่วยให้โหลด js แบบ Async โดยที่ยังทำงานตามลำดับอย่างถูกต้องได้อยู่ ลองหาดูครับ จริงๆผมหาเจอแล้วแต่ผมไม่ได้ Save ไว้ ต้องไว้ขออภัยต่อตัวเองและผู้อ่านด้วย ใครหาเจอบอกด้วยนะ
รูปภาพ
ต่อเราลดขนาด Css Js ให้ตายเท่าไหร่ ยังมันก็ไม่เท่ากับการโหลดภาพ 1 ภาพเลยครับ ฉะนั้นอย่าลือว่า การ Optimize ภาพเป็นสิ่งสำคัญมากๆๆๆ ควรใช้ภาพที่ Resolution เหมาะกับการใช้งานจริง ไม่ใช่ใหญ่เว่อร์เกินไป และก็ Compress ใหได้ไฟล์ที่เล็กที่สุดโดยไม่ให้เสียลายละเอียดไป ลองใช้ Online Tool ง่ายๆอย่าง TinyPNG ดูก็ได้ครับ
แต่ถ้าขี้เกียจแต่อยากได้ผลลัพธ์ที่ดี ทางออกที่ดีอีกทางคือใช้ Tool ที่สามารถช่วย Optimize เรื่องภาพทั้งหมดได้แบบ Automate อย่าง Grunt หรือ Gulp ก็จะทำให้ชีวิตง่ายขึ้น (รวมไปถึง minify css js เลยนะ)
สรุป
พยายามออกแบบเว็ปให้เรียบง่ายที่สุด จะลดงานคุณไปได้มาก แต่ถ้าไม่ชอบเรียบเราต้องหาวิธีแก้กันต่อไป หรือจะไม่แก้ก็ได้นะ
ยังไงซะ User ไม่เลือกเข้าเว็ปเราจากคะแนนที่ได้จาก Page Insight หรอก (แต่ Google เลือกมี่จะแนะนำคุณจากคะแนนนะ)