วิธีเพิ่มความเร็วไซต์ WordPress ของคุณฟรี
เผยแพร่แล้ว: 2020-07-22อืม WordPress ฉันไม่รู้จะบอกคุณอย่างไร แต่… คุณช้าเกินไป!
ฉันใช้ WordPress ทุกวันมากว่า 7 ปีแล้วและฉันก็ชอบมันมาก แต่บางครั้งมันก็รู้สึกเหมือนกำลังผลักช้างขึ้นบันไดเพื่อพยายาม โหลดหน้าต่างๆ อย่างรวดเร็ว
ใครจะตำหนิได้จริงๆ? WordPress เป็นระบบจัดการเนื้อหาที่ทรงพลัง แต่เราโหลดมันด้วยปลั๊กอิน รูปภาพ สคริปต์ ซื้อโฮสติ้งราคาถูก แล้วสงสัย ว่าทำไมการโหลดจึงใช้เวลานาน
แต่ WordPress มีความหวัง! ด้วยการตรวจสอบความเร็วที่หลอกได้ ฉันได้เรียนรู้ วิธีเพิ่มความเร็ว WordPress โดยไม่ต้องใช้โชคกับโฮสต์หรือปลั๊กอิน
อันที่จริง ฉันใช้จ่าย $0 และไซต์ของฉันเปลี่ยนจากการโหลดในเกือบ 10 วินาที เหลือน้อย กว่า 1 วินาที เร็วกว่า 10 เท่า และฉันเคยใช้การแคชและ CDN มาก่อนแล้ว
ก่อน:
เกือบ 10 วินาทีในการโหลดหน้าจนเต็ม
หลังจาก:
หน้านี้โหลดได้ภายใน 1 วินาที
เจ๋งมากใช่มั้ย!
ต้องการ เพิ่มความเร็วให้เว็บไซต์ WordPress ของคุณ เหมือนฉันไหม ฉันจะแนะนำคุณทุกขั้นตอนเพื่อให้ WordPress โหลดเร็วขึ้น
สารบัญ
คุณไม่จำเป็นต้องซื้อปลั๊กอินความเร็ว WordPress ใดๆ
ต่างจากบทช่วยสอนเกี่ยวกับความเร็วของ WordPress อื่น ๆ ที่ฉันพบทางออนไลน์ ฉันทำการทดลองนี้ โดยไม่เสียเงินแม้แต่บาทเดียว เพราะ ก) ฉันต้องการให้ผลลัพธ์นั้นใช้ได้กับทุกคนที่มีไซต์ WordPress และ ข) ฉันถูก ค) ฉันเคยเห็นไซต์ WordPress ที่ใช้เงินเป็นจำนวนมากในการโฮสต์ยังคงทำงานช้า ดังนั้นนี่ไม่ใช่ปัญหา "ทุ่มเงิน" ที่จะแก้ปัญหาอย่างรวดเร็ว
แน่นอนว่าเทคนิคความเร็วบางอย่างของฉันสามารถทำได้ด้วยปลั๊กอินระดับพรีเมียม เช่น perfmatters และ WP Rocket แต่ถ้าคุณมีเวลาและความอดทนเพียงเล็กน้อย คุณสามารถ บรรลุผลลัพธ์เดียวกันได้ฟรี ด้วยปลั๊กอินฟรีบางตัวและการแก้ไขโค้ดเล็กน้อย
ทำไมความเร็วของ WordPress ถึงมีความสำคัญ?
ความเร็วของ WordPress มีความสำคัญเพราะเว็บไซต์ของคุณจะถูกใช้งานโดยคนจริงๆ และ ผู้คนก็ชอบที่จะใช้เว็บไซต์ที่โหลดได้เร็ว ไม่ได้คุณ?
ไซต์ WordPress ที่รวดเร็วจะทำให้คุณได้เปรียบในการแข่งขัน มากกว่าเว็บไซต์อื่นๆ ที่ช้ากว่า เพราะผู้คนจะต้องการใช้งาน และ Google ก็อาจสังเกตเห็นเช่นกัน
อ๋อ SEO ครับ WordPress เป็นจุดเริ่มต้นที่ดีสำหรับ SEO ในเว็บไซต์ใดๆ แต่ ความเร็วมีบทบาทสำคัญในความสำเร็จของเครื่องมือค้นหา ทั่วไป ในโครงการที่ฉันทำงานอยู่ การปรับปรุงความเร็วไซต์ทำให้อัตราตีกลับและเมตริกอื่นๆ ลดลง ซึ่งสัมพันธ์กับอันดับที่แข็งแกร่งกว่า
ตั้งแต่ปี 2018 Google ได้ใช้ความเร็วของหน้าเว็บเป็นปัจจัยในการจัดอันดับอย่างเป็นทางการสำหรับการค้นหาบนมือถือ ซึ่งขณะนี้หมายถึงการค้นหาทั้งหมดเนื่องจากพวกเขาใช้การจัดทำดัชนีเพื่ออุปกรณ์เคลื่อนที่เป็นอันดับแรกมาตั้งแต่ปี 2019 Google จะเริ่มใช้เกณฑ์มาตรฐานความเร็ว Core Web Vitals เพื่อจัดอันดับเว็บไซต์ให้ใกล้เคียงกัน อนาคต.
หากคุณคิดว่าการจ่ายเงินเพื่อเข้าชมเว็บไซต์ของคุณจากโฆษณา Facebook หรือ Google หมายความว่าคุณสามารถหลีกหนีจากไซต์ที่โหลดช้าได้ คิดใหม่อีกครั้ง คุณจ่ายเงินสำหรับคลิกที่อาจตีกลับ!
ไม่ว่าคุณจะใช้ WordPress หรือ CMS อื่นๆ (ระบบจัดการเนื้อหา) คุณก็ควรพยายาม ทำให้เว็บไซต์ของคุณเร็วที่สุดเท่าที่คุณจะทำได้ การลดเวลาในการโหลดของคุณลงเหลือไม่กี่มิลลิวินาทีก็สามารถนำไปสู่การเพิ่มขึ้นอย่างมากในแง่ของการเข้าชมและการแปลง โดยเฉพาะอย่างยิ่งบนอุปกรณ์เคลื่อนที่
โดยสรุป นี่คือ ประโยชน์ของเว็บไซต์ WordPress ที่เร็วกว่า :
- UX ที่ดีขึ้น (ประสบการณ์ผู้ใช้)
- อัตราตีกลับที่ต่ำกว่า
- SEO (การเพิ่มประสิทธิภาพกลไกค้นหา)
- ปรับให้เหมาะสมสำหรับการค้นหาบนมือถือและด้วยเสียง
- ประหยัดเวลาเมื่อใดก็ตามที่คุณใช้แดชบอร์ดผู้ดูแลระบบเพื่ออัปเดตเว็บไซต์ของคุณ!
วิธีทดสอบความเร็วของ WordPress
ก่อนที่คุณจะเริ่มซื้อปลั๊กอินแก้ไขด่วน คุณต้องดูข้อมูลเบื้องต้นของเว็บไซต์ WordPress ของคุณก่อน เพื่อดูว่าอะไรทำให้ช้ามาก และ ทำการตรวจสอบความเร็วไซต์
ในอดีต ฉันเคยใช้เครื่องมืออย่างเช่น Page Speed Insights และ Pingdom ของ Google เพื่อทดสอบความเร็วของเว็บไซต์ WordPress ของฉัน แม้ว่าเครื่องมือเหล่านี้จะใช้ได้สำหรับภาพรวมพื้นฐานของประสิทธิภาพของไซต์ของคุณ แต่เพื่อให้ได้ข้อมูลเชิงลึกที่นำไปใช้ได้จริงมากขึ้น เราจำเป็นต้องมีเรือที่ใหญ่ขึ้น หรืออย่างน้อย WebPageTest
ด้วยเหตุผลแปลกๆ บางประการ คนส่วนใหญ่ใช้หน้าแรกเพื่อทดสอบความเร็วของเว็บไซต์ เว้นแต่หน้าแรกของคุณจะเป็นหน้า Landing Page หลัก อย่ากังวล ฉันแนะนำให้คุณ ทำการทดสอบกับประเภทเพจที่สำคัญที่สุดของคุณ (สำหรับฉัน บล็อกโพสต์) เพื่อให้ได้ผลลัพธ์ที่เป็นตัวแทน
วิธีใช้ WebPageTest เพื่อทดสอบประสิทธิภาพของ WordPress
WebPageTest ให้คุณเลือกตัวแปรหลายตัวก่อนทำการทดสอบ การกำหนดค่าการทดสอบขั้นสูงมาตรฐานนั้นใช้ได้สำหรับเว็บไซต์ส่วนใหญ่ แต่ฉันเปลี่ยนตำแหน่งทดสอบเป็นนิวยอร์กและเบราว์เซอร์เป็น Chrome เพื่อให้สอดคล้องกับผู้ใช้ของฉันมากขึ้น (ตรวจสอบ Google Analytics เพื่อค้นหาอุปกรณ์/ตำแหน่งของผู้ใช้ของคุณ)
อดทน รอ – การทดสอบจะใช้เวลาสองสามนาทีจึงจะเสร็จสมบูรณ์ ได้เวลาดื่มกาแฟหรือเช็คอีเมลของคุณแล้ว!
ฉันทำการทดสอบบนบล็อกโพสต์แบบยาวที่มีรูปภาพจำนวนมาก (โพสต์เกี่ยวกับ Cryptocurrency SEO)
ตามมาตรฐาน WebPageTest จะทำการทดสอบการโหลดหน้าเว็บของคุณ 3 แบบ ทีละรายการ ฉันเน้นที่การ ทดสอบการรันครั้งแรก เพราะมันแสดงถึงประสิทธิภาพของหน้าสำหรับผู้เยี่ยมชมใหม่ (ผู้ชมส่วนใหญ่ของฉัน) การรันครั้งต่อๆ ไปจะแสดงให้เห็นว่าหน้าเว็บของคุณทำงานอย่างไรเมื่อเบราว์เซอร์ได้เข้าชมหน้าเว็บของคุณแล้ว เป็นการดีที่จะตรวจสอบว่าเบราว์เซอร์แคชเนื้อหาของคุณได้ดีเพียงใด และมีความสำคัญหากเว็บไซต์ของคุณมีจำนวนการดูหน้าเว็บต่อผู้เข้าชมมาก (โดยเฉพาะอย่างยิ่งสำหรับอีคอมเมิร์ซ)
นี่คือตารางข้อมูลความเร็วที่คุณจะเห็นเมื่อการทดสอบเสร็จสิ้น:
เราสนใจเมตริกความเร็วไซต์ที่สำคัญสองสามข้อ:
เวลาในการ โหลด – เวลา ทั้งหมดที่ใช้ในการโหลดหน้าจนเต็มไปยังสถานะ เอกสารที่สมบูรณ์
เวลาในการโหลดของฉันคือ 9.933 วินาที – หรือที่เรียกว่าช้าจริงๆ ขอแนะนำให้ใช้เวลาน้อยกว่า 2.5 วินาที
ไบต์แรก – หรือที่เรียกว่า TTFB (Time to First Byte) ซึ่งเป็นเวลาที่ใช้ก่อนการถ่ายโอนข้อมูลไบต์แรก
TTFB ของฉันคือ 3.371 วินาที มันช้ามากจริงๆ ควรน้อยกว่า 500ms (ครึ่งวินาที) แต่ Google แนะนำ 200ms ว่าเหมาะสมที่สุด เย้ๆ
ไบต์ใน – เมื่อหน้าโหลดอย่างสมบูรณ์/เอกสารสมบูรณ์ 'ไบต์ใน' คือขนาดทั้งหมดของหน้าเว็บ
บล็อกโพสต์ของฉันมีขนาด 2,532 KB หรือประมาณ 2.5MB ในขั้นตอนการทำเอกสารให้สมบูรณ์ มันค่อนข้างใหญ่ ฉันต้องการให้มันต่ำกว่า 1MB
คำขอ – จำนวนคำขอ http ทั้งหมด คำขอที่สมบูรณ์ของเอกสารคือจำนวนคำขอที่ใช้ในการโหลดเนื้อหาหน้าเว็บทั้งหมดของคุณ และคำขอที่โหลดอย่างสมบูรณ์คือจำนวนคำขอทั้งหมด ทั้งจากโดเมนและบุคคลที่สามของคุณ (เช่น สคริปต์ Google Analytics)
หน้าของฉันส่งคำขอ 47 รายการและ 232 เมื่อโหลดเต็ม ไม่แปลกที่มันจะช้า! ยิ่งมีจำนวนคำขอน้อยลง (โดยทั่วไป) หน้าเว็บก็จะโหลดเร็วขึ้น
เมื่อคลิกแท็บ "โดเมน" คุณจะเห็นสถิติเพิ่มเติม:
การแบ่งเนื้อหาตามโดเมน – จำนวนคำขอและไบต์จากแต่ละโดเมน
คุณจะเห็นได้ว่าคำขอส่วนใหญ่มาจาก Google Analytics และข้อมูลประมาณ 0.5MB มาจากสคริปต์ภายนอก
คลิกแท็บ "รายละเอียดเนื้อหา" เพื่อดูเพิ่มเติม:
การแบ่งเนื้อหาตามประเภท – จำนวนคำขอของไบต์จากแต่ละประเภท MIME ( ส่วนขยายจดหมายทางอินเทอร์เน็ตอเนกประสงค์ )
หน้าของฉันมีภาพจำนวนมาก - รูปภาพประกอบด้วยคำขอ 158 รายการและขนาด 2.5MB แต่มีจาวามากมายเช่นกัน สิ่งนี้บอกฉันว่าการลดขนาด/การโหลดรูปภาพและการรวม/การลบ JavaScript จะช่วยให้หน้าโหลดเร็วขึ้น
จากแท็บ "สรุป" คุณจะพบ Waterfall View ซึ่ง เป็นส่วนที่สำคัญที่สุดของการตรวจสอบความเร็ว
มุมมองน้ำตก – แสดงลำดับของการร้องขอบนเพจ และระยะเวลาที่ใช้ในการโหลด
แต่ละรายการในมุมมองน้ำตกแสดงถึงคำขอ สีของแต่ละแถบจะแสดงประเภท MIME (รูปภาพ จาวาสคริปต์ ฯลฯ) และ ความยาวของแถบจะระบุระยะเวลาที่ใช้ในการโหลด เวลาในการโหลดหน่วยเป็นมิลลิวินาทีก็แสดงให้เห็นเช่นกัน
เส้นแนวตั้งสีน้ำเงินทึบแสดงถึงขั้นตอน "เอกสารที่สมบูรณ์" – เวลาที่เนื้อหาหน้าโหลดเต็มแล้ว แต่สคริปต์เพิ่มเติม (เช่น การวิเคราะห์) อาจยังคงโหลดอยู่ในพื้นหลัง
เน้นที่คำขอที่อยู่ก่อนเส้นสีน้ำเงิน การลดเวลาในการโหลดของคำขอเหล่านี้จะทำให้หน้าเว็บใช้งานได้เร็วขึ้น คลิกที่คำขอเพื่อดูรายละเอียดเพิ่มเติม เริ่มต้นด้วยคำขอที่โหลดก่อนเส้นสีน้ำเงินและใช้เวลานาน (แถบที่กว้างที่สุด) มุมมองโดยละเอียดจะแจ้งให้คุณทราบว่าคำขอมาจากไหน
ตอนนี้ คุณมีข้อมูลทั้งหมดเกี่ยวกับวิธีการโหลดเว็บไซต์ของคุณแล้ว ถึงเวลาเจาะลึกรายละเอียดและเริ่มทำการเปลี่ยนแปลงใน WordPress เพื่อเพิ่มความเร็ว
ตำนานเกี่ยวกับปลั๊กอินมากเกินไป
หากคุณเคยอ่านบทความเกี่ยวกับ “วิธีเพิ่มความเร็ว WordPress” คุณจะรู้ว่ามีคนบอกว่าการมีปลั๊กอินมากเกินไปจะทำให้ไซต์ WordPress ของคุณช้าลง และคุณต้องลบปลั๊กอินเพื่อเพิ่มความเร็วอีกครั้ง .
นั่นเป็นสิ่งที่ผิดธรรมดา
ปลั๊กอินไม่ได้ทำให้ไซต์ WordPress ของคุณช้าลงเสมอไป ไซต์ที่มีปลั๊กอิน 1 ตัวจะไม่เร็วกว่าไซต์ที่มีปลั๊กอิน 25 ตัวเสมอไป ฉัน เพิ่ม จำนวนปลั๊กอินในไซต์นี้และทำให้เร็วขึ้น 10 เท่า
ปลั๊กอิน (และธีม) ที่เข้ารหัสไม่ดีหรือใช้พลังงานเซิร์ฟเวอร์จำนวนมากหรือแบบสอบถาม MySQL อาจทำให้ไซต์ WordPress ของคุณทำงานช้า และนั่นเป็นสาเหตุที่ การทดสอบความเร็วไซต์ อย่างละเอียดด้วย WebPageTest จะแจ้งให้คุณทราบหากมีปลั๊กอินที่ทำให้คุณหนัก
ปลั๊กอินที่ควรหลีกเลี่ยง
มีปลั๊กอินยอดนิยมบางตัวที่ทำให้ไซต์ WordPress ช้าลง (โดยเฉพาะถ้าคุณใช้โฮสติ้งราคาถูกที่ใช้ร่วมกัน) สิ่งที่ต้องดูคือปลั๊กอินโพสต์ที่เกี่ยวข้อง ปลั๊กอินสถิติโพสต์ และปลั๊กอินสำรองในไซต์ ปลั๊กอินที่ต้องสแกนไซต์ของคุณอย่างต่อเนื่อง เช่น Broken Link Checker ก็ถูกประณามอย่างกว้างขวางเช่นกัน
คุณสามารถเรียนรู้บทเรียนจากโฮสต์ WordPress ที่ได้รับการปรับแต่ง - หากพวกเขาแบนปลั๊กอินทันทีเนื่องจากผลกระทบด้านลบต่อประสิทธิภาพของเว็บไซต์ คุณอาจไม่ต้องการใช้ด้วยตนเอง
ต่อไปนี้คือรายการปลั๊กอินที่ถูกแบนทั้งหมดจากโฮสต์เว็บรายใหญ่: WP Engine, Kinsta และ Hostgator
หากคุณมีปลั๊กอินที่ใช้พลังงานมากทำให้ช้าลง คุณอาจเปลี่ยนไปใช้ปลั๊กอินอื่นเพื่อให้ได้ผลลัพธ์แบบเดียวกัน หรือใช้บริการของบุคคลที่สามเพื่อแทนที่ได้ ตัวอย่างเช่น แทนที่จะใช้ปลั๊กอิน Broken Link Checker คุณสามารถสแกนไซต์ของคุณเพื่อหาลิงก์ที่เสียโดยใช้ Screaming Frog
ชนะอย่างรวดเร็ว: ลบปลั๊กอินและสคริปต์ที่คุณไม่ต้องการ
สิ่งที่ง่ายที่สุด ถูกที่สุด และรวดเร็วที่สุดที่ทุกคนสามารถทำได้เพื่อเพิ่มความเร็วให้กับเว็บไซต์ WordPress คือการลบปลั๊กอินและสคริปต์ที่เพิ่มไบต์หรือคำขอจำนวนมากไปยังหน้า
จากการตรวจสอบความเร็วของฉันด้านบน ฉันเห็นว่าปลั๊กอินความคิดเห็น Disqus ช่วยเพิ่มเวลาในการโหลดไซต์ของฉัน ได้อย่างมาก
ทดสอบผลกระทบของปลั๊กอินของคุณโดยปิดใช้งาน จากนั้นทดสอบเวลาในการโหลดไซต์ ขนาดไบต์ และจำนวนคำขออีกครั้ง
นี่คือผลกระทบของ Disqus บนไซต์ของฉัน:
ก่อน (ใช้ Disqus):
หลังจากลบปลั๊กอิน Disqus:
คุณจะเห็นได้ว่าการลบ Disqus ทำให้ฉันประหยัดเวลาในการโหลดหน้าเว็บลง 2 วินาที และลดจำนวนและขนาดของคำขอ
สคริปต์ยังทำให้ WordPress ช้าลง ได้ เช่น สคริปต์ Google Analytics และสคริปต์ Google Fonts คุณสามารถดูสคริปต์ที่กำลังโหลดบนไซต์ WordPress ของคุณได้ใน Waterfall View บน WebPageTest
Google Fonts มีการโหลดตั้งแต่เนิ่นๆ ก่อนถึงขั้นตอน Document Complete ดังนั้นการลบออกจะช่วยให้ไซต์ของคุณเร็วขึ้น ฉันกำลังใช้มอนต์เซอร์รัต (แบบอักษรของ Google) แต่เห็นจากมุมมองน้ำตกว่าหน้าของฉันกำลังโหลดสคริปต์สำหรับ Lora ซึ่งฉันไม่ได้ใช้อีกต่อไป การลบสคริปต์ Google Font ที่ไม่จำเป็นจะช่วยประหยัดเวลาในการโหลดหน้าเว็บของฉัน 330ms ทุกเล็กน้อยมีค่า!
วิธีเพิ่มประสิทธิภาพขนาดภาพและวิธีการโหลด
สำหรับไซต์ WordPress ส่วนใหญ่ รูปภาพจะเป็นไฟล์ที่ใหญ่ที่สุดบางไฟล์ที่ต้องโหลดในแต่ละหน้า
มีบางสิ่งที่คุณต้องทำเพื่อเพิ่มประสิทธิภาพรูปภาพบน WordPress เพื่อให้โหลดได้เร็วที่สุด:
1. บีบอัดรูปภาพให้เล็กที่สุด (เป็นไบต์) มากที่สุด
รูปภาพที่เล็กกว่าคือ (เป็นไบต์) ยิ่งโหลดเร็วขึ้น หากคุณกำลังอัปโหลดภาพไปยัง WordPress ให้ปรับขนาดภาพก่อนอัปโหลดเพื่อให้มีขนาดไม่เกินที่คุณต้องการ แปลงภาพ PNG เป็น JPEG เพื่อให้การบีบอัดดีขึ้น
หากคุณมีไลบรารีรูปภาพอยู่แล้ว ให้ใช้ปลั๊กอินรูปภาพ เช่น Smush (ฟรี) เพื่อบีบอัดรูปภาพที่มีอยู่และรูปภาพใหม่เมื่ออัปโหลด ฉันใช้ Smush มาหลายปีแล้ว ดังนั้นรูปภาพของฉันจึงค่อนข้างเล็ก – ไม่มีที่ว่างให้ปรับปรุงสำหรับฉันมากนัก แต่ก็คุ้มค่าที่จะทำหากคุณยังไม่ได้ทำ
เมื่อเร็ว ๆ นี้ ฉันได้เปลี่ยนไปใช้ ShortPixel เพื่อบีบอัดรูปภาพและให้บริการในรูปแบบ WebP ไฟล์ WebP มีขนาดเล็กกว่าภาพ JPEG ที่เปรียบเทียบกันได้ 25-34% และ Google แนะนำ นี่คือบทช่วยสอนเกี่ยวกับวิธีใช้รูปภาพ WebP กับ WordPress
ShortPixel ให้เครดิตภาพแก่คุณ 100 ภาพฟรีในแต่ละเดือน ซึ่งจะเพียงพอสำหรับเว็บไซต์ขนาดเล็กส่วนใหญ่ที่จะเริ่มต้น หากคุณมีคลังรูปภาพขนาดใหญ่หรืออัปโหลดเนื้อหาจำนวนมาก คุณสามารถซื้อเครดิตรูปภาพพิเศษราคาถูกได้ ปลั๊กอิน ShortPixel WordPress จะช่วยคุณตั้งค่าทั้งหมด
2. ขี้เกียจโหลดรูปภาพในหน้ายาว
การโหลดแบบ Lazy Loading เป็นกระบวนการในการชะลอการโหลดรูปภาพจนกว่าผู้ใช้จะเลื่อนหน้าลง
ตัวอย่างเช่น โพสต์บล็อก Cryptocurrency SEO ของฉันมี 23 ภาพ รูปภาพเหล่านั้นมีขนาดรวมกัน 2.5MB เป็นหน้ายาว (มากกว่า 3000 คำ) ดังนั้นผู้อ่านจึงต้องใช้เวลาสักครู่ในการเข้าถึงรูปภาพที่อยู่ด้านล่างของหน้า แต่ที่สำคัญคือ ผู้ใช้ต้องรอให้โหลดรูปภาพ ทั้งหมด ก่อนที่จะอ่านอะไร
เสียเวลาเปล่า!
แทนที่จะให้ผู้ใช้รอให้โหลดรูปภาพทั้งหมด การโหลดแบบ Lazy Loading ช่วยให้คุณสามารถโหลดเนื้อหาอื่นๆ ของหน้าก่อนภาพครึ่งหน้าล่าง (ส่วนที่มองไม่เห็นของหน้า) เมื่อผู้ใช้เลื่อน รูปภาพจะโหลดและปรากฏขึ้น
ในการตั้งค่าการโหลดแบบ Lazy Loading ฉันได้ติดตั้งปลั๊กอิน BJ Lazy Load (ฟรี) ซึ่งใช้ JavaScript เพื่อเลื่อนการโหลดรูปภาพ ใช่ นี่เป็นสคริปต์เพิ่มเติมสำหรับไซต์ WordPress ของคุณ แต่ก็คุ้มค่าเพราะรูปภาพประกอบขึ้นจากขนาดหน้ามาก
นี่คือความรวดเร็วในการโพสต์บล็อกของฉันโดยเปิดใช้งานการโหลดแบบ Lazy Loading:
หมายเหตุ: หากคุณใช้การโหลดแบบ Lazy Loading เวลาที่เอกสารเสร็จสมบูรณ์และโหลดเต็มจะไม่พิจารณารูปภาพที่อยู่ด้านล่างของหน้า
ก่อนที่จะใช้การโหลดแบบ Lazy Loading หน้าเว็บใช้เวลาโหลดเกือบ 10 วินาที – การโหลดแบบ Lazy Loading ทำให้เว็บไซต์โหลดเร็วขึ้น 2 เท่า
คุณสามารถดูสาเหตุได้โดยดูที่การแยกย่อยเนื้อหาใน WebPageTest:
เมื่อใช้งานการโหลดแบบ Lazy Loading จำนวนคำขอรูปภาพจะลดลงจาก 158 เป็น 134 ขนาดรูปภาพลดลงจาก 2,523,665 ไบต์ (2.5MB) เหลือเพียง 116,319 ไบต์ (0.12MB)
ปลั๊กอิน BJ Lazy Load ได้เพิ่ม JavaScript และสคริปต์อื่นๆ เพิ่มเติมไปยังไซต์ แต่ดูเหมือนว่าสิ่งเหล่านี้จะไม่ส่งผลต่อเวลาในการโหลด
คุณยังสามารถโหลดรูปภาพแบบ Lazy Loading ได้โดยใช้ปลั๊กอิน Autoptimize ฟรี ซึ่งจะทำการปรับความเร็วให้เหมาะสมอีกมากมายที่กล่าวถึงในบทความนี้ ไปที่ Dashboard > Settings > Autoptimize > Images และเลือกตัวเลือก “Lazy-load images”
อย่าพึ่งพาเฉพาะการโหลดแบบ Lazy Loading โดยใช้ JavaScript เพื่อเพิ่มประสิทธิภาพความเร็ว เพราะหากผู้ใช้บล็อก Java พวกเขาจะไม่ได้รับการโหลดแบบ Lazy Loading ตรวจสอบให้แน่ใจว่ารูปภาพของคุณถูกบีบอัดด้วยเพื่อประโยชน์สูงสุด
สิ่งสำคัญอย่างหนึ่งที่ต้องจำไว้: คุณยังสามารถเพิ่มคลาสรูปภาพเพื่อให้แน่ใจว่าโหลดรูปภาพที่จำเป็นในทันที (เช่น อะไรก็ตามที่อยู่ครึ่งหน้าบน) เพียงกำหนดค่าแท็ก เช่น “not-lazy=”1″ ใน BJ Lazy Load และเพิ่มลงในรูปภาพใดๆ เพื่อข้ามการโหลดแบบ Lazy Loading การปรับอัตโนมัติช่วยให้คุณเพิ่มการยกเว้นการโหลดเมื่อจำเป็น
หมายเหตุ: WordPress กำลังทำงานเพื่อเพิ่มการโหลดแบบ Lazy Loading ให้กับ WordPress Core ซึ่งหมายความว่าสามารถใช้งานได้โดยไม่ต้องใช้โค้ดหรือปลั๊กอินเพิ่มเติมในอนาคต
อย่าถือว่า CDN จะทำให้รูปภาพของคุณโหลดเร็วขึ้น
ฉันได้อ่านคำแนะนำมากมายเกี่ยวกับความเร็วของ WordPress และส่วนใหญ่แนะนำให้รับบริการ CDN แบบชำระเงิน เช่น KeyCDN (ซึ่งฉันได้ทดสอบแล้ว) หรือ StackPath (เดิมคือ MaxCDN) เพื่อโฮสต์รูปภาพของคุณ
เมื่อคุณใช้ CDN รูปภาพ คำขอที่ทำขึ้นเมื่อหน้าเว็บของคุณกำลังโหลดจะมาจาก URL เช่น cdn.yourdomainname.com/image-name แทนที่จะเป็น yourdomainname.com/image-name ซึ่งหมายความว่าคำขอมาจากเซิร์ฟเวอร์อื่นไปยังเนื้อหาเว็บไซต์ของคุณทั้งหมด แต่ไม่ได้หมายความว่าคำขอจะเร็วขึ้น
ตัวอย่างเช่น ดูเวลาในการโหลดหน้าสุ่มบนไซต์ WordPress WPBeginner:
ภาพจาก CDN (ใช้ MaxCDN) ใช้เวลานานในการโหลด และไม่ใหญ่มาก บานหน้าต่างรายละเอียดด้านบนแสดงภาพขนาด 9.3KB ซึ่งใช้เวลาโหลดเกือบสามในสี่ของวินาที นั่นเป็นจังหวะที่เฉื่อยชา!
CDN ไม่ได้ทำให้รูปภาพของคุณโหลดเร็วเสมอไป การบีบอัดรูปภาพที่ดีและการโหลดแบบ Lazy Loading เป็นวิธีที่น่าเชื่อถือมากขึ้นในการทำให้หน้าเว็บโหลดเร็วขึ้น
โหลด JavaScript แบบอะซิงโครนัส
แม้ว่าสคริปต์อาจทำให้ไซต์ของเราช้าลง แต่เราก็ยังต้องการสคริปต์และฟังก์ชันของสคริปต์เหล่านั้น ตัวอย่างเช่น ฉันชอบใช้ Google Analytics ดังนั้นฉันจึงไม่ต้องการลบออกเพื่อให้ไซต์ของฉันเร็วขึ้น แต่มีวิธีทำให้ Analytics และสคริปต์อื่นๆ โหลดเร็วขึ้น นั่นคือการโหลด แบบอะซิงโครนัส
JavaScript แบบอะซิงโครนัสโหลดสคริปต์หลายตัวพร้อมกัน ซึ่งตรงกันข้ามกับการโหลดแบบซิงโครนัส ซึ่งหมายถึงการโหลดสคริปต์ตามลำดับ ทีละตัว
การโหลดสคริปต์ทั้งหมดของคุณพร้อมกันจะทำให้โหลดเร็วขึ้นมากเพราะไม่มีเวลารอ โดยเฉพาะอย่างยิ่งในกรณีที่ไซต์ WordPress ของคุณเรียกจาวาสคริปต์จากแหล่งภายนอกต่างๆ เช่น Google Analytics หรือ Google Fonts
หากคุณเคยทดสอบความเร็วของเว็บไซต์ใน Google Page Speed Insights คุณอาจจะรู้ว่าคุณต้อง " กำจัด JavaScript ที่บล็อกการแสดงผล "
การนำ JavaScript ที่บล็อกการแสดงผลออกจะทำให้โหลดเนื้อหาของหน้าครึ่งหน้าบน (เช่น รูปภาพและข้อความ) โดยไม่ต้องรอ JavaScript หากไซต์ WordPress ของคุณต้องการโหลด JavaScript ก่อนจึงจะสามารถทำงานได้ JavaScript ที่บล็อกการแสดงภาพก็ถือว่าใช้ได้ แต่ถ้าเช่นเดียวกับฉัน เว็บไซต์ของคุณใช้ JavaScript เพื่อการทำงานเพิ่มเติม การบล็อก Java ที่บล็อกการแสดงผลเป็นวิธีที่ยอดเยี่ยมในการเร่งความเร็วเว็บไซต์ของคุณ
ฉันใช้ปลั๊กอิน Async JavaScript ฟรีเพื่อเพิ่มประสิทธิภาพ JavaScript ของฉันอย่างง่ายดาย เลือกการตั้งค่า "Apply Async" อย่างรวดเร็ว:
สำหรับจุดความเร็วพิเศษ คุณยังสามารถเปลี่ยนโค้ดติดตาม Google Analytics ของคุณเป็นเวอร์ชัน async ซึ่ง Google ระบุว่าจะช่วยเร่งความเร็วไซต์ของคุณ:
ข้อมูลโค้ดติดตามแบบอะซิงโครนัสทางเลือกด้านล่างเพิ่มการรองรับการโหลดล่วงหน้า ซึ่งจะช่วยเพิ่มประสิทธิภาพเล็กน้อยในเบราว์เซอร์รุ่นใหม่
<!-- Google Analytics --> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new วันที่; ga('สร้าง', ' UA-XXXX-Y ', 'อัตโนมัติ'); ga('ส่ง', 'การดูหน้าเว็บ'); </script> <script async src='https://www.google-analytics.com/analytics.js'></script> <!-- สิ้นสุด Google Analytics -->
เปิดใช้งานการบีบอัด gzip
การบีบอัด Gzip เป็นวิธีการบีบอัดแบบไม่สูญเสียข้อมูล ซึ่งจะย่อขนาดไฟล์และช่วยให้โหลดเร็วขึ้นเนื่องจากขนาดที่เล็กกว่า
ข้อความ, HTML, JavaScript และ CSS ทั้งหมดสามารถบีบอัดได้โดยใช้การบีบอัด gzip
คุณสามารถใช้ปลั๊กอิน WordPress ต่างๆ เพื่อใช้การบีบอัด gzip บริการต่างๆ เช่น CloudFlare สามารถช่วยคุณได้ ฉันชอบที่จะ ใช้การบีบอัดโดยตรงบนเซิร์ฟเวอร์ หากเป็นไปได้
หากแพ็คเกจโฮสติ้งของคุณให้สิทธิ์เข้าถึง cPanel คุณสามารถเพิ่มการบีบอัด gzip ไปยังเซิร์ฟเวอร์ของคุณได้โดยตรง ไปที่ไอคอน "เพิ่มประสิทธิภาพเว็บไซต์" จากหน้าแรกของ cPanel เลือก "บีบอัดเนื้อหาทั้งหมด" แล้วคลิก "อัปเดตการตั้งค่า"
หากต้องการตรวจสอบว่ามีการบีบอัด gzip บนเว็บไซต์ของคุณหรือไม่ ให้ทำการทดสอบง่ายๆ
ลบสตริงการสืบค้น
ไฟล์ CSS บางไฟล์มีหมายเลขเวอร์ชันต่อท้าย เช่น “css/screen.min.css?ver=1.7” บิตหลังเครื่องหมาย “?” หมายความว่าไฟล์จะไม่ถูกแคช ดังนั้นมันจะโหลดในทุกหน้า ซึ่งหมายความว่าเวลาในการโหลดยังคงช้าลง แม้ว่าผู้ใช้จะเข้าชมหลายหน้าในเว็บไซต์ของคุณก็ตาม
การเพิ่มโค้ดนี้ต่อท้ายไฟล์ functions.php ของธีม WordPress จะเป็นการลบสตริงการสืบค้น คุณสามารถทำได้ผ่านตัวจัดการไฟล์ใน cPanel หรือผ่านไคลเอนต์ FTP เช่น FileZilla
/**ลบสตริงการสืบค้น ฟังก์ชัน rb_remove_script_version( $src ){ $parts = ระเบิด ( '?', $src ); ส่งคืน $parts[0]; } add_filter( 'script_loader_src', 'rb_remove_script_version', 15, 1 ); add_filter( 'style_loader_src', 'rb_remove_script_version', 15, 1 );
ขอบคุณ 99robots สำหรับรหัสนั้น
หมายเหตุ: ทำการสำรองข้อมูลเสมอก่อนที่คุณจะยุ่งกับไฟล์ระบบ!
เพิ่มหน่วยความจำ WordPress
WordPress มีขีด จำกัด หน่วยความจำเริ่มต้นที่ 32MB ซึ่งสามารถควบคุมไซต์ของคุณได้
เพิ่มรหัสต่อไปนี้ใน ไฟล์ wp-config.php ของคุณ
/** เพิ่มหน่วยความจำ WordPress กำหนด ( 'WP_MEMORY_LIMIT', '128M' );
คุณสามารถใช้ปลั๊กอินฟรีนี้เพื่อตรวจสอบว่าไซต์ WordPress ของคุณใช้หน่วยความจำเท่าใด
เพิ่มการดึงข้อมูล DNS ล่วงหน้า
DNS เป็นเซิร์ฟเวอร์ชื่อโดเมน ในขณะที่เรารู้จักโดเมน (หรือที่รู้จักว่าเว็บไซต์) โดยใช้ชื่อคำ เช่น Google.com คอมพิวเตอร์รู้จักโดเมนเป็นตัวเลขที่เรียกว่าที่อยู่ IP (เช่น 12.345.678) ในการดึงทรัพยากรจากโดเมน การค้นหา DNS จะต้องเกิดขึ้น ซึ่งแปล ชื่อคำไปยังที่อยู่ IP ต้องใช้เวลา
การดึงข้อมูล DNS ล่วงหน้าจะพยายามแก้ไขการค้นหาโดเมนและแปลชื่อคำเป็นที่อยู่ IP ก่อนคลิกลิงก์หรือโหลดทรัพยากร
การเพิ่มการดึงข้อมูลล่วงหน้า DNS สำหรับสคริปต์ทั่วไปบนไซต์ WordPress เช่น Google Analytics หรือแบบอักษร จะช่วยประหยัดเวลาในการโหลดของคุณไม่กี่มิลลิวินาที
ทำการทดสอบบน WebPageTest และดูว่าทรัพยากรภายนอกใดที่คุณต้องการดึงข้อมูลล่วงหน้า
เพิ่มโค้ดนี้ลงในไฟล์ functions.php ในธีม WordPress ของคุณ
//* กำลังเพิ่มการดึงข้อมูล DNS ล่วงหน้า ฟังก์ชัน dns_prefetching() {echo ' ';}add_action('wp_head', 'dns_prefetching', 0);
ไปที่แท็บ "โดเมน" บน WebPageTest เพื่อค้นหาโดเมนภายนอกที่จะดึงข้อมูลล่วงหน้า
ใช้ประโยชน์จากการแคชเบราว์เซอร์
ทุกครั้งที่เบราว์เซอร์ (เช่น Chrome, Firefox ฯลฯ) โหลดหน้าเว็บ จะต้องดาวน์โหลดไฟล์ทั้งหมด (เช่น HTML, CSS, JavaScript, รูปภาพ ฯลฯ) บนหน้านั้น หากไม่มีแคชของเบราว์เซอร์ หากมีคนกลับมาที่หน้าเว็บเดิมอีกครั้งในหนึ่งชั่วโมง ระบบจะดาวน์โหลดเนื้อหาของหน้าทั้งหมดอีกครั้ง
การแคชของเบราว์เซอร์จะจัดเก็บทรัพย์สินของเว็บไซต์ไว้ในเบราว์เซอร์ของผู้ใช้ตามระยะเวลาที่กำหนด ซึ่งจะทำให้หน้าเว็บโหลดเร็วขึ้นสำหรับพวกเขาในขณะที่พวกเขาเรียกดูต่อไป
เพิ่มโค้ดด้านล่างลงในไฟล์ . htaccess ของคุณเพื่อใช้ประโยชน์จากการแคชของเบราว์เซอร์
## เริ่มต้น LEVERAGE BROWSER CACHING ## หมดอายุActive On ExpiresByType image/jpg "เข้าถึงได้ 1 ปี" ExpiresByType image/jpeg "เข้าถึงได้ 1 ปี" ExpiresByType image/gif "เข้าถึงได้ 1 ปี" ExpiresByType image/png "เข้าถึงได้ 1 ปี" ExpiresByType text/css "เข้าถึง 1 เดือน" ExpiresByType text/html "เข้าถึงได้ 1 เดือน" แอปพลิเคชัน ExpiresByType/pdf "เข้าถึงได้ 1 เดือน" ExpiresByType text/x-javascript "เข้าถึงได้ 1 เดือน" แอปพลิเคชัน ExpiresByType/x-shockwave-flash "เข้าถึง 1 เดือน" ExpiresByType image/x-icon "เข้าถึงได้ 1 ปี" ExpiresDefault "เข้าถึง 1 เดือน" สิ้นสุด LEVERAGE BROWSER CACHING ##
ใช้แคชและ CDN เพื่อการโหลดที่เร็วขึ้น
การแคชคือวิธีการ จัดเก็บข้อมูลที่รวดเร็ว ซึ่งเก็บเวอร์ชัน HTML ของหน้าเว็บไซต์ของคุณไว้ใน RAM ของเซิร์ฟเวอร์ จึงสามารถให้บริการแก่ผู้เยี่ยมชมได้อย่างรวดเร็ว
โดยไม่ต้องแคช ทุกครั้งที่ผู้เยี่ยมชมเข้าถึงหน้าบนเว็บไซต์ของคุณ เซิร์ฟเวอร์จะต้องสร้างเวอร์ชัน HTML ใหม่ ซึ่งต้องใช้เวลา
ข่าวดีก็คือมีปลั๊กอินแคช WordPress ฟรีมากมายที่จะช่วยคุณ
ฉันใช้ WP Super Cache เพราะมันถูกสร้างขึ้นโดย Automattic บริษัทที่อยู่เบื้องหลัง WordPress
CDN (เครือข่ายการจัดส่งเนื้อหา) คือเครือข่ายของเซิร์ฟเวอร์ในสถานที่ต่างๆ ทั่วโลกซึ่งจัดเก็บเวอร์ชันต่างๆ ของเว็บไซต์ของคุณ เมื่อผู้เยี่ยมชมเข้าถึงหน้าบนเว็บไซต์ของคุณ พวกเขาจะได้รับจากตำแหน่ง CDN ที่ใกล้ที่สุด ซึ่งน่าจะอยู่ใกล้กว่าตำแหน่งเซิร์ฟเวอร์จริงของคุณ CDN ยังช่วยลดภาระงานบนเซิร์ฟเวอร์ของคุณด้วยการจัดเก็บเวอร์ชันของรูปภาพเว็บไซต์และไฟล์ขนาดใหญ่เพื่อการเรียกข้อมูลอย่างรวดเร็ว
หากไม่มี CDN เซิร์ฟเวอร์ของคุณจะอยู่ในตำแหน่งเดียวและต้องโหลดและถ่ายโอนข้อมูลจากเซิร์ฟเวอร์นั้นไปยังผู้เยี่ยมชมในแต่ละครั้ง
มี CDN อยู่มากมาย เช่น KeyCDN, StackPath (เดิมคือ MaxCDN) และ Cloudflare ฉันแนะนำให้ใช้ Cloudflare หากคุณเพิ่งเริ่มใช้ CDN เนื่องจากฟรีและติดตั้งง่าย
แก้ไขคำขอเสีย
มุมมอง Waterfall บน WebPageTest จะเน้น (เป็นสีเหลือง) ข้อผิดพลาดของคำขอหรือการเปลี่ยนเส้นทาง สิ่งเหล่านี้ได้รับโดยใช้รหัสสถานะ http มาตรฐาน (เช่น 301, 404 เป็นต้น) และจะช่วยให้คุณระบุปัญหาได้
ค้นหา ข้อผิดพลาด 404 ก่อน ไซต์ของฉันพยายามโหลดเนื้อหารูปภาพที่ขาดหายไปซึ่งเป็นส่วนหนึ่งของธีม ฉันลบมันและประหยัดเวลาในการโหลดของฉันไปสองสามมิลลิวินาที ง่าย.
ปิดการใช้งานคุณสมบัติ WordPress ที่คุณไม่ได้ใช้
WordPress เป็น CMS ที่ทรงพลังและใช้งานได้หลากหลาย ซึ่งใช้กับเว็บไซต์หลายประเภท เป็นไปได้ว่าเว็บไซต์ของคุณไม่ได้ใช้คุณสมบัติบางอย่างของ WordPress แต่ยังคงโหลดคุณสมบัติทั้งหมดอยู่
ต่อไปนี้คือคุณลักษณะบางอย่างของ WordPress ที่ไม่ค่อยได้ใช้งานซึ่งคุณสามารถพิจารณาปิดได้:
- อิโมจิ
- REST API
- ลิงค์ RSD
- Dashicons
- jQuery Migrate
- ลิงค์สั้น
- XML-RPC
- Heartbeat API
คุณสามารถใช้ Clearfy (ปลั๊กอินฟรี) เพื่อลบ WordPress ที่ไม่จำเป็นออกจากเว็บไซต์ของคุณได้อย่างง่ายดาย
โหลดสคริปต์/ปลั๊กอินเฉพาะในบางหน้าเท่านั้น
WordPress จะพยายามโหลดปลั๊กอินและสคริปต์ทั้งหมดที่คุณมีในทุกหน้าของเว็บไซต์ของคุณ แต่คุณอาจไม่ได้ใช้ทั้งหมดในทุกหน้า ตัวอย่างทั่วไปของสิ่งนี้คือปลั๊กอินแบบฟอร์มการติดต่อ หากคุณใช้แบบฟอร์มการติดต่อ มันอาจจะอยู่บนหน้าติดต่อของคุณเท่านั้น แต่สคริปต์ปลั๊กอินจะถูกโหลดในทุกหน้า ทำให้สิ้นเปลืองทรัพยากร
และแน่นอนว่า แดกดันมีปลั๊กอินที่จะช่วยคุณแก้ปัญหาปลั๊กอินโอเวอร์โหลด!
ปรับฐานข้อมูล MySQL ให้เหมาะสม
ไม่ว่าคุณจะใช้ MySQL หรือ MariaDB เป็นฐานข้อมูล WordPress ของคุณ คุณจำเป็นต้องปรับให้เหมาะสมเพื่อรักษาความเร็วในการโหลดเว็บไซต์ที่รวดเร็ว ทุกครั้งที่คุณดำเนินการใดๆ บนไซต์ WordPress ของคุณ จะมีการจัดเก็บบันทึกฐานข้อมูล ใหญ่ได้!
เพิ่มประสิทธิภาพฐานข้อมูล WordPress ของคุณเพื่อลบ bloat เช่น:
- กระทู้เก่า
- ตารางปลั๊กอินที่ถูกลบ
- โพสต์ในถังขยะ เพจ และความคิดเห็น
หากคุณใช้แดชบอร์ดการจัดการ WordPress เช่น ManageWP (ฟรี) คุณสามารถเพิ่มประสิทธิภาพฐานข้อมูล WordPress ของคุณได้ในคลิกเดียว คุณยังสามารถใช้ปลั๊กอินการเพิ่มประสิทธิภาพฐานข้อมูลฟรี เช่น WP DB Manager หรือล้างข้อมูลผ่าน phpMyAdmin ใน cPanel หรือจากโฮสต์เว็บไซต์ของคุณ
จะบอกได้อย่างไรว่าธีม WordPress ของคุณช้า
ธีม WordPress ทั้งหมดไม่ได้ถูกสร้างขึ้นมาเท่ากัน
ธีม WordPress ของคุณอาจค่อนข้างเร็วหรือลากคุณลงทั้งนี้ขึ้นอยู่กับว่าพวกเขาเขียนโค้ดและปรับความเร็วได้ดีเพียงใด หากคุณต้องการทราบข้อมูลเพิ่มเติม โปรดอ่านการทดสอบเต็มรูปแบบของเราเกี่ยวกับธีม WordPress ที่เร็วที่สุด
คุณสามารถบอกได้โดยดูที่ผลการตรวจสอบความเร็วของ WebPageTest
ดูที่มุมมองแบบน้ำตกและคลิกที่ผลลัพธ์ใดๆ ก่อนบรรทัดเอกสารเสร็จสมบูรณ์สีน้ำเงินที่ดูเหมือนจะล้าหลัง (รายการที่ช้ากว่าจะมีแถบที่ยาวกว่า) ตรวจสอบ URL – สิ่งที่ขึ้นต้นด้วย /wp-content/themes/theme-name-here คือไฟล์ธีม
ฉันพบไฟล์ธีมที่น่ารำคาญซึ่งทำให้เกิดความล่าช้าเกิน 1 วินาที เป็นภาพพื้นผิวพื้นหลัง .png ที่หายไปจากธีม Eleven40 เพื่อความเป็นธรรมต่อเจเนซิส ฉันได้รับธีมเมื่อหลายปีก่อนและได้ปรับเปลี่ยนมันตั้งแต่นั้นมา ดังนั้นฉันคิดว่าการเขียนโค้ดที่ไม่ดีนั้นเป็นของฉัน ไม่ใช่เฉพาะธีมย่อย ไม่ว่าจะด้วยวิธีใดมันทำให้ฉันช้าลง ฉันสามารถดูธีมของโค้ดและทำการปรับแต่ง หรืออาจลองเปลี่ยนไปใช้ธีมใหม่ (ดูการเปรียบเทียบความเร็วของธีมด้านล่าง) ในการแก้ไขปัญหานี้ ฉันได้ดูสไตล์ชีต style.css ของธีมและพบปัญหาไฟล์ .png และเปลี่ยนโค้ดเพื่อให้ได้รับสีขาวจากคำสั่ง CSS แทน
การแก้ไข CSS อย่างง่ายนี้ทำให้ WordPress โหลดเร็วขึ้น และฉันมีเวลาโหลดน้อยกว่า 1 วินาที!
ในท้ายที่สุด ฉันเปลี่ยนไปใช้ธีม GeneratePress ซึ่งเป็นธีมที่เร็วที่สุดที่ฉันหาได้ (ดูสาเหตุด้านล่าง)
การทดสอบความเร็ว ธีม WordPress ยอดนิยม
ด้วยจิตวิญญาณแห่งการทดลอง ฉันได้ทดสอบธีมยอดนิยม 10 ธีม เพื่อดูว่าฉันสามารถปรับปรุงความเร็วได้หรือไม่ คุณสามารถอ่านผลลัพธ์ทั้งหมดได้ที่นี่
ธีม | PageSpeed Mobile | เวลาในการโหลด | PageSpeed Desktop | ขนาดไฟล์ธีม | ราคา | ผู้ใช้ปัจจุบัน |
---|---|---|---|---|---|---|
GeneratePress (พรีเมียม) | 61/100 | 1.576 วินาที | 97/100 | 882KB (+809KB ปลั๊กอิน) | $59 | 89,046 |
GeneratePress (ฟรี) | 63/100 | 2.143 วินาที | 97/100 | 882KB | $0 | 375,504 |
Astra | 63/100 | 2.148 วินาที | 98/100 | 925KB | $0 | 359,575 |
ยี่สิบยี่สิบ | 68/100 | 2.218 วินาที | 98/100 | 698KB | $0 | 19,973 |
ปฐมกาล | 53/100 | 2.305 วินาที | 95/100 | 329KB | $59.95 | 303,811 |
ธีม X | 49/100 | 2.4 วินาที | 89/100 | 5.6MB | $59 | 200,000+ |
OceanWP | 49/100 | 2.582 วินาที | 89/100 | 3.2MB | $0 | 322,365 |
Divi | 46/100 | 2.648 วินาที | 90/100 | 6.6MB | $89 | 1,362,180 |
เอนโฟลด์ | 43/100 | 2.810 วินาที | 84/100 | 19.2MB | $59 | 359,345 |
อวาดา | 34/100 | 2.854 วินาที | 83/100 | 5.4MB | $60 | 623,527 |
TL;DR : GeneratePress Premium เป็นธีม WordPress ที่เร็วที่สุดที่คุณสามารถซื้อได้ในขณะนี้ และฉันได้ย้ายเว็บไซต์นี้ไปที่ GeneratePress แล้ว
นี่คือการทดสอบความเร็วที่อัปเดตเพื่อให้คุณเห็นว่ามันเร็วแค่ไหน ผลลัพธ์สำหรับหน้าตรวจสอบ perfmatters ของฉัน:
นั่นคือเวลาในการโหลดทั้งหมดน้อย กว่า 1 วินาที และ คะแนนความเร็วของอุปกรณ์เคลื่อนที่ที่ 91/100 ใน PageSpeed Insights
หน้านี้ยังผ่านการทดสอบ Core Web Vitals ของ Google บนเดสก์ท็อปอีกด้วย:
วิธีสังเกตปัญหาการโฮสต์ช้า
ปัญหาความเร็วของไซต์ของ WordPress นั้นไม่สามารถปรับปรุงได้อย่างน่าอัศจรรย์ด้วยการเปลี่ยนโฮสต์หรืออัปเกรดเป็นแพ็คเกจโฮสติ้งที่เร็วกว่า แต่คุณสามารถใช้ WebPageTest เพื่อระบุว่าโฮสติ้งของคุณช้าลงมากเพียงใด
ลองโฮสต์ไฟล์ index.html อย่างง่าย และตรวจสอบเวลาในการโหลด หากคุณไม่สามารถรับ TTFB ที่รวดเร็วบนหน้า html ธรรมดาๆ ได้ แสดงว่าโฮสติ้งของคุณช้าลง
ฉันอัปโหลดหน้า HTML อย่างง่าย พร้อมรูปภาพ และได้รับ TTFB 0.221 วินาที ซึ่งดีสำหรับการโฮสต์ราคาถูก! ดังนั้นผู้ให้บริการโฮสต์ของฉันจึงไม่ช้า แต่ไซต์ WordPress ของฉันแน่นอน! ตอนนี้ฉันรู้แล้วว่าไม่มีประโยชน์อะไรมากในการใช้จ่ายเงินเพื่อโฮสต์มากขึ้น จนกว่าฉันจะปรับ WordPress ให้เหมาะสม
ฉันได้ย้ายเว็บไซต์ WordPress ของฉันไปที่ Cloudways ซึ่งมีค่าใช้จ่าย $10/เดือน แต่มีความเร็วที่ยอดเยี่ยม ตอนนี้ฉันได้รับ TTFB 0.092 วินาที ซึ่งเร็วมาก คุณสามารถอ่านรีวิว Cloudways ของฉันสำหรับข้อมูลเพิ่มเติม
ปลั๊กอินความเร็ว WordPress
หลังจากที่ฉันใช้เวลาหลายปีในการค้นคว้าเกี่ยวกับการปรับปรุงความเร็วของ WordPress และวิธีการทดสอบกับเว็บไซต์ของฉัน ฉันพบว่าปลั๊กอิน perfmatters (ตรวจสอบที่นี่) ทำงานได้ดีมากสำหรับคุณ ด้วยราคาที่น้อยกว่า 25 เหรียญ การแก้ไขด่วนที่ไม่ต้องคิดมาก
นอกจากนี้ยังมี WP Rocket (ตรวจสอบที่นี่) ซึ่งจะช่วยเร่งความเร็วไซต์ WordPress ของคุณได้เป็นอย่างดี
นอกจากนี้ หากคุณไม่สนใจที่จะปรับแต่งเซิร์ฟเวอร์และการตั้งค่า cPanel ด้วยตัวเอง คุณสามารถใช้โฮสติ้ง WordPress ที่มีการจัดการ เช่น Kinsta และจ้างงานภายนอกให้กับพวกเขาได้ จะทำให้คุณเสียค่าใช้จ่ายมากกว่าโฮสติ้งราคาถูก แต่อย่างน้อยคุณก็สามารถลืมมันไปและปล่อยให้ผู้เชี่ยวชาญได้
โดยส่วนตัวแล้ว ฉันชอบทำงานนี้ด้วยตัวเอง และฉันคิดว่าสิ่งสำคัญคือต้องมีความเข้าใจว่าอะไรที่ทำให้ไซต์ WordPress ทำงานช้าลง ที่กล่าวว่า ฉันขอแนะนำให้ใช้บริการของบุคคลที่สามกับลูกค้า ผู้ใช้ WordPress ที่เชี่ยวชาญเทคโนโลยีน้อยกว่า หรือผู้ที่ให้ความสำคัญกับเวลาของพวกเขา
หากคุณต้องการแก้ไขเว็บไซต์ WordPress ที่ช้าอย่างรวดเร็ว ฉันขอแนะนำให้ใช้ปลั๊กอินและบริการต่อไปนี้:
- ผลงาน
- WP Rocket
ฉันเคยได้ยินสิ่งดีๆเกี่ยวกับ Nitropack มาบ้าง แต่ฉันยังไม่ได้ทดสอบเลย