การทดสอบเวลาในการโหลดแบ็กเอนด์ของตัวสร้างออกซิเจน

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

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

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

วิชาทดสอบ

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

เว็บไซต์ทดสอบนี้โฮสต์บนเซิร์ฟเวอร์ DO Premium โดยเฉพาะ พร้อม RAM 2GB และการตั้งค่ามาตรฐาน จัดการโดย Cloudways ซึ่งเป็นโฮสต์ที่เราแนะนำสำหรับความเร็ว ค่าใช้จ่าย และการสนับสนุน ในขณะที่ทำการทดสอบ เราไม่ได้ทำการปรับความเร็วให้เหมาะสมเพิ่มเติมบนไซต์ การตั้งค่าเซิร์ฟเวอร์ไม่ถูกแตะต้องตั้งแต่หมุนอินสแตนซ์

อ่าน: แบ่งห้าตัวเลือกเซิร์ฟเวอร์ของ Cloudway สำหรับโฮสติ้ง WordPress

หมายเหตุด้านข้าง: นี่เป็นตัวเลือกเซิร์ฟเวอร์ที่ยอดเยี่ยมสำหรับการพัฒนาและไซต์ที่มีการเข้าชมต่ำ ซึ่งคุณสามารถปรับขนาดได้อย่างง่ายดายเมื่อเปิดตัว ใช้รหัส ISOTROPIC เพื่อรับส่วนลดบน Cloudways เมื่อสมัครใช้งาน และทดลองใช้งานฟรี 3 วัน (ไม่มี CC)

หน้าที่ทดสอบคือหน้าแรกของเว็บไซต์ ในขณะที่ทำการทดสอบดูเหมือนว่า:

องค์ประกอบหลักของหน้าที่โหลดคือองค์ประกอบเมนู Oxygen Builder แถบค้นหาแบบกำหนดเอง และตารางการโพสต์อย่างง่ายของโพสต์สาธิต (ส่วนแรก) องค์ประกอบ WSForm Oxygen และ OxyExtras carousal พร้อมตัวทำซ้ำภายใน ตัวทำซ้ำนี้มีโพสต์มากกว่าเก้ารายการและมีเงื่อนไขหลายสิบข้อตามฟิลด์ MetaBox

หน้านี้เป็นแบบสาธารณะเนื่องจาก DNS ย่อยของ deals.isotropic.co ถูกพร็อกซีผ่าน Cloudflare

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

ปลั๊กอินที่ใช้งานมีดังนี้:

*เราตรวจสอบปลั๊กอินที่เราใช้จริง ตามหลักฐานที่นี่ :)

สิ่งสำคัญคือต้องทราบว่าเราใช้ Oxygen Builder 3.9 Beta 2 เรายังได้ติดตั้งองค์ประกอบ WooCommerce แต่ WooCommerce เองไม่ได้อยู่ที่จุดนี้

ตามรายงานของนักพัฒนา Oxygen เวอร์ชันนี้โหลดบนแบ็กเอนด์ได้เร็วเป็นสองเท่าของเวอร์ชันก่อนหน้า

นอกจากนี้ ฉันต้องการทราบว่า OxyExtras, WPGridbuilder, OxyMade และ WSForm ทั้งหมดได้เพิ่มองค์ประกอบลงในแบ็กเอนด์ของตัวสร้าง Swiss Knife เครื่องมือสกิน/เวิร์กโฟลว์ และ Hydrogen Pack ก็โหลดลงในแบ็กเอนด์เช่นกัน

โดยพื้นฐานแล้ว หัวข้อทดสอบนี้เป็นหน้าที่หลายคนที่ใช้ Oxygen Builder มีประสบการณ์ในการโหลด มีส่วนเสริม ส่วนขยาย และสคริปต์หลายอย่างที่จะโหลดบนแบ็กเอนด์จากทั้งตัวสร้างและปลั๊กอินของบริษัทอื่น

สุดท้าย ต่อไปนี้คือข้อมูลคร่าวๆ เกี่ยวกับ WiFi ของฉัน:

การทดสอบนี้ดำเนินการอย่างไร

การทดสอบนี้ดำเนินการโดยการโหลด Oxygen Builder โดยตรง จากการคลิก "แก้ไขด้วย Oxygen" บนแบ็กเอนด์ของหน้า

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

โปรดทราบว่านี่ไม่ถูกต้องอย่างสมบูรณ์เนื่องจากฉันกำลังจับเวลาโดยใช้นาฬิกาจับเวลาของ iPhone แต่ควรให้ค่าประมาณที่ดีว่าอุปกรณ์และเบราว์เซอร์ใดที่โหลดปลั๊กอินนี้เร็วที่สุด นอกจากนี้ยังควรสังเกตด้วย - ก่อนหน้านี้มีการโหลดหน้าบนฟอนต์เอนด์ แต่ไม่เคยอยู่ในตัวสร้างแบ็กเอนด์ในฐานะผู้ ดูแลระบบ ฉันไปที่ตัวสร้างโดยโหลด deals.isotropic.co ไปที่แถบด้านบน คลิกหน้าแก้ไข จากนั้นคลิกปุ่มแก้ไขด้วยออกซิเจน

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

สุดท้ายนี้ ฉันได้รวมลิงก์ของ Amazon (บริษัทในเครือ) ไว้ด้วยในกรณีที่สิ่งนี้เป็นแรงบันดาลใจให้ทุกคนซื้อ

เวลาในการโหลดตัวสร้างออกซิเจนโดยเบราว์เซอร์

ขั้นแรก ให้ลองโหลดบนเบราว์เซอร์ทั้งหมดที่ติดตั้งบน Mac Mini M1 ของฉัน สถิติจะถูกปรับปรุงใหม่เมื่อทำการทดสอบตามอุปกรณ์ แต่นี่คือ Mac Mini รุ่นปี 2020 M1 ที่มีแรม 8GB รัน Big Sur V11.3.1 นี่คือ "เดสก์ท็อปรายวัน" ของฉัน

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

เราทดสอบ Safari V14.1, Chrome V95.0.4638.69 และ Firefox V94

• Firefox เข้ามาในเวลา 05.59 วินาที
• Chrome มาในเวลา 17.52 วินาที
• Safari มาในเวลา 6.20 วินาที

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

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

เราจะใช้เบราว์เซอร์นั้นสำหรับการทดสอบอุปกรณ์

เวลาในการโหลดตัวสร้างออกซิเจนโดยเบราว์เซอร์

สำหรับการทดสอบนี้ เราจะใช้อุปกรณ์ทั้งหมดบนเครือข่าย Wi-Fi เดียวกัน โดยใช้ Firefox รุ่นเดียวกัน โหลดหน้าเดิมเหมือนเมื่อก่อน ปัจจัยสร้างความแตกต่างคืออุปกรณ์และสถิติการทดสอบที่อยู่เบื้องหลัง นี่คือรายชื่อผู้เล่นตัวจริง

Mac Mini ปี 2020 (ทดสอบแล้ว)

• ชิป Apple M1
• แรม 16GB

โหลดออกซิเจนใน 05.59 วินาที

2019 XPS 13 9370

• อินเทล i7-8550U
• แรม 16GB

โหลดออกซิเจนใน 11.54 วินาที

2020 iPad Air 10.9in MYFT2LL/A

• ชิป Apple A14
• แรม 4GB

โหลดออกซิเจนใน 11.96 วินาที

อ่าน: คุณสามารถพัฒนาเว็บไซต์บน iPad Pro ได้หรือไม่?

2019 Dell Latitude 7400

• Intel i7 8655U
• แรม 16GB

โหลดออกซิเจนใน 16.19 วินาที

2020 Macbook Pro 13in

• Intel Core i5
• แรม 16GB
• กราฟิก Intel Iris Plus 645 1536 MB

โหลดออกซิเจนใน 9.66 วินาที

2021 Macbook Pro 16in

• ชิป Apple M1 Max
• แรม 64GB

โหลดออกซิเจนใน 5.43 วินาที

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

The Big Takeaways

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

ฉันแนะนำให้ใช้ตัวเลขเหล่านี้โดยพลการ แทนที่จะบอกว่า Oxygen จะโหลดให้คุณใน X.XX วินาที ให้ใช้ตัวเลขเพื่อเปรียบเทียบเบราว์เซอร์และอุปกรณ์

Takeaway 1: เรื่องเบราว์เซอร์

ตามที่ Facebook ระบุไว้อย่างสม่ำเสมอ Firefox เป็นเบราว์เซอร์ที่เร็วที่สุดในการโหลด Oxygen Builder โดยส่วนตัวแล้วฉันใช้รุ่นนักพัฒนา Firebox

Takeaway 2: เรื่องอุปกรณ์

อุปกรณ์ที่เร็วที่สุดสองเครื่องคืออุปกรณ์ Apple ใหม่ล่าสุดที่ใช้ Apple Silicone สิ่งนี้สมเหตุสมผล โปรเซสเซอร์เหล่านี้เร็วกว่าอย่างอื่นในตลาดมาก และไม่แพงขนาด นั้น M1 Mac Mini รุ่นพื้นฐานมีราคาต่ำกว่า $600 และ M1 Macbook Air ราคา $899

Takeaway 2B: ดูเหมือนว่าโปรเซสเซอร์มีความสำคัญมากกว่า RAM

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

ฉันคาดหวังว่าการพยายามโหลดตัวสร้างบน Chromebook หรืออุปกรณ์อื่นที่มีสถิติต่ำอาจเป็นเรื่องยาก

ความคิดสุดท้าย

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

ในฐานะนักพัฒนาเว็บที่ใช้ Oxygen สำหรับโครงการส่วนใหญ่ ความเร็วของตัวสร้างไม่เคยส่งผลกระทบต่อฉัน แต่ฉันต้องการพิจารณาอย่างจริงจังว่าการตั้งค่าที่ดีที่สุดสำหรับมันคืออะไร

หากคุณมีหมายเลขเปรียบเทียบของคุณเอง โปรดโพสต์ไว้ในส่วนความคิดเห็นด้านล่าง