8 เคล็ดลับเพื่อเพิ่มความเร็วเว็บไซต์ของคุณ

อัปเดต: 03 พฤษภาคม 2021 / บทความโดย: Timothy Shim

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

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

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

เวลาในการโหลดเว็บเพจเฉลี่ยในอุตสาหกรรมอื่น ((ที่มา )).

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

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

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

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

เครื่องมือทดสอบความเร็วเว็บไซต์

ในการเริ่มต้นให้ทดสอบว่าเว็บไซต์ของคุณโหลดเร็วแค่ไหน เครื่องมือที่แนะนำคือ:

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

นี่คือเคล็ดลับในการเร่งความเร็วเว็บไซต์ของคุณ ...

1 เลือกโฮสต์เว็บยอดเยี่ยม

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

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

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

ยังเช็คเอาท์ รายชื่อ บริษัท เว็บโฮสติ้งที่ดีที่สุดของ Jerry.

2 Minification: Smaller ดีกว่า

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

การลดขนาดไฟล์ Javascript และ CSS ทำได้โดยการรวมสคริปต์ทั้งหมดของคุณไว้ในไฟล์เดียว (ในแต่ละประเภท) นี่ไม่ใช่เรื่องง่าย แต่ไม่ต้องห่วงมีปลั๊กอิน WordPress ที่สามารถจัดการได้สำหรับคุณ

ลองทำอย่างใดอย่างหนึ่งต่อไปนี้เพื่อเริ่มต้นด้วย: Autoptimize, ลดความเร็วอย่างรวดเร็ว or รวม + ลดขนาด + รีเฟรช

Minification อาจทำให้โค้ดของคุณดูล่มจมขึ้นทั้งหมด - อย่าตื่นตระหนก! นี่เป็นปกติ.

3 ปฏิบัติตามหลักการ KISS

นี่ไม่ใช่สิ่งที่กูรูเว็บส่วนใหญ่สอนตามปกติ แต่ฉันพบว่ามันมีประโยชน์เป็นพิเศษในหลาย ๆ ด้าน KISS เป็นคำย่อของ“ Keep it simple, stupid” ได้รับการประกาศเกียรติคุณจากบทสมาร์ทในทศวรรษ 1960 ที่เน้นประสิทธิภาพของระบบง่ายๆ

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

การออกแบบและภาพ

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

รหัส & โปรแกรมเสริม

WordPress เป็นเช่นสิ่งที่ยอดเยี่ยมเพราะเป็น modular มากและยังง่ายเพื่อใช้ ไม่ว่าคุณต้องการทำอะไรก็มีแนวโน้มว่าจะมีคนมา ออกแบบแล้วปลั๊กอินสำหรับที่.

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

ถ้าทำได้ให้หลีกเลี่ยงปลั๊กอินสำหรับสิ่งต่างๆที่คุณสามารถจัดการได้เอง ใช้ตัวอย่างเช่นปลั๊กอินที่จะช่วยให้คุณใส่ตารางลงในข้อความของคุณ คุณสามารถเรียนรู้โค้ด HTML พื้นฐานบางส่วนเพื่อวาดตารางแทนการใช้ปลั๊กอินสำหรับใช่มั้ย?

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

4 ใช้ประโยชน์จากเครือข่ายการจัดส่งเนื้อหา

สำหรับฉันเครือข่ายการจัดส่งเนื้อหาเป็นของขวัญจากพระเจ้า บริษัท ต่างๆเช่น Cloudflare และ LimeLight Networks หาเลี้ยงชีพด้วยการช่วยให้คนอื่น ๆ ได้รับการจัดส่งเนื้อหาที่มั่นคงและรวดเร็วผ่านเครือข่ายเซิร์ฟเวอร์ที่ตั้งอยู่ทั่วโลก

การใช้ CDN จะช่วยให้คุณแสดงหน้าเว็บของคุณได้เร็วขึ้นและปรับปรุงความเร็วในการโหลดไม่ว่าผู้เข้าชมของคุณจะมาจากที่ใดในโลก

นอกเหนือจากนั้นการใช้ CDN ยังช่วยป้องกันการโจมตีที่เป็นอันตรายเช่น การปฏิเสธการให้บริการแบบ Distributed (DDoS).

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

เคล็ดลับ: เรียนรู้เพิ่มเติมเกี่ยวกับ Cloudflare ในบทความอื่น ๆ ของฉันที่นี่

5. ใช้ประโยชน์จากแคช

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

วิธีที่มีประสิทธิภาพที่สุดในการใช้แคชฝั่งเซิร์ฟเวอร์คือการตั้งค่าใน อาปาเช่ or NGINX เซิร์ฟเวอร์ คุณจะต้องผ่านเอกสารเหล่านั้นและหาการตั้งค่าที่เหมาะสมซึ่งจะช่วยให้คุณตั้งค่าการแคชเซิร์ฟเวอร์ของคุณ

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

ถ้าเป็นเรื่องแปลกสำหรับคุณปลั๊กอินเป็นอีกทางเลือกหนึ่ง แต่อีกครั้งผมไม่แนะนำให้คุณใช้ความคิดนี้ในกรณีนี้

เคล็ดลับ: สำหรับเว็บไซต์ WordPress โปรดดู ประสิทธิภาพที่รวดเร็ว. ผู้ใช้ที่ไม่มีความรู้ด้านการเขียนโค้ดสามารถเพิ่มประสิทธิภาพไซต์ WordPress ได้ในไม่กี่คลิกด้วย Swift Performance ปลั๊กอินช่วยปรับแต่งปัญหาความเร็วของ WordPress และสร้างภาพไม่ จำกัด ในรูปแบบ WEBP โดยอัตโนมัติ

6 ภาพแบนด์วิดท์หมูเพิ่มประสิทธิภาพ Yours!

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

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

ฉันไม่ได้บอกว่าคุณไม่สามารถมีภาพขนาดใหญ่ แต่ให้แน่ใจว่าพวกเขาจะเหมาะสมอย่างถูกต้องก่อนที่จะอัพโหลดพวกเขา

มีสองวิธีที่คุณสามารถทำได้ อีกครั้งแรกผ่านทางปลั๊กอินเช่น WP Smush or ประสิทธิภาพที่รวดเร็ว. ทางเลือกหรือสำหรับผู้ที่ไม่ได้ใช้ WordPress เป็นเครื่องมือเพิ่มประสิทธิภาพของภาพบุคคลที่สามเช่น รูปภาพคอมเพรสเซอร์ or เครื่องมือเพิ่มประสิทธิภาพ JPEG.

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

เคล็ดลับ: ภาพ WEBP โหลดเร็วกว่าภาพ JPEG แบบเดิม 1.5 เท่าและตอนนี้ รองรับโดย 94% เว็บเบราว์เซอร์. คุณควรแสดงภาพ WEBP บนไซต์ของคุณเมื่อใดก็ตามที่เป็นไปได้

ซูมภาพเหล่านี้ในพื้นที่ของภาพ HD (ซ้าย) เดิมเป็น 2.3MB และหลังจากการเพิ่มประสิทธิภาพที่ลดลง 331kb!

7 ใช้การบีบอัด gzip

หากคุณเคยได้ยินเกี่ยวกับการบีบอัดภาพหรือเก็บถาวร (ZIP หรือ RAR) คุณอาจจะคุ้นเคยกับทฤษฎีเบื้องหลังการบีบอัด gzip การบีบอัดโค้ดเว็บไซต์ของคุณทำให้เพิ่มความเร็วได้ถึง 300% (ผลแตกต่างกันไป)

แม้กระทั่งบางสิ่งทางเทคนิคเช่นนี้คุณสามารถไปข้างหน้าได้ทันทีและใช้ปลั๊กอินเช่น PageSpeed ​​Ninja. อย่างไรก็ตามมีวิธีการที่มีประสิทธิภาพมากขึ้นซึ่งเกี่ยวข้องกับการแก้ไขไฟล์. htaccess ของคุณเพียงครั้งเดียว

เพิ่มโค้ดด้านล่างลงในไฟล์. htaccess ของคุณและคุณจะได้รับการตั้งค่า:

# บีบอัด HTML, CSS, JavaScript, ข้อความ, XML และแบบอักษร AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / vnd.ms-fontobject AddOutputFilterBypeATE application / font แอพลิเคชัน AddOutputFilterByType ยุบ / x-ตัวอักษร OTF แอพลิเคชัน AddOutputFilterByType ยุบ / x-ตัวอักษร TrueType แอพลิเคชัน AddOutputFilterByType ยุบ / x-ตัวอักษร TTF การประยุกต์ใช้ AddOutputFilterByType ยุบ / x-จาวาสคริปต์โปรแกรมประยุกต์ AddOutputFilterByType ยุบ / XHTML + XML AddOutputFilterByType ยุบ application / XML AddOutputFilterByType ยุบ / font OpenType AddOutputFilterByType ยุบ / font OTF AddOutputFilterByType ยุบ / font TTF AddOutputFilterByType ยุบ image / SVG + XML AddOutputFilterByType ยุบภาพ / x-ไอคอน AddOutputFilterByType ยุบข้อความ css / ข้อความ AddOutputFilterByType ยุบ / html AddOutputFilterByType ยุบข้อความ javascript / AddOutputFilterByType DEF ข้อความ LATE / ธรรมดา AddOutputFilterByType DEFLATE ข้อความ / xml

* หมายเหตุ: โปรดตรวจสอบให้แน่ใจว่าคุณได้เพิ่มรหัสนี้ไว้ด้านล่างสิ่งที่คุณมีอยู่ในไฟล์. htaccess ของคุณ

8 ลดการเปลี่ยนเส้นทาง

โดยปกติเบราว์เซอร์จะยอมรับรูปแบบต่างๆที่อยู่ซึ่งจะมีการแปลเป็นที่รู้จักอย่างเป็นทางการโดยเซิร์ฟเวอร์ของคุณ ตัวอย่างเช่น www.example.com และ example.com ทั้งสองสามารถไปที่ไซต์เดียวกันได้ แต่เซิร์ฟเวอร์ต้องเปลี่ยนเส้นทางไปยังที่อยู่ที่เป็นที่ยอมรับอย่างเป็นทางการ

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

ให้ความซับซ้อนในการทำสิทธินี้และเวลาที่เกี่ยวข้องอย่างต่อเนื่องนี่เป็นครั้งนึงที่ผมแนะนำให้ใช้ปลั๊กอินเช่น การเปลี่ยนเส้นทาง.

ความเร็วที่รวดเร็วเพียงพอ

Google PageSpeed ​​Insight
Google PageSpeed ​​Insight เป็นเกณฑ์มาตรฐานที่ดีของวิธีการที่ยักษ์ใหญ่มองเห็นประสิทธิภาพของไซต์ของคุณ

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

น่าเสียดายที่หลาย ๆ เว็บไซต์ยังไม่ตรงตามเกณฑ์มาตรฐานนี้ ในความเป็นจริงฉันได้วัดบางเว็บไซต์ที่ใช้เวลาโหลด 5 ถึง 6 นาทีอย่างน่าตกใจ ดังที่กล่าวไว้ว่าหากเว็บไซต์ของคุณใช้เวลาโหลดเกิน 7 วินาทีนั่นก็นานเกินไปสำหรับ Google แล้ว

เว็บไซต์ที่เร็วขึ้นทำให้ผู้เข้าชม (และ Google) มีความสุข

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

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

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

อย่าลงเอยด้วย ว่า เว็บไซต์.

การอ่านที่เกี่ยวข้อง

เกี่ยวกับทิโมธีชิม

ทิโมธีชิมเป็นนักเขียนบรรณาธิการและผู้เชี่ยวชาญด้านเทคโนโลยี เขาเริ่มต้นอย่างรวดเร็วในด้านเทคโนโลยีสารสนเทศเขาได้ค้นพบวิธีการพิมพ์และได้ทำงานร่วมกับสื่อต่างประเทศระดับภูมิภาคและระดับประเทศเช่น ComputerWorld, PC.com, Business Today และ Asian Banker ความเชี่ยวชาญของเขาอยู่ในด้านเทคโนโลยีจากทั้งผู้บริโภคและมุมมองขององค์กร

เชื่อมต่อ: