วิธีทำให้เว็บไซต์ของคุณโหลดเร็วบนมือถือ (2022)

เผยแพร่แล้ว: 2020-07-31

ประสิทธิภาพเว็บไซต์ของคุณบนอุปกรณ์เคลื่อนที่มีความสำคัญมากกว่าประสิทธิภาพบนเดสก์ท็อป

เนื่องจากมีคนใช้มือถือในการเข้าถึงอินเทอร์เน็ตมากกว่าคนที่ใช้เดสก์ท็อป

จากข้อมูลของ StatCounter ผู้ใช้อินเทอร์เน็ตกว่า 50% ทั่วโลกใช้อุปกรณ์มือถือ ในขณะที่มีเพียง 47% เท่านั้นที่ใช้เดสก์ท็อป

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

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

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

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

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

สารบัญ

ทดสอบความเร็วเว็บไซต์ของคุณ

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

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

มีเครื่องมือทดสอบมือถือมากมาย แต่ฉันชอบใช้ Google's Test My Site สำหรับการทดสอบความเร็วมือถือ

เพียงไปที่ ThinkWithGoogle และป้อน URL ของไซต์ของคุณ คุณควรจะสามารถทดสอบความเร็วของไซต์ของคุณได้

ThinkWithGoogle

สำหรับฉัน ไซต์ที่โหลดภายใน 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 เวอร์ชันล่าสุดหรือเวอร์ชันย้อนหลังเพียงเวอร์ชันเดียว

ไม่เพียงแค่ความเร็ว แต่เพื่อความปลอดภัยด้วย