มาลอง Optimize Web Performanceให้เร็วขึ้นกันเถอะ🚀⚡️

Optimize ให้เร็วขึ้น มันต้องทำไงนะ

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

test web performance หรือยัง

พร้อมกับการกด test ให้เราดู และเราผู้กำลังทำหน้างง ๆ พร้อมกับการรอดูผลการทดสอบประสิทธิภาพของเว็บก็ได้พบว่า เว็บบริษัทมีคะแนนอยู่ที่ 34

พี่ ​CTO ผู้สุดแสนจะใจดีของบ.เราก็ได้หันมาบอกว่า

อาย พี่ขอ 80 นะ

สีหน้าในตอนนั้น

ตัดภาพมาที่เราผู้ที่กำลังรับฟัง พร้อมกับเสียงที่ดังขึ้นในหัวของเรา ฉิบหายละ ทำไงนะ

และจุดเริ่มต้น optimize web performance ของเราการได้เริ่มต้นขึ้น…

โดยขั้นแรกของการเริ่มต้น optimize web ของเราให้เร็วขึ้นนั้นเราต้องทดสอบก่อนว่าเร็วของเรานั้นมีคะแนนของ performance อยู่เท่าไหร่ ซึ่งเครื่องมือในการทดสอบ มีดังนี้

1. Google Lighthouse
2. PageSpeed Insights

Google Lighthouse

Google Lighthouse เป็นเครื่องมือที่ใช้ทดสอบประสิทธิภาพของเว็บไซต์ ที่สามารถใช้งานได้เพียงแค่เรามี Google Chrome บน Desktop และเปิดใช้งาน DevTools โดยเลือกที่ Menu Audit ซึ่ง lighthouse นี้จะทดสอบทั้งหมด 5 เรื่อง คือ

1. Performance — จะทดสอบความเร็วของเว็บไซต์เรา
2. Progressive Web App —ดูว่าเว็บได้พัฒนาให้รองรับอุปกรณ์พวกมือถืออย่างสมบูรณ์แบบไหม
3. Best practives — ทดสอบว่าเว็บเราได้พัฒนาในโดยใช้แนวทางปฏิบัติที่ถูกต้องที่สุดและดีที่สุดหรือเปล่า
4. Accessibility — ทดสอบว่าทำเว็บไซต์สามารถทำให้ผู้ใช้งานทุกประเภทสามารถเข้าถึงได้โดยไม่มีอุปสรรคใด ๆ
5. SEO — ทดสอบว่าเว็บเราสามารถทำให้เครื่องมือที่ใช้ในการค้นหา ค้นเจอหรือไม่

อ่านเพิ่มเติม ที่นี่

Lighthouse | Tools for Web Developers | Google Developers

PageSpeed Insights

PageSpeed Insights ก็เป็นอีกเครื่องมือที่ใช้ในการทดสอบแค่เรื่องเดียว คือ ความเร็วของเว็บ

PageSpeed Insights

หลังจากเรารู้จักเครื่องมือกันแล้ว เราจะมาเริ่มทำการ optimize เว็บกันซึ่งจะโฟกัสไปที่เรื่องความเร็วของเว็บไซต์เท่านั้น เพราะจุดมุ่งหมายของเราครั้งนี้คือเว็บต้องเร็วขึ้นกว่านี้ performance score ต้อง 80++

ขั้นแรกทำการทดสอบ

ทดสอบเว็บเราด้วย Google Lighthouse

ตัวอย่างการทดสอบตอนนี้คะแนนคือ 60

ขั้นตอนต่อมาทำความเข้าใจตัวชี้วัด

มาดูกันว่าตัวชี้วัดแต่ละตัวที่นำมาคิดคะแนนมีอะไรบ้าง

Cr. https://twitter.com/__treo/status/1068163152783835136

1. First Contentful Paint คือ การแสดงผลที่มีเนื้อหาเต็มครั้งแรก
2. First Meaningful Paint คือ จะวัดผลเมื่อมองเห็น content หลักของ page ทั้งหมด คือ เริ่มเห็นแต่ยังไม่ต้องโหลดเนื้อหาขึ้นมาก็ได้
3. Speed Index คือ จะวัดว่าเว็บของเรามีความเร็วในการโหลดเนื้อหาเพื่อมาแสดงให้ผู้ใช้ดูได้รวดเร็วแค่ไหน โดย Lighthouse เนี่ยมันจะบันทึกวิดีโอการโหลดของเพจนั้นแล้วก็เอามาคิดคะแนนอีกที

4. First CPU Idle คือ จะวัดเวลาที่ใช้ในเพจเพื่อดูว่าเวลาที่ตอบกลับมาที่ใช้น้อยที่สุดคือเท่าไหร่

5. Time to Interactive คือ วัดเมื่อเว็บเรานั้นโหลดเสร็จ และพร้อมที่จะให้ผู้ใช้สามารถใช้งานได้

6. Max Potential First Input Delay คือ วัดเมื่อผู้ใช้เริ่มใช้งานเว็บเป็นครั้งแรก เช่นคลิกปุ่ม แล้วมีการทำงานของ JavaScript จนถึงตอนที่เบราว์เซอร์ตอบสนองกลับมาได้

ลองเลื่อนมาดูคำแนะนำว่าควรแก้ไขอะไรบ้าง

ตัวอย่างเฉย ๆ นะฮะ

ซึ่งเป็นเรื่องที่ดีมากที่ Dev Tools ช่วยชีวิตเราโดยการบอกว่าเราควรที่จะไปปรับปรุงตรงไหนเพิ่มเติม จะเห็นได้ว่าสิ่งที่ควรทำเลยก็คือ

1️. Compress รูป ซึ่งจะย่อขนาดของรูปโดยใช้โปรแกรม ImageOptim

โปรแกรม ImageOptim

2. ทำ Lazyload เพื่อไม่ให้โหลดรูปทั้งหมดทีเดียว

cr. https://www.imperva.com/learn/performance/lazy-loading/

3. การใช้ preload เพื่อให้เบราว์เซอร์รู้ว่าโหลดสิ่งนั้นเก็บไว้ก่อน แบบนี้

<link rel="preload" href="/style.css" as="style" />

4️. การทำ Code Splitting โดยหลักการของมันคือการที่เราแบ่ง script ออกมาย่อย ไม่ได้รวมกันใน main.js ไฟล์เดียว ซึ่งถ้าหากใช้ Next.js สามารถทำ Code Splitting ได้โดยการใช้ next/dynamic

5. การลดขนาดของ JavaScript ซึ่งทำได้โดยการลบช่องว่างที่ไม่จำเป็น การปรับโค้ดให้สั้นลงแต่ยังทำงานได้เหมือนเดิม และการทำบีบอัดไฟล์ให้มีขนาดเล็กลง

6. การลบ CSS ที่ไม่ได้ใช้งานออก เพราะ เมื่อเบราว์เซอร์ทำงานมันโหลดทั้งหมดอยู่ดี จึงส่งผลให้เว็บของเราโหลดช้าลง

7. การลดขนาดของ CSS

ลดขนาดเป็น

สุดท้ายหลังจากที่ลองปรับมาแบบสุดความสามารถแล้วพบว่า

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

สำหรับคนที่พึ่งเริ่มทำก็อย่าพึ่งท้ออยากให้ทำดูก่อน อย่างตอนนี้ Landing Page บริษัทเรา ได้ 80 กว่าคะแนนแล้ว แต่.. พี่ CTO กลับมาอีกครั้งพร้อมบอกว่า

อาย.. ถ้าได้ 90 คะแนน พี่เลี้ยงชาบู

เราก็คงต้องทำต่อไป เพื่อให้เว็บบริษัทเร็วขึ้นหรอ?

เปล่า เพื่อ ชาบู.. (!ล้อเล่น)

แปะเพิ่มเติมสำหรับการดูว่าการการทำให้คะแนนเพิ่มขึ้นต้องทำไง

Performance audits