07Nov, 2023
Language blog :
Thai
Share blog : 
07 November, 2023
Thai

Performance Metrics: Speed and Load Time Essentials

By

2 mins read
Performance Metrics: Speed and Load Time Essentials

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

 

Loading Time มีความสำคัญอย่างไร

1. มีผลต่อการจัดอันดับของเครื่องมือค้นหา (Search Engine Ranking) : เว็บไซต์ที่มี Loading Time น้อย จะถูกนำมาแสดงผลเป็นอันดับต้น ๆ ในผลลัพธ์ของการค้นหา

2. ส่งผลต่อความสนใจในการใช้งานเว็บไซต์ : เว็บไซต์ที่มี Loading Time นาน จะทำให้ผู้ใช้รู้สึกไม่อยากใช้งานเว็บไซต์และอาจไม่กลับมาใช้งานเว็บไซต์อีก

3. โอกาสที่ผู้ใช้งานจะออกจากเว็บไซต์ (Bounce Rate) : เว็บที่ไซต์ที่มี Loading Time นาน จะมีโอกาสสูงที่ผู้ใช้งานจะออกจากหน้าเว็บไซต์ก่อนที่หน้าเว็บจะแสดงผลสมบูรณ์ เพื่อไปค้นหาเว็บไซต์อื่นที่แสดงผลได้รวดเร็วกว่า

 

ปัจจัยที่ใช้วัดผล Loading Time ของเว็บไซต์

1. First Contentful Paint (FCP): เป็นการวัดเวลาที่หน้าเว็บเริ่มโหลดจนถึงเวลาที่เนื้อหาส่วนแรก (ข้อความ รูปภาพ หรือ Canvas Element ในหน้าเว็บ) เริ่มแสดงบนหน้าจอ โดยเวลาที่ใช้ของ FCP ที่แนะนำคือ ไม่เกิน 1.8 วินาที เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีในการใช้งานเว็บไซต์

loading time

รูปภาพแสดงลำดับการโหลดข้อมูลของหน้าเว็บ โดย FCP จะเกิดขึ้นในรูปที่ 2 ซึ่งข้อความหรือรูปภาพส่วนแรก ที่เริ่มแสดงบนหน้าจอ (ภาพจาก: https://web.dev/fcp/ )

2. Largest Contentful Paint (LCP): การวัดเวลาที่ใช้ในการแสดงข้อมูลเนื้อหาที่ใหญ่ที่สุด (เช่น รูปภาพหรือข้อความ) ที่แสดงบนหน้าจอ เมื่อเทียบกับเวลาที่หน้าเว็บเริ่มโหลดครั้งแรก ซึ่งอาจกล่าวได้ว่าเป็นเวลาที่ใช้ในการแสดงเนื้อหาหลักให้ผู้ใช้งานเห็น โดยเวลาที่ใช้ของ LCP ที่แนะนำคือ ไม่เกิน 2.5 วินาที เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีในการใช้งานเว็บไซต์

3. Total Page Load Time: เวลาทั้งหมดที่หน้าเว็บใช้ในการโหลดข้อมูลหรือทรัพยากรต่าง ๆ (HTML, CSS,  Javascript, รูปภาพ และข้อมูลอื่น ๆ จากภายนอก) จนหน้าเว็บแสดงผลสมบูรณ์ โดยเวลาที่ใช้ไม่ควรเกิน 3 วินาที แต่ทั้งนี้เวลาที่ใช้ในการโหลดทั้งหน้าเว็บนี้อาจเปลี่ยนแปลงได้ โดยขึ้นอยู่กับลักษณะของเว็บไซต์ เนื้อหาที่แสดง และความคาดหวังของกลุ่มเป้าหมายผู้ใช้งาน

 

แนวทางในการปรับปรุง Loading Time ของเว็บไซต์

Image Optimization: บีบอัดและลดขนาดรูปภาพให้ขนาดไฟล์ไม่ใหญ่จนเกินไป เพื่อลดเวลาในการโหลด รวมถึงอาจมีการทำ Lazy Loading หรือ Caching รูปภาพเพื่อให้มีการโหลดรูปภาพเท่าที่จำเป็น

Optimize and Minify Resources: ลดขนาดของไฟล์ Resource ต่าง ๆ เพื่อให้ใช้เวลาในการโหลดข้อมูลน้อยลง โดยการลบตัวอักษร ช่องว่าง และ Comment บางส่วนที่ไม่จำเป็นออก

Minimize HTTP Requests: ลดจำนวน HTTP Request ลง โดยให้เรียกใช้เท่าที่จำเป็น และหลีกเลี่ยงการเรียกใช้ข้อมูลจากภายนอกที่มากเกินจำเป็น

Optimize Hosting: เลือกใช้บริการ Hosting ที่มีเวลาการตอบสนองจาก Server ที่รวดเร็วที่สุด และมีทรัพยากรเพียงพอในการจัดการเกี่ยวกับ Website Traffic

 

แหล่งอ้างอิง

 

Written by
Fah
Fah

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

02
March, 2024
JS class syntax
2 March, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
02
March, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
2 March, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
02
March, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
2 March, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.