วิธีทำให้เว็บไซต์ของคุณโหลดเร็วบนมือถือ (2022)
เผยแพร่แล้ว: 2020-07-31ประสิทธิภาพเว็บไซต์ของคุณบนอุปกรณ์เคลื่อนที่มีความสำคัญมากกว่าประสิทธิภาพบนเดสก์ท็อป
เนื่องจากมีคนใช้มือถือในการเข้าถึงอินเทอร์เน็ตมากกว่าคนที่ใช้เดสก์ท็อป
จากข้อมูลของ StatCounter ผู้ใช้อินเทอร์เน็ตกว่า 50% ทั่วโลกใช้อุปกรณ์มือถือ ในขณะที่มีเพียง 47% เท่านั้นที่ใช้เดสก์ท็อป
หากคุณกำลังเพิ่มประสิทธิภาพไซต์ของคุณสำหรับเดสก์ท็อปเท่านั้น แสดงว่าคุณกำลังทำลายความสำเร็จของธุรกิจของคุณ มือถือมีความสำคัญมากกว่าที่เคย
ประสิทธิภาพของเว็บไซต์ของคุณบนมือถือมีความสำคัญมากสำหรับ SEO แนวทางของ Google คือการจัดทำดัชนีเพื่ออุปกรณ์เคลื่อนที่เป็นอันดับแรก ซึ่งหมายความว่า Google ใช้เว็บไซต์รุ่นมือถือสำหรับการจัดทำดัชนีและการจัดอันดับ
หากไซต์ของคุณทำงานเร็วบนเดสก์ท็อปและบนมือถือช้า การจัดอันดับของคุณก็จะได้รับผลกระทบไปด้วย ประสิทธิภาพของไซต์บนมือถือควรมีความสำคัญมากกว่าประสิทธิภาพบนเดสก์ท็อป
การทำให้เว็บไซต์ของคุณโหลดเร็วบนมือถือจะช่วยปรับปรุง SEO ของคุณ ลดอัตราตีกลับ และเพิ่มการแปลง
แต่การเพิ่มประสิทธิภาพไซต์เพื่อความเร็วบนมือถือนั้นไม่ง่ายเท่ากับการเพิ่มประสิทธิภาพไซต์สำหรับความเร็วบนเดสก์ท็อป โชคดีที่บทความนี้สามารถช่วยคุณทำให้เว็บไซต์ของคุณโหลดได้อย่างรวดเร็วบนมือถือ หากคุณปฏิบัติตามคำแนะนำที่ฉันได้ระบุไว้ที่นี่
สารบัญ
ทดสอบความเร็วเว็บไซต์ของคุณ
สิ่งแรกที่คุณควรทำคือทดสอบความเร็วของไซต์ของคุณบนมือถือ นี่จะทำให้คุณเห็นภาพชัดเจนว่าเว็บไซต์ของคุณเร็วหรือช้าแค่ไหน
เพียงเพราะเว็บไซต์ของคุณโหลดเร็วบนเดสก์ท็อปไม่ได้รับประกันว่าจะโหลดได้เร็วบนมือถือ เป็นไปได้ที่เว็บไซต์ของคุณจะเร็วมากบนเดสก์ท็อป แต่ช้ามากบนมือถือ
มีเครื่องมือทดสอบมือถือมากมาย แต่ฉันชอบใช้ Google's Test My Site สำหรับการทดสอบความเร็วมือถือ
เพียงไปที่ ThinkWithGoogle และป้อน URL ของไซต์ของคุณ คุณควรจะสามารถทดสอบความเร็วของไซต์ของคุณได้

