การเพิ่มประสิทธิภาพสคริปต์และรูปแบบโดยอัตโนมัติคือดาบสองคม

เผยแพร่แล้ว: 2020-11-18

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

ฉันจะไม่เป็นคนถามมัน WPO มีความสำคัญ แต่คุณต้องระมัดระวังอย่างยิ่งเมื่อนำคำแนะนำที่ผู้เชี่ยวชาญบางคนเสนอให้ไปปฏิบัติจริง ไม่ว่าบุคคลนั้นจะฉลาดแค่ไหนก็ตาม

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

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

ระวังปลั๊กอินมหัศจรรย์ใน WordPress

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

  1. พวกเขาย่อขนาดสไตล์ CSS และสคริปต์ JavaScript เพื่อลดขนาดเพื่อให้ใช้เวลาน้อยลงในการดาวน์โหลด
  2. พวกเขารวมสไตล์ CSS และสคริปต์ JavaScript ทั้งหมดเข้าด้วยกัน เพื่อให้ผู้เยี่ยมชมของคุณโหลดไฟล์ CSS ไฟล์เดียวและสคริปต์ JavaScript ไฟล์เดียว ซึ่งลดจำนวนคำขอที่พวกเขาต้องส่งไปยังเซิร์ฟเวอร์
  3. พวกเขาใส่แท็ก async และ defer เพื่อให้เว็บไม่รอให้สคริปต์โหลดและดำเนินการต่อไป
  4. พวกเขาลบองค์ประกอบที่ไม่จำเป็นเช่นอิโมจิ
  5. อนุญาตให้ใช้การโหลดภาพแบบ Lazy Loading เพื่อลดเวลาในการโหลดเว็บไซต์ของคุณ

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

การใช้ปลั๊กอิน WordPress เพื่อเพิ่มและลดขนาดสคริปต์อาจเป็นดาบสองคม
การใช้ปลั๊กอิน WordPress เพื่อรวมและลดขนาดสคริปต์อาจเป็นดาบสองคม

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

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

หากเราตรวจสอบวิธีที่ถูกต้องในการจัดคิวสคริปต์ใน WordPress เราต้องไปดูคำจำกัดความของ wp_enqueue_script() ดังนี้

 wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

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

ลำดับที่สคริปต์ถูกจัดคิวมีความสำคัญ และการขึ้นต่อกันก็เช่นกัน WordPress ดูแลการสร้างลำดับที่ถูกต้องหากเราใช้ฟังก์ชัน wp_enqueue_script ตรวจสอบให้แน่ใจว่ามีการโหลดสคริปต์บนหน้าตามที่ควรจะเป็น

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

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

เว็บไซต์ของฉันใช้งานไม่ได้ ใครคือผู้ที่จะตำหนิ?

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

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

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

หน้าจอการตั้งค่าของปลั๊กอิน Autoptimize สำหรับ WordPress ซึ่งคุณสามารถยกเว้นสคริปต์และสไตล์ได้
หน้าจอการตั้งค่าของปลั๊กอิน Autoptimize สำหรับ WordPress ซึ่งคุณสามารถยกเว้นสคริปต์และสไตล์ได้

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

ตามมาตรการป้องกันตนเอง นักพัฒนาปลั๊กอินต้องรวมตัวกรองความเข้ากันได้ในโค้ดของตน เพื่อแยกสคริปต์ออกจากชุดค่าผสมเริ่มต้นและย่อส่วนเสริมอื่นๆ เหล่านี้ สิ่งที่นอกจากจะต้องใช้เวลาแล้ว ยังทำไม่ได้เสมอไป

ใช้ปลั๊กอินการเพิ่มประสิทธิภาพอัตโนมัติด้วยความระมัดระวังอย่างยิ่ง

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

แต่อย่าลืมสิ่งต่อไปนี้: หากเราใช้ปลั๊กอินประเภทนี้ เราไม่สามารถเปิดใช้งานได้ง่ายๆ เราต้องทดสอบอย่างละเอียดบนเว็บไซต์ของเราเพื่อให้สามารถกำหนดค่าได้อย่างถูกต้องตามเงื่อนไขเฉพาะของเรา ทุกครั้งที่เราติดตั้งปลั๊กอินใหม่ เราต้องตรวจสอบอีกครั้งว่ากระบวนการย่อ/รวมทำงานและเว็บไซต์ยังคงตอบสนอง

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

ภาพเด่นของ Markus Spiske บน Unsplash