วิธีจัดกลุ่มและลดขนาดทรัพยากรใน WordPress
การมีประสิทธิภาพที่ดีขึ้นที่เป็นไปได้คือความฝันของทุกคนที่จัดการเว็บไซต์ จัดกลุ่ม และลดขนาดทรัพยากรบน WordPress เป็นหนึ่งในสิ่งที่ดีที่สุดที่เราสามารถทำได้ แต่อาจเป็นเรื่องยากจริงๆ จัดกลุ่มทรัพยากรทั้งหมดของคุณ (ไฟล์ css และ js เป็นหลัก) อาจเปิดเผยเว็บไซต์ของคุณหากคุณไม่ใช่นักพัฒนาเนื่องจากอาจทำให้เกิดข้อขัดแย้ง
WP Speed of Light เป็นทางออกที่ดีที่สุดในการใช้งานไซต์ wordpress ของคุณ เนื่องจากมีตัวเลือกมากมายในการทำให้ไซต์ของคุณโหลดได้อย่างรวดเร็วด้วยแดชบอร์ดที่เป็นมิตร และใช่ หนึ่งในตัวเลือกเหล่านี้คือจัดกลุ่มและลดขนาดทรัพยากร การรวม/ยกเว้นไฟล์เดียวจากกลุ่มและกระบวนการย่อเล็กสุดเป็นกุญแจสำหรับการเพิ่มประสิทธิภาพแบบกำหนดเองโดยไม่มีข้อขัดแย้ง
เราจะใช้ตัวอย่างไซต์ wordpress สำหรับโพสต์ในบล็อกนี้ และเราจะเรียนรู้วิธีการทำเช่นนี้ เพื่อให้ขั้นตอนการกำหนดค่าทุกอย่างง่ายขึ้น
วิธีทำ WordPress JS และการลดขนาด CSS
มาเรียนรู้วิธีทำ wordpress js และ CSS minification กัน แต่ก่อนอื่น เราต้องรู้ว่า minification หมายความว่าอย่างไร “Minification หมายถึงกระบวนการลบข้อมูลที่ไม่จำเป็นหรือซ้ำซ้อน โดยไม่กระทบต่อการประมวลผลทรัพยากรโดยเบราว์เซอร์ เช่น คอมเมนต์โค้ด และ การจัดรูปแบบ การลบโค้ดที่ไม่ได้ใช้ โดยใช้ชื่อตัวแปรและฟังก์ชันที่สั้นลง เป็นต้น”
ตอนนี้สิ่งที่เราจะทำคือการทดสอบความเร็วไปยังหน้าเว็บของเราเพื่อดูการเปลี่ยนแปลง ตัวอย่างเช่น เรากำลังใช้ไซต์ที่มี woocommerce และผลิตภัณฑ์บางอย่าง ดังนั้นในครั้งแรกจะโหลดได้ช้าเล็กน้อย
ใช่ 2,79 วินาทีในการโหลดหน้า ไม่เลว แต่น่าจะดีกว่า แค่ลดขนาด js และ CSS และดูความแตกต่าง ไปที่ WP Speed of light > SpeedUp > Group & Minify คุณจะสามารถ เพื่อดูเมนูที่มีตัวเลือกทั้งหมดเพื่อลดขนาด เวอร์ชันปลั๊กอินฟรีจะรวมกลุ่มและตัวเลือกย่อเล็กสุด แต่การยกเว้นไฟล์ภาพมีเฉพาะในเวอร์ชัน PRO Addon เท่านั้น
ตัวเลือกเสริมของ PRO คือ: ไม่รวมสคริปต์แบบอินไลน์ (ยกเว้นสคริปต์แบบอินไลน์จากการลดขนาด) ย้ายสคริปต์ไปที่ส่วนท้าย (ช่วยให้คุณเพิ่มความเร็วไซต์ของคุณโดยการย้ายสคริปต์ที่ย่อขนาดทั้งหมดไปที่ส่วนท้าย) แบบอักษรกลุ่มและ Google แบบอักษร (แบบอักษรภายในกลุ่มและแบบอักษรของ Google ในไฟล์เดียวเพื่อให้บริการเร็วขึ้น) และการยกเว้นไฟล์ขั้นสูง
คุณมีตัวเลือกในการลดขนาด อย่างที่คุณเห็น JS, CSS และ HTML ตอนนี้เพียงแค่เปิดใช้งานตัวเลือกเหล่านี้ คลิกที่บันทึกและทรัพยากรทั้งหมดของคุณจะถูกย่อให้เล็กสุดทันที อาจมีปัญหาเนื่องจากเป็นการกำหนดค่าขั้นสูง แต่ทุกอย่าง สามารถแก้ไขได้ด้วยการยกเว้นโค้ดและไฟล์บางไฟล์ (ด้วย pro addon)
ตอนนี้งานนักพัฒนาทั้งหมดที่อาจใช้เวลาหลายชั่วโมงเสร็จภายในไม่กี่วินาที
ขั้นตอนต่อไป WordPress เพิ่มประสิทธิภาพ CSS และ JS
ด้วยปลั๊กอินนี้ เราจะปล่อยให้ wordpress เพิ่มประสิทธิภาพ CSS และ js เพียงแค่เปิดใช้งานตัวเลือกกลุ่มบนแดชบอร์ด ไปที่ WP Speed of Light > SpeedUp > Group & Minify คุณจะสามารถดูแดชบอร์ดที่มีตัวเลือกสำหรับจัดกลุ่ม CSS และ js
ตัวเลือกเหล่านี้ช่วยให้คุณ:
- Group JS: การจัดกลุ่มไฟล์ Javascript หลายไฟล์เป็นไฟล์เดียวจะย่อจำนวนคำขอ HTTP
- Group CSS: การจัดกลุ่มไฟล์ CSS หลายไฟล์เป็นไฟล์เดียวจะลดจำนวนคำขอ HTTP
คำขอ HTTP: คำขอเหล่านี้เป็นคำขอที่ส่งไปยังเซิร์ฟเวอร์ทุกครั้งที่เราเลือกบางอย่างหรือไปที่หน้าอื่นในไซต์เดียวกัน ดังนั้นหากเราสามารถลดคำขอเหล่านี้ได้ เวลาในการโหลดก็จะลดลง
ในการตรวจสอบจำนวนไฟล์ สคริปต์ที่คุณสามารถจัดกลุ่มบนเว็บไซต์ของคุณ เพียงแค่เปิดคอนโซลเบราว์เซอร์ของคุณ (คลิกขวา > ตรวจสอบหรือ F12) และเปิด แผงเครือ ข่าย
คุณสามารถแสดงรายการไฟล์ทั้งหมดที่โหลดตามประเภท ในตัวอย่างนี้ ฉันได้คลิกที่รายการไฟล์ JS เท่านั้น
ตอนนี้เราอยู่ในการตั้งค่านี้แล้ว เพียงเปิดใช้งานตัวเลือกกลุ่ม (Group CSS และ Group JS) แล้วคลิกบันทึก โปรดทราบว่าตัวเลือกเหล่านี้ต้องใช้ด้วยความระมัดระวัง และคุณจะต้องทดสอบหน้าของคุณเพราะอาจทำให้เกิดข้อขัดแย้ง .
มาจริงจังและปรับน้ำหนักแบบอักษรให้เหมาะสม
อะไร การเพิ่มประสิทธิภาพอื่นๆ? ใช่! คุณจะสามารถปรับน้ำหนักแบบอักษรให้เหมาะสมและง่ายพอๆ กับการเปิดใช้งานตัวเลือกในการตั้งค่า เพียงไปที่ WP Speed of Light > SpeedUp > Group & Minify > Group fonts และ ตัวเลือก
ฟอนต์กลุ่มและตัวเลือกฟอนต์ของ Google จะช่วยให้คุณจัดกลุ่มเป็นไฟล์เดียวเพื่อให้แสดงผลได้เร็วขึ้น ซึ่งสะดวกมาก เนื่องจากธีมและเลย์เอาต์ของ WordPress ส่วนใหญ่มี 2 ฟอนต์หรือฟอนต์ตามค่าเริ่มต้นโดยมีการปฏิเสธทั้งหมด (ปกติ ตัวหนา ตัวเอียง ...)
เพียงเปิดใช้งานตัวเลือกนั้น คลิกที่บันทึก และแบบอักษรทั้งหมดจะถูกจัดกลุ่ม
ตอนนี้เราได้เปิดใช้งานตัวเลือกทั้งหมดเพื่อลดขนาดและจัดกลุ่มทรัพยากรแล้ว เราควรจะเห็นความแตกต่างในเวลาในการโหลดเว็บไซต์ของเรา มาตรวจสอบความเร็วกัน
ช่างแตกต่างอะไรจาก 2.8 ถึง 0.56 วินาที! ตามที่เราบอกคุณในตอนต้นของโพสต์นี้ เราสามารถปรับปรุงเวลาโหลดให้ดีขึ้น ;)
วิธีใช้การยกเว้นการลดขนาดไฟล์
การลดขนาดอาจทำให้เกิดปัญหาในไซต์ของคุณ ส่วนใหญ่เกิดขึ้นเมื่อคุณจัดกลุ่มไฟล์บางไฟล์ที่มีข้อผิดพลาดในข้อผิดพลาดทางไวยากรณ์หรือตัวแปรที่คล้ายกัน ชื่อคลาส นั่นเป็นสาเหตุว่าทำไมด้วยตัวเลือก “การยกเว้นการลดขนาดไฟล์” คุณจะสามารถแยกไฟล์ออกจากกระบวนการย่อและกลุ่ม ไปที่ WP Speed of Light > SpeedUp > Group & Minify คุณจะสามารถเห็น ตัวเลือก การยกเว้นไฟล์ขั้นสูง
หากต้องการใช้การยกเว้นไฟล์ขั้นสูง คุณจะต้องเรียกใช้การสแกนก่อนเปิดใช้งานตัวเลือกและคลิกเรียกใช้การสแกน
เพื่อให้สามารถแสดงรายการสคริปต์ที่โหลดบนเว็บไซต์ของคุณ WP Speed of Light จำเป็นต้องสแกนโฟลเดอร์ของคุณเพื่อแสดงรายการ โดยทั่วไปจะอยู่ในโฟลเดอร์ /wp-content ที่จัดกลุ่มปลั๊กอินและธีมทั้งหมดของคุณ เลือกโฟลเดอร์นั้น (อย่างน้อย) และคลิกที่ "Scan Now"
มันจะเรียกใช้การสแกน ในที่สุด คลิกที่ดูผลลัพธ์เมื่อการสแกนเสร็จสิ้น
รายชื่อไฟล์ที่จำแนกตามประเภท (ทั้งหมด, JS, CSS, ฟอนต์) ควรแสดงไว้ด้านล่าง หากคุณพบไฟล์ที่ทำให้เกิดปัญหา เมื่อเปิดใช้งานกลุ่มไฟล์และการลดขนาด คุณสามารถแยกไฟล์ออกจากที่นี่ได้โดยใช้ ตัวสลับเปิด/ปิด อย่างง่าย
สิ่งนี้จะช่วยให้คุณสามารถแยกไฟล์ออกได้ และด้วยวิธีนี้ จึงสามารถแก้ไขปัญหาใด ๆ ที่อาจเกิดขึ้นเมื่อมีการย่อขนาดทรัพยากรได้อย่างง่ายดาย... จัดกลุ่มและลดขนาดกระบวนการยังคงต้องอาศัยการทำงานบางอย่าง โดยเฉพาะอย่างยิ่งในการทดสอบ แต่มันก็คุ้มค่ากับความพยายามอย่างแน่นอน และคุณจะทำได้ สามารถทดสอบวิธีการทำงานได้ตลอดเวลาโดย รัน
การทดสอบความเร็วโดยตรงจาก WP Speed of Light ลองใช้ WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light
เมื่อคุณสมัครรับข้อมูลจากบล็อก เราจะส่งอีเมลถึงคุณเมื่อมีข้อมูลอัปเดตใหม่ๆ บนเว็บไซต์ ดังนั้นคุณจะไม่พลาดข่าวสารเหล่านี้
ความคิดเห็น