วิเคราะห์ประสิทธิภาพด้วย WebPageTest

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

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

เริ่มต้นใช้งาน WebPageTest

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

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

การตั้งค่าการทดสอบขั้นสูง

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

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

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

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

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

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

หน้าจอแรก

ในตัวอย่างนี้ เราใช้เว็บไซต์ของ Apple (apple.com) และทดสอบผ่านการเชื่อมต่อ 3G ที่รวดเร็วจากลอนดอน สหราชอาณาจักร ผลลัพธ์เริ่มต้นแสดงไว้ด้านล่าง:

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

กล่อง 1 – คะแนนความปลอดภัย

นี่เป็นคุณลักษณะล่าสุดที่จัดทำโดย WebPageTest ซึ่งเป็นการผสานรวมกับ Snyk และให้ข้อมูลเชิงลึกเกี่ยวกับความปลอดภัยของเว็บไซต์ หากคุณคลิกที่กล่องสี คุณจะเข้าสู่เว็บไซต์ synk.io ซึ่งมีการวิเคราะห์โดยละเอียดของเว็บไซต์ที่เป็นปัญหาจากมุมมองด้านความปลอดภัย สิ่งที่ควรทราบคือ HTTP Security Headers ที่มีการแลกเปลี่ยนระหว่างไคลเอนต์และเซิร์ฟเวอร์เพื่อกำหนดรายละเอียดความปลอดภัยของการสื่อสาร ที่สำคัญที่สุดคือ Strict-Transport-Security, Content-Security-Policy, X-Frame-Options

โฮสต์เว็บไซต์ของคุณด้วย Pressidium

รับประกันคืนเงิน 60 วัน

ดูแผนของเรา

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

กล่อง 2 – เวลาไบต์แรก

กล่องที่สองระบุ First Byte Time (หรือที่เรียกว่า Time to First Byte หรือ TTFB) นี่เป็นเวลาที่ใช้จนกว่าเซิร์ฟเวอร์จะตอบสนองด้วยไบต์แรกของข้อมูลกลับไปยังคำขอของไคลเอ็นต์ คุณควรตั้งเป้าไว้ที่ตัวเลขที่ต่ำกว่า 300 มิลลิวินาที ค่านี้เกี่ยวข้องกับเซิร์ฟเวอร์มากกว่าและไม่เกี่ยวข้องกับเวลาที่ใช้ในการแสดงผลไฟล์เว็บไซต์ของคุณ อาจได้รับผลกระทบจากเซิร์ฟเวอร์ DNS ที่ช้า หรือการแคชไม่เพียงพอ

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

First Byte Time คือผลรวมของค่าสามค่า: เวลาที่จำเป็นสำหรับการส่งคำขอ HTTP เวลาที่เซิร์ฟเวอร์จะประมวลผล และเวลาที่เซิร์ฟเวอร์ต้องการส่งไบต์แรกกลับไปยังไคลเอ็นต์ คุณสามารถดูรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้ได้โดยคลิกที่กล่อง:

อย่างที่เราเห็น เว็บไซต์ Apple ทำได้ไม่ดีนักในการทดสอบส่วนนี้โดยเฉพาะ

เมื่อทำการเชื่อมต่อนี้แล้ว ทรัพยากรจะเริ่มส่งได้ สาเหตุที่พบบ่อยที่สุดสำหรับ TTFB ที่ช้าคือปัญหาเครือข่าย การกำหนดค่าเว็บเซิร์ฟเวอร์ ปัญหาดิสก์ I/O ของเซิร์ฟเวอร์ที่เป็นไปได้ และปัญหา RAM

กล่องที่ 3 – Keep Alive

กล่อง 'Keep-alive Enabled' จะแสดงสถานะของส่วนหัว HTTP แบบ Keep-alive เมื่อเปิดใช้งานส่วนหัวนี้ ข้อมูลจะถูกถ่ายโอนโดยใช้การเชื่อมต่อเดียวกัน มิฉะนั้นจะต้องสร้างการเชื่อมต่อใหม่สำหรับทุกไฟล์ที่ต้องการถ่ายโอน Keep-alive ถูกเปิดใช้งานโดยค่าเริ่มต้นในกรณีส่วนใหญ่ และโดยทั่วไปคือการตั้งค่าฝั่งเซิร์ฟเวอร์ หากคุณต้องการเปิดใช้งานด้วยตนเอง คุณสามารถแก้ไขไฟล์ .htaccess และใส่โค้ดด้านล่าง

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

กล่อง 4 – การถ่ายโอนการบีบอัด

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

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

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

กล่อง 5 – บีบอัดรูปภาพ

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

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

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

กล่อง 6 – แคชเนื้อหาคงที่

หากคุณกดที่ช่อง 'แคชเนื้อหาสแตติก' คุณจะเข้าสู่ส่วนรายละเอียดที่เรียกว่า 'ใช้ประโยชน์จากการแคชเนื้อหาสแตติกของเบราว์เซอร์'

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

กล่องที่ 7 – การใช้ CDN . อย่างมีประสิทธิภาพ

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

หากคุณกำลังใช้ CDN WebPageTest จะดูว่าการทำงานนี้มีประสิทธิภาพเพียงใด

ผลการดำเนินงาน

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

ในผลลัพธ์ด้านประสิทธิภาพ เราสามารถเห็นภาพรวมที่สำคัญที่สุดสำหรับสิ่งต่างๆ เช่น First Byte Time, Speed ​​Index ซึ่งเป็นเวลาเฉลี่ยที่แสดงส่วนต่างๆ ที่มองเห็นได้ของหน้า, Cumulative Layout Shift (CLS) สำหรับวัดความเสถียรของภาพ, เวลาที่ใช้ จนกว่าเอกสารจะโหลดเต็มและมากขึ้น

วิวน้ำตก

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

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

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

มุมมองการเชื่อมต่อ

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

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

ขอรายละเอียด

สุดท้าย ด้านล่างมุมมองการเชื่อมต่อ คุณจะได้รับกระดานวิเคราะห์เพิ่มเติมอีก 2 บอร์ด – ขอรายละเอียดและขอส่วนหัว

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

บอร์ดส่วนหัวของคำขอ (ใช่ คุณเดา) รายการทรัพยากรคำขอพร้อมกับข้อมูลส่วนหัว คลิกที่แต่ละรายการเพื่อดูรายละเอียดทั้งหมด

บทสรุป

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