16 วิธีในการเร่งความเร็วเว็บไซต์ WordPress ของคุณวันนี้!

เผยแพร่แล้ว: 2014-12-31

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

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

บางทีการปรับแต่งความเร็วภายในของเว็บไซต์ WordPress ของคุณอาจเป็นเรื่องที่น่ากลัวเกินไป

เพื่อให้กระจ่างในการลดเวลาในการโหลดของคุณลงครึ่งหนึ่ง เราได้เชิญ Stavros Papadakis ให้จัดวางขั้นตอนของเขาในการเร่งความเร็วเว็บไซต์ของลูกค้า

หากความเร็วในการโหลดของคุณมากกว่า 3 วินาทีหรือขนาดหน้าของคุณเกิน 2MB นั่นอาจเป็นปัญหาใหญ่ที่ทำให้คุณเสียเงิน ทั้งในเรื่องการขายที่เสียไปและค่าธรรมเนียมเซิร์ฟเวอร์

มีเครื่องมือออนไลน์ฟรีมากมาย เช่น WebPageTest, GTmetrix, Google PageSpeed ​​Insights และ Pingdom ที่สามารถช่วยคุณระบุปัญหาที่ทำให้เวลาในการโหลดช้าและประสบการณ์ผู้ใช้ที่ไม่ดีสำหรับไซต์ของคุณ

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

1. เปิดใช้งานการบีบอัด

การบีบอัดไฟล์ CSS และ Javascript จะช่วยให้เบราว์เซอร์ดาวน์โหลดเร็วขึ้น

การบีบอัด Gzip สามารถลดขนาดไฟล์จาก 200+KB (ไม่บีบอัด) ให้เหลือน้อยกว่า 40KB (บีบอัด) ได้อย่างง่ายดาย ตราบใดที่เซิร์ฟเวอร์ของคุณเปิดใช้งานการบีบอัด ให้ใช้ประโยชน์จากมัน

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

เพิ่มข้อมูลโค้ดต่อไปนี้ที่ไฟล์ .htaccess ของคุณเพื่อเปิดใช้งานการบีบอัดสำหรับไฟล์สแตติก

AddOutputFilterByType DEFLATE แอปพลิเคชัน/x-httpd-php text/php text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript text/x-js

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
ส่วนหัวต่อท้าย Vary User-Agent

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

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

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

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

โปรดตรวจสอบภาพสองภาพต่อไปนี้ ภาพที่เหมือนกันแต่ภาพซ้ายไม่ได้รับการปรับให้เหมาะสมและมีขนาด 80KB และภาพด้านขวาได้รับการปรับให้เหมาะสมและมีขนาดเพียง 18KB ซึ่งเล็กกว่า 4 เท่า

ภาพที่ไม่ได้รับการปรับให้เหมาะสม - เอีย กรีซ ซานโตรินี

ภาพที่ไม่ได้รับการปรับให้เหมาะสม

ปรับแต่งภาพ

3. ย้ายไฟล์ Javascript ไปที่ส่วนท้าย

แม้ว่าไลบรารี Javascript เช่น jQuery, Mootools และ Prototype จะยอดเยี่ยมเพราะช่วยขยายฟังก์ชันการทำงานของเว็บไซต์ของคุณ แต่ก็สามารถบล็อกการแสดงผลหน้าเว็บของคุณได้

เบราว์เซอร์จะไม่เริ่มโหลดเนื้อหาจนกว่าจะดาวน์โหลดไฟล์ Javascript ทั้งหมดในส่วนหัวของหน้า

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

หากคุณใช้ Wordpress คุณสามารถย้ายการเรียกสคริปต์จาก header.php ไปยัง footer.php ที่ธีมของคุณ และใช้ true เป็นพารามิเตอร์ที่สี่เมื่อใดก็ตามที่คุณใช้ฟังก์ชัน wp_enqueue_script

ย้ายสคริปต์ JS ไปยังส่วนท้ายของหน้า

ย้ายสคริปต์ JS ไปยังส่วนท้ายของหน้า

4. ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งาน KeepAlive

Apache (เซิร์ฟเวอร์ที่ใช้บ่อยที่สุดสำหรับแผนโฮสติ้งที่ใช้ร่วมกันในบริษัทโฮสติ้งต้นทุนต่ำ) มี "คุณลักษณะ" ที่ยอดเยี่ยมที่เรียกว่า KeepAlive ซึ่งเปิดการเชื่อมต่อไว้สำหรับคำขอ HTTP มากกว่าหนึ่งรายการ

ตรวจสอบให้แน่ใจว่าได้เปิดใช้งาน KeepAlive ที่บริษัทโฮสติ้งของคุณ

หากคุณสามารถเข้าถึงไฟล์ httpd.conf ของคุณได้ ให้เปิดใช้งาน KeepAlive โดยตรวจสอบให้แน่ใจว่าคุณมี “KeepAlive On” อยู่ในนั้น มิฉะนั้น ให้เพิ่มโค้ดต่อไปนี้ในไฟล์ .htaccess ของคุณ

 <ifModule mod_headers.c>
 ชุดส่วนหัว การเชื่อมต่อแบบรักษาชีวิต
</ifModule>

เปิดใช้งาน KeepAlive สำหรับเซิร์ฟเวอร์/ไซต์ของคุณ

เปิดใช้งาน KeepAlive สำหรับเว็บไซต์ของคุณ

5. ผสานไฟล์ CSS – ไฟล์ CSS ขนาดเล็กแบบอินไลน์

เบราว์เซอร์รองรับคำขอ HTTP จำนวนมากในเวลาเดียวกันเท่านั้น เมื่อถึงขีดจำกัดนี้ ไฟล์บางไฟล์จะรอในขณะที่ไฟล์อื่นๆ ถูกดาวน์โหลด

ด้วยการรวมไฟล์ CSS ทั้งหมดของคุณเป็นไฟล์ CSS ไฟล์เดียวเท่านั้น หน้าจะแสดงผลเร็วขึ้นมาก

หากคุณมีไฟล์ CSS ที่เล็กกว่า 2KB คุณควรอินไลน์ไฟล์เหล่านั้นแทนที่จะสร้างคำขอ HTTP เพิ่มเติม

Wordpress มีปลั๊กอินที่ยอดเยี่ยมอยู่สองสามตัว เช่น Autoptimize และ Better WordPress Minify ที่สามารถช่วยคุณผสานหรืออินไลน์ CSS สไตล์ชีตของคุณ

ผสานไฟล์ CSS และอินไลน์เข้าด้วยกัน

ผสานไฟล์ CSS และอินไลน์เข้าด้วยกัน

6. เปิดใช้งานการแคช

การแคชช่วยเพิ่มเวลาในการโหลดของหน้าเว็บได้อย่างมากซึ่งไม่ได้เปลี่ยนแปลงบ่อยนัก

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

W3 Total Cache, WP Super Cache และ WP Fastest Cache เป็นเพียงตัวเลือกสั้นๆ ของปลั๊กอิน Wordpress ฟรีที่ให้การแคชประเภทต่างๆ เช่น การแคชหน้า การแคชฐานข้อมูล และการแคชวัตถุ เป็นต้น

ปลั๊กอิน W3 Total Cache Wordpress

ปลั๊กอิน W3 Total Cache ให้การแคชหน้า DB และอ็อบเจ็กต์

7. ใช้เครือข่ายการจัดส่งเนื้อหา

ไม่ว่าคุณจะใช้ CMS เช่น Wordpress, Joomla, Magento, Drupal หรือไซต์ PHP หรือ HTML ที่กำหนดเอง ฉันขอแนะนำอย่างยิ่งให้กำหนดค่าเครือข่ายการจัดส่งเนื้อหา (CDN)

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

อีกอย่าง โหลดบนเซิร์ฟเวอร์ของคุณก็ลดลงอย่างมากด้วย CDN

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

เครือข่ายการจัดส่งเนื้อหา CloudFlare

CloudFlare เป็นเครือข่ายการจัดส่งเนื้อหาฟรี

8. ลดจำนวนคำขอ HTTP ให้น้อยที่สุด

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

รวมไฟล์ CSS ของคุณ รวมไฟล์ Javascript และรวมรูปภาพใน data sprite เพื่อสร้างคำขอ HTTP ให้น้อยที่สุด

เมื่อฉันทำงานในไซต์ของลูกค้า เป้าหมายหลักประการหนึ่งของฉันคือการลดจำนวนคำขอ HTTP ที่โหลดต่อหน้าให้น้อยที่สุด

ลดขนาดคำขอ HTTP

ผสานไฟล์ CSS ใช้ data sprite หรือ data URI เพื่อลดจำนวนคำขอ HTTP

9. เลือกประเภทไฟล์ที่ถูกต้องสำหรับรูปภาพของคุณ

ใช้ JPG เป็นค่าเริ่มต้นของคุณ เป็นไฟล์ประเภทที่เล็กที่สุดและโหลดเร็วที่สุด

ใช้ PNG สำหรับรูปภาพที่มีข้อความเท่านั้น (JPG ทำให้ข้อความแรสเตอร์ซึ่งทำให้ภาพเบลอ) หรือหากคุณต้องการพื้นหลังโปร่งใส

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

แม้ว่าภาพสองภาพต่อไปนี้จะดูเหมือนกัน แต่ก็มีความแตกต่างกันมาก ไฟล์ทางซ้ายถูกบันทึกเป็นไฟล์ png และมีน้ำหนัก 102KB และอีกไฟล์หนึ่งเป็นไฟล์ JPG ที่มีขนาด 18KB ใช่แล้ว เบากว่า 6 เท่า!

บันทึกรูปภาพเป็น PNG

บันทึกรูปภาพเป็น PNG

บันทึกรูปภาพเป็น JPG

บันทึกรูปภาพเป็น JPG

10. แก้ไขข้อผิดพลาด 404 ของคุณ

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

ตรวจสอบข้อผิดพลาด 404 ทุกครั้งในระหว่างการแสดงหน้าเว็บของคุณเพื่อให้โหลดได้เร็วที่สุด

หาก "น้ำตก" ของคุณ (วิธีที่เบราว์เซอร์แสดงไซต์ของคุณ) มีลักษณะเช่นนั้น (ระวังแถวสีแดง) ข้อผิดพลาด 404 จะทำให้เวลาในการโหลดไซต์ของคุณเสียหาย

ข้อผิดพลาด 404 อาจทำให้เวลาในการโหลดเสียหายได้

ข้อผิดพลาด 404 อาจทำให้เวลาในการโหลดเว็บไซต์ของคุณเสียหายได้

11. ดูแลขนาดหน้าของคุณ

แม้ว่าการแสดงเนื้อหาจำนวนมากในแต่ละหน้าจะดึงดูดใจ แต่คุณควรพยายามรักษาขนาดหน้าให้น้อยที่สุด

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

รูปภาพใหม่เพิ่มมูลค่าให้กับไซต์หรือไม่? ถ้าไม่เช่นนั้น คุณไม่ควรเพิ่มลงในเว็บไซต์ของคุณ ง่ายๆ แบบนั้น

ลดขนาดหน้า

ลดขนาดหน้า

12. ขนาดภาพ

อย่าปรับขนาดภาพทันทีใน HTML สร้างภาพขนาดย่อของภาพที่คุณต้องการในขนาดที่แน่นอนที่จะใช้ในเพจของคุณ

ตัวอย่างเช่น หากคุณมีรูปภาพขนาด 1200px x 675px และคุณต้องการใช้เวอร์ชัน "ปรับขนาด" ที่ 480px x 270px ให้สร้างเวอร์ชันที่ปรับขนาดใหม่ของรูปภาพต้นฉบับแล้วใช้รูปภาพนั้นแทน

รูปภาพนี้เชื่อมโยงกับรูปภาพเวอร์ชัน "ใหญ่" โดยใช้ภาพขนาดย่อที่ปรับขนาดแทนการเปลี่ยนขนาดของรูปภาพใน HTML

ขนาดภาพขนาดย่อกว้าง-480

รูปขนาดย่อ (รูปภาพที่ปรับขนาด) ลิงก์ไปยังรูปภาพขนาดใหญ่

13. ใช้ประโยชน์จากแคชเบราว์เซอร์

Google ขอแนะนำเวลาแคชขั้นต่ำคือหนึ่งสัปดาห์และควรสูงสุดหนึ่งปีสำหรับเนื้อหาที่เปลี่ยนแปลงไม่บ่อยนัก

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

โดยปกติจะทำโดยการเพิ่มส่วนย่อยของรหัสนี้ที่ไฟล์ .htaccess สำหรับแผนโฮสติ้งที่ใช้ร่วมกัน

<ifmodule mod_expires.c>
หมดอายุActive On
ExpiresByType text/html “การเข้าถึงบวก 7200 วินาที”
ExpiresByType image/gif “การเข้าถึงบวก 864000 วินาที”
ExpiresByType image/jpg “การเข้าถึงบวก 864000 วินาที”
ExpiresByType image/png “การเข้าถึงบวก 864000 วินาที”
ExpiresByType text/css “การเข้าถึงบวก 864000 วินาที”
ExpiresByType text/javascript “การเข้าถึงบวก 864000 วินาที”
แอปพลิเคชัน ExpiresByType/javascript “การเข้าถึงบวก 864000 วินาที”
</ifmodule>

14. เพิ่มประสิทธิภาพฐานข้อมูลของคุณ

ตราบใดที่คุณมีไซต์ที่ขับเคลื่อนด้วยฐานข้อมูล (ซึ่งรวมถึง WordPress และไซต์ที่ใช้ CMS อื่น ๆ ทั้งหมด) อย่าลืมเพิ่มประสิทธิภาพฐานข้อมูลของคุณ

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

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

เพิ่มประสิทธิภาพฐานข้อมูลของคุณผ่าน phpMyAdmin

เพิ่มประสิทธิภาพฐานข้อมูลของคุณผ่าน phpMyAdmin

15. เลือกบริษัทโฮสติ้งของคุณอย่างชาญฉลาด

เลือกแผนการโฮสต์ที่ตรงกับความต้องการของไซต์ของคุณ

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

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

ฉันขอแนะนำ WPEngine ที่จัดการ บริษัท โฮสติ้ง Wordpress สำหรับไซต์อีคอมเมิร์ซ WordPress หรือไซต์ WordPress ใด ๆ ที่มีการเข้าชมสูง

16. จ้างผู้เชี่ยวชาญ

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

แต่อย่างที่คุณทราบ วิธีที่ดีที่สุดคือจ้างผู้เชี่ยวชาญเมื่อจำเป็นต้องทำให้ถูกต้อง

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

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

เวลาในการโหลดเปลี่ยนจาก 8.2 เป็น 2.6 วินาที ไบต์แรกและเวลาในการแสดงผลเริ่มต้นได้รับการปรับให้เหมาะสมลงเป็น 0.147 และ 0.384 วินาทีตามลำดับ และจำนวนคำขอ HTTP ลดลงจาก 96 เป็น 78 นอกจากนี้ Google PageSpeed ​​​​Insights ยังได้รับการปรับให้เหมาะสมเป็น 88%

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

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

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

หากคุณต้องการจ้างฉัน ฉันยินดีช่วย ดูผลงานของฉันและติดต่อฉันบน AwesomeWeb วันนี้!

บทสรุป

ทุกอย่างดีขึ้นเมื่อไซต์ของคุณโหลดเร็วขึ้น

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

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

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

จ้างฉันที่นี่หรือค้นหา freelancer ในการเพิ่มประสิทธิภาพความเร็วอื่นๆ บน AwesomeWeb ที่นี่