วิธีปรับปรุงประสิทธิภาพของไซต์ WordPress ด้วยการลดขนาด
เผยแพร่แล้ว: 2018-11-19ความเร็วของไซต์ยังคงเป็นข้อกังวลที่ยืนต้นสำหรับเจ้าของไซต์เกือบทั้งหมด แม้ว่าจะมีหลายวิธีที่คุณสามารถปรับปรุงความเร็วของไซต์ได้ แต่ก็มีเทคนิคหนึ่งที่มักถูกมองข้าม (แต่ยังมีประสิทธิภาพสูง) ให้พิจารณา นั่นคือ การลดขนาด
พูดง่ายๆ ก็คือ การลดขนาดจะเพิ่มประสิทธิภาพโค้ดของไซต์ของคุณให้มีขนาดเล็กลงและมีประสิทธิภาพในการทำงานมากขึ้น แม้ว่าสิ่งนี้อาจดูเหมือนเป็นข้อกังวลเล็กน้อย แต่จริงๆ แล้วมีประสิทธิภาพอย่างน่าประหลาดใจ
ในบทความนี้ ผมจะแนะนำคุณเกี่ยวกับแนวคิดของการลดขนาดและวิธีการทำงาน นอกจากนี้ ฉันจะแสดงให้คุณเห็นหลายวิธีที่คุณสามารถใช้วิธีนี้ด้วยตนเอง โดยไม่ต้องแตะโค้ด มาเริ่มกันเลย!
ข้อมูลเบื้องต้นเกี่ยวกับ 'การลดขนาด' (และวิธีที่จะช่วยคุณได้)
บล็อกนี้ได้กล่าวถึงความสำคัญของการทำให้ไซต์ของคุณทำงานได้รวดเร็วหลายครั้งก่อนหน้านี้ ด้วยเหตุนี้ คุณจึงอาจทราบวิธีต่างๆ ในการเพิ่มประสิทธิภาพความเร็วไซต์ของคุณอยู่แล้ว วันนี้ฉันจะพูดถึงวิธีอื่น
คุณเห็นไหมว่าสาเหตุที่เป็นไปได้ประการหนึ่งที่ทำให้เวลาโหลดนานคือโค้ดที่เขียนไม่มีประสิทธิภาพ เจ้าของไซต์ส่วนใหญ่แทบไม่ต้องเขียนโค้ดอะไรเลย (ถ้าเคย) ดังนั้นคุณอาจไม่สามารถบอกได้ว่าโค้ดของคุณทำให้ไซต์ของคุณอืดหรือไม่ อย่างไรก็ตาม ด้วยการใช้กระบวนการที่เรียกว่าการลดขนาด คุณสามารถเพิกเฉยได้
หากคุณไม่ใช่ผู้เขียนโค้ด ข้อมูลนี้อาจดูซับซ้อนจนน่ากลัว แต่อย่ากังวล การลดขนาดเป็นกระบวนการที่ตรงไปตรงมาซึ่งเกี่ยวข้องกับการเพิ่มประสิทธิภาพโค้ด CSS, HTML และ JavaScript ฉันจะแสดงให้คุณเห็นในภายหลังว่าคุณจะบรรลุเป้าหมายนี้ได้อย่างไรโดยไม่ต้องใช้ทักษะการเขียนโปรแกรมใดๆ อย่างไรก็ตาม ก่อนหน้านี้ เรามาดูว่ามันทำงานอย่างไรในทางปฏิบัติ โดยใช้ตัวอย่าง CSS ต่อไปนี้:
h1 {
background-color: blue;
}
h2 {
background-color: red;
}
p {
background-color: black;
}
แม้จะคุ้นเคยกับ CSS เป็นอย่างดี แต่ก็สามารถถอดรหัสได้ง่าย เพียงแต่ระบุลักษณะที่ควรกำหนดให้กับองค์ประกอบต่างๆ ในหน้า เนื่องจากรหัสนี้เขียนขึ้นเพื่อให้มองเห็นได้ด้วยตาเปล่า ด้วยเหตุนี้ การขึ้นบรรทัดใหม่และการเว้นวรรคพิเศษจึงถูกใช้เพื่อทำให้แต่ละส่วนของโค้ดมีการกำหนดอย่างชัดเจนและง่ายต่อการสแกน
อย่างไรก็ตาม นี่ไม่ใช่สิ่งที่คอมพิวเตอร์จำเป็นต้องเข้าใจและเรียกใช้โค้ดจริงๆ อันที่จริง อักขระเพิ่มเติมทำให้โค้ด 'หนักขึ้น' ดังนั้นจึงต้องใช้เวลานานกว่าสำหรับคอมพิวเตอร์ในการอ่านและดำเนินการ คุณจึงสามารถนึกถึงการลดขนาดเป็นกระบวนการที่จะเปลี่ยนโค้ดที่เป็นมิตรกับมนุษย์ให้เป็นโค้ดที่เหมาะกับเครื่อง
หากคุณต้องย่อโค้ดนี้ มันจะมีลักษณะดังนี้:
h1{background-color:blue}h2{background-color:red}p{background-color:black}
โค้ดนี้ประกอบด้วยฟังก์ชันการทำงานที่เหมือนกันทุกประการกับโค้ดด้านบน แต่มีการนำส่วนที่ไม่จำเป็นออกทั้งหมด แม้ว่าจะดูเหมือนไม่แตกต่างกันมากนัก แต่โค้ดย่อเล็กสุดนั้นเบากว่าต้นฉบับ 36% หากคุณนึกภาพว่าหลักการเดียวกันนี้ใช้กับโค้ดทั้งหมดบนหน้าเว็บของคุณ คุณอาจเห็นว่าวิธีนี้มีประสิทธิภาพในระยะยาว
แล้วคุณจะทำอย่างไรจริง ๆ ? มีวิธีการสองสามวิธีให้คุณเลือก และฉันจะพิจารณาดูตลอดบทความนี้ ขั้นแรก มาดูวิธีการย่อโค้ดด้วยตนเองกัน
วิธีย่อโค้ดด้วยตนเอง
วิธีหนึ่งที่คุณสามารถย่อขนาดโค้ดได้คือทำเอง สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณกำลังเขียนโค้ดของคุณเอง เช่น เมื่อสร้างธีมหรือปลั๊กอิน อย่างไรก็ตาม การใช้หวีซี่ละเอียดอ่านโค้ดของคุณอาจต้องเสียภาษี หากไม่สามารถทำได้ ขึ้นอยู่กับปริมาณ
โชคดีที่มีเครื่องมือมากมายที่จะช่วยคุณสร้างโค้ดย่อขนาดในเวลาไม่กี่วินาที ตัวอย่างหนึ่งคือ Minify ซึ่งใช้ได้กับทั้ง CSS และ JavaScript:
เพียงวางรหัสที่คุณต้องการบีบอัดลงในกล่องข้อความ คลิกย่อขนาด จากนั้นรหัสจะถูกส่งคืนในรูปแบบใหม่ทันที คุณยังดูข้อมูลสรุปได้ว่าเวอร์ชันใหม่นั้นเบากว่าเวอร์ชันดั้งเดิมมากเพียงใด:
เมื่อคุณต้องการย่อโค้ด HTML ฉันขอแนะนำ HTML Minifier สำหรับงาน:
ฉันชอบเครื่องมือนี้เป็นพิเศษเพราะมีตัวเลือกมากมายเกี่ยวกับวิธีการบีบอัดโค้ด และยังได้รับการอนุมัติจาก Google ด้วย คุณสามารถใช้การตั้งค่าทางด้านขวาเพื่อปรับแต่งผลลัพธ์สุดท้ายตามที่คุณต้องการ
แม้ว่าการย่อโค้ดด้วยตนเองจะมีประโยชน์อย่างแน่นอน แต่โดยส่วนใหญ่แล้วคุณอาจต้องการทำให้กระบวนการเป็นอัตโนมัติ ต่อไป ฉันจะดูว่าคุณจะทำอย่างนั้นได้อย่างไร
รายละเอียดเล็กๆ น้อยๆ ในส่วนฟรอนต์เอนด์อาจทำให้ทุกอย่างช้าลง… และด้วยปลั๊กอิน ธีม และเทคโนโลยีมากมายที่ทำงานร่วมกัน จึงอาจเป็นเรื่องยากที่จะรู้ว่าจะเริ่มต้นจากตรงไหน โปรแกรมเสริมข้อมูลเชิงลึกด้านประสิทธิภาพของเราช่วยให้คุณเห็นข้อมูลเชิงลึกเกี่ยวกับด้านประสิทธิภาพสูงและต่ำของเว็บไซต์ของคุณ จากจุดนี้ เราจะก้าวไปอีกขั้นและให้การดำเนินการที่แนะนำแก่คุณโดยตรงจากทีมผู้เชี่ยวชาญของเรา เพื่อให้คุณรู้ว่าจะปรับปรุงความเร็วไซต์ของคุณได้ที่ไหนและอย่างไร! เรียนรู้เพิ่มเติมที่นี่
ปลั๊กอิน WordPress 3 ตัวเพื่อช่วยให้คุณย่อขนาดโค้ดโดยอัตโนมัติ
วิธีที่ง่ายที่สุดในการลดขนาดคือการใช้ปลั๊กอิน WordPress เพื่อทำงานให้กับคุณ ปลั๊กอินดังกล่าวจะย่อโค้ดของคุณโดยอัตโนมัติทันทีที่มีการเรียกใช้
ซึ่งหมายความว่าคุณสามารถย่อโค้ดของคุณได้โดยไม่ต้องดูเอง เมื่อคำนึงถึงสิ่งนี้ มาดูปลั๊กอินลดขนาดที่ดีที่สุดกันเถอะ!
1. เพิ่มประสิทธิภาพอัตโนมัติ
หากคุณกังวลว่าการลดขนาดจะเป็นกระบวนการที่ซับซ้อน Autoptimize เป็นจุดหักเหที่สมบูรณ์แบบ นี่คือโซลูชัน 'ตั้งค่าและลืม' ที่จะลดขนาดสคริปต์ทั้งหมดของไซต์ของคุณโดยอัตโนมัติโดยที่คุณไม่ต้องป้อนข้อมูลใดๆ คุณเพียงแค่ติดตั้งและเปิดใช้งานปลั๊กอิน และส่วนที่เหลือจะจัดการเอง อย่างไรก็ตาม หากคุณต้องการทราบด้านเทคนิคของสิ่งต่าง ๆ ปลั๊กอินยังมีตัวเลือกการกำหนดค่าขั้นสูงหลายตัว
คุณสมบัติหลัก
- ใช้งานง่าย ไม่ต้องตั้งค่าใดๆ
- ลดขนาดและบีบอัดสคริปต์ทั้งหมดบนเว็บไซต์ของคุณโดยอัตโนมัติ
- ย้ายสไตล์ทั้งหมดไปที่ส่วนหัวของไซต์เพื่อประสิทธิภาพสูงสุด
ราคา: ปลั๊กอินฟรีและ Autoptimize ยังมีระดับพรีเมียมด้วย เริ่มต้นที่ 119 ยูโรหรือประมาณ 138 ดอลลาร์
2. ลดความเร็วอย่างรวดเร็ว
ธีมที่กำลังทำงานสำหรับปลั๊กอินทั้งหมดเหล่านี้คือความเรียบง่าย เช่นเดียวกับข้อเสนอก่อนหน้านี้ Fast Velocity Minify ใช้งานได้ทันทีที่แกะกล่อง ด้วยการบีบอัดโค้ดและสคริปต์ของคุณเป็นจำนวนไฟล์ขั้นต่ำ ปลั๊กอินช่วยให้แน่ใจว่า CSS และ JavaScript ของคุณถูกส่งอย่างมีประสิทธิภาพมากที่สุด นอกจากนี้ยังมีการตั้งค่าคอนฟิกูเรชันต่างๆ รวมถึงการย่อ HTML ที่ไม่บังคับ
คุณสมบัติหลัก
- ลดขนาดไฟล์สคริปต์เพื่อลดจำนวนคำขอ HTTP
- นำเสนอฟังก์ชันการทำงานแบบพลักแอนด์เพลย์พร้อมการตั้งค่าเริ่มต้น
- ผสานและเพิ่มประสิทธิภาพ Google Fonts
การ กำหนดราคา: ปลั๊กอินนี้ฟรีทั้งหมด ไม่จำเป็นต้องมีแพลนแบบพรีเมียม
3. ผสาน + ลดขนาด + รีเฟรช
Merge + Minify + Refresh เป็นอีกหนึ่งปลั๊กอินการลดขนาดที่เริ่มทำงานนอกกรอบ แม้ว่าฟีเจอร์ส่วนใหญ่จะคล้ายกับ Autoptimize แต่ก็เป็นทางเลือกที่เบาเป็นพิเศษ เนื่องจากกระบวนการลดขนาดทำงาน ปลั๊กอินจึงให้การชะลอตัวน้อยที่สุด และไม่ต้องการให้คุณล้างแคชด้วยตนเอง (ต่างจากโซลูชันอื่นๆ)
คุณสมบัติหลัก
- ลดขนาดและรวมไฟล์สคริปต์ของคุณโดยอัตโนมัติ
- ใช้ wp-cron เพื่อลดการชะลอตัวระหว่างการย่อขนาด
- เข้ากันได้กับการตั้งค่า WordPress Multisite
ราคา: Merge + Minify + Refresh สามารถดาวน์โหลดและใช้งานได้ฟรี โดยไม่มีแผนพรีเมียม
บทสรุป
เมื่อพูดถึงการเพิ่มประสิทธิภาพเว็บไซต์ของคุณ สิ่งสำคัญคือต้องใช้วิธีการทั้งหมดที่มีอยู่ หนึ่งในนั้นคือการลดขนาด ซึ่งช่วยให้คุณสามารถบีบอัดโค้ดของคุณเพื่อให้มีประสิทธิภาพมากขึ้นโดยไม่กระทบต่อการทำงานของโค้ด
ในบทความนี้ ฉันได้พูดถึงวิธีที่คุณสามารถใช้การลดขนาดในไซต์ของคุณเองด้วยปลั๊กอินที่ฉันแนะนำ:
- เพิ่มประสิทธิภาพอัตโนมัติ ทรงพลังแต่เรียบง่าย พร้อมการตั้งค่าเพิ่มเติมสำหรับผู้ใช้ที่มีประสบการณ์
- ลดความเร็วอย่างรวดเร็ว ตัวเลือกที่มั่นคงซึ่งเหมาะสำหรับทั้งผู้เริ่มต้นและนักพัฒนา
- ผสาน + ลดขนาด + รีเฟรช รวดเร็วและเชื่อถือได้ ซึ่งช่วยให้มั่นใจถึงประสิทธิภาพที่ดีตลอดเวลา
คุณมีคำถามใดๆ เกี่ยวกับการใช้การลดขนาดเพื่อเพิ่มความเร็วไซต์ของคุณหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!
ยกระดับประสิทธิภาพของเว็บไซต์ของคุณไปอีกระดับด้วยคำแนะนำฟรีของเรา!
คู่มือฟรีนี้มีแปดขั้นตอนง่ายๆ ที่คุณสามารถใช้เพื่อเพิ่มประสิทธิภาพและความเร็วของไซต์ WordPress ได้ในวันนี้ ครอบคลุมแนวทางปฏิบัติด้านประสิทธิภาพของ WordPress ที่ดีที่สุดทุกประการ ตั้งแต่การปรับเนื้อหาเว็บให้เหมาะสม เช่น รูปภาพ JavaScript และ CSS ไปจนถึงการตรวจสอบปลั๊กอินอย่างครอบคลุม
ดาวน์โหลดเลย!