วิธีลบ Render-Blocking JS & CSS สำหรับความเร็วไซต์

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

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

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

สคริปต์ JS และ CSS ที่บล็อกการแสดงผลคืออะไร และเหตุใดจึงแย่

หน้าเว็บส่วนใหญ่บนอินเทอร์เน็ตประกอบด้วยองค์ประกอบหลักสามส่วน ได้แก่ JavaScript, CSS และ Hypertext Markup Languages HTML ทำหน้าที่เป็นฐาน ในขณะที่ JavaScript และ CSS ถูกฝังไว้ อย่างไรก็ตาม ทุกวันนี้ เป็นเรื่องปกติมากกว่าที่จะฝังการเรียกสคริปต์ภายนอกในเอกสาร HTML

สคริปต์เหล่านี้ถูกเก็บไว้ในคิวที่เว็บเบราว์เซอร์ของคุณใช้เพื่อแสดงหน้าเว็บ วิธีที่ง่ายที่สุดในการดูว่าหน้าเว็บใช้สคริปต์ใดโดยไม่ต้องดูซอร์สโค้ดคือการดาวน์โหลดจากเว็บเบราว์เซอร์ (Ctrl + S) เว็บเบราว์เซอร์จะดาวน์โหลดเอกสาร HTML พร้อมกับโฟลเดอร์ที่มีสคริปต์ รูปภาพ และไฟล์อื่นๆ ทั้งหมด (หรือส่วนใหญ่) ที่หน้าเว็บใช้

ยิ่งหน้าเว็บของคุณต้องเรียกสคริปต์ที่ซับซ้อนมากขึ้นจากคิวเท่าใด การแสดงก็จะใช้เวลานานขึ้นเท่านั้น บ่อยครั้ง เว็บเบราว์เซอร์จะดาวน์โหลดทรัพยากรของหน้าเว็บ เช่น สคริปต์และรูปภาพในแคชในเครื่องเพื่อโหลดหน้าเว็บได้เร็วขึ้น แม้ว่าผู้ใช้ในฝั่งไคลเอ็นต์สามารถเพิ่มความเร็วในการแสดงผลหน้าเว็บได้โดยการปิดใช้งาน JavaScript เพิ่มขนาดแคช และการใช้ AdBlockers นี่ไม่ใช่โซลูชันที่เหมาะสม ความรับผิดชอบควรอยู่ที่นักพัฒนาเว็บ

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

วิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณโดยการค้นหาและแก้ไขสคริปต์การบล็อกการแสดงผล

ก่อนตัดสินใจว่าสคริปต์ใดที่จะยุติหรือเพิ่มประสิทธิภาพ คุณต้องประเมินความเร็วเว็บไซต์หรือหน้าเว็บของคุณ คุณสามารถใช้แพลตฟอร์มออนไลน์ เช่น GTmetrix หรือ PageSpeed ​​Insights ของ Google สิ่งที่คุณต้องทำคือใส่ URL ของเว็บไซต์หรือหน้าเว็บที่คุณต้องการทดสอบ จากนั้นเครื่องมือจะให้คะแนนและให้ข้อมูลเชิงลึกอื่นๆ

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

หรือคุณสามารถใช้แท็บความครอบคลุมของ Chrome DevTools เพื่อแสดงข้อมูลการใช้งานสคริปต์ของคุณ เมื่อคุณระบุได้ว่าสคริปต์ใดไม่เหมาะสม คุณสามารถทำบางสิ่งเพื่อแก้ไขได้ อย่างไรก็ตาม ขั้นตอนเหล่านี้จะต้องใช้ความสามารถในการเขียนโค้ดเล็กน้อยจึงจะสามารถใช้งานได้สำเร็จ อย่างน้อยคุณจะต้องมีความเข้าใจพื้นฐานเกี่ยวกับการเขียนโปรแกรม JavaScript ที่ใช้งานได้

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

1. เพิ่มประสิทธิภาพลำดับการโหลด

ส่วนหัว (</head></head> ) ของหน้าเว็บใช้สำหรับโหลดองค์ประกอบล่วงหน้า พื้นฐานของหน้าเว็บของคุณควรอยู่ที่นี่ ดังนั้นหน้าจอสีขาวจะไม่ทักทายผู้ใช้เมื่อโหลดหน้าเว็บของคุณ แม้ว่า CSS ที่ฝังไว้จะใช้งานได้ดี คุณควรหลีกเลี่ยงการวาง JavaScript ไว้ที่นี่

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

2. ลดขนาดรหัส

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

ปลั๊กอินและเครื่องมือต่างๆ เช่น W3TC มีโมดูลที่ย่อขนาด JavaScript และ CSS ในธีมของคุณ อีกวิธีหนึ่ง คุณสามารถย่อโค้ดสคริปต์ของคุณด้วยตนเองด้วยเครื่องมือออนไลน์ฟรี เช่น JavaScript Minifier

3. ใช้การโหลด JavaScript แบบเลื่อนเวลาและแบบอะซิงโครนัส

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

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

เราขอแนะนำว่าอย่าใช้แอตทริบิวต์ async หรือ defer ในสคริปต์ที่ใช้ในการแสดงและแสดงองค์ประกอบภาพ คีย์เวิร์ด JavaScript เทียบเท่ากับแอตทริบิวต์เหล่านี้คือคีย์เวิร์ด async และ wait คุณสามารถใช้เพื่อโหลด Javascript ของคุณแบบอะซิงโครนัสมากขึ้นโดยไม่ต้องแก้ไขแท็ก HTML บนหน้าเว็บของคุณ

4. แทนที่ JavaScript Visual Elements ด้วย CSS3

ในอดีต CSS ไม่ได้มีความหลากหลายเหมือนในทุกวันนี้ ตัวอย่างเช่น CSS 1.0 และ 2.0 ไม่มีเครื่องมือ UI เช่นการควบคุมพื้นฐานและตัวเลื่อน

จากนั้น CSS 3 ก็เข้ามา มันนำเสนอสีใหม่ เงากล่อง ความทึบ ฯลฯ JavaScript นั้นยอดเยี่ยมสำหรับการเพิ่มการควบคุมส่วนต่อประสานผู้ใช้ที่ซับซ้อน อย่างไรก็ตาม Javascript มีทรัพยากรที่หนักกว่า CSS

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

5. กำจัดสคริปต์ที่ไม่จำเป็นทั้งหมด

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

ดังนั้น วิธีที่ดีที่สุดในการเพิ่มประสิทธิภาพความเร็วของเว็บไซต์ของคุณคือกำจัดสคริปต์ที่ใช้งานไม่ได้ทั้งหมด คุณจะต้องวิเคราะห์ว่าสคริปต์ใดไม่จำเป็นอย่างยิ่งและลบออก อีกครั้ง คุณสามารถใช้แท็บความครอบคลุมของ Chrome DevTools หรือ GTmetrix เพื่อค้นหาสคริปต์ที่ใช้งานน้อยเกินไปบนหน้าเว็บของคุณแล้วนำออก

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

6. การใช้ปลั๊กอินเพื่อเพิ่มประสิทธิภาพเว็บไซต์ WordPress ของคุณ

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

ปลั๊กอินที่ดีที่สุดบางส่วนสำหรับการเพิ่มประสิทธิภาพสคริปต์ ได้แก่:

• WP Rocket : นี่คือหนึ่งในปลั๊กอินยอดนิยมสำหรับการเพิ่มประสิทธิภาพเว็บ สามารถตรวจหาสคริปต์ที่มีปัญหาและแก้ไขให้คุณโดยอัตโนมัติ คุณสามารถใช้สำหรับการแคช ย่อ บีบอัด และย่อได้อย่างรวดเร็ว
• Autoptimize : สิ่งนี้สามารถเลื่อนและกำจัดสคริปต์ที่ไม่จำเป็น รวม CSS แบบอินไลน์และย่อสคริปต์ HTML และรูปภาพ การปรับอัตโนมัตินั้นปรับแต่งได้สูงผ่าน API แบบเปิดและตัวเลือกขั้นสูง
• W3 Total Cache : ปลั๊กอินนี้ต้องใช้การทำงานเล็กน้อย คุณจะต้องติดตามและระบุสคริปต์ด้วยตนเองก่อนที่จะลบหรือแก้ไขสคริปต์ ในกรณีส่วนใหญ่ ปลั๊กอินนี้มีอยู่แล้วในแพ็คเกจ WordPress ของคุณ
• Async Javascript : ปลั๊กอินโอเพ่นซอร์สที่นำเสนอโดย WordPress ช่วยให้คุณตรวจจับ JavaScript ที่บล็อกการแสดงผลแล้วเลื่อนออกไปหรือโหลดแบบอะซิงโครนัสได้

เหตุใดเราจึงไม่แนะนำปลั๊กอินตั้งแต่แรก ขออภัย ปลั๊กอินบางตัวจะทำให้คุณเสียค่าใช้จ่าย ตัวอย่างเช่น Autoptimize มีค่าใช้จ่าย $49 ต่อปี แม้ว่าจะเป็นค่าธรรมเนียมที่สมเหตุสมผล แต่ก็อาจไม่เหมาะสำหรับผู้ที่จ่ายเงินก้อนใหญ่อยู่แล้วสำหรับโฮสติ้งและแอปพลิเคชันและปลั๊กอินอื่นๆ

อย่างไรก็ตาม ไม่ว่าคุณจะใช้ปลั๊กอินหรือค้นหาสคริปต์ด้วยตนเอง คุณจำเป็นต้องเข้าใจแนวคิดต่างๆ เช่น การลดขนาด การโหลดแบบอะซิงโครนัส และลำดับการโหลด จะช่วยให้คุณแก้ไขปัญหาการโหลดได้ง่ายขึ้นหากสคริปต์ตัวใดตัวหนึ่งของคุณล้มเหลว