เทคนิคใหม่ในการปรับปรุงความเร็วเว็บไซต์ WordPress: วิธีง่ายๆ ที่ได้ผลสำหรับทุกคน
เผยแพร่แล้ว: 2022-02-12
คุณมีเว็บไซต์ WordPress หรือไม่? คุณประสบปัญหาเกี่ยวกับประสิทธิภาพความเร็วต่ำของเว็บไซต์ WordPress หรือไม่? คุณต้องการเพิ่มความเร็วเว็บไซต์ของคุณหรือไม่? “วิธีเพิ่มความเร็วไซต์ WordPress ของคุณ”?
โพสต์นี้จะช่วยคุณได้มากในการปรับปรุงประสิทธิภาพความเร็วเว็บไซต์ WordPress ของคุณ มาเริ่มกันเลย…
เกณฑ์ที่สำคัญที่สุดที่กำหนดประสบการณ์ผู้ใช้ที่ยอดเยี่ยมคือความเร็วในการโหลดหน้าเว็บที่รวดเร็ว
หน้าที่โหลดเร็วจะปรับปรุงนำไปสู่การดูหน้าเว็บที่เพิ่มขึ้น และช่วยให้คุณมีอันดับในเครื่องมือค้นหา
ดังนั้น คุณจึงเหลือเวลาเพียงเล็กน้อยในการแสดงเนื้อหาเว็บของคุณต่อผู้ใช้/ผู้เยี่ยมชม และเก็บรักษาไว้บนไซต์ของคุณ
เว็บไซต์ที่เฉื่อยมักทำให้ผู้เยี่ยมชมออกไปโดยที่ยังไม่ได้โหลดเลย
ผู้ใช้ออนไลน์มักจะรีบร้อนและต้องการผลลัพธ์ที่รวดเร็ว พวกเขามักจะหมดความสนใจในการท่องเว็บไซต์หากใช้เวลาในการโหลดนานขึ้น
ผู้เข้าชมอุปกรณ์เคลื่อนที่ประมาณ 53% ออกจากไซต์ที่ใช้เวลานานกว่าสามวินาที
จากการวิจัยของ StrangeLoop ที่เกี่ยวข้องกับบริษัทขนาดใหญ่ เช่น Google, Amazon และบริษัทยักษ์ใหญ่อื่นๆ พบว่ามีการสูญเสีย Conversion 7% จากการโหลดหน้าเว็บทุกวินาทีที่ล่าช้า
นอกจากนั้น การลดลง 11% ยังเป็นการบันทึกในการดูหน้าเว็บ และความพึงพอใจของลูกค้าโดยรวมลดลง 16%
เป็นที่ทราบกันดีอยู่แล้วว่า Google และเครื่องมือค้นหาอื่นๆ ได้เริ่มผลักเว็บไซต์ลงในผลการค้นหาที่ใช้เวลาโหลดนานมาก ส่งผลกระทบต่อการสร้างปริมาณการใช้งานเว็บไซต์ WordPress ที่ซบเซา
ดังนั้น การเพิ่มความเร็วให้กับเว็บไซต์ WordPress ของคุณจึงมีความสำคัญสูงสุด หากคุณจำเป็นต้องได้รับการเข้าชม ผู้ใช้ สมาชิก และรายได้จากเว็บไซต์ของคุณมากขึ้น
บทความนี้จะให้รายละเอียดที่จำเป็นทั้งหมดที่คุณจำเป็นต้องรู้เกี่ยวกับความเร็วของหน้า เว็บไซต์ที่ช้า และสิ่งที่ต้องทำเพื่อเอาชนะปัญหาที่เกี่ยวข้องทั้งหมด
ในการเริ่มต้น ก่อนอื่นคุณต้องรู้ว่าอะไรเป็นสาเหตุของการโหลดช้าหรือเวลาตอบสนองที่ไม่ดีของเว็บไซต์ WordPress ของคุณ และขั้นตอนที่คุณต้องดำเนินการเพื่อเร่งประสิทธิภาพเว็บไซต์ WordPress ของคุณ
วิธีนี้จะช่วยให้คุณพิจารณาขั้นตอนที่ถูกต้องเพื่อแก้ไขปัญหาและช่วยปรับปรุงความเร็วเว็บไซต์ WordPress ของคุณ
การทดสอบประสิทธิภาพของเว็บไซต์ WordPress ผ่านพารามิเตอร์ประสบการณ์หน้าเว็บช่วยในการเลือกสิ่งที่ควรเลือกเป็นศูนย์เพื่อให้มีการปรับปรุงความเร็ว
การลดขนาดโค้ด การเพิ่มประสิทธิภาพวิดีโอหรือรูปภาพ และการอัปเกรดโฮสติ้งเซิร์ฟเวอร์เป็นปัจจัยหลักบางประการที่เราอาจต้องพิจารณาในขณะที่มองหาการปรับปรุงความเร็วเว็บไซต์ WordPress
คุณควรดำเนินการตรวจสอบเว็บไซต์เป็นประจำเพื่อหลีกเลี่ยงการบล็อกความเร็วและเพื่อรักษาผู้ใช้ให้สำรวจเนื้อหาบนเว็บไซต์ของคุณ
อ่านเพิ่มเติมเพื่อดูว่าหน้าเว็บโหลดอย่างไรและทำไมความเร็วช้าเป็นฝันร้าย!
เคล็ดลับยอดนิยมสำหรับการปรับปรุงความเร็วเว็บไซต์ WordPress ให้สำเร็จ
ค้นหาปัจจัยที่มีบทบาทสำคัญในการทำให้ไซต์ WordPress ของคุณช้าลง และขั้นตอนที่คุณต้องดำเนินการเพื่อเพิ่มความเร็วไซต์ WordPress ของคุณอย่างรวดเร็ว
สารบัญ
- ความเร็วในการโหลดหน้าเว็บของเว็บไซต์ WordPress เป็นอย่างไร?
- คุณสามารถทำอะไรเกี่ยวกับความเร็วของเว็บไซต์ WordPress!?
- PSI สามารถช่วยปรับปรุงความเร็วเว็บไซต์ WordPress ได้อย่างไร?
- ระบายสีเนื้อหาที่ใหญ่ที่สุด
- ต่อไปนี้เป็นปัจจัยที่ส่งผลกระทบต่อ LCP
- ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID)
- Cumulative Layout Shift (CLS) คืออะไร?
- จะปรับปรุง CLS ได้อย่างไร?
- การเพิ่มประสิทธิภาพรูปภาพและวิดีโอ
- เพิ่มประสิทธิภาพการโฮสต์เซิร์ฟเวอร์
- ฮาร์ดแวร์และการเชื่อมต่อเครือข่ายของผู้ใช้
- บริการโฮสติ้ง
- ข้อดีของการแคช
- อย่าใช้การเปลี่ยนเส้นทางจำนวนมาก
- การตรวจสอบปลั๊กอิน
- ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)
- บทสรุป
ค้นหาวิธีที่รวดเร็วในการเพิ่มความเร็วเว็บไซต์ WordPress
ความเร็วในการโหลดหน้าเว็บของเว็บไซต์ WordPress ทำงานอย่างไร
เราต้องคำนึงถึงปัจจัยที่ส่งผลต่อการโหลดเนื้อหาบนหน้าเว็บ การโหลดความเร็วเว็บไซต์ WordPress และการวัดประสิทธิภาพของเว็บไซต์
คุณสามารถทำอะไรเกี่ยวกับความเร็วของเว็บไซต์ WordPress!
สิ่งที่เราเห็นว่าเกิดขึ้นภายในไม่กี่วินาทีหลังจากเข้าชมเว็บไซต์ แท้จริงแล้วเป็นกระบวนการทางเทคนิคที่ซับซ้อนและหลายระดับ ลองดูสิ่งเหล่านั้น:
- คำขอเซิร์ฟเวอร์: การย้ายครั้งแรกคือคำขอไปยังเซิร์ฟเวอร์ที่ดำเนินการเมื่อพิมพ์ URL หรือคลิกที่ลิงก์
- การตอบสนอง HTML: เมื่อได้รับคำขอ เซิร์ฟเวอร์จะประมวลผลเพื่อส่งการตอบสนอง HTML ไปยังเบราว์เซอร์ของผู้ใช้
- การแสดงผลหน้า : Document Object Model ของเพจที่สร้างจากออบเจกต์ HTML (DOM tree) ถูกสร้างโดยเบราว์เซอร์พร้อมกับแอตทริบิวต์ CSS เพื่อแสดงผลหน้าเว็บ
- เลย์เอาต์ : เบราว์เซอร์จะกำหนดกระบวนการเลย์เอาต์ของหน้าเว็บเพิ่มเติม การจัดวางองค์ประกอบและรูปแบบ การลงสีในตำแหน่งที่ถูกต้องบนหน้าเว็บ
วิธีที่ผู้ใช้โต้ตอบกับหน้าเว็บหนึ่งๆ ขึ้นอยู่กับสัญญาณประสบการณ์การใช้งานเพจที่แตกต่างกัน
สัญญาณประสบการณ์หน้าต่อไปนี้มีความสำคัญในการพิจารณาประสบการณ์ของผู้ใช้ ซึ่งช่วยปรับปรุงความเร็วเว็บไซต์ WordPress:
ผม. Core Web Vitals : มีปัจจัยสำคัญบางประการในตัววัดเว็บที่มีอิทธิพลอย่างมากต่อการโต้ตอบของผู้ใช้บนหน้าเว็บ ประสิทธิภาพการโหลดหน้า และความเสถียรของภาพ และปัจจัยเหล่านี้คือ First Input Delay (FID), Largest Contentful Paint (LCP) และ Cumulative การเปลี่ยนเค้าโครง (CLS)
ผู้เชี่ยวชาญของ Google แนะนำว่าตัววัด Core Web Vitals ช่วยในการรับรองการนำทางหน้าเว็บที่ประสบความสำเร็จ
ii รูปแบบที่เหมาะกับ อุปกรณ์เคลื่อนที่ : การเพิ่มประสิทธิภาพอุปกรณ์เคลื่อนที่ถือเป็นสิ่งสำคัญอันดับแรกสำหรับ Google Searches
ด้วยผู้ใช้ส่วนใหญ่ที่ท่องอินเทอร์เน็ตผ่านอุปกรณ์พกพา จำเป็นต้องสร้างการออกแบบที่เหมาะกับอุปกรณ์พกพาที่ดึงดูดความสนใจอย่างรวดเร็วและโหลดเร็วขึ้น
สาม. การท่องเว็บอย่างปลอดภัย : อัลกอริทึม Safe Browsing ของเว็บไซต์จะดูแลภัยคุกคามหรือพฤติกรรมที่เป็นอันตราย และดูแลเว็บไซต์ของคุณและเซสชันการท่องเว็บของผู้ใช้ให้ปลอดภัย
iv การเชื่อมต่อ HTTPS: เราทุกคนทราบดีว่าตาม Google แต่ละเว็บไซต์ HTTP นั้นไม่ปลอดภัย ดังนั้นสิ่งแรกที่ต้องทำคือเปลี่ยนไปใช้ HTTPS โดยเร็วที่สุด
v. การเข้าถึง: ป๊อปอัปและโฆษณาคั่นระหว่างหน้าอื่นๆ จะถูกลงโทษโดย Google เว้นแต่ว่าหากพวกเขาไม่รักษาขนาดที่สมเหตุสมผลและยังคงปรากฏเป็นความประหลาดใจอันไม่พึงประสงค์ต่อผู้ใช้
ยึดติดกับกล่องโต้ตอบการเข้าสู่ระบบและป๊อปอัปที่ไม่สามารถจัดทำดัชนีได้แบบสาธารณะซึ่งสร้างขึ้นตามกฎหมาย
PSI สามารถช่วยปรับปรุงความเร็วเว็บไซต์ WordPress ได้อย่างไร? มาทำความรู้จัก…
Google มีเครื่องมือที่เรียกว่า Page Speed Insights (PSI) ที่ช่วยในการวัดการจัดอันดับความเร็วเว็บไซต์และเปิดโอกาสให้กว้างขึ้นสำหรับการเพิ่มประสิทธิภาพที่ปรับปรุงแล้วโหลดเว็บไซต์ให้กับผู้ใช้ได้เร็วขึ้น
PSI อนุญาตให้ใช้คำแนะนำการเพิ่มประสิทธิภาพต่อไปนี้เพื่อปรับปรุงความเร็วเว็บไซต์ WordPress:
- ลดเวลาตอบสนองของเซิร์ฟเวอร์
- ลบ JavaScript บล็อกการแสดงผลและ CSS ในเนื้อหาครึ่งหน้าบน
- ใช้ประโยชน์จากแคชเบราว์เซอร์
- อนุญาตให้บีบอัด
- ปรับรูปภาพและไฟล์ให้เหมาะสม
- ลดขนาด CSS, HTML และ JavaScript
- อนุญาตเนื้อหาที่มองเห็นได้
- หลีกเลี่ยงการเปลี่ยนเส้นทางหน้า Landing Page
ระบายสีเนื้อหาที่ใหญ่ที่สุด
Largest Contentful Paint หรือ LCP คือรูปภาพหรือบล็อกข้อความที่ใหญ่ที่สุด
ไปที่ Google Search Console เพื่อดูข้อมูลที่มีอยู่เพราะเป็นข้อมูลประเภทที่ Google จะใช้ในการวัดเว็บไซต์ของคุณ
ในกรณีของเว็บไซต์ WordPress ช้าหรือพูดเว็บไซต์ใด ๆ ปัจจัยในการตัดสินใจสำหรับเครื่องมือค้นหาในการประเมินความเร็วของเว็บไซต์คือการตรวจสอบความเร็วของการแสดงผลครั้งแรก
เครื่องมือวัดความเร็วที่เรียกว่า DevTools ของ Chrome คือการรวบรวมเครื่องมือประเภทต่างๆ ที่เน้นนักพัฒนาซอฟต์แวร์เพื่อพิจารณาว่าเกิดอะไรขึ้นเมื่อหน้าเว็บโหลด
ไม่สำคัญว่าหน้าเว็บทั้งหมดจะโหลดได้เร็วแค่ไหน
ในทำนองเดียวกัน เว็บไซต์ของคุณต้องอนุญาตให้ผู้ใช้ดูและโต้ตอบกับบล็อกของหน้าที่พวกเขาพบครั้งแรกในวิวพอร์ตได้อย่างราบรื่น
ต่อไปนี้เป็นปัจจัยที่ส่งผลกระทบต่อ คสช.:
- เวลาตอบสนองของเซิร์ฟเวอร์ : LCP ได้รับผลกระทบอย่างมากจากเวลาที่เซิร์ฟเวอร์ใช้ในการตอบกลับ ซึ่งขึ้นอยู่กับฐานข้อมูล ผู้ให้บริการโฮสต์ และอื่นๆ อีกมากมาย
คุณอาจประสบปัญหาอย่างหนักในช่วงเวลาที่มีการเข้าชมสูงสุด หากโฮสต์เว็บไซต์ของคุณแชร์เซิร์ฟเวอร์ของตนกับเว็บไซต์อื่นๆ หลายแห่ง
โพสต์คำขอ ผู้เยี่ยมชมต้องรอให้เซิร์ฟเวอร์ตอบกลับ และหากการจัดการคำขออื่นยุ่งเกินไป มันก็จะจบลงได้ช้า ซึ่งเป็นปัญหาทั่วไปในโฮสติ้งที่ใช้ร่วมกัน
- Render-blocking JavaScript and CSS : เบราว์เซอร์มักจะพบไฟล์ JS และ CSS ที่รอการดาวน์โหลดจากเซิร์ฟเวอร์เพื่อดำเนินการต่อไป ในระหว่างการประมวลผล HTML
ไฟล์ JS และ CSS เหล่านี้เท่านั้นที่ทำให้หน้าเว็บโต้ตอบและดึงดูดสายตาได้
ตามค่าเริ่มต้น JavaScript จะบล็อกการสร้าง DOM ซึ่งเป็นสาเหตุที่ทำให้ JavaScript ของคุณเป็นแบบอะซิงโครนัสเพื่อป้องกันไม่ให้ parser ถูกบล็อกเป็นสิ่งสำคัญ
- เมตริกการโหลดทรัพยากร : คือระยะเวลาการโหลดที่แต่ละทรัพยากรใช้ เช่น รูปภาพ วิดีโอ ไฟล์ ฯลฯ ที่ส่งผลกระทบอย่างมากต่อ LCP
- Time to First Byte: เป็นตัวชี้วัดที่มีประโยชน์ในการวินิจฉัย LCP ของเว็บไซต์ของคุณและประสิทธิภาพโดยรวม TTFB คือเวลาที่เบราว์เซอร์ของผู้ใช้ใช้ในการรับเนื้อหาหน้าเว็บแบบไบต์แรก
ในกรณีของเว็บไซต์ WordPress ข้อกำหนดเฉพาะของเซิร์ฟเวอร์ ปลั๊กอิน รูปแบบ และธีมต่างๆ จะกำหนดเวลาตอบสนองของเซิร์ฟเวอร์
การอัปเดตเซิร์ฟเวอร์และการใช้ธีมและปลั๊กอินที่ปรับให้เหมาะสมยิ่งขึ้นช่วยได้จริงๆ
- First Contentful Paint: FCP เป็นเมตริกที่เน้นผู้ใช้เป็นศูนย์กลางและวัดความเร็วในการโหลดหน้าเว็บ โดยจะกำหนดประสิทธิภาพของเว็บไซต์จากมุมมองของผู้ใช้ แทนที่จะเป็นการวัดผลการทดสอบความเร็วแบบเดิม
FCP วัดเวลาที่ผู้ใช้ใช้เพื่อค้นหาเนื้อหาบนเบราว์เซอร์ของตน FCP อย่างรวดเร็วทำให้ผู้ใช้เชื่อมต่อคุณคือเว็บไซต์ของคุณ และให้ความมั่นใจกับผู้ใช้ว่ามีบางอย่างเกิดขึ้น
FCP สามารถวัดได้ผ่านการทดสอบในห้องปฏิบัติการและการทดสอบภาคสนาม (ประสบการณ์การใช้งานจริง) จากข้อมูลของ Google ผู้เข้าชมเว็บไซต์ของคุณจะได้รับประสบการณ์การใช้งานที่ดีเมื่อ FCP เกิดขึ้นภายใน 1.8 วินาทีหรือน้อยกว่า
ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID)
FID กำหนดความเร็วเชิงโต้ตอบของหน้าเว็บ เมื่อผู้ใช้เข้าชมไซต์หรือคลิกที่ลิงก์/องค์ประกอบของไซต์ เบราว์เซอร์จะประมวลผลการดำเนินการเพื่อส่งมอบผลลัพธ์
ผู้เข้าชมคาดหวังผลลัพธ์ที่เร็วกว่า และความเร็วในการโต้ตอบจะขึ้นอยู่กับโค้ดภายในและโค้ดของบุคคลที่สามที่ใช้สำหรับเนื้อหาของหน้าเว็บที่ทริกเกอร์โดยการกระทำของผู้ใช้
FID เป็นตัวชี้วัดภาคสนาม: ผู้ใช้สามารถคลิกองค์ประกอบเว็บใดก็ได้บนหน้าเมื่อใดก็ได้ และแต่ละองค์ประกอบอาจมีความล่าช้าเฉพาะ
คุณสามารถวัด FID ด้วย JavaScript ได้โดยใช้ไลบรารีการติดตามของ Google, Event Timing API หรือไลบรารี JavaScript ของ web-vitals
Cumulative Layout Shift (CLS) คืออะไร?
CLS กำหนดความเสถียรของหน้าเว็บ เป็นตัวกำหนดว่าเนื้อหาของหน้าเว็บจะเสถียรได้เร็วเพียงใด การโหลดทรัพยากรแบบสุ่มหรือแบบอะซิงโครนัสบนหน้าเว็บทำให้เกิดการเพิ่มองค์ประกอบ DOM แบบไดนามิก และเศษส่วนของการย้ายเนื้อหา
CLS ต่ำทำให้มั่นใจได้ถึงคุณภาพ การใช้งาน และประสบการณ์การท่องเว็บที่น่าพึงพอใจ
อะไรคือสาเหตุของการเปลี่ยนเลย์เอาต์?
- ไฟล์ รูปภาพ หรือวิดีโอแบบสุ่มที่มีขนาดไม่เจาะจง
- โฆษณาของบุคคลที่สาม ป๊อปอัป หรือวิดเจ็ต
- แบบอักษรขนาดไม่สม่ำเสมอและไม่ระบุ
จะปรับปรุง CLS ได้อย่างไร?
- ใช้ไฟล์ รูปภาพ และวิดีโอเฉพาะที่มีขนาดเหมาะสม ใส่รูปภาพที่โหลดและตอบสนองได้ง่าย
- หลีกเลี่ยงการซ้อนเนื้อหาบนหน้าเว็บ อย่ารวมเนื้อหาใหม่ไว้เหนือเนื้อหาที่มีอยู่
- หลีกเลี่ยงการเปลี่ยนเลย์เอาต์โดยดูแลอัตราส่วนกว้างยาวและแอตทริบิวต์ขนาดสำหรับไฟล์หรือรูปภาพ
- บันทึกช่องหรือเลือกหน่วยโฆษณาที่มีขนาดคงที่เสมอสำหรับโฆษณาหรือวิดเจ็ตของบุคคลที่สาม
- ใช้คุณสมบัติการแปลง CSS เมื่อใส่แอนิเมชั่นและโหลดไฟล์ฟอนต์หรือฟอนต์: แสดงค่าสำหรับฟอนต์ที่ปรับให้เหมาะสม
เครื่องมือวัด Core Web Vitals

หากต้องการรับข้อมูลใน Core Web Vitals ของเว็บไซต์ของคุณ คุณสามารถใช้รายงานประสบการณ์ผู้ใช้ Chrome หรือ CrUX (ที่รวบรวมข้อมูลจากผู้ใช้ Chrome ที่เลือกใช้เท่านั้น), PageSpeed Insights (ที่รวมข้อมูลจาก CrUX) หรือ Core Web ของ Search Console รายงานสำคัญ
คุณยังสามารถทดสอบตัวชี้วัดเหล่านี้ในสภาพแวดล้อมของห้องปฏิบัติการโดยใช้ Chrome DevTools และ Lighthouse สำหรับเว็บไซต์ WordPress ความเร็วเพื่อปรับปรุงคุณภาพของหน้าเว็บ
นอกจากนั้น โซลูชันการตรวจสอบเว็บไซต์จำนวนมากยังวิเคราะห์ Core Web Vitals
เริ่มปรับปรุงความเร็วของเว็บไซต์ WordPress ของคุณ
ดังนั้น ถึงตอนนี้ คุณต้องตระหนักดีถึงข้อบกพร่องเนื่องจากความเร็วของเว็บไซต์ WordPress ของคุณขาดหายไปและปริมาณการใช้งานของผู้ใช้ วิธีตรวจสอบจุดอ่อนของไซต์ และพารามิเตอร์ใดที่ควรเน้นเพื่อให้ประสิทธิภาพของเว็บไซต์กลับมาเป็นเหมือนเดิม!
ตอนนี้เป็นเวลาที่จะเริ่มไตร่ตรองเกี่ยวกับรูปแบบการดำเนินการที่คุณต้องพิจารณาเพื่อปรับปรุงสัญญาณประสบการณ์หน้าเว็บจริงๆ
ต่อไปนี้เป็นองค์ประกอบหลักในการตรวจสอบและดำเนินการ:
- การลดขนาดโค้ด
- การเพิ่มประสิทธิภาพเนื้อหาภาพ
- อัพเกรดโฮสติ้ง
การลดขนาดโค้ด
ในการเพิ่มประสิทธิภาพโค้ดของคุณเพื่อประโยชน์ของ SEO คุณต้องค้นหาแหล่งที่มาที่ไม่จำเป็นและบล็อกการแสดงผลทั้งหมดและลบออก
กระบวนการย่อขนาดหมายถึงการกำจัดส่วนที่ซ้ำซ้อนทั้งหมดของโค้ด เช่น แหล่งที่มาที่ไม่ได้ใช้ ความคิดเห็น ฯลฯ
เริ่มต้นด้วยการลดขนาดโค้ด ลบทุกอย่างที่ไม่จำเป็นและไม่ได้ใช้
กระบวนการทำให้ไฟล์ CSS และ JS มีขนาดเล็กลง ทำให้สามารถโหลดได้เร็วขึ้นในเบราว์เซอร์และใช้แบนด์วิดท์น้อยลง
การลดขนาดสามารถทำได้ด้วยตนเองหรือด้วยความช่วยเหลือของเครื่องมือย่อขนาดอัตโนมัติ เช่น CSSNano และ UglifyJS ตามที่ Google แนะนำ
หากคุณไม่แน่ใจว่าจะลบโค้ดใดที่ไม่ได้ใช้ คุณเพียงแค่ไปที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome เปิดและไปที่แท็บแหล่งที่มา ไปที่แท็บความครอบคลุมซึ่งให้ข้อมูลจริงในไฟล์ JS และ CSS และแสดงจำนวนโค้ดบนหน้าเว็บที่กำลังดำเนินการจริง
การลดขนาดสคริปต์ภายนอก
ทุกครั้งที่โหลดหน้าเว็บ ให้โหลดปุ่ม CTA, ป๊อปอัป หรือองค์ประกอบหน้าเว็บที่มีสคริปต์ใดๆ ที่โหลดจากที่อื่นด้วย
การลดขนาดสคริปต์ภายนอกจะช่วยได้ เนื่องจากอาจทำให้หน้าเว็บช้าลงอย่างมาก ขึ้นอยู่กับขนาดสคริปต์
เวอร์ชันเฉพาะอุปกรณ์
การกระจายรหัสช่วยในการจำกัดแหล่งที่มาขึ้นอยู่กับประเภทของอุปกรณ์
เบราว์เซอร์ตรวจพบประเภทของอุปกรณ์และส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อให้เซิร์ฟเวอร์สามารถตอบสนองด้วยเวอร์ชันของไซต์ที่สอดคล้องกัน
เพื่อให้สิ่งนี้เกิดขึ้น โค้ดของเว็บไซต์ควรรวมเวอร์ชันที่เหมาะสมต่างๆ เข้ากับอุปกรณ์ต่างๆ ทำให้ทุกเว็บไซต์มีคำขอโค้ดที่ไม่จำเป็น
CSS แบบอินไลน์
ก่อนที่จะแสดงหน้าเว็บ เบราว์เซอร์จำเป็นต้องสร้างแผนผัง DOM โดยแยกวิเคราะห์มาร์กอัป HTML
เมื่อพบสคริปต์ parser จะดำเนินการก่อนที่จะแยกวิเคราะห์ HTML ต่อไป กระบวนการนี้ทำให้เกิดความล่าช้าในการแสดงหน้าแรก
จำเป็นต้องลดการใช้การบล็อก JavaScript โดย Inline, asynchronous หรือ JavaScript ที่เลื่อนออกไป
ส่วนใหญ่แล้ว การใช้ Inline CSS จะช่วยได้มากหากไม่มีความรู้เกี่ยวกับโค้ด CSS มากนัก
ด้วยวิธีนี้ คุณจะนำสไตล์ไปใช้กับองค์ประกอบ HTML แต่ละองค์ประกอบได้โดยตรง และเบราว์เซอร์จะไม่จำเป็นต้องดาวน์โหลดไฟล์ CSS แยกกัน ซึ่งจะช่วยให้แสดงผลครั้งแรกได้เร็วขึ้น
การแสดงผลแบบก้าวหน้า
เมื่อพบไฟล์ CSS หรือ JS ก่อนการเรนเดอร์ครั้งแรก เบราว์เซอร์จะต้องดำเนินการเพื่อให้กระบวนการหยุดชั่วคราว
อาจมีการทดสอบบน WebPageTest เพื่อระบุแหล่งที่มาของการบล็อกการแสดงผลที่อาจเกิดขึ้นบนหน้าเว็บ หากรหัสรับผิดชอบต่อประสบการณ์ผู้ใช้หลักในหน้าเว็บ จะต้องหลีกเลี่ยงรหัสดังกล่าว
JavaScript สามารถโหลดแบบอะซิงโครนัสสำหรับองค์ประกอบเหล่านั้นที่ไม่จำเป็นต้องโหลดทันที (เช่นปุ่มแบ่งปันทางสังคม)
มีสองแอตทริบิวต์ที่สามารถช่วยกระจายการโหลดสคริปต์ เพื่อให้ทรัพยากรพร้อมใช้งานแบบอะซิงโครนัส เช่น ซิงค์และเลื่อนออกไป
ทั้งคู่ลดเวลาการแยกวิเคราะห์ HTML สำหรับเบราว์เซอร์โดยไม่ทำลายวิธีการแสดงสิ่งต่าง ๆ บนหน้า แอตทริบิวต์เหล่านี้สามารถนำไปใช้กับ JS บุคคลที่สามได้เช่นกัน
การเพิ่มประสิทธิภาพรูปภาพและวิดีโอ
หน้าเว็บที่มีน้ำหนักมากเป็นผลมาจากเนื้อหาภาพที่มีการถ่วงน้ำหนัก ประมาณ 21% ของน้ำหนักหน้าเกิดจากเนื้อหาที่เป็นภาพ ดังนั้น จึงจำเป็นอย่างยิ่งที่จะต้องปรับแต่งรูปภาพและวิดีโออย่างเหมาะสม
เนื้อหาภาพจำนวนมากทำให้เว็บไซต์ช้าลง ทำให้โหลดตามกำหนดเวลาได้ยาก
หากไฟล์หรือเนื้อหาภาพของคุณไม่ได้รับการปรับให้เหมาะสมสำหรับขนาดหรือความเร็วในการโหลด ไฟล์เหล่านี้อาจทำให้ไซต์ทำงานช้าลงได้
รูปภาพควรจะปรับขนาดให้พอดีกับขนาดของธีมเว็บไซต์ WordPress ของคุณในขณะที่มีขนาดน้อยกว่า 200kb
เว็บไซต์ WordPress หลายแห่งประกอบด้วยเนื้อหาจำนวนมากซึ่งรวมถึงไฟล์ขนาดใหญ่ กราฟิก รูปภาพ หรือวิดีโอ
การขาดการเพิ่มประสิทธิภาพของเนื้อหาภาพดังกล่าวทำให้ความเร็วในการโหลดไปยังไซต์เหล่านั้นช้าลงในที่สุดคะแนนใน Google PageSpeed Insights สำหรับเรื่องนั้น เราอาจพิจารณาอัปเกรดเว็บไซต์ของตนโดยบีบอัดรูปภาพหรือวิดีโอจำนวนมากโดยใช้เครื่องมืออย่าง SHORTPIXEL
มาดูเพิ่มเติมเพื่อทำความเข้าใจเกี่ยวกับขั้นตอนพื้นฐานที่จำเป็นเกี่ยวกับเนื้อหาภาพเพื่อปรับปรุงประสบการณ์หน้าความเร็วของเว็บไซต์ WordPress:
- การปรับขนาดภาพโดยไม่สูญเสียคุณภาพ : ใช้โซลูชันการบีบอัดภาพในตัวใน CMS
- การใช้รูปแบบไฟล์ที่เข้ากันได้กับเบราว์เซอร์ : JPEG และ PNG เป็นรูปแบบภาพที่พบบ่อยที่สุด WebP เป็นรูปแบบที่น่าสนใจ อย่างไรก็ตาม เบราว์เซอร์ทั้งหมดยังไม่รองรับ เป็นเรื่องปกติที่จะใช้ GIF แต่ถ้ามันมีน้ำหนักมาก ก็ต้องพิจารณาแปลงเป็นไฟล์วิดีโอ
- ระบุหลายอัตราส่วน: เพื่อให้ภาพดูดีบนอุปกรณ์ใด ๆ โปรดทราบว่า CMS ยอดนิยมส่วนใหญ่จะทำสิ่งนี้ให้คุณ
- การโหลดแบบอะซิงโครนัส: หากหน้าเว็บของคุณประกอบด้วยรูปภาพจำนวนหนึ่ง คุณต้อง อนุญาตให้โหลดแบบอะซิงโครนัสเพื่อเพิ่มความเร็วของการ เรนเด อร์แรก การโหลดและการถอดรหัสแบบขี้เกียจเป็นวิธีที่จะใช้
- โฮสต์ไฟล์วิดีโอขนาดใหญ่บนไซต์บุคคลที่สาม เพื่อลดเวลากระบวนการโหลดของเว็บไซต์ของคุณ
การเพิ่มประสิทธิภาพเซิร์ฟเวอร์โฮสติ้งและการจัดส่งทรัพยากรช่วยปรับปรุงความเร็วเว็บไซต์ WordPress
การเพิ่มประสิทธิภาพเว็บไซต์ WordPress ของคุณตามอัลกอริธึมของเครื่องมือค้นหาเป็นสิ่งสำคัญมาก
การตรวจสอบเว็บไซต์ในการจัดอันดับ SE ช่วยให้คุณมีแนวคิดทั่วไปเกี่ยวกับความเร็วที่เซิร์ฟเวอร์ใช้ในการตอบกลับในหน้าต่างๆ ของเว็บไซต์ WordPress ของคุณ
การใช้หน้า AMP ช่วยเพิ่มความเร็วของมือถือได้
เมื่อใช้หน้า AMP สิ่งที่คุณต้องทำคือแยกองค์ประกอบต่างๆ ของหน้าเว็บด้วยตนเองเพื่อให้น้ำหนักเบาลงเพื่อให้โหลดเร็วขึ้น
การดำเนินการอื่นๆ ที่ควรพิจารณาขณะปรับเวลาตอบสนองของเซิร์ฟเวอร์ให้เหมาะสมนั้นเกี่ยวข้องกับ:
- ปริมาณการเข้าชมเว็บไซต์
- ความสามารถของอุปกรณ์และเครือข่ายจากฝั่งผู้ใช้
- แหล่งข้อมูลในทุกหน้าเว็บ
- การเลือกโซลูชันโฮสติ้งที่เหมาะสม
- CMS และปลั๊กอิน
การเชื่อมต่อฮาร์ดแวร์และเครือข่ายของผู้ใช้สามารถช่วยปรับปรุงความเร็วเว็บไซต์ WordPress ได้
ประเภทอุปกรณ์ของผู้ใช้เป็นปัจจัยสำคัญที่ส่งผลต่อการโต้ตอบของหน้าเว็บ
ผู้เข้าชมโต้ตอบกับเว็บไซต์ของคุณอย่างไรขึ้นอยู่กับประเภทของอุปกรณ์และการเชื่อมต่อที่ใช้
การนำทางเว็บไซต์จากสมาร์ทโฟนที่มีกำลัง CPU และหน่วยความจำจำกัดค่อนข้างน่าเบื่อเมื่อเทียบกับการทำจากพีซีที่มีการเชื่อมต่อที่เสถียร
ดังนั้นการสำรวจและติดตามประเภทของอุปกรณ์ที่ผู้เยี่ยมชมของคุณส่วนใหญ่ใช้และทดสอบโหลดและประสิทธิภาพของเว็บไซต์จึงเป็นสิ่งสำคัญ
ที่นี่ คุณสามารถจำลองการเชื่อมต่อที่ช้าลงและอุปกรณ์ที่มีประสิทธิภาพน้อยลง
บริการโฮสติ้ง
โฮสติ้งที่ใช้ร่วมกันขัดขวางความเร็วในการโหลดเว็บไซต์ของคุณและประสบการณ์การใช้งานของผู้ใช้ แม้ว่าคุณจะพยายามเพิ่มประสิทธิภาพทรัพยากรบนเว็บไซต์ของคุณอย่างเต็มที่แล้วก็ตาม
โซลูชันที่คุ้มค่าหลากหลายมีอยู่ในตลาดโฮสติ้งเพื่อตอบสนองความต้องการของคุณ อย่างไรก็ตาม ส่วนใหญ่ไม่เหมาะกับเว็บไซต์เชิงพาณิชย์ที่เกี่ยวข้องกับผลิตภัณฑ์หรือบริการ เว็บไซต์ที่เต็มไปด้วยเนื้อหาที่เป็นภาพ หรือกำหนดเป้าหมายผู้ใช้จากสถานที่ต่างๆ
เพื่อแก้ปัญหาที่เกี่ยวข้อง ขอแนะนำให้เลือกเซิร์ฟเวอร์เฉพาะและหลีกเลี่ยงการแชร์โฮสติ้งในเว็บไซต์ต่างๆ
ไม่ต้องกังวลหากงบประมาณของคุณไม่ยืดหยุ่น คุณสามารถอัปเกรดจากโฮสติ้งที่ใช้ร่วมกันได้โดยเลือกใช้เซิร์ฟเวอร์ส่วนตัวเสมือน (VPS) ที่เลียนแบบเซิร์ฟเวอร์เฉพาะภายในสภาพแวดล้อมการโฮสต์ที่ใช้ร่วมกัน
ใช้ประโยชน์จากการแคชเพื่อปรับปรุงความเร็วเว็บไซต์ WordPress
- การเปิดใช้งานการแคชสำหรับอุปกรณ์มือถือช่วยเพิ่มความเร็วเว็บไซต์ WordPress ของคุณ
- เปิดใช้งานการโหลดแคชตามแผนผังเว็บไซต์ล่วงหน้าตามการตั้งค่าแผนผังเว็บไซต์ XML ของคุณ
เพื่อเปิดใช้งานการแคชสำหรับ WordPress หนึ่งอาจเขียนโค้ดหรือใช้ปลั๊กอินเช่น W3 Total Cache หรือ WP Rocket
ผู้ให้บริการโฮสต์บางรายจะแคชเนื้อหาแบบคงที่โดยอัตโนมัติเพื่อเพิ่มประสิทธิภาพการทำงานของเซิร์ฟเวอร์ในที่สุด
การแคชทำให้คุณสามารถจัดเก็บเนื้อหาที่แสดงไว้ก่อนหน้านี้เพื่อไม่ให้โหลดทุกครั้งที่ผู้ใช้กลับมาบนหน้าโดยสั่งเซิร์ฟเวอร์หรือเบราว์เซอร์
การโหลดเนื้อหาจากแคชโดยตรงจะเพิ่มประสิทธิภาพโดยการลดทรัพยากรของเซิร์ฟเวอร์
สังเกตได้ว่าการแคชฝั่งเซิร์ฟเวอร์สามารถลดเวลาในการโหลดได้ถึง 30% และอีกมากมาย
อย่าใช้การเปลี่ยนเส้นทางจำนวนมาก
การเปลี่ยนเส้นทางคือเมื่อมีการส่งต่อผู้เยี่ยมชมจากหน้าเว็บหนึ่งไปยังอีกหน้าหนึ่ง ทุกครั้งที่เปลี่ยนเส้นทางจะมีการเพิ่มเสี้ยววินาทีหรือมากกว่านั้นเพื่อให้หน้าโหลด
ความล่าช้านี้ส่งผลต่อความเร็วในการโหลดเว็บไซต์ WordPress โดยรวมและประสบการณ์ของผู้ใช้ สามารถใช้งานได้ในบางครั้ง แต่ขอแนะนำให้หลีกเลี่ยงการเปลี่ยนเส้นทางมากเกินไป
ต้องลดจำนวนการเปลี่ยนเส้นทางที่ซ้ำซ้อนเนื่องจากการเปลี่ยนเส้นทางทุกครั้งจะทำให้กระบวนการโหลดหน้าช้าลง เริ่มใช้เครื่องมือที่ช่วยคุณติดตามการเปลี่ยนเส้นทางทีละรายการและเป็นกลุ่ม
การตรวจสอบเว็บไซต์ของการจัดอันดับ SE ช่วยให้คุณตรวจสอบการเปลี่ยนเส้นทางบนเว็บไซต์ของคุณ ติดตามรหัสสถานะ และระบุปัญหาที่อาจเป็นอันตราย
การตรวจสอบปลั๊กอิน
ปลั๊กอินส่งผลกระทบอย่างมากต่อความเร็วของเว็บไซต์และประสิทธิภาพโดยรวม การใช้ CMS และปลั๊กอินล่าสุดเป็นสิ่งสำคัญ (ขึ้นอยู่กับเวอร์ชัน PHP ล่าสุด)
ตรวจสอบปลั๊กอินที่ทำให้เว็บไซต์ของคุณช้าลงด้วยเครื่องมือทดสอบ
MonsterInsights เป็นปลั๊กอิน WordPress ที่สามารถวัดข้อมูล Google Analytics ทั้งหมดของคุณแบบเรียลไทม์ รายงาน Google Search Console รายงานอีคอมเมิร์ซ และรายงานการจัดอันดับ SEO ได้อย่างง่ายดาย
MonsterInsights ใช้ระบบติดตามสากลสำหรับอุปกรณ์และแคมเปญทั้งหมดอย่างรวดเร็วโดยไม่ต้องใช้โค้ดใดๆ
MonsterInsights สามารถติดตามการดาวน์โหลดไฟล์ การดูหน้าเว็บ และประเทศที่ได้รับการดาวน์โหลดไฟล์สูงสุด
ปลั๊กอินอื่นที่เรียกว่า Jetpack มีบริการมากมายถึง 20 ปลั๊กอินในแพ็คเกจเดียว
คุณสามารถแสดงรูปภาพจาก CDN สากล เปิดใช้งานการโหลดแบบ Lazy Loading สำหรับรูปภาพ และใช้ธีม Jetpack Mobile หากเว็บไซต์ของคุณไม่มีการออกแบบที่ตอบสนอง
ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)
เครือข่ายการส่งเนื้อหาเพิ่มความเร็วเว็บไซต์ WordPress โดยการแคชเนื้อหาในสถานที่ต่างๆ ทั่วโลก
เซิร์ฟเวอร์แคช CDN อยู่ใกล้กับผู้ใช้ปลายทางมากกว่าเมื่อเปรียบเทียบกับเซิร์ฟเวอร์โฮสต์
การใช้ CDN ช่วยปรับปรุงเวลาในการโหลดหน้าเว็บของคุณอย่างมาก ลดอัตราการตีกลับ และเพิ่มการรักษาผู้ใช้ในเว็บไซต์ของคุณ
เซิร์ฟเวอร์ CDN ลดต้นทุนแบนด์วิดท์ของฝั่งเซิร์ฟเวอร์ของคุณด้วยการลดปริมาณข้อมูลบนเซิร์ฟเวอร์ต้นทาง
(ซ้าย) การกระจายเซิร์ฟเวอร์เดี่ยว (ขวา) โครงร่าง CDN ของการแจกจ่าย
CDN สามารถให้การลดขนาดอัตโนมัติและบีบอัดไฟล์โค้ดที่จัดเก็บไว้ในเซิร์ฟเวอร์ของตน
การใช้เครื่องมือ CDN เช่น StackPath ช่วยให้คุณอัปโหลดรูปภาพหรือวิดีโอโดยไม่กระทบต่อคุณภาพหรือขนาด ในที่สุดโหลดเว็บไซต์ของคุณเร็วขึ้น
สรุปการชำระเงินเกี่ยวกับการปรับปรุงความเร็วเว็บไซต์ WordPress
ไม่มีการเพิ่มประสิทธิภาพหน้าเว็บอย่างแน่นอน SEO และความเร็วเว็บไซต์ของคุณอย่างรุนแรง
การทดสอบความเร็วเว็บไซต์ของคุณเป็นประจำเป็นสิ่งสำคัญ
นักพัฒนาซอฟต์แวร์และผู้จัดการฝ่ายการตลาดหลายรายดูแลเกี่ยวกับการทดสอบสถานะความเร็วของเว็บไซต์ และใช้มาตรการเชิงรุกเพื่อแก้ไขปัญหาพื้นฐาน หากมี
เว็บไซต์ WordPress ที่มีความเร็วและประสิทธิภาพสูงส่งผลให้มีการเข้าชมกลับมาสูงและอัตราตีกลับต่ำ
พวกเขาให้การมีส่วนร่วมที่มากขึ้น การแปลงที่ดีขึ้นและการสร้างรายได้ อันดับที่สูงขึ้นในการค้นหาทั่วไป บวกกับประสบการณ์ของผู้ใช้ที่ราบรื่น
ในทางตรงกันข้าม คนที่ช้ากว่าอาจทำให้คุณเสียเงินและทำลายความปรารถนาดีของคุณ ระบุปัญหาและค้นหาวิธีแก้ไขที่เหมาะสมที่สุดเพื่อเพิ่มความเร็วในการโหลดเว็บไซต์ WordPress ของคุณ
การลดเวลาในการโหลดหน้าเว็บจะช่วยส่งเสริมกระบวนการทางการตลาดและการขาย ทำให้เว็บไซต์ของคุณมีอัตราการเข้าชมสูงขึ้น และดึงดูดลีดที่ผ่านการรับรองและเปลี่ยนแปลงได้