Skip to content

ปรับแต่ง Web user interface ให้แสดงผลเร็วขึ้น

ออกตัวไว้ก่อนว่าผมเองก็ไม่ได้มีความเชี่ยวชาญเกี่ยวกับ Web UI ขั้นเทพแต่ก็มีโอกาสได้ทำงานด้านนี้มาบ้างพอสมควร พูดถึง Web UI หลายคนอาจจะคิดถึงการ design แต่นั่นไม่ใช่ทั้งหมดของ UI นะครับสิ่งที่ผมจะพูดคือฝั่ง coding ซึ่งประกอบด้วย HTML/CSS/Javascript ครับ

ขอเขียนไว้เป็นหัวข้อแบบไม่ได้เรียงลำดับความสำคัญก่อนหลังเท่าที่นึกออกแล้วกัน

ใส่ใจกับการออกแบบ HTML

คนทำ UI หลายคนมัก focus ที่ส่วนอื่นและมองข้ามส่วนนี้ไป ความจริงเรื่องนี้เป็นเรื่องพื้นฐานที่สำคัญมาก จะเขียน CSS หรือ Javascript ง่ายหรือยากก็เริ่มจากตรงนี้ ถ้าออกแบบ HTML ไม่ดี โครงสร้างซับซ้อนเกินไปจะทำให้เขียน CSS มากขึ้นและเวลาเขียน Javascript เพื่อทำงานบางอย่างเช่น DOM selector ก็จะเขียนยากขึ้นด้วย

แล้วเราจะรู้ได้ยังไงว่าเราออกแบบ HTML ไม่มี? ส่วนตัวผมเองใช้วิธีสังเกตดังนี้ครับ

  • ต้องเพิ่ม id เพื่ออ้างอิง element ใดๆ เยอะๆ
  • ต้องเขียน DOM selector ยาวๆ เพราะ element ซ้อนกันหลายชั้น
  • re-use code ยาก element ที่ทำงานเหมือนกันแต่ต้องเขียนแยกกันเพื่อใช้งานเฉพาะ

ใช้ CSS เท่าที่จำเป็น

ข้อความเต็ม ๆ ที่ต้องการสื่อคือ “เท่าที่จำเป็นและเป็นไปได้” เช่น ลดการใช้รูปถ้า CSS สามารถแทนได้แต่ก็อย่าใช้ท่ายากจนต้องเขียน CSS มากเกินไป เช่น การทำ gradient background ด้วย CSS ให้รองรับหลายเบราว์เซอร์บางทีก็ต้องเขียน CSS เพิ่มเพื่อ hack ให้ใช้ได้เฉพาะเบราว์เซอร์บางตัว ซึ่งบางทีการใช้รูปภาพที่มีขนาดเล็กสั่ง repeat ตามแนวแกน x หรือ y ก็ทำงานได้เร็วกว่า ลดโค้ดที่ไม่จำเป็นลงไปได้เยอะกว่า

เขียน Javascript ให้ทำงานแบบ Asynchronous

Javascript มีคุณสมบัติการทำงานแบบ Async อยู่แล้วถ้าการทำงานไม่มี data dependency ก็ควรเขียนให้ทำงานแบบ async โปรแกรมจะทำงานแยกกันพร้อมกันซึ่งช่วยให้ render หน้าเว็บเร็วขึ้นเพราะไม่ต้องรอคำสั่งก่อนหน้าก่อนเริ่มทำงาน

ใช้ Template engine/Render engine

ถ้าเป็นไปได้ควรใช้ Template engine ในการ render ซึ่งทำได้ทั้งฝั่ง server/client ข้อดีของการใช้ lib พวกนี้ช่วยคือไม่ต้องต่อ string ยาวๆ เพื่อต่อโค้ด HTML เพื่อใช้ในการแสดงผล การต่อ string ด้วย overhead มากกว่าอาจทำให้ render ช้าลงและโค้ดอ่านยากขึ้นด้วย

โหลดไฟล์ให้น้อยที่สุด

ไฟล์ CSS/Javascript บางไฟล์ไม่ได้ใช้ในหน้าเว็บทุกหน้าถ้าสามารถเขียนเช็ก url กำหนดเงื่อนไขเลือกใช้งานได้ก็ควรทำเพื่อลดการ request ไฟล์ไปที่ server และเบราว์เซอร์ก็ไม่ต้องอ่านไฟล์ที่ต้องใช้งานตอนหน้าเว็บถูกโหลด

ไฟล์รูปต่างๆ ใช้ให้น้อยที่สุดเท่าที่จะเป็นไปได้

ใช้คุณภาพของรูปให้เหมาะสมกับการทำเว็บ

เวลาทำเว็บหลายคนจัดเต็มใช้รูปความละเอียดสูง ไฟล์ใหญ่ในการทำภาพประกอบเว็บ บางทีก็เลือกใช้ format รูปไม่เหมาะสมกับการทำเว็บ ก่อนอื่นต้องเข้าใจก่อนว่างานเว็บไม่ใช่การโชว์แค่ความสวยงามของรูปภาพเพียงอย่างเดียว สำคัญที่เนื้อหาและประโยชน์ใช้สอยในเว็บ รูปประกอบเว็บควรใช้ความละเอียดเพียงแค่พอสวยงามก็พอโดยการ resize ลงจากรูปต้นฉบับไม่ใช่การย่อโดย attribute width และ height ของแท็ก <img> ถ้าต้องการแสดงรูปความละเอียดสูงจริงๆ ให้ทำลิงก์ให้ผู้ใช้คลิกไปดูเอง

ถ้ามีข้อมูลเยอะให้ทำแบ่งหน้า

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

ลดการใช้งาน Social API, plug-in ที่ไม่จำเป็นลง

การเพิ่มปุ่ม share, like หรือ tweet ทำให้การ share content ของเราให้เป็นที่รู้จักแต่การใส่ Social plug-in หรือเรียกใช้งาน Social API มากเกินไปก็เป็นสาเหตุทำให้เว็บโหลดช้าลงเพราะมีการเรียก url ออกไปข้างนอกซึ่งช้ากว่าการเรียกข้อมูลที่อยู่ในเว็บเดียวกัน  การพิจารณาเลือกใช้ให้พิจารณากลุ่มเป้าหมายของเว็บเราว่าส่วนมากนิยมใช้ Social media อะไรแล้วเลือกเฉพาะ social media นั้นมาใช้งาน

ทำ cache ที่ฝั่ง server

ข้อมูลที่ไม่มีมีการเปลี่ยนหรือนานๆ เปลี่ยนทีควรทำ cache ไว้จะได้โหลดเร็วขึ้น UI ตอบสนองผู้ใช้ดีขึ้นเพราะไม่ต้องรอนาน กรณีที่ข้อมูล query จาก database การทำ cache จะช่วยลดการใช้งานฐานข้อมูลลง

ถ้าเป็นไปได้ render จากฝั่ง server

การพัฒนาตามแนวทาง MVC ที่มีการแยกการทำงานส่วน model กับ view จากกันชัดเจนดีสำหรับการ develop แต่บางทีก็ทำให้ performance ลด (เหมือนการทำ normalize database มากเกินไปนั่นแหละ) view บางส่วนที่เราสามารถ render มาจากฝั่ง server เลยก็ได้ก็ควรทำเพราะนำไปแสดงผลได้เลยไม่ต้อง  render ฝั่ง client อีก

CSS เอาไว้ข้างบน Javascript เอาไว้ข้างล่าง

ส่วนที่ผู้ใช้จะได้เห็นก่อนเวลาเรียกดูเว็บคือรูปร่างหน้าตา ฉะนั้นควรแสดงผล CSS ก่อน Javascript สามารถทำงานได้แม้จะไม่ได้อยู่ในแท็ก <head>  ฉะนั้นเอามันไปไว้ท้ายๆ ไฟล์ก่อนผิดแท็ก <body> ก็ได้

 

ที่ผมเล่ามาเป็นแนวทางเบื้องต้นเท่านั้นอาจมีปัจจัยและแง่มุมอื่นที่ไม่ได้เล่า ถ้ามีข้อแนะนำสนใจ discuss กันก็ยินดีครับ comment ข้างล่างได้เลย

Be First to Comment

Leave a Reply

Your email address will not be published.