สำหรับฉัน ไซต์ที่โหลดภายใน 3 วินาทีก็เพียงพอแล้ว แต่ Think With Google แนะนำอย่างน้อย 2.4 วินาที
วิธีทำให้เว็บไซต์ของคุณโหลดเร็วบนมือถือ
แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มความเร็วไซต์บนอุปกรณ์เคลื่อนที่มีดังนี้
ใช้ธีมที่ตอบสนอง
ธีมที่ตอบสนองคือธีมที่ปรับให้เข้ากับอุปกรณ์ทั้งหมด ซึ่งหมายความว่าแม้ว่าผู้ใช้ของคุณจะมาจากเดสก์ท็อปหรือมือถือหรือแท็บเล็ต ธีมของคุณจะให้บริการเว็บไซต์ของคุณในเวอร์ชันที่เหมาะกับอุปกรณ์ใดก็ตามที่พวกเขาใช้
การให้บริการเว็บไซต์เวอร์ชันเดสก์ท็อปแก่ผู้ใช้อุปกรณ์เคลื่อนที่จะทำให้เวลาในการโหลดช้าลง และมันแย่มากสำหรับประสบการณ์ของผู้ใช้
การใช้ธีมที่ตอบสนองเป็นสิ่งสำคัญมาก เป็นรากฐานแรกของเว็บไซต์บนมือถือที่รวดเร็ว มีธีมตอบสนองหลายแบบที่คุณสามารถเลือกได้ อ่านรายชื่อธีม WordPress ที่เร็วและดีที่สุด 10 อันดับแรกของฉัน ชุดรูปแบบใด ๆ ที่ระบุมีดีเพียงพอและตอบสนอง
ใช้โฮสต์เว็บที่รวดเร็ว
โฮสต์เว็บของคุณมีบทบาทสำคัญในการเร่งความเร็วเว็บไซต์ของคุณ เว็บโฮสต์ที่รวดเร็วมากพร้อมเทคโนโลยีโฮสติ้งล่าสุดจะทำให้เว็บไซต์ของคุณโหลดเร็วบนมือถือ
หากคุณมีโฮสต์เว็บที่ช้า ไม่ว่าคุณจะเพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วยวิธีใด คุณอาจไม่เห็นการปรับปรุงที่สำคัญ
ฉันแนะนำ Cloudways และ Kinsta สำหรับเว็บไซต์ที่จัดตั้งขึ้น TargetTrend โฮสต์ที่ Cloudways สำหรับไซต์เริ่มต้น ฉันแนะนำ Bluehost
ใช้ AMP
Accelerated Mobile Pages (AMP) เป็นโครงการโดย Google เพื่อเพิ่มความเร็วเว็บไซต์บนมือถือ
AMP ได้รับการปรับให้เหมาะสมสำหรับการท่องเว็บบนอุปกรณ์เคลื่อนที่และช่วยเพิ่มความเร็วในการโหลดเว็บไซต์ได้อย่างมาก นอกจากนี้ยังสามารถลดจำนวนคำขอได้มากกว่า 77% ตามการศึกษา
คุณสามารถเริ่มต้นใช้งาน AMP ได้โดยติดตั้งปลั๊กอิน AMP อย่างเป็นทางการ มีปลั๊กอิน AMP อื่นๆ ที่คุณสามารถใช้ได้เช่นกัน
เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว คุณสามารถเลือกโหมดใดก็ได้จากสามโหมดที่มี หากผู้เข้าชมส่วนใหญ่ของคุณมาจากอุปกรณ์เคลื่อนที่ ให้ลองใช้โหมดเปลี่ยนผ่านหรือโหมดมาตรฐาน แต่ธีมของคุณต้องเข้ากันได้กับ AMP
ขี้เกียจโหลดภาพ
รูปภาพอาจทำให้เว็บไซต์ช้าลง โดยเฉพาะอย่างยิ่งบนอุปกรณ์มือถือ วิธีที่ดีที่สุดในการจัดการคือโหลดเมื่อผู้ใช้เลื่อนดู ด้วยวิธีนี้ พวกเขาจะโหลดเมื่อจำเป็นเท่านั้น ดังนั้นจึงมีผลกระทบต่อเวลาในการโหลดเพียงเล็กน้อยหรือไม่มีเลย

