6 วิธีในการเร่งความเร็วการโหลดเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2021-08-19

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

เมื่อฉันไปซื้อของออนไลน์ ฉันคาดว่าหน้าเว็บจะโหลดได้แย่ที่สุดภายใน 5-10 วินาที นานกว่านั้นและฉันรู้สึกหงุดหงิดหรือออกจากร้านไปเลย

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

slow

ภาพถ่ายโดย Meddygarnet

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

ตัวอย่างเช่น เมื่อ 3 ปีที่แล้ว ตอนที่ฉันกับภรรยาเปิดร้านค้าออนไลน์ครั้งแรก ลูกค้ามากกว่า 35% ของเราใช้การเรียกผ่านสายโทรศัพท์ ด้วยเหตุนี้ เราจึงต้องลดการออกแบบเว็บไซต์ของเราลงอย่างมาก เพื่อมอบประสบการณ์การช็อปปิ้งที่รวดเร็ว โดยสมมติให้อัตราการดาวน์โหลดเพียง 56K เท่านั้น

วันนี้ ลูกค้าของเราเพียง 2% เท่านั้นที่ใช้การเรียกผ่านสายโทรศัพท์ (ขอบคุณพระเจ้า!) ดังนั้นเราจึงสามารถเพิ่มเนื้อหามัลติมีเดียได้อย่างปลอดภัยโดยไม่กระทบต่อประสบการณ์การใช้งานของผู้ใช้

ในการกำหนดขนาดสูงสุดของหน้าเว็บใดๆ ฉันมักจะคูณ 5 วินาทีด้วยแบนด์วิดท์เฉลี่ยถ่วงน้ำหนักของผู้เยี่ยมชมเว็บของฉัน ตัวอย่างเช่น หากผู้เยี่ยมชมของฉันส่วนใหญ่ใช้ DSL ฉันอาจถือว่าความเร็วในการดาวน์โหลด 1Mbit และตัดสินใจว่า 5Mbits เป็นขนาดสูงสุดที่หน้าเว็บใดหน้าหนึ่งควรเป็น

นี่ไม่ใช่วิทยาศาสตร์ที่แน่นอน สุดท้ายนี้ คุณต้องตัดสินใจด้วยตัวเองว่าเว็บไซต์ของคุณต้องเร็วแค่ไหน

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

ตัดสินใจว่าอะไรสำคัญที่สุดและเรียงลำดับการโหลดใหม่

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

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

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

ตัวอย่างเช่น กับ MyWifeQuitHerJob.com ฉันมักจะตรวจสอบให้แน่ใจว่าเนื้อหาที่น่าสนใจทั้งหมดปรากฏขึ้นก่อนโฆษณาจะเกิดขึ้น ด้วยวิธีนี้ หากโฆษณาโหลดช้าเล็กน้อย จะไม่ลากทั้งบล็อก

หน้าเว็บจะโหลดตามลำดับเสมอ ดังนั้นคุณควรวางเนื้อหาที่คุณต้องการโหลดไว้ก่อนที่ด้านบนสุดของหน้าและสิ่งที่สำคัญน้อยที่สุดที่ส่วนท้ายของเอกสาร html

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

ตัวอย่างเช่น แม้ว่าโฆษณาลีดเดอร์บอร์ด 728×90 ของฉันจะปรากฏที่ด้านบนสุดของ MyWifeQuitHerJob.com ของฉัน แต่ฉันแน่ใจว่าจะโหลดโฆษณาล่าสุดโดยทำตามขั้นตอนต่อไปนี้

  • ฉันสร้าง <div id=”banner728″> ที่ว่างเปล่าซึ่งโฆษณาควรอยู่ และฉันตั้งค่า id เป็น “banner728” สิ่งนี้สร้างพื้นที่ที่สำรองไว้ว่างอย่างมีประสิทธิภาพซึ่งฉันสามารถโหลดได้ในภายหลังโดยใช้ javascript
  • ที่ส่วนท้ายสุดของหน้า ฉันรวมข้อมูลโค้ดจาวาสคริปต์ต่อไปนี้
    <script type=”text/javascript”>
    document.getElementById(“banner728”).innerHTML = “โค้ดแบนเนอร์โฆษณาที่ต้องการ”;
    </script>
    รหัสนี้ค้นหาตัวยึดตำแหน่ง “banner728” ที่ฉันตั้งค่าไว้ด้านบนและแทรกแบนเนอร์โฆษณาลงใน <div> เนื่องจากสคริปต์นี้อยู่ที่ส่วนท้ายสุดของไฟล์ จึงโหลดได้หลังทุกอย่าง

อย่าใช้การปรับขนาดรูปภาพ HTML

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

สาเหตุเป็นเพราะต้องโหลดรูปภาพต้นฉบับทั้งหมดก่อนที่จะแสดง แม้ว่าคุณจะแสดงเฉพาะรูปภาพที่เล็กกว่ามากเท่านั้น

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

เพิ่มประสิทธิภาพรูปภาพของคุณ

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

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

หากคุณกำลังใช้ GIFS ตรวจสอบให้แน่ใจว่าคุณไม่ได้ใช้จานสีที่ใหญ่กว่าที่คุณต้องการจริงๆ หากคุณเลือกได้เพียง 16 สี ให้เลือก GIF ของคุณด้วยจานสี 16 สี

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

โฮสต์วิดีโอและรูปภาพขนาดใหญ่กับบุคคลที่สาม

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

ตัวอย่างเช่น แทนที่จะโฮสต์วิดีโอบนเซิร์ฟเวอร์ของคุณเอง ทำไมไม่ใช้ YouTube หรือ Vimeo หากคุณต้องการเป็นเจ้าของเนื้อหาที่คุณผลิต คุณสามารถชำระเงินและใช้บริการเช่น S3 ของ Amazon ปล่อยให้เนื้อหาแบนด์วิดธ์สูงสำหรับหนุ่มๆ

หลีกเลี่ยงการใช้รหัสบุคคลที่สามหรือรูปภาพที่มีการเชื่อมโยงแบบด่วน

เมื่อใดก็ตามที่คุณ Hotlink รูปภาพหรือรหัส Leverage ที่โฮสต์บนเซิร์ฟเวอร์อื่น คุณกำลังทำให้ความเร็วของเว็บไซต์ของคุณตกอยู่ในความเสี่ยง หากเซิร์ฟเวอร์ของบุคคลที่สามทำงานช้าหรือหยุดทำงาน เซิร์ฟเวอร์ดังกล่าวอาจทำลายเว็บไซต์ของคุณได้เช่นกัน ดังนั้นสิ่งสำคัญคือต้องลดการใช้รหัสบุคคลที่สามให้น้อยที่สุด

นอกจากนี้ ทุกครั้งที่ไซต์ของคุณเข้าถึงเซิร์ฟเวอร์ของบุคคลที่สาม ต้องทำการค้นหา DNS ซึ่งอาจใช้เวลาค่อนข้างนานขึ้นอยู่กับความแออัดของเครือข่าย

ความล่าช้าสองสามร้อยมิลลิวินาทีอาจดูเหมือนไม่มาก แต่ถ้าคุณดึงรหัสจากเซิร์ฟเวอร์ที่แตกต่างกัน 10 เซิร์ฟเวอร์ การค้นหาเหล่านี้สามารถเพิ่มเวลาแฝงได้หลายวินาที

ใช้ประโยชน์จากการแคชและการบีบอัด

เว็บไซต์ส่วนใหญ่มีการบีบอัดข้อความและข้อความได้เป็นอย่างดี นั่นคือเหตุผลที่ถ้าคุณเปิดใช้งานการบีบอัดบนเซิร์ฟเวอร์ของคุณ คุณสามารถลดเวลาในการดาวน์โหลดได้ถึง 75%

ขออภัย โฮสต์เว็บที่ใช้ร่วมกันบางรายการไม่ได้เปิดใช้งานการบีบอัดบนเซิร์ฟเวอร์ของตน หากเว็บไซต์ของคุณอยู่บนโฮสต์เว็บที่ใช้ร่วมกัน อย่าลืมถามพวกเขาว่าเซิร์ฟเวอร์สนับสนุน mod_deflate หรือ mod_gzip หรือไม่

หากเซิร์ฟเวอร์ของคุณรองรับการบีบอัด ให้ตรวจสอบว่าคุณเปิดใช้งานบนเว็บไซต์ของคุณโดยทำตามขั้นตอนที่อธิบายไว้ในบทความนี้ หากคุณกำลังใช้ WordPress ปลั๊กอิน WP-SuperCache จะจัดการการบีบอัดให้คุณแล้ว

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

เรื่องความเร็ว

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

ฉันตกใจมากที่เห็นว่าร้านค้าออนไลน์ของเรายังมีลูกค้าแบบเรียกผ่านสายโทรศัพท์อยู่! ถ้าฉันยังมีพวกเขาอยู่ คุณก็อาจจะเช่นกัน