วิธีการจัดกลุ่มและย่อขนาดทรัพยากรใน WordPress

การมีประสิทธิภาพที่ดีที่สุดคือความฝันของทุกคนที่มีเว็บไซต์ การรวมและย่อทรัพยากรบน WordPress เป็นหนึ่งในสิ่งที่เราสามารถทำได้ดีที่สุด แต่ก็อาจเป็นเรื่องที่ยาก การรวมทรัพยากรทั้งหมดของคุณ (ไฟล์ css และ js เป็นหลัก) อาจทำให้เว็บไซต์ของคุณเสี่ยงหากคุณไม่ใช่ผู้พัฒนา เพราะอาจทำให้เกิดความขัดแย้ง.

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

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

วิธีทำการย่อขนาด JS และ CSS ใน WordPress

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

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

ใช่ 2.79 วินาทีในการโหลดหน้าเว็บ ไม่เลว แต่สามารถดีกว่านี้ได้ แค่ลดขนาดไฟล์ js และ CSS แล้วดูความแตกต่าง ไปที่ WP Speed of light > เพิ่มความเร็ว > รวมและย่อ คุณจะเห็นเมนูที่มีตัวเลือกทั้งหมดในการย่อขนาด ปลั๊กอินเวอร์ชันฟรีมีตัวเลือกการรวมและย่อขนาด แต่การยกเว้นไฟล์ภาพมีเฉพาะในเวอร์ชัน PRO Addon เท่านั้น

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

ตอนนี้งานของนักพัฒนาทั้งหมดที่อาจใช้เวลาหลายชั่วโมงสามารถทำได้ภายในไม่กี่วินาที.

ขั้นตอนถัดไป, การปรับแต่ง CSS และ JS ของ WordPress ให้เหมาะสม

ด้วยปลั๊กอินนี้ เราจะสามารถปรับแต่ง CSS และ JS ของ WordPress ให้เหมาะสมได้โดยการเปิดใช้งานตัวเลือกการจัดกลุ่มบนแดชบอร์ด ไปที่ WP Speed of Light > เพิ่มความเร็ว > จัดกลุ่ม & ย่อขนาด คุณจะสามารถเห็นแดชบอร์ดที่มีตัวเลือกในการจัดกลุ่ม CSS และ JS

ตัวเลือกเหล่านี้ช่วยให้คุณสามารถ:

• จัดกลุ่ม JS: การจัดกลุ่มไฟล์ JavaScript หลายไฟล์ไว้ในไฟล์เดียวจะช่วยลดจำนวนคำขอ HTTP
• จัดกลุ่ม CSS: การจัดกลุ่มไฟล์ CSS หลายไฟล์ไว้ในไฟล์เดียวจะช่วยลดจำนวนคำขอ HTTP.

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

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

จากนั้นคุณสามารถแสดงรายการไฟล์ที่โหลดตามประเภทได้ ในตัวอย่างนี้ ฉันคลิกที่รายการไฟล์ JS เท่านั้น.

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

มาเริ่มกันอย่างจริงจังและปรับน้ำหนักฟอนต์ให้เหมาะสม

อะไร? การปรับแต่งอย่างอื่น? ใช่! คุณจะสามารถปรับแต่งความหนาของฟอนต์ได้ และมันจะง่ายเหมือนกับการเปิดใช้งานตัวเลือกในการตั้งค่า เพียงไปที่ WP Speed of Light > SpeedUp > จัดกลุ่มและย่อขนาด > จัดกลุ่มฟอนต์และ Google Fonts ตัวเลือก
ตัวเลือกการจัดกลุ่มฟอนต์และ Google Fonts จะช่วยให้คุณสามารถจัดกลุ่มพวกมันไว้ในไฟล์เดียวเพื่อให้บริการได้เร็วขึ้น นี่เป็นประโยชน์อย่างมาก เนื่องจากธีมและเลย์เอ웃ของ WordPress ส่วนใหญ่มาพร้อมกับฟอนต์ 2 หรือมากกว่าโดยค่าเริ่มต้นพร้อมกับการปรับแต่งต่างๆ (ปกติ ตัวหนา ตัวเอียง...)

เพียงเปิดใช้งานตัวเลือกนั้น คลิกที่บันทึก และฟอนต์ทั้งหมดจะถูกจัดกลุ่ม.

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

ช่างแตกต่างกัน จาก 2.8 ถึง 0.56 วินาที! ดังที่เราได้บอกคุณไว้ที่จุดเริ่มต้นของโพสต์นี้ เราสามารถทำให้เวลาโหลดดีขึ้นได้ ;)

วิธีใช้การยกเว้นการย่อไฟล์

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

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

  เพื่อให้สามารถแสดงสคริปต์ที่โหลดบนเว็บไซต์ของคุณได้ WP Speed of Light จำเป็นต้องสแกนโฟลเดอร์ของคุณเพื่อแสดงรายการ โดยปกติแล้วจะอยู่ในโฟลเดอร์ /wp-content ที่รวมปลั๊กอินและธีมทั้งหมดของคุณไว้ด้วยกัน ให้เลือกโฟลเดอร์นั้น (อย่างน้อย) แล้วคลิกที่ “สแกนทันที”

มันจะทำการสแกน และสุดท้ายคลิกที่ ดูผลลัพธ์ เมื่อการสแกนเสร็จสมบูรณ์.

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

ซึ่งจะช่วยให้คุณสามารถแยกไฟล์ออกได้ และด้วยวิธีนี้จึงสามารถแก้ปัญหาที่อาจเกิดขึ้นได้อย่างง่ายดายเมื่อย่อขนาดทรัพยากร… กระบวนการจัดกลุ่มและย่อขนาดยังคงต้องทำงานบางอย่าง โดยเฉพาะอย่างยิ่งในการทดสอบ แต่มันก็คุ้มค่ากับความพยายาม และคุณจะสามารถทดสอบได้เสมอว่ามันทำงานอย่างไรโดย การทดสอบความเร็วโดยตรงจาก WP Speed of Light
 
ไปข้างหน้าและลอง WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light