DE{CODE}: 6 เคล็ดลับ WooCommerce Dev สำหรับการสร้างเว็บไซต์อีคอมเมิร์ซที่รวดเร็ว

ถัดจากการขาย ความเร็วไซต์อาจเป็นตัวชี้วัดที่สำคัญที่สุดสำหรับเว็บไซต์อีคอมเมิร์ซของคุณ ทำไม? เว็บไซต์อีคอมเมิร์ซที่รวดเร็วได้รับการเข้าชมมากขึ้น มีอัตราการแปลงที่สูงขึ้น อัตราตีกลับลดลง และสร้างผู้เข้าชมที่กลับมามากขึ้น ในเซสชันนี้ Jeremy Benoit ผู้จัดการผลิตภัณฑ์อาวุโสของ WP Engine และผู้จัดการฝ่ายวิศวกรรม Catherine Kelly จะสำรวจเคล็ดลับสำหรับนักพัฒนา คุณลักษณะของ WP Engine และเครื่องมืออื่นๆ เพื่อทำให้ร้านค้า WooCommerce ของคุณเร็วขึ้น

สไลด์เซสชัน

การถอดเสียงแบบเต็ม

JEREMY BENOIT : สวัสดีทุกคน ยินดีต้อนรับสู่ DE{CODE} 2022 นี่คือเส้นทางอีคอมเมิร์ซ ฉันชื่อ Jeremy Benoit ผู้จัดการผลิตภัณฑ์อาวุโสของ WP Engine และเรามาที่นี่เพื่อพูดคุยเกี่ยวกับเคล็ดลับ 6 ข้อในการปรับปรุงประสิทธิภาพของ WooCommerce เพื่อนร่วมงานของฉันจะมาร่วมงานกับฉันในวันนี้ แคทเธอรีน เคลลี่ มาเริ่มกันเลย

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

ความเร็วของหน้าคือเวลาของการโหลดหน้าเดียว และสามารถวัดได้หลายวิธี สองวิธีที่สำคัญ ได้แก่ Time To First Byte ซึ่งใช้โดย Google PageSpeed ​​Insights หรือ Time To Full Page Load หรือ Last Byte ซึ่งมักจะสะท้อนถึงประสบการณ์ของผู้ซื้อ ความเร็วของหน้าเว็บยังส่งผลต่ออัตราการแปลงในเว็บไซต์ช้อปปิ้งของคุณ และจะส่งผลต่อ SEO ของเว็บไซต์อีคอมเมิร์ซของคุณด้วย

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

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

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

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

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

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

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

จากนั้นคุณจะมีแคชของแอปพลิเคชัน และแคชของแอปพลิเคชันใน WordPress และ WooCommerce คุณสามารถใช้ปลั๊กอินสำหรับจัดการได้ ปลั๊กอินเช่น W3 Total Cache, WP Rocket ล้วนมีตัวเลือกสำหรับการจัดการแคชในแอปพลิเคชัน และปลั๊กอินเหล่านี้จะเก็บเวอร์ชันชั่วคราวของเพจและไฟล์ที่ร้องขอไว้บนเซิร์ฟเวอร์ สิ่งนี้สามารถเป็นได้ อย่างไรก็ตาม นี่อาจเป็นวิธีการแคชที่ไม่มีประสิทธิภาพมากนัก และไม่ควรใช้หากคุณมีความสามารถในการแคชบนเซิร์ฟเวอร์เองหรือในบริการ เช่น โดเมนเร่งความเร็วหรือ Cloudflare ซึ่งกระจายแคชไปทั่วโลก

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณต้องการใช้การบีบอัดภาพทั้งหมดของคุณ เพราะจะช่วยประหยัดแบนด์วิธได้มากถึง 40% และแน่นอนว่าการโหลดหน้าจอและรูปแบบไฟล์นั้นเป็นกุญแจสำคัญสำหรับภาพ ตัวอย่างเช่น เนื่องจากมีรูปภาพ 600 x 600 ใน JPEG เท่ากับ 100 กิโลไบต์ PNG คือ 216 ในขณะที่ WebP มีขนาดเพียง 56 กิโลไบต์ คุณจึงต้องระมัดระวังในการพิจารณาว่า ตกลง ฉันจะใช้รูปแบบไฟล์ใดสำหรับรูปภาพทั้งหมดที่กำลังจะแสดง โดยเฉพาะอย่างยิ่งจากไซต์อีคอมเมิร์ซ ฉันอาจมีผลิตภัณฑ์หลายพันรายการ รูปภาพนับพัน และวิดีโอหลายร้อยรายการเพื่อสำรองรูปภาพและเนื้อหาเหล่านั้นด้วย

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

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

สิ่งนี้ช่วยในเรื่อง SEO การเพิ่มประสิทธิภาพเครื่องมือค้นหา และตรวจสอบให้แน่ใจเสมอว่าป้ายกำกับของคุณสะท้อนถึงเนื้อหาของรูปภาพหรือวิดีโอของคุณจริงๆ ในฐานะนักพัฒนา บางครั้งเราสามารถใช้ตัวย่อเช่น RDHD หรือเพียงแค่ใช้ Y-band เรารู้ว่านั่นคือหมวกสีแดงที่มีแถบสีเหลือง แต่ SEO จะไม่รู้ ดังนั้นพยายามทำให้จริงหรือใช้ภาษามากขึ้นในแง่ของการนำเสนอภาพ

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

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

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

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

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

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

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

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

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

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

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

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

และตอนนี้ฉันก็ทำตามเคล็ดลับ 3 ข้อของฉันเกี่ยวกับคำแนะนำ คำแนะนำสำหรับ WooCommerce แล้ว และฉันจะกลับไปหา Jeremy เอาล่ะ เจเรมี ขอบคุณ

JEREMY BENOIT: อีกส่วนที่ต้องดูคือชิ้นส่วนรถเข็นของ AJAX ชิ้นส่วนรถเข็น AJAX เป็นรหัสที่ต้องการ เป็นที่ทราบกันดีว่าสร้างความล่าช้า ทำให้เซิร์ฟเวอร์พุ่งสูง และทำงานโดยไม่จำเป็น แต่ชิ้นส่วนของรถเข็น AJAX นั้นแย่ขนาดนั้นจริงหรือ?

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

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

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

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

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

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

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

ลองมาดูการปรับปรุงที่สาม ความเร็วของหัวขาด ดังนั้นเคล็ดลับนี้คือการใช้หัวขาด เพราะหัวขาด กองหัวขาด เพิ่มความเร็วตามลำดับความสำคัญ โค้ด JavaScript ที่ส่วนหน้าของโครงสร้างพื้นฐานแบบไร้ส่วนหัวของคุณจะเร็วขึ้นมากและเร็วกว่าโครงสร้างพื้นฐาน WordPress แบบเดิมถึง 10 เท่าในบางกรณี เรายังมีลูกค้าในโครงสร้างพื้นฐาน Atlas ของเราซึ่งเพิ่มขึ้นถึงหกเท่าในทุกเมตริกของ Lighthouse

และที่ WP Engine เรามีโครงสร้างพื้นฐานแบบไร้ส่วนหัวที่เรียกว่า Atlas โครงสร้างพื้นฐานนั้นอนุญาต– ยังมีส่วนประกอบที่เรียกว่าเอ็นจิ้นเนื้อหาของเรา ซึ่งเพิ่มความเร็วในการดึงเนื้อหาทุกประเภททั้งแบบคงที่และไดนามิกในอินสแตนซ์ WooCommerce ของคุณอย่างมาก โครงสร้างพื้นฐานแบบ Headless ยังช่วยให้คุณปรับแต่งการผสานรวมส่วนหลังและสร้างโอกาสในการเพิ่มประสิทธิภาพอย่างรวดเร็วด้วยแอปพลิเคชันของบุคคลที่สามที่ไซต์ WooCommerce ของคุณต้องผสานรวมด้วย และนั่นคือคำแนะนำสุดท้ายของฉันสำหรับวันนี้