Google ใช้ การจัดทำดัชนีสำหรับอุปกรณ์เคลื่อนที่เป็นอันดับแรก ทำให้ความเร็วของอุปกรณ์เคลื่อนที่มีความสำคัญมากขึ้นกว่าเดิม ขั้นตอนแรก คือ การทดสอบเว็บไซต์ WordPress ของคุณ โดยใช้การทดสอบความเร็วเฉพาะมือถือ (เช่น Think With Google) และดู รายงาน Core Web Vitals เวอร์ชันมือถือใน Google Search Console เรียนรู้ว่า คุณจำเป็นต้องปรับปรุงสิ่งต่างๆ เช่น LCP, CLS หรือ TBT บนไซต์ WordPress บนมือถือของคุณหรือไม่
แล้วคุณจะเร่งความเร็วไซต์บนมือถือของคุณได้อย่างไร?
เพื่อเพิ่มความเร็วไซต์ WordPress บนมือถือของคุณให้เปิดใช้งานการแคชบนมือถือในปลั๊กอินแคชของคุณใช้รูปภาพที่ตอบสนอง / ปรับเปลี่ยนได้ และหลีกเลี่ยง JavaScript ในเมนูมือถือ (ลองเข้ารหัสใน CSS แทน) คุณอาจพิจารณา AMP แต่มีข้อร้องเรียนเกี่ยวกับเรื่องนี้ คุณยังสามารถเพิ่มปุ่ม“ โหลดความคิดเห็นเพิ่มเติม” บนมือถือและปรับลดคุณภาพของภาพสำหรับการเชื่อมต่อมือถือที่ช้า
ข่าวสินค้าคือ การเพิ่มประสิทธิภาพเดสก์ท็อปส่วนใหญ่จะโอนไปยังมือถือ การลด TTFB โดยใช้ปลั๊กอินที่มีน้ำหนักเบา และการเข้ารหัสส่วนหัว / ส่วนท้ายอย่างหนัก (แทนที่จะใช้โปรแกรมสร้างเพจ) ล้วนเป็นสิ่งที่สามารถปรับปรุงความเร็วทั้งเดสก์ท็อป และอุปกรณ์เคลื่อนที่ได้ หากคุณยังไม่ได้ทำทุกอย่างเพื่อเพิ่มประสิทธิภาพไซต์ของคุณ (การเพิ่มประสิทธิภาพทั่วไป) สิ่งเหล่านี้ควรปรับปรุงความเร็วของอุปกรณ์เคลื่อนที่ด้วย
1. ทดสอบความเร็วมือถือของคุณ
Think With Google เป็นวิธีที่ดีที่สุดในการทดสอบความเร็วมือถือเนื่องจากใช้การเชื่อมต่อ 4G
PageSpeed Insights ให้คำแนะนำที่คล้ายกัน แต่ใช้การเชื่อมต่อ 3G สำหรับการทดสอบมือถือ ซึ่งหมายความว่าไซต์ WordPress ของคุณมักจะโหลดเร็วขึ้นในการทดสอบบนเดสก์ท็อป
รายงาน Core Web Vitals ใน Google Search Console มีส่วนเฉพาะสำหรับอุปกรณ์เคลื่อนที่ซึ่งแสดง URL ที่ได้รับผลกระทบ อย่างไรก็ตามมีเพียงระบุว่าคุณจำเป็นต้องปรับปรุง LCP, FID และ CLS หรือไม่ ใช้ Think With Google (หรือแม้แต่ PageSpeed Insights) หากคุณต้องการคำแนะนำเฉพาะ
บัญชี GTmetrix Pro สามารถทดสอบเว็บไซต์ของคุณบน Android ได้ แต่จำกัด เฉพาะใน Vancouver เนื่องจาก GTmetrix ใช้คำแนะนำเดียวกันจาก Lighthouse จึงค่อนข้างไม่มีจุดหมาย Google Analytics ยังช่วยให้คุณดูเวลาในการโหลดของแต่ละหน้ามือถือภายใต้ Behavior > Site Speed,แล้วเพิ่มส่วนสำหรับการจราจรโทรศัพท์มือถือและแท็บเล็ต แต่อย่างที่บอกไปแล้วว่าจะติด Think With Google
2. เปิดใช้งาน Mobile Caching
ส่วนใหญ่ ปลั๊กอินแคช เช่น WP Rocket และ WP Fastest Cache มีตัวเลือกสำหรับการแคชมือถือ
หากปลั๊กอินแคชของคุณไม่รองรับการแคชบนมือถือ คุณอาจต้องการเปลี่ยนไปใช้ปลั๊กอินที่รองรับ ไฟล์แคชแยกต่างหากสำหรับอุปกรณ์มือถือจะ แคชองค์ประกอบเฉพาะมือถือ และควรเปิดใช้งานเฉพาะเมื่อคุณใช้ปลั๊กอินมือถือ (WP Touch, WP Mobile Detect, ธีมมือถือของ JetPack)
การโหลดแคชมือถือล่วงหน้าแทน
ปลั๊กอินแคชเดสก์ท็อปมีตัวเลือกในการโหลดแคชเดสก์ท็อป หรือมือถือล่วงหน้า แต่ไม่ใช่ทั้งสองอย่าง หากผู้เยี่ยมชมส่วนใหญ่ของคุณใช้อุปกรณ์เคลื่อนที่คุณสามารถเลือกที่จะโหลดแคชบนมือถือล่วงหน้าแทนเดสก์ท็อป คุณสามารถเปิดใช้พรีโหลดมือถือโดยใช้ปลั๊กอินผู้ช่วย WP Rocket’s helper plugin. สำหรับปลั๊กอินแคชอื่น ๆ คุณจะต้องทำการค้นหาโดย Google เพื่อดูว่ามีตัวเลือกให้ใช้การโหลดล่วงหน้าบนมือถือ แทนการโหลดล่วงหน้าแบบมาตรฐานหรือไม่
WP Rocket พูดว่า:
“ ปลั๊กอินจะ“ โหลดไฟล์แคชมือถือล่วงหน้าแทนไฟล์แคชมาตรฐาน ขณะนี้ยังไม่สามารถโหลดทั้งสองแบบล่วงหน้าได้”
3. ใช้ภาพที่ปรับเปลี่ยนได้
ภาพที่ปรับเปลี่ยนได้จะแสดงภาพที่มีขนาดเล็กลงไปยังอุปกรณ์เคลื่อนที่
มันคล้ายกับ ภาพที่ถูกปรับขนาด (เฉพาะสำหรับมือถือ) และจะทำโดยใช้ภาพการปรับตัวปลั๊กอินเช่น ShortPixel Adaptive แสดงสินค้า ในการตั้งค่าตั้งค่าความกว้างสูงสุดของพื้นหลัง
4.Lazy Load รูปบนมือถือ
ปลั๊กอินการเพิ่มประสิทธิภาพแคชและรูปภาพจำนวนมากทำให้คุณ Lazy Load ภาพบนมือถือ
5. ลบ Sliders บนมือถือ
หากคุณยืนยันที่จะมี อย่างน้อยให้พิจารณาลบออกจากมือถือ และลดจำนวนภาพลง ตัวเลื่อนเกือบทั้งหมดจะทำให้ WordPress ช้าลงและนี่ก็เป็นเรื่องจริงสำหรับมือถือ หากคุณใช้ page builder เช่น Elementor ให้ใช้ responsive mode เพื่อลบแถบเลื่อนบนมือถือ
6. แก้ไขข้อผิดพลาดการเปลี่ยนเส้นทางมือถือ
หากคุณเห็นข้อผิดพลาดในการเปลี่ยนเส้นทางใน PageSpeed Insights อาจเป็นเพราะ:
- คุณเปลี่ยนเป็น HTTPS หรือ WWW และไม่ได้อัปเดตลิงก์
- คุณตั้งค่ากฎของเพจใน Cloudflare ด้วย URL การส่งต่อ
- ปลั๊กอินที่เข้ารหัสไม่ดีหรือกำหนดค่าไม่ถูกต้องทำให้เกิดการเปลี่ยนเส้นทาง
- ตัวเลือก Cloudflare SSL เข้ากันไม่ได้กับการกำหนดค่าเซิร์ฟเวอร์ของคุณ (ดูบทช่วยสอน )
หากใช้ Cloudflare คุณสามารถใช้ตัวเลือกการเปลี่ยนเส้นทางมือถือซึ่งพวกเขาระบุว่า “เปลี่ยนเส้นทางผู้เยี่ยมชมอุปกรณ์เคลื่อนที่ ไปยังโดเมนย่อยที่ปรับให้เหมาะกับมือถือโดยอัตโนมัติ การเปลี่ยนเส้นทางจะดำเนินการที่ขอบเครือข่ายของ Cloudflare ปรับปรุงเวลาในการโหลด โดยการกำจัดการไปกลับไปยังเซิร์ฟเวอร์ต้นทาง ซึ่งมีประโยชน์อย่างยิ่งในเครือข่ายมือถือซึ่งให้บริการเนื้อหาช้ากว่า wifi”
การตั้งค่าเปลี่ยนเส้นทางที่ระดับเซิร์ฟเวอร์
หากคุณมีโดเมนย่อยสำหรับมือถือ (หรือการเปลี่ยนเส้นทางใด ๆ สำหรับเรื่องนั้น) ควรตั้งค่าที่ระดับเซิร์ฟเวอร์เพื่อไม่ให้โดน WordPress การเปลี่ยนเส้นทางระดับเซิร์ฟเวอร์เร็วกว่าปลั๊กอิน
7. ลด TTFB ด้วยโฮสติ้งที่เร็วขึ้น
TTFB ช้า? คำแนะนำโฮสติ้งส่วนใหญ่เป็นขยะ
เข้าร่วม WordPress Hosting Facebook Group เพื่อรับ ข้อเสนอแนะที่เป็นกลาง จากผู้มีความรู้ที่อยู่ในบล็อก ฉันจะไม่บอกคุณไปยังโฮสต์สวิทช์ถ้าคุณไม่จำเป็นต้องเพื่อเรียกใช้เว็บไซต์ของคุณผ่านประภาคารและตรวจสอบเวลาการตอบสนองช้าเซิร์ฟเวอร์ (TTFB) กว่า600ms
Cloudways คือคนที่คนส่วนใหญ่ใช้ในกลุ่ม Facebook นั้น (รวมถึงตัวฉันเองด้วย) โดยเฉพาะ DigitalOcean หรือแผน Vultr HF มันคือ $ 10- $ 13 / เดือน แต่เรากำลังพูดถึงความเร็วไม่ใช่ถูก ๆ
ดู การสนทนา ผลการย้ายข้อมูลและแบบสำรวจที่โพสต์ในกลุ่ม Facebook เหล่านี้ หรือดูที่การทดสอบ PageSpeed Backlinko ที่เขาพบ SiteGround has a slow TTFB คุณรู้อยู่แล้วว่า GoDaddy และ EIG ( EIG brands และ HostGator) นั้นไม่ดีอย่างเห็นได้ชัด โฮสติ้งมีผลต่อ TTFB, LCP และ Web Vitals อื่น ๆ ซึ่งจะเป็นปัจจัยการจัดอันดับในเดือนพฤษภาคม 2021
8. พิจารณา AMP
AMP (Accelerated Mobile Pages) ทำให้หน้าบนอุปกรณ์เคลื่อนที่เร็วขึ้นพร้อมกับประทับ AMP ในผลการค้นหาบนอุปกรณ์เคลื่อนที่ แต่ AMP เปลี่ยนการออกแบบไซต์ WordPress บนมือถือของคุณโดยสิ้นเชิง
Conversion ของ Kinsta ลดลง 59% เมื่อเพิ่ม AMP และนับจากนั้น พวกเขาได้เปลี่ยนกลับไปที่หน้าเว็บบนอุปกรณ์เคลื่อนที่ตามปกติ ฉันตัดสินใจต่อต้าน AMP เช่นกันเนื่องจากการออกแบบดูไม่ดี มีปลั๊กอิน AMP เพื่อช่วยในการออกแบบ แต่ก็ยังค่อนข้าง จำกัด และคุณอาจผิดหวังกับผลลัพธ์ และหากคุณตัดสินใจที่จะเพิ่ม AMP ให้ลบออก คุณจะต้องทำงานพิเศษเนื่องจากคุณต้องตั้งค่าการเปลี่ยนเส้นทาง และใช้มาตรการอื่น ๆ เพื่อเปลี่ยนกลับไปที่หน้าเว็บบนอุปกรณ์เคลื่อนที่ตามปกติ
ถ้าคุณตัดสินใจที่จะใช้แอมป์ใช้ AMP สำหรับ WP ปลั๊กอิน
หากคุณกำลังจะเพิ่ม AMP คุณอาจจะใช้แอมป์สำหรับปลั๊กอิน WP มีตัวเลือกการปรับแต่งมากที่สุดจากปลั๊กอิน AMP ที่ฉันเคยเห็น (แม้แต่ปลั๊กอิน AMP ที่ Google และ Automattic รองรับ) นอกจากนี้ยังมีGlue For Yoast & AMPซึ่งมีตัวเลือกน้อยที่สุด
URL จริงของ Cloudflare AMP
Cloudflare กล่าวว่าAMP Real URLs “ หมายความว่าสามารถจัดเก็บหน้าเว็บในแคช AMP และแสดงผลได้อย่างรวดเร็วจากหน้านั้นในขณะที่แสดง URL ของเว็บไซต์เดิมในแถบนำทางของเบราว์เซอร์”
9. ใช้โหมดตอบสนองเพื่อลดความซับซ้อนของรูปแบบมือถือ
โดยทั่วไปแล้ว ผู้สร้างเพจจะทำงานได้ดีในการรักษาการตอบสนองของไซต์ของคุณ แต่ตรวจสอบมุมมองที่ตอบสนอง เพื่อให้แน่ใจว่าดูดี และลบแถบเลื่อนหรือ JavaScript ขนาดใหญ่ที่ไม่จำเป็นบนมือถือ
หากคุณใช้ Elementor นี่คือ วิดีโอที่ยอดเยี่ยมเกี่ยวกับการลดความซับซ้อนของรูปแบบ:
10. ปรับลดคุณภาพของภาพในการเชื่อมต่อที่ช้า
ปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพบางอย่างเช่น Optimole ช่วยให้คุณสามารถปรับลดคุณภาพของรูปภาพได้เมื่อผู้เยี่ยมชมของคุณมีการเชื่อมต่อที่ช้า คุณต้องตัดสินใจว่า (เฉพาะในระหว่างการเชื่อมต่อที่ช้า) ความเร็วมือถือ WordPress หรือคุณภาพของภาพ (ที่การบีบอัด 40%) เป็นสิ่งสำคัญหรือไม่
Mirage ยังทำเช่นนี้หากคุณใช้ Cloudflare Pro
11. ใช้ปุ่ม“ โหลดความคิดเห็นเพิ่มเติม” บนมือถือ
หากโพสต์มีความคิดเห็นจำนวนมากให้ลองใช้ปุ่ม “โหลดความคิดเห็นเพิ่มเติม”
wpDiscuz และปลั๊กอินความคิดเห็นส่วนใหญ่มีปุ่มโหลดเพิ่มเติมและการตั้งค่าความเร็วอื่น ๆ
12. ปรับปรุง Core Web Vitals
เปิดรายงาน Mobile Core Web Vitals ใน Search Console และตรวจสอบว่าคุณต้องการปรับปรุง Web Vitals หลัก 3 รายการหรือไม่ : LCP, CLS และ TBT
Contentful Paint ที่ใหญ่ที่สุด – องค์ประกอบสีเนื้อหาที่ใหญ่ที่สุดของคุณจะแสดงใน PageSpeed Insights และโดยปกติจะเป็นภาพขนาดใหญ่ หรือภาพพื้นหลัง (อาจเป็นวิดีโอภาพเคลื่อนไหว หรือองค์ประกอบระดับบล็อกก็ได้เช่นกัน) แต่ในหลายกรณีรูปภาพ หรือภาพพื้นหลังมักจะโหลดทั่วทั้งไซต์ของคุณ ปรับภาพนี้ให้เหมาะสมโดยการบีบอัดตรวจสอบให้แน่ใจว่า มีขนาดเหมาะสมพิจารณารูปแบบภาพที่เร็วขึ้น (เช่น WebP) และโหลดภาพไว้ล่วงหน้า นอกจากนี้คุณควรพิจารณาให้บริการภาพจาก CDN ของคุณยกเว้นจากการโหลดแบบขี้เกียจ และตรวจสอบให้แน่ใจว่ามีขนาดที่ระบุไว้
การเปลี่ยนการจัดวางแบบสะสม – ใช้โปรแกรมแก้ไขข้อบกพร่องการเปลี่ยนแปลงเค้าโครงสะสมของ Google และเลือก “หลีกเลี่ยงการเลื่อนเค้าโครงขนาดใหญ่” ในรายงาน PageSpeed Insights ของคุณ หลีกเลี่ยงการเปลี่ยนเค้าโครงโดยการระบุขนาด (ของรูปภาพวิดีโอ iframe และโฆษณาในโค้ด div) แก้ไข“ ตรวจสอบให้แน่ใจว่าข้อความยังคงมองเห็นได้ในระหว่างการโหลดแบบอักษรของเว็บ” โดยการเพิ่มการแสดงผลแบบอักษร: สลับไปยัง CSS ของแบบอักษรของคุณ (ด้วยตนเองหรือด้วยปลั๊กอินเช่นSwap Google Fonts Display ) โฮสต์ฟอนต์ในเครื่องโหลดล่วงหน้าและตรวจสอบให้แน่ใจว่า “เพิ่มประสิทธิภาพการส่ง CSS” ใน WP Rocket ใช้งานได้หากคุณใช้งาน ใช้คุณสมบัติการแปลง CSS ในภาพเคลื่อนไหวและใช้ transform: translate () เพื่อย้ายองค์ประกอบของคุณไปรอบ ๆ (แทนที่จะเป็นด้านบนด้านล่างซ้ายขวา)
เวลาบล็อกทั้งหมด – เวลาในการบล็อกอาจเกิดจากแบบอักษรรหัสของบุคคลที่สาม หรือ JavaScript ดูรายงาน Waterfall ของคุณใน GTmetrix และมองหาองค์ประกอบที่มีเวลาในการบล็อกสูง (รายงานรหัสบุคคลที่สามของคุณใน PSI ยังแสดงเวลาการบล็อกเธรดหลักของรหัสของบุคคลที่สามด้วย)
13. แก้ไขคำแนะนำมือถือ PageSpeed Insights
ฉันมีแบบฝึกหัดสำหรับคำแนะนำเกือบทุกคำแนะนำใน PageSpeed Insights ซึ่งคุณสามารถพบได้ในแถบด้านข้าง และเมนูนำทางของฉัน ตรวจสอบว่า รายการใดปรากฏในรายงานมือถือของคุณ และพยายามแก้ไข
ทรัพยากรที่บล็อกการแสดงผล – ลองกำหนดค่าการเพิ่มประสิทธิภาพอัตโนมัติ (เปิดใช้งานการเพิ่มประสิทธิภาพ / รวม CSS และ JavaScript ในการตั้งค่า) กำหนดค่าปลั๊กอิน Async JavaScript ด้วย (เพียงคลิก “ใช้การเลื่อน” หลังจากติดตั้ง) ทรัพยากรที่บล็อกการแสดงผลลดลงจาก 7 เหลือ 1 สำหรับไซต์ WordPress ของฉัน
ตรวจสอบให้แน่ใจว่า ข้อความยังคงมองเห็นได้ในระหว่างการโหลดแบบอักษร – เพิ่มการแสดงผลแบบอักษร: สลับไปยัง CSS ของแบบอักษรของคุณด้วยตนเองหรือ โดยใช้ปลั๊กอิน (เช่น Swap Google Fonts Display , LiteSpeed Cache, Asset CleanUp)
@font-face { font-family: Lato; font-display: swap; }
https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap
เพิ่มประสิทธิภาพ JavaScript – เลื่อน, หน่วงเวลา, ย่อขนาดและรวมไฟล์ JavaScript ลบไฟล์ JavaScript และ CSS ที่ไม่ได้ใช้กับปลั๊กอินถ่ายสินทรัพย์ เช่น การล้างข้อมูลสินทรัพย์ หรือ Perfmatters
เพิ่มประสิทธิภาพ CSS – สร้าง CSS ที่สำคัญ (เช่นเพิ่มประสิทธิภาพการส่ง CSS) หรือลองใช้เครื่องมือลบ CSS เช่น PurifyCSS ปลั๊กอิน RapidLoad โดย Autoptimize จะลบ CSS ที่ไม่ได้ใช้และเป็นปลั๊กอินพรีเมียม
เพิ่มประสิทธิภาพโค้ดของบุคคลที่สาม – โฮสต์สิ่งต่างๆ ในเครื่อง (แบบอักษร, การวิเคราะห์, GTM, อวาตาร์) ใช้ตระกูลฟอนต์น้ำหนักไอคอนให้น้อยที่สุด ใช้โค้ดติดตามการวิเคราะห์ขนาดเล็ก (analytics-minimal.js) Lazy load videos/iframes และแทนที่ iframe ด้วยภาพตัวอย่าง ใช้ปลั๊กอินการแบ่งปันทางสังคมที่รวดเร็ว (เช่น Grow Social) Lazy load หรือทำให้ AdSense ล่าช้า และจองพื้นที่สำหรับโฆษณาโดยระบุมิติข้อมูลในโค้ด div (เพื่อป้องกันการเลื่อนเค้าโครง) พิจารณาล่าช้าในสคริปต์ของบุคคลที่สามโดยใช้ WP Rocket or Flying Scripts และ prefetch พวกเขา หลีกเลี่ยงการโหลด JavaScript จำนวนมากในครึ่งหน้าบน
โหลดล่วงหน้า – ลองโหลดแบบอักษรล่วงหน้า (พบในแผนภูมิ GTmetrix Waterfall ของคุณ) รวมทั้งองค์ประกอบ LCP ของคุณ (พบในรายงาน PageSpeed Insights ของคุณ) และทดสอบผลกระทบต่อเวลาในการโหลด
<link rel='preload' href='/image.png' as='image'>
<link rel='preload' href='/font.woff2' as='font' crossorigin>
การเชื่อมต่อล่วงหน้า – โดยปกติจะทำได้เฉพาะกับ CDN และแบบอักษรภายนอกเมื่อไม่ได้โฮสต์ในเครื่อง
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>
14. ฮาร์ดโค้ดส่วนหัวส่วนท้ายแถบด้านข้างของคุณ
การเข้ารหัสอย่างหนักใน CSS นั้นเร็วกว่าการสร้างเมนูปลั๊กอิน JavaScript, Elementor และแฮมเบอร์เกอร์มาก
ตัวสร้างเพจ และปลั๊กอินสามารถเพิ่มส่วนขยายที่ไม่จำเป็นได้มากมาย เนื่องจากส่วนหัว / ส่วนท้ายของคุณโหลดบนไซต์ของคุณ (ทั้งมือถือและเดสก์ท็อป) จึงเป็นเรื่องเล็กน้อยที่สามารถสร้างผลกระทบอย่างมากต่อ URL ทั้งหมด เป็นสิ่งแรกที่ WP Johnny ทำเมื่อฉันจ้างให้เขาลบ Elementor ออกจากไซต์ของฉัน
นอกจากนี้ยังมีแนวโน้มอย่างมากในกลุ่ม Facebook ที่ลบผู้สร้างเพจที่ทำงานช้าออกไป
Divi และ Elementor (โดยเฉพาะ) เพิ่ม CSS, JavaScript และ div wrapper พิเศษ การขยายตัวพิเศษมีแนวโน้มที่จะตั้งค่าสถานะหลายรายการใน PageSpeed Insights (เกี่ยวข้องกับ CSS และ JavaScript) สำหรับเดสก์ท็อป และอุปกรณ์เคลื่อนที่ ฉันขอแนะนำให้ลบตัวสร้างเพจของคุณ และแทนที่ด้วยทางเลือกที่มีน้ำหนักเบา
- Divi, Elementor และ Brizy เป็นผู้สร้างที่ช้าที่สุด
- Astra + Gutenberg, GeneratePress และ Oxygen เป็นทางเลือกยอดนิยม
- Kadence และ Genesis Framework (ธีม StudioPress) เป็นทางเลือกอื่น ๆ
- หากใช้ Elementor ให้เปิดใช้ Optimize DOM Output และปรับปรุง Asset Loading
- หากคุณยืนยันที่จะใช้ Elementor ให้ใช้ธีม Hello ซึ่งมีน้ำหนักเบากว่า
- ใช้ Perfmatters หรือ Asset CleanUp เพื่อยกเลิกการโหลดเนื้อหาที่ไม่ได้ใช้ที่สร้างโดยผู้สร้างเพจ
15. ใช้ธีมและปลั๊กอินที่ตอบสนอง
ธีมและปลั๊กอินที่ตอบสนองควรจะปรับให้เข้ากับอุปกรณ์มือถือ
เหตุใดสิ่งนี้จึงสำคัญ? เนื่องจากเช่นเดียวกับรูปภาพที่ปรับเปลี่ยนได้องค์ประกอบอื่น ๆ ในเว็บไซต์ของคุณจะถูกปรับขนาดโดยอัตโนมัติ เพื่อให้พอดีกับหน้าจอมือถือทำให้โหลดได้เร็วกว่าเวอร์ชันเดสก์ท็อป
แม้ว่าธีมและปลั๊กอินส่วนใหญ่จะตอบสนองต่ออุปกรณ์เคลื่อนที่ แต่ก็ไม่ได้หมายความว่า ไซต์ของคุณจะตอบสนอง คุณยังคงมีข้อผิดพลาดซึ่งสามารถตรวจสอบได้โดยใช้ตัวตรวจสอบการออกแบบที่ตอบสนอง
การแคชบนอุปกรณ์เป็นคุณสมบัติที่รวมอยู่ใน CDN บางตัว ช่วยให้คุณสามารถแคชองค์ประกอบเฉพาะตามอุปกรณ์ของผู้ใช้ แต่ควรใช้เฉพาะในกรณีที่ไซต์ WordPress ของคุณไม่ตอบสนอง
- คำแนะนำในการแคชตามอุปกรณ์ StackPath
- คำแนะนำในการแคชตามอุปกรณ์ KeyCDN
- คำแนะนำในการแคชบนอุปกรณ์ Cloudflare
16. ใช้ PHP 8.0
บางโฮสต์ (เช่น Cloudways) รองรับ PHP 8.0 แล้ว
ธีม / ปลั๊กอินของคุณอาจเข้ากันไม่ได้ดังนั้นคุณควรใช้ PHP 7.4 ดีกว่า แต่ควรทดสอบเวอร์ชัน PHP ล่าสุดในบัญชีโฮสติ้งของคุณเสมอเนื่องจากเวอร์ชัน PHP ที่สูงกว่า = เว็บไซต์ที่เร็วกว่า
17. ใช้ Performant CDN
Cloudflare (โดยเฉพาะกับ APO), BunnyCDNและ QUIC.cloud CDN บน LiteSpeed เป็น 3 ตัวเลือกที่มั่นคง
BunnyCDN เป็นที่นิยมในเธรด Facebook (และเธรดนี้ ) มันค่อนข้างถูก เมื่อคุณเลือกประเทศที่คุณต้องการใช้เท่านั้น การตั้งค่า BunnyCDN เป็นเรื่องง่ายด้วยเหล่านี้คำแนะนำ ลงทะเบียนเลือกประเทศที่คุณต้องการใช้จากนั้นสร้างโซนดึง BunnyCDN ให้คุณมี URL CDN ที่คุณมักจะวางในปลั๊กอินแคชของคุณหรือใช้ปลั๊กอิน BunnyCDN
หากคุณกำลังใช้ Cloudflare แล้วมันคุ้มค่าพยายามของพวกเขาเพิ่มประสิทธิภาพแพลตฟอร์มอัตโนมัติ หลายคนได้รับผลลัพธ์ที่ยอดเยี่ยมในกลุ่ม Facebook และ Cloudflare กล่าวว่าสามารถลด TTFB ได้มากและแคช HTML APO ของ Cloudflare จะให้บริการเว็บไซต์ทั้งหมดของคุณจากเครือข่าย Edge สามารถซื้อได้ในราคา $ 5 / mo ในแดชบอร์ด Cloudflare หรือใช้ปลั๊กอินของ Cloudflare
18. เพิ่มประสิทธิภาพปลั๊กอิน
ปลั๊กอินจำนวนมากเกินไปหรือปลั๊กอินที่มี CPU สูง (โดยเฉพาะอย่างยิ่งผู้ที่ใช้สคริปต์ภายนอก) อาจทำให้ไซต์ของคุณทำงานช้าลง แม้ในอุปกรณ์เคลื่อนที่ ฉันพิถีพิถันมากเกี่ยวกับปลั๊กอินที่ฉันใช้ และทดสอบ Query Monitor หลังจากติดตั้งปลั๊กอินใหม่ ใช้ปลั๊กอินที่เร็วที่สุดน้ำหนักเบาที่สุดและเชื่อถือได้เสมอ
- หลีกเลี่ยงปลั๊กอิน CPU สูง : หลีกเลี่ยงรายการปลั๊กอินที่ช้านี้ ปลั๊กอินที่ทำงานช้าทั่วไป ได้แก่ ปลั๊กอินการแชร์ทางสังคม portfolios ตัวเลื่อนสถิติ การสำรองข้อมูล และอื่น ๆ
- แทนที่ปลั๊กอิน CPU สูงด้วยปลั๊กอินที่เร็วกว่า : จำเป็นต้องมีการวิจัยบางอย่าง แต่แทนที่ปลั๊กอิน CPU สูงของคุณด้วยปลั๊กอินที่เร็ว และมีน้ำหนักเบากว่า
- ลบปลั๊กอินที่คุณไม่ต้องการ : คุณสามารถแทนที่ปลั๊กอินด้วยโค้ด (เช่นใส่โค้ดติดตาม GA โดยตรงใช้วิดเจ็ต Facebook แทนปลั๊กอิน หรือสร้างสารบัญใน HTML + CSS ได้ หรือไม่ปลั๊กอินใด ๆ ที่คุณสามารถแทนที่ด้วยโค้ดได้
- ใช้ปลั๊กอินที่มีการออกแบบโมดูลาร์ : สิ่งนี้ช่วยให้คุณปิดการใช้งานฟังก์ชันเฉพาะในปลั๊กอิน ที่คุณไม่ได้ใช้ในที่สุดส่งผลให้ขยายตัวน้อยลง และความเร็วที่เร็วขึ้น
- ค้นหาปลั๊กอินที่ช้าที่สุดของคุณ : ใช้แท็บ GTmetrix Waterfall หรือ Query Monitor (แท็บคิวรีตามส่วนประกอบ) เพื่อดูปลั๊กอินที่ช้าที่สุดของคุณ หากปลั๊กอินแสดงหลายครั้งในรายงาน GTmetrix หรือ Lighthouse ของคุณนั่นก็เป็นตัวบ่งชี้เช่นกัน
WP Hiveเป็นส่วนขยายของ Chrome ที่แสดงผลกระทบของปลั๊กอินต่อการใช้หน่วยความจำและคะแนน PageSpeed ติดตั้งค้นหาปลั๊กอิน WordPress และดูสถิติ
19. ใช้ปลั๊กอินแคชที่ดีกว่า
WP RocketและLiteSpeed Cache เป็นมาตรฐานทองคำสำหรับปลั๊กอินแคช
ฉันใช้ WP Rocket ซึ่งเป็นอันดับ 1 ในการสำรวจความคิดเห็นของ Facebook ส่วนใหญ่และมาพร้อมกับคุณสมบัติที่มากกว่าปลั๊กอินแคชอื่น ๆ หากคุณจะใช้ปลั๊กอินแคชอื่นที่ไม่มีคุณสมบัติเหล่านี้คุณจะต้องติดตั้งปลั๊กอินพิเศษประมาณ 6-7 รายการในขณะที่ WP Rocket มีคุณสมบัติเหล่านี้ทั้งหมดในตัว
- ล้างฐานข้อมูล – หรือใช้ WP-Optimize
- การเพิ่มประสิทธิภาพ CSS / JS – หรือใช้การเพิ่มประสิทธิภาพอัตโนมัติ
- ชะลอการเรียกใช้ JavaScript – หรือใช้ Flying Scripts
- โฮสต์ Google Analytics ในเครื่อง – หรือใช้ Flying Analytics
- การรวม CDN URL – หรือใช้ BunnyCDN / CDN Enabler
- การควบคุมการเต้นของหัวใจ – หรือใช้ Heartbeat Control / manual code
- โหลดลิงค์ล่วงหน้า / หน้าทันที – หรือใช้ Perfmatters / Flying Pages
- Lazy load images/videos – หรือใช้ Optimole / WP YouTube Lyte
- โฮสต์ Facebook Pixel ในเครื่อง – ไม่มีปลั๊กอินอื่นใดที่ฉันรู้
- Font-display: swap – หรือใช้ Swap Google Fonts Display / manual code
- Prefetch / preload / preconnect – หรือใช้ Pre * Party Resource Hints / manual code
WP Rocket เป็นอันดับ 1 ในการสำรวจความคิดเห็นของ Facebook ส่วนใหญ่
ตรวจสอบการตั้งค่า WP Rocket ที่แนะนำของฉันสำหรับคะแนน GTmetrix ที่เหมาะสม / เวลาในการโหลด