Skip to main content
Computer SystemProgramming Concept

5 วิธีปรับ Performance ของเว็บให้เร็วขึ้นเป็นเท่าตัว

Developer Team
BorntoDev Co., Ltd.

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

เริ่มจากเทคนิคเล็กๆ 

บางครั้งการกระทำตามความเคยชิน ก็ส่งผลต่อความเร็วของเว็ปอย่างคาดไม่ถึง เช่น 

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

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

จัดการกับรูปภาพก่อนใช้

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

ลองใช้ LazyLoad

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

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

https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html

อันไหนควรโหลดก่อนหรือหลังก็บอกได้

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

เราสามารถใช้ preload เพื่อบอก Browser ว่าควรจะโหลดอะไรก่อนอะไรหลังเพื่อช่วยให้เว็บของเรามีประสบการณ์ใช้ที่ดีได้

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

https://www.w3schools.com/tags/att_preload.asp

Import เท่าที่จำเป็น

ตอนที่สร้างหน้าเว็บขึ้นมานั้นเราไม่จำเป็นต้องเขียนโค้ดทุกตัวเพื่อให้มันแสดงผลอย่างที่เราต้องการ เราอาจไป import library บางตัวมาใช้ หรือ stylesheet มาช่วย แต่สิ่งที่เรา import มานั้นก็จำเป็นต้องโหลดตอนที่หน้าเว็ปจะแสดงผลเช่นกัน ซึ่งสิ่งที่เรา import มาบางครั้งก็ไม่ได้ทั้งหมด ดังนั้นควรที่จะเลือกสิ่งที่เราจะใช้ให้เหมาะสมและอันไหนที่ไม่ใช้ก็เอาออกบ้าง ก็จะสามารถช่วยเพิ่ม performance ของเว็บเราได้

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Developer

Author Developer

More posts by Developer

Leave a Reply

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า