หากคุณลองทดสอบเว็บไซต์ของคุณบน PageSpeed Insight หรือ Web.dev และคุณได้รับคำเตือนให้ “เลื่อนรูปภาพนอกจอ” หมายความว่ารูปภาพนั้นทำให้เวลาในการโหลดของคุณช้าลง และคุณควรพิจารณาการโหลดแบบขี้เกียจ
การโหลดรูปภาพแบบ Lazing นั้นเกี่ยวกับการชะลอการโหลดรูปภาพจนกว่าผู้ใช้จะเลื่อนดู นี้สามารถปรับปรุงความเร็ว
มีปลั๊กอินมากมายสำหรับจัดการการโหลดแบบ Lazy Loading ปลั๊กอินแคชและปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพส่วนใหญ่มีตัวเลือกการโหลดแบบ Lazy Loading
กำจัดทรัพยากรการบล็อกการแสดงผล
การกำจัดทรัพยากรการบล็อกการแสดงผลสามารถเพิ่มความเร็วในการโหลดเว็บไซต์ของคุณบนมือถือได้
มักจะมีจาวาสคริปต์และ CSS ที่ทำให้เบราว์เซอร์แสดงผลเว็บไซต์ได้อย่างรวดเร็วเมื่อผู้ใช้เข้าชมได้ยาก เนื่องจากเบราว์เซอร์ต้องหยุดและอ่านไฟล์เหล่านี้ก่อนจึงจะสามารถแสดงไซต์แก่ผู้ใช้ได้
การกำจัดทรัพยากรเหล่านี้สามารถเร่งความเร็วในการโหลดได้ มีปลั๊กอินเช่น Autoptimize ที่สามารถช่วยกำจัดทรัพยากรการบล็อกการแสดงผล
ฉันมีบทความที่เป็นประโยชน์เกี่ยวกับเรื่องนี้ คุณควรอ่าน: วิธีกำจัดทรัพยากรการบล็อกการแสดงผลใน WordPress
ลบ CSS . ที่ไม่ได้ใช้
การมี CSS ที่ไม่ได้ใช้จำนวนมากอาจทำให้เว็บไซต์ช้าลงได้ CSS ที่ไม่ได้ใช้คือ CSS ที่ไม่จำเป็นสำหรับการโหลดเว็บไซต์ แต่เนื่องจากมีอยู่แล้ว เบราว์เซอร์ยังคงต้องดาวน์โหลด แยกวิเคราะห์ และประมวลผล
มีปลั๊กอินเช่น Perfmatters และ Asset CleanUp ที่สามารถช่วยลบ CSS ที่ไม่ได้ใช้
ฉันได้เขียนคำแนะนำง่ายๆ เกี่ยวกับสิ่งนี้: วิธีลบ CSS และ JS ที่ไม่ได้ใช้ใน WordPress
สร้าง CSS ที่สำคัญ
Critical CSS ใช้เพื่อแยกเนื้อหาครึ่งหน้าบนอย่างง่ายดายเพื่อแสดงผลแก่ผู้ใช้อย่างรวดเร็ว การมีเส้นทาง CSS ที่สำคัญสามารถเพิ่มความเร็วในการโหลดเว็บไซต์ของคุณบนอุปกรณ์เคลื่อนที่และเดสก์ท็อปได้
มีปลั๊กอินที่สามารถช่วยสร้าง Critical CSS ได้ WP Rocket สามารถทำได้ LiteSpeed Cache และ WP Performance สามารถสร้าง CSS ที่สำคัญได้เช่นกัน
มีระบบแคชที่ดี
การแคชเป็นวิธีที่น่าเชื่อถือมากในการเร่งความเร็วเว็บไซต์ คุณควรใช้ปลั๊กอินแคชที่มีประสิทธิภาพเพื่อให้บริการเนื้อหาแคชแก่ผู้เยี่ยมชมมือถือของคุณ จรวด WP เป็นปลั๊กอินแคชระดับพรีเมียมที่มีประสิทธิภาพมาก W3 Total cache หากกำหนดค่าไว้อย่างดีจะมีประสิทธิภาพมาก
บริษัทเว็บโฮสติ้งที่มีการจัดการส่วนใหญ่เสนอการแคชระดับเซิร์ฟเวอร์ ค้นหาว่าโฮสต์เว็บของคุณมีข้อเสนอแบบเดียวกันหรือไม่ และขอให้เปิดใช้งานสำหรับไซต์ของคุณหากยังไม่พร้อมใช้งาน
คุณสามารถขอให้โฮสต์ติดตั้งและเปิดใช้งานแคชวานิชได้ วานิชแคชเป็นที่รู้จักสำหรับการเร่งความเร็วเว็บไซต์
ปรับภาพให้เหมาะสม
ตรวจสอบให้แน่ใจว่าคุณบีบอัดภาพ ฉันชอบบีบอัดรูปภาพให้สมบูรณ์ก่อนอัปโหลด อย่างไรก็ตาม มีปลั๊กอินมากมาย เช่น optimole และอื่นๆ ที่สามารถช่วยบีบอัดรูปภาพใน WordPress ได้
การแสดงภาพ WebP สามารถช่วยเพิ่มความเร็วเว็บไซต์ได้เช่นกัน WebP มีขนาดเล็กกว่า JPG และ PNG ดังนั้นจึงเป็นมิตรกับความเร็วมากกว่า
มีปลั๊กอินมากมายที่ช่วยแปลงและให้บริการอิมเมจ WebP ภาพที่เหมาะสมและบินได้ทำได้ดีมาก
ลดขนาดโค้ด
การลดขนาดเป็นกระบวนการบีบอัดโค้ดของเว็บไซต์จากขนาดใหญ่เป็นขนาดเล็ก ยิ่งเล็กยิ่งดีตราบเท่าที่ไม่ทำลายสิ่งใด
คุณควรพิจารณาลดขนาด JS และ CSS
ปลั๊กอินแคชส่วนใหญ่มีคุณสมบัติการลดขนาด แต่ตรวจสอบให้แน่ใจว่าคุณใช้การจัดเตรียมเพื่อทดสอบเนื่องจากการลดขนาดจะทำให้เว็บไซต์เสียหาย
ลดการเปลี่ยนเส้นทาง
การเปลี่ยนเส้นทางมากเกินไปอาจทำให้เว็บไซต์ของคุณช้าลง โดยเฉพาะอย่างยิ่งบนมือถือ มันสามารถชะลอเวลาตอบสนองของเซิร์ฟเวอร์
ตรวจสอบให้แน่ใจว่าคุณไม่มีการเปลี่ยนเส้นทางมากเกินไป หากคุณเป็นเช่นนั้นให้ลดจำนวนลงให้มากที่สุด
เปิดใช้งานการบีบอัด
บีบอัดไฟล์เพื่อทำให้เว็บไซต์ของคุณรวดเร็วบนมือถือ ยิ่งสิ่งเล็กๆ น้อยเท่าไหร่ เว็บไซต์ของคุณก็จะยิ่งเร็วขึ้นเท่านั้น
Gzip หรือ Brotli สามารถเพิ่มความเร็วเว็บไซต์ของคุณได้อย่างมากโดยการบีบอัดไฟล์เว็บไซต์ โดยทั่วไป Brotli ดีกว่า Gzip แต่คนใดคนหนึ่งจะทำงานได้ดี ตรวจสอบกับโฮสต์เว็บของคุณเพื่อเปิดใช้งานการบีบอัดสำหรับคุณ
นอกจากนี้ยังมีปลั๊กอินที่สามารถช่วยคุณเปิดใช้งานการบีบอัดได้ หากโซลูชันปลั๊กอินเหมาะสมกับคุณมากกว่า
ลดจำนวน AdSense ต่อหน้า
Google AdSense เป็นหนึ่งในวิธีที่ได้รับความนิยมมากที่สุดในการสร้างรายได้จากบล็อก แต่ก็เป็นที่ทราบกันดีว่าเว็บไซต์ช้าลงอย่างมาก
จากการสังเกตของฉัน หากคุณปิดใช้งาน AdSense คุณจะสังเกตเห็นความแตกต่างอย่างมากของเวลาในการโหลดของคุณทันที
แต่เงินก็สำคัญมากเช่นกันกับความเร็ว ดังนั้นคุณต้องประนีประนอม Google แนะนำหน่วยโฆษณา 3 หน่วยต่อหน้า หากคุณยึดมั่นกับสิ่งนั้นคุณควรจะไม่เป็นไร
ฉันสังเกตเห็นว่าหน่วยเนื้อหาที่ตรงกันและโฆษณาระดับหน้าเว็บมีผลกระทบด้านลบมากที่สุดต่อเวลาในการโหลดอุปกรณ์เคลื่อนที่
ใช้ CDN
เครือข่ายการจัดส่งเนื้อหาสามารถช่วยเพิ่มความเร็วของเว็บไซต์ของคุณได้โดยการทำสำเนาเว็บไซต์ของคุณแบบคงที่และให้บริการแก่ผู้ใช้ทั่วโลกจากตำแหน่งที่ใกล้กับพวกเขามากขึ้นเมื่อพวกเขาพยายามเยี่ยมชมเว็บไซต์ของคุณ
หากคุณไม่ได้ใช้ CDN แสดงว่าคุณพลาด!
ตรวจสอบผู้ให้บริการ WordPress CDN ที่ดีที่สุด
ใช้แบบอักษรสแต็คของระบบ
เมื่อเร็ว ๆ นี้ฉันกำลังพยายามเร่งความเร็วในการโหลดเว็บไซต์นี้บนมือถือ ดังนั้นฉันจึงตัดสินใจหยุดใช้แบบอักษรของ Google และลองใช้สแต็กระบบ และที่ฉันประหลาดใจก็คือ ความเร็วมีการปรับปรุงอย่างมาก
แบบอักษรและแบบอักษรของ Google นั้นยอดเยี่ยมมาก แต่สามารถชะลอเว็บไซต์ได้ การใช้สแต็กระบบช่วยให้แน่ใจว่าไม่มีการร้องขอจากภายนอก เนื่องจากเป็นฟอนต์ของอุปกรณ์ใดๆ ที่ผู้ใช้ใช้ซึ่งจำเป็น
บางธีมทำให้ง่ายต่อการเปลี่ยนเป็นสแต็กระบบ เพียงเปลี่ยนไปใช้สแต็กระบบ
ใช้ประโยชน์จาก PHP เวอร์ชันใหม่กว่า
โดยทั่วไปแล้วเวอร์ชัน PHP ที่ใหม่กว่าจะเร็วกว่าเวอร์ชันเก่า คุณควรตรวจสอบให้แน่ใจว่าคุณกำลังใช้ PHP เวอร์ชันล่าสุดหรือเวอร์ชันย้อนหลังเพียงเวอร์ชันเดียว
ไม่เพียงแค่ความเร็ว แต่เพื่อความปลอดภัยด้วย