Elementor จัดลำดับความสำคัญและปรับปรุงประสิทธิภาพของเว็บไซต์อย่างไร

เผยแพร่แล้ว: 2021-04-26

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

ประสิทธิภาพของเว็บไซต์เป็นปัญหาสำหรับผู้สร้างเว็บตั้งแต่เริ่มต้นอินเทอร์เน็ต ในฐานะผู้สร้างเว็บ ฉันมักจะถามคำถามเช่น:

  • “เว็บไซต์ของฉันช้าเกินไปหรือไม่? มันทำให้ผู้ใช้ลาออกหรือทำลายอันดับ Google ของฉันหรือเปล่า”
  • “ฉันควรเลิกใช้ฟังก์ชันบางอย่างเพื่อปรับปรุงความเร็วของไซต์หรือไม่”
  • และแน่นอน: “อะไรที่ทำให้ฉันยังมีปัญหาด้านประสิทธิภาพอยู่? ฉันคิดว่าฉันครอบคลุมฐานทั้งหมดที่นี่!”

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

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

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

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

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

สารบัญ

  • แผนห้าแนวทางของเราในการปรับปรุงประสิทธิภาพเพิ่มเติม
  • แทร็ก 1: "โหลดเฉพาะสิ่งที่คุณต้องการ"
  • แนวทางที่ 2: ลดการใช้ไลบรารี JavaScript/CSS และใช้ประโยชน์จากการสนับสนุนเบราว์เซอร์ดั้งเดิม
  • ติดตาม 3: ปรับปรุงและเพิ่มประสิทธิภาพ JavaScript ภายในที่มีอยู่และ CSS ​
  • แทร็ก 4: ปรับกระบวนการแบ็กเอนด์และการแสดงผลให้เหมาะสม
  • แทร็กที่ 5: ผลลัพธ์โค้ดที่ได้รับการปรับปรุง เพรียวบาง และดีขึ้น
  • ทรัพยากร Elementor ฟรีเกี่ยวกับประสิทธิภาพ ​

แผนห้าแนวทางของเราในการปรับปรุงประสิทธิภาพเพิ่มเติม

elementor-performance-1

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

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

ตอนนี้เรามาทบทวนเพลงของเราทีละคน:

แทร็ก 1: "โหลดเฉพาะสิ่งที่คุณต้องการ"

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

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

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

แนวทางที่ 2: ลดการใช้ไลบรารี JavaScript/CSS และใช้ประโยชน์จากการสนับสนุนเบราว์เซอร์ดั้งเดิม

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

ตัวอย่างหนึ่งของสิ่งนี้คือไลบรารี Waypoints ซึ่งในบางกรณี ถูกแทนที่ด้วย Intersection Observer API ดั้งเดิม

เรามุ่งหวังที่จะลดการใช้ไลบรารี CSS และ JavaScript ประเภทนี้ และแทนที่ด้วยการสนับสนุนเบราว์เซอร์ดั้งเดิมในทุกที่ที่ทำได้

ติดตาม 3: ปรับปรุงและเพิ่มประสิทธิภาพ JavaScript ภายในที่มีอยู่และ CSS

เราวางแผนที่จะดำเนินการปรับปรุงและเพิ่มประสิทธิภาพ JavaScript และ CSS ภายในที่มีอยู่ของ Elementor ต่อไป

ตัวอย่าง ได้แก่ ความสามารถในการกำหนดค่าวิธีการโหลด Google Fonts และคุณสมบัติการแสดงแบบอักษรที่เพิ่มลงในไลบรารี Font Awesome การปรับปรุงเหล่านี้ควรลดกระบวนการบล็อกการแสดงผลสำหรับไฟล์เหล่านี้ และให้การเพิ่มประสิทธิภาพเพิ่มเติมของไฟล์ CSS และ JS ที่มีอยู่

แทร็ก 4: เพิ่มประสิทธิภาพแบ็กเอนด์และกระบวนการแสดงผล

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

แทร็กที่ 5: ผลลัพธ์โค้ดที่ได้รับการปรับปรุง เพรียวบาง และดีขึ้น

สุดท้าย เราวางแผนที่จะปรับปรุงและลดขนาดเอาต์พุตของโค้ดที่ Elementor สร้างขึ้นเพื่อลดขนาดของ DOM

เราได้เริ่มทำการปรับปรุงเหล่านี้ใน Elementor 3.0 แล้ว โดยเราได้นำองค์ประกอบ wrapper สามองค์ประกอบออกเพื่อสร้าง DOM ที่เล็กลงและทำให้เอาต์พุตโค้ดง่ายขึ้น

ใน Elementor 3.2 เราลบองค์ประกอบเพิ่มเติมอีกสององค์ประกอบเพื่อลดขนาดของ DOM ให้มากขึ้น มีการวางแผนการลดลงเพิ่มเติมในอนาคตอันใกล้นี้

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

ทรัพยากร Elementor ฟรีเกี่ยวกับประสิทธิภาพ

elementor-performance-2

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

  • เราได้สร้าง หลักสูตรวิดีโอเกี่ยวกับประสิทธิภาพ – ใน ซีรีส์ห้าตอน นี้ เราจะพูดถึงทุกปัจจัยสำคัญที่อาจส่งผลต่อประสิทธิภาพของคุณ และวิธีที่คุณสามารถเพิ่มประสิทธิภาพได้
  • ในวันที่ 28 เมษายน เราจะจัด สัมมนาผ่านเว็บเกี่ยวกับ Core Web Vitals กับผู้เชี่ยวชาญ SEO ชั้นนำเพื่อหารือเกี่ยวกับการเปลี่ยนแปลงอัลกอริทึมของ Google ที่กำลังจะเกิดขึ้นและผลกระทบที่มีต่อเว็บไซต์ของคุณ บันทึกที่นั่งของคุณที่นี่
  • นอกจากนี้เรายังได้เผยแพร่บล็อกโพสต์โดยละเอียดเกี่ยวกับวิธีเพิ่มความเร็วให้กับเว็บไซต์ WordPress พร้อมกับบทความอื่นๆ ที่เน้นด้านประสิทธิภาพในหัวข้อต่างๆ เช่น การเลือกเว็บโฮสติ้ง ปลั๊กอินสำหรับแคช การทดสอบความเร็วที่ใช้ WP Rocket และอื่นๆ

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