วิธีทำให้เว็บไซต์ WordPress ของคุณโหลดเร็วขึ้นโดยใช้ปลั๊กอิน

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

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

PageSpeed ​​Insights

Google PageSpeed ​​Insights เป็นเครื่องมือออนไลน์ที่ใช้งานได้ฟรี ซึ่งจะทดสอบความเร็วในการโหลดของเว็บไซต์ ระบุปัญหา จัดลำดับความสำคัญ และให้คำแนะนำในการแก้ไขปัญหาเหล่านั้น

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

ปัญหาเหล่านี้จะแก้ไขได้โดยใช้ปลั๊กอิน เมื่อตัดสินใจเลือกปลั๊กอิน ให้ยึดติดกับปลั๊กอินที่ได้รับการอัปเดตเมื่อเร็วๆ นี้และมีชื่อเสียงที่ดี ปลั๊กอินจำนวนมากจะแก้ปัญหาได้มากกว่าหนึ่งปัญหา

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

คะแนนของฉัน

คะแนนของฉันแย่มาก 46 สิ่งแรกที่ควรสังเกตคือผลลัพธ์มีสามส่วนที่แตกต่างกัน:

• ควรแก้ไข (2 รายการ)
• พิจารณาแก้ไข (6 รายการ)
• ผ่าน (2 รายการ)

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

หมายเหตุ – ฉันยังมีความล้มเหลวอยู่บ้างระหว่างทาง เราได้รวมไว้เพื่อให้คุณได้รับทราบถึงปัญหาที่อาจเกิดขึ้น

ควรแก้ไข

ฉันมีสองรายการที่ต้องดำเนินการทันที:

• เปิดใช้งานการบีบอัด
• กำจัด JavaScript ที่บล็อกการแสดงผลและ CSS ในเนื้อหาครึ่งหน้าบน

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

ปัญหาที่สำคัญที่สุดของฉันคือฉันไม่ได้ใช้การบีบอัด มันแสดงให้เห็นว่าฉันสามารถลดขนาดการถ่ายโอนไฟล์ของฉันได้ 79% สามารถทำได้โดยใช้ gzip หรือ deflate

ตัวเพิ่มคะแนนประสิทธิภาพ WP

ปลั๊กอินฟรีนี้มีการบีบอัด gzip และจะแก้ปัญหาอื่นๆ อีกหลายอย่าง เช่น ปัญหา CSS และ JavaScript โดยการลบสตริงการสืบค้น เพิ่มส่วนต่าง: ส่วนหัวที่ยอมรับการเข้ารหัส และตั้งค่าการแคชหมดอายุ ฉันเลือกเพราะมันมี 4.7/5 ที่มีการติดตั้งมากกว่า 10,000 ครั้ง ได้รับการพัฒนาเพื่อเพิ่มความเร็วในการโหลดหน้าและปรับปรุงการทดสอบคะแนนหน้า

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

สิ่งที่ยอดเยี่ยมอย่างหนึ่งเกี่ยวกับเรื่องนี้ก็คือมันได้แก้ปัญหาสำคัญบางอย่างในฉบับต่อไป: กำจัด JavaScript ที่บล็อกการแสดงผลและ CSS ในเนื้อหาครึ่งหน้าบน ปัญหานี้ได้ถูกย้ายไปที่ พิจารณาแก้ไขแล้ว นอกจากนี้ยังแก้ไข Leverage Browser Caching อย่างสมบูรณ์ ขณะนี้ไซต์กำลังผ่านกฎ 4 ข้อ ซึ่งก่อนหน้านี้ผ่านเพียง 2 ข้อเท่านั้น

ลดเวลาตอบสนองของเซิร์ฟเวอร์

สิ่งที่แปลกเกี่ยวกับเรื่องนี้คือเวลาตอบสนองของเซิร์ฟเวอร์เพิ่มขึ้นจาก .96 เป็น 1.4 ขณะนี้ ลดเวลาตอบสนองของเซิร์ฟเวอร์ อยู่ใน ควรแก้ไข สิ่งนี้เรียกว่าปลั๊กอินแคช

W3 แคชทั้งหมด

W3 Total Cache เป็นปลั๊กอินที่ได้รับความนิยมมากที่สุดสำหรับการเร่งประสิทธิภาพเซิร์ฟเวอร์ของเว็บไซต์ของคุณ มีการติดตั้งที่ใช้งานอยู่เกือบล้านครั้งและคะแนน 4.4/5 เพิ่มประสิทธิภาพไซต์ของคุณผ่านการแคช คุณสามารถเลือกตัวเลือกการแคชต่างๆ ได้ทีละรายการ ซึ่งรวมถึงเพจ ฐานข้อมูล ออบเจ็กต์ และเบราว์เซอร์ โดยจะแคชส่วนหัวและแท็กเอนทิตี ฟีดและผลการค้นหาที่หมดอายุในอนาคต นอกจากนี้ยังมีคุณสมบัติในการลดขนาด JS, CSS และ HTML ของคุณ จะเพิ่มความเร็วคะแนน Google PageSpeed ​​ของคุณอย่างน้อย 10 เท่าเมื่อกำหนดค่าอย่างสมบูรณ์

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

พิจารณาแก้ไข

เมื่อฉันทำการทดสอบครั้งแรก ส่วนนี้มีปัญหามากกว่าตอนที่ฉันทำสำเร็จ ปัญหาเหล่านี้ได้รับการแก้ไขแล้วเมื่อฉันแก้ไขปัญหาในพื้นที่ควรแก้ไข

ปัญหาเดิมรวมถึง:

• ใช้ประโยชน์จากการแคชเบราว์เซอร์
• เวลาตอบสนองของเซิร์ฟเวอร์
• ลดขนาด JavaScript
• ปรับรูปภาพให้เหมาะสม
• ลดขนาด CSS
• ลดขนาด HTML

มาดูปัญหาในปัจจุบันกัน

กำจัด Javascript ที่บล็อกการแสดงผลและ Css ในเนื้อหาครึ่งหน้าบน

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

มีหลายวิธีในการแก้ไข:

• เลื่อนการโหลด
• โหลดแบบอะซิงโครนัส
• แทรกลงใน HTML . โดยตรง

นี่คือปลั๊กอินที่ฉันใช้เพื่อแก้ไขปัญหานี้

เพิ่มประสิทธิภาพอัตโนมัติ

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

วิธีนี้จะช่วยแก้ปัญหาบางอย่าง เช่น การลดขนาด JS และ CSS ลงในรายการ

ตอนแรกฉันเพิ่งเปิดการตั้งค่าพื้นฐานสำหรับ HTML, JS และ CSS ทำให้คะแนนของฉันเป็น 88 และลดปัญหาเหลือ 3 ทรัพยากร CSS ตัวหนึ่งสร้างโดยตัวปลั๊กอินเอง และอีกสองตัวเป็นแบบอักษรของ Google ตอนนี้ผ่าน 7 กฎ มันแก้ไข Minify CSS และ Minify HTML

WordPress ที่ดีขึ้น Minify

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

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

เนื่องจากคะแนนของฉันคือ 88 และฉันรู้ว่า 3 ประเด็นคืออะไร ฉันจึงตัดสินใจไปยังปัญหาถัดไป

ปรับรูปภาพให้เหมาะสม

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

เครื่องมือเพิ่มประสิทธิภาพรูปภาพ EWWW

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

เมื่อฉันติดตั้ง มีหลายไฟล์ที่ต้องการให้ฉันค้นหาและติดตั้ง ฉันคิดว่าปลั๊กอินนี้จะทำงานได้ดีกับไฟล์ทั้งหมดที่ติดตั้ง แต่ฉันตัดสินใจหาไฟล์ที่ใช้งานได้ทันที

WP Smush

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

เวอร์ชันฟรีไม่บีบอัดข้อมูลเกิน 1 MB และจะลบครั้งละ 50 เท่านั้น สำหรับมากกว่านั้น คุณจะต้องใช้ WP Smush Pro ซึ่งจะลบรูปภาพได้มากถึง 32 MB โดยไม่จำกัดจำนวนภาพในแต่ละครั้ง มันทำสำเนาสำรองของต้นฉบับหากคุณต้องการ ราคาเริ่มต้นที่ 19 เหรียญต่อเดือน

ฉันมีรูปภาพ 114 ภาพที่จำเป็นต้องบดขยี้ 8 ภาพเหล่านี้มีขนาดเกิน 1 MB ฉันตัดสินใจแก้ไขด้วยมือ บีบอัดภาพ 98 ภาพและลดขนาดไฟล์ลง 4.79 MB (8.82%)

ทำให้คะแนนของฉันไปถึง 90 Google Insights ระบุ 5 ภาพที่ไม่ชอบ แต่ไม่มีขนาดเกิน 1 MB มีตั้งแต่ .7 KB ถึง 17 KB

การเพิ่มประสิทธิภาพภาพด้วยมือ

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

ลดขนาด JavaScript, CSS และ HTML

ฉันคิดว่าฉันแก้ไขสิ่งนี้ ...

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

เมื่อลองใช้ Better WordPress Minify แล้วปิดกลับ ข้อความของฉันที่ย่อขนาด CSS และ HTML ก็กลับมา คะแนนของฉันลดลงเหลือ 88 และตอนนี้ฉันกลับมามีกฎที่ผ่าน 5 ข้อ ฉันเปิดคุณสมบัติการลดขนาดของ W3 Total Cache และตอนนี้ก็ผ่านปัญหาการลดขนาดทั้งหมดแล้ว ตอนนี้ฉันมีคะแนน 88 และผ่าน 8 กฎ นอกจากนี้ยังมีไฟล์ครึ่งหน้าบนหกไฟล์ ฉันรู้ว่าฉันได้แก้ปัญหาเหล่านี้ไปบ้างแล้ว ดังนั้นฉันต้องเปลี่ยนแปลงบางอย่าง

ฉันแก้ไขปัญหาบางอย่างแล้วและพบว่าฉันได้ปิด Autoptimize เมื่อมีปัญหากับ Better WordPress Minify ก่อนหน้านี้ ฉันเปิด Autoptimize อีกครั้ง ปิดการลดขนาดจาก W3 Total Cache และล้างแคช (ขั้นตอนสำคัญมาก!) ตอนนี้ฉันได้คะแนน 90 กลับมาและไซต์ผ่าน 8 กฎ มันกลับไปเป็นไฟล์ CSS สามไฟล์ครึ่งหน้าบนและข้อความเพื่อปรับรูปภาพให้เหมาะสม

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

ผลคะแนนสุดท้าย

คะแนนสุดท้ายของฉันคือ 90/100 ปลั๊กอินที่ฉันเคยได้รับคะแนนนี้คือ:

• อัตโนมัติ (คุณสมบัติทั้งหมดเปิดอยู่)
• W3 Total Cache (เปิดเฉพาะคุณสมบัติการแคชหน้าเท่านั้น)
• WP Performance Score Booster (เปิดใช้งานคุณสมบัติทั้งหมด)
• WP Smush (รุ่นฟรี)

คะแนนสำหรับมือถือเพิ่มขึ้นจาก 36 เป็น 78 เพื่อแก้ไข ฉันต้องปรับรูปภาพและไฟล์สำหรับมือถือให้เหมาะสม

ความคิดสุดท้าย

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

ฉันอยากได้ยินจากคุณ คุณได้เพิ่มประสิทธิภาพเว็บไซต์ WordPress โดยใช้ Google PageSpeed ​​Insights หรือไม่? ประสบการณ์ของคุณเป็นเหมือนฉันไหม คุณใช้ปลั๊กอินต่าง ๆ เพื่อแก้ปัญหาหรือไม่? ฉันต้องการทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็น