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

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

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

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

วิธีทำ minification ของ JS และ CSS ใน WordPress

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

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

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

ตัวเลือกใน PRO addon ได้แก่: Exclude inline script (ยกเว้น inline script จากการย่อ), move scripts to footer (ช่วยให้เว็บไซต์ของคุณโหลดเร็วขึ้นโดยการย้ายสคริปต์ที่ย่อแล้วทั้งหมดไปไว้ที่ footer), Group font and Google Fonts (รวมฟอนต์ภายในเครื่องและ Google Fonts ไว้ในไฟล์เดียวเพื่อให้เสิร์ฟได้เร็วขึ้น) และ Advanced file exclusion
 
คุณมีตัวเลือกในการย่อ อย่างที่เห็น ทั้ง JS, CSS และ HTML ตอนนี้เพียงเปิดใช้งานตัวเลือกเหล่านี้ คลิกบันทึก แล้วทรัพยากรทั้งหมดของคุณจะถูกย่อทันที อาจเกิดปัญหาบ้างเนื่องจากเป็นการตั้งค่าขั้นสูง แต่ทุกอย่างสามารถแก้ไขได้ด้วยการยกเว้นโค้ดและไฟล์บางส่วน (ด้วย pro addon)

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

ขั้นตอนถัดไป การปรับแต่ง CSS และ JS ของ WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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