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

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

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

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

วิธีการย่อขนาดไฟล์ JavaScript และ 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)

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

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

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

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

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

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

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

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

เมื่อเรามาถึงหน้าการตั้งค่านี้แล้ว ให้เปิดใช้งานตัวเลือกกลุ่ม (Group CSS และ Group 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