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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 
สามารถแสดงรายการสคริปต์ที่โหลดบนเว็บไซต์ของคุณ 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