เพื่อนของเราที่ WP Engine เพิ่งเปิดตัวโฮมเพจใหม่ที่สวยงามที่สร้างด้วย Beaver Builder เราแชร์ลิงก์ไปยังเพจในกลุ่ม Facebook ของ Beaver Builders และมีคนจำนวนหนึ่งตั้งข้อสังเกตว่าเวลาในการโหลดโดยรวมของเพจนั้นค่อนข้างสูง เพื่อนที่ดีของเราและนักพัฒนา WordPress ที่ยอดเยี่ยมอย่าง Jon Brown ได้เข้ามาช่วยเหลือพร้อมกับคำอธิบายที่ยอดเยี่ยม

การสนทนาบน Facebook

ฉันขอถอดความบทสนทนาที่นี่อย่างรวดเร็ว:

Beaver Builder ที่เป็นกังวล: ฉันทดสอบการโหลดหน้าเว็บด้วยเครื่องมือทดสอบ XYZ และใช้เวลาโหลดเกือบ 10 วินาที!

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

ฉันเห็นคนดูเกรดตัวอักษรและเวลาในการโหลดทั้งหมดบ่อยครั้งโดยไม่เข้าใจน้ำตก นั่นจะทำให้คุณหลงทางเว้นแต่ว่าคุณกำลังดูไซต์ที่เรียบง่าย...

เกรดเครื่องมือทดสอบเหล่านั้นหยาบมากและมองข้ามความเป็นจริงเชิงปฏิบัติหลายประการ พวกเขาจะบอกว่าให้หลีกเลี่ยงการเปลี่ยนเส้นทางเมื่อมีไว้สำหรับโฆษณา สคริปต์ติดตาม และสิ่งอื่นๆ ที่ต้องทำงานในลักษณะนั้น พวกเขามักจะเพิกเฉยต่อ HTTP/2 และแนะนำให้ลดคำขอและเชื่อมโยงเนื้อหาที่ไม่สำคัญและอาจสร้างความเสียหายได้... พวกเขาไม่ได้มุ่งเน้นไปที่ดัชนีความเร็วและการแสดงผลครึ่งหน้าบน...

การโหลดหน้าเว็บที่แท้จริงคือ <1.5 วินาที

มาเจาะลึกกันดีกว่า

ฉันถามจอนว่าเขาจะถามคำถามเพิ่มเติมเกี่ยวกับการแสดงหรือไม่ และเขาก็ตอบตกลงอย่างสง่างาม นี่คือคำถามของฉัน (ของ Robby) พร้อมคำตอบของ Jon

โอ้ ฉันเคยบอกไปหรือเปล่าว่า Jon เปิดร้านพัฒนาซอฟต์แวร์แบบกำหนดเองชื่อ 9seeds ดังนั้นเขาจึงพร้อมให้เช่าเพื่อช่วยคุณปรับแต่งประสิทธิภาพของเว็บไซต์ WordPress ของคุณ!

1. คุณพูดถึง “น้ำตก” คุณช่วยอธิบายเพิ่มเติมอีกหน่อยได้ไหมว่าน้ำตกคืออะไร?

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

บ่อยครั้งที่ฉันเห็นนักพัฒนาทั่วไปและมือใหม่มองไม่เห็นตัวอักษร มีหลายปัจจัยที่เกี่ยวข้องกับประสิทธิภาพของเว็บส่วนหน้า และสิ่งหนึ่งที่ต้องพิจารณาคือ “วอเตอร์ฟอล” ซึ่งเป็นเพียงกราฟที่แสดงคำขอ HTTP ทั้งหมด เมื่อคำขอเริ่มต้น และเมื่อดำเนินการเสร็จสิ้น ฉันใช้ WebPageTest.org เพื่อสร้างสิ่งเหล่านี้

“น้ำตก” เป็นที่ที่คุณ “เห็น” ว่าเนื้อหาใดใช้เวลาโหลดนานเกินไป และ/หรือขัดขวางไม่ให้โหลดสิ่งอื่นๆ

สุดท้ายนี้ โปรดทราบว่าตรง As อาจต้องใช้ตัวเลือกการออกแบบ (เช่น การถอดแถบเลื่อน) และการกำจัดทรัพย์สินของบุคคลที่สาม (เช่น Google Analytics, HotJar ฯลฯ) ซึ่งมีคุณค่าต่อเจ้าของไซต์มากกว่าการได้รับ A ไม่ใช่ทุกไซต์สามารถทำได้ ตรงไปเหมือนไม่มีความเสียสละอันเจ็บปวด

2. คุณแนะนำ WebPageTest เป็นเครื่องมือทดสอบที่คุณเลือก เหตุใดคุณถึงชอบมัน และมันแตกต่างจากเครื่องมืออย่าง Pingdom, GTmetrix (และ/หรือ Google Page Speed ​​อย่างไร)

โดยส่วนตัวแล้ว ฉันไม่เคยพบสิ่งใดที่ดีและยืดหยุ่นในการทำสิ่งเหล่านี้มากไปกว่า WebPageTest.org อย่างไรก็ตาม ฉันเคยใช้ GTMetrix, Pingdom, Google Page Speed ​​และอื่นๆ มาก่อนเช่นกัน และมันก็ไม่มีปัญหาอะไร ฟีเจอร์ใหม่บางตัวเช่น Lighthouse นั้นยอดเยี่ยมมากสำหรับโปรเกรสซีฟเว็บแอป (ไม่ใช่ 99% ของไซต์ WordPress) ฉันไม่ได้บอกคนอื่นให้เปลี่ยนเครื่องมืออย่างแน่นอน แต่ให้ใช้เครื่องมือที่คุณรู้จักและเข้าใจ หากคุณไม่รู้จักเครื่องมือใดๆ WPT เป็นเครื่องมือฟรีที่ยอดเยี่ยมสำหรับการเรียนรู้ แค่ทำเกินเกรดตัวอักษรและเริ่มทำความเข้าใจว่าอะไรเป็นสาเหตุของเกรดตัวอักษรเหล่านั้น

3. ในหมายเหตุของ “การลดคำขอและการเชื่อมโยงสินทรัพย์” นี่ไม่ใช่แนวทางปฏิบัติที่ดีที่สุดอีกต่อไปแล้วใช่หรือไม่ ทำไม

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

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

สิ่งสำคัญคือต้องจำไว้ว่าสิ่งนี้จะเกิดขึ้นก็ต่อเมื่อเว็บเซิร์ฟเวอร์ของคุณรองรับ HTTP/2 และจะเป็นไปได้ก็ต่อเมื่อเว็บไซต์ของคุณเป็น HTTPS

ดังที่กล่าวไปแล้ว เว็บไซต์ทั้งหมดที่เราทำงานในปัจจุบันคือ HTTPS และทำงานบนเซิร์ฟเวอร์ที่รองรับ HTTP/2 ดังนั้นฉันจึงมาถึงจุดที่ฉันไม่คิดจะเชื่อมโยงเนื้อหาอีกต่อไป และฉันไม่พลาดอย่างแน่นอน!

4. มี “ความเชื่อผิดๆ” หรือคำแนะนำด้านประสิทธิภาพที่ล้าสมัยอื่นๆ ที่คุณอยากจะแนะนำหรือไม่

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

5. คุณมีเครื่องมือ ประสิทธิภาพ เคล็ดลับ หรือลูกเล่นอื่นๆ ที่คุณอยากจะแนะนำให้กับใครบางคนหรือไม่?

เครื่องมือที่ฉันพึ่งพาตลอดหลายปีที่ผ่านมา:

• WebPageTest.org – รายการโปรดของฉัน!
• ImageOptim – แอปเดสก์ท็อปสำหรับบีบอัด JPG/PNG
• ImageAlpha – แอปเดสก์ท็อปสำหรับบีบอัด PNG (ส่วนใหญ่โดยการลดจำนวนสี)
• CloudFlare – ฟรีเป็น CDN ขนาดใหญ่ทั่วโลกและ WAF พื้นฐาน พร้อมคุณสมบัติระดับมืออาชีพแบบเสียเงินที่น่าประทับใจ เช่น การเพิ่มประสิทธิภาพภาพได้ทันที การเพิ่มประสิทธิภาพเส้นทาง และอื่นๆ อีกมากมาย

ปลั๊กอิน:

• WP Rocket – แม้แต่ใน WP Engine เราก็ใช้ WP Rocket มันก็ใช้งานได้
• Imagify.io – การเพิ่มประสิทธิภาพรูปภาพบน WordPress/Cloud
• BeaverBuilder – ฉันไม่ได้จ่ายเงินให้พูดแบบนี้! เราถูกเรียกให้ทำการตรวจสอบประสิทธิภาพในไซต์จำนวนมาก และมักจะพบปัญหาส่วนหน้าและส่วนหลังที่สำคัญกับผู้สร้างเพจยอดนิยมอื่นๆ ฉันจะไม่เรียกชื่อ แต่ไม่ใช่กับ Beaver Builder ซึ่งเป็นสาเหตุที่เราใช้มันบนไซต์ของเราเอง ดี!

ขอขอบคุณอีกครั้ง จอน ที่สละเวลาแนะนำเราเกี่ยวกับแนวทางการปฏิบัติงานที่ทันสมัยยิ่งขึ้น ฉันอยากจะส่งกำลังใจครั้งสุดท้ายให้กับเอเจนซี่ของจอน 9seeds หากคุณกำลังมองหาความช่วยเหลือเกี่ยวกับการพัฒนา WordPress แบบกำหนดเอง ตะโกนให้พวกเขาฟัง!

เกี่ยวกับ จอน บราวน์

คนพเนจร. นักพัฒนาเวิร์ดเพรส ช่างภาพ. ตับแห่งชีวิต