6 เคล็ดลับสำหรับการพัฒนาเว็บไซต์ของคุณและทีมพัฒนาให้มีประสิทธิภาพมากขึ้น

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

1. กำหนดนิยามของคำว่า “ประสิทธิภาพ”

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

2. กำหนด Baseline ให้กับประสิทธิภาพของเว็บไซด์

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

3. Inline critical CSS

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

4. สร้างความสมดุลระหว่างความสวยงามและความเร็ว

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

5. จำกัด Frame rate ของเว็บไซต์

            Frame rate ที่เหมาะสมไม่ควรมีค่าเกิน 60 fps ซึ่งเทคนิคที่ใช้ frame rate เป็นส่วนใหญ่ได้แก่ JavaScript JQuery หรือ Effect ลูกเล่นต่างๆ ซึ่งเทคนิคเหล่าล้วนแล้วแต่ใช้ทรัพยากรเป็นจำนวนมาก หากเรามีการทดสอบเว็บไซต์ ไม่ควรให้มีค่าการแสดงผลของข้อมูลเกิน 60 fps

6. การพัฒนาเว็บเป็นหน้าที่ของทุกคนในทีมพัฒนา

            ส่วนนี้เป็นส่วนที่สำคัญที่สุดในการพัฒนา เพราะทุกปัญหาที่เกิดขึ้นล้วนเป็นของทุกในทีมที่ต้องทำการแก้ไขปัญหา ไม่ใช่คนใดคนหนึ่ง รวมถึงการจะทำให้เว็บมีประสิทธิภาพ ซึ่งจะทำให้เกิดประสิทธิภาพได้นั้น ทุกคนในทีมต้องเข้าใจร่วมกัน เพื่อให้เป็นไปในแนวทางเดียวกัน ซึ่งถือว่าเป็นเรื่องพื้นฐานของการพัฒนา

แหล่งข้อมูลอ้างอิง: 7 expert tips for nailing web performance