การหารายชื่อ JavaScript และ CSS ที่ใช้งานในหน้าเว็บ

ในหน้าเว็บแต่ละหน้านั้นไม่ว่าจะเป็นแบบ HTML หรือ PHP อย่าง WordPress ส่วนใหญ่ก็มักจะมีการเรียกใช้งาน JavaScript และ CSS ภายนอกเพื่อช่วยในการแสดงผลกันทั้งนั้น ซึ่งหากเราไม่ได้เขียนธีมและปลั๊กอินเอง ก็อาจจะมีการเรียกใช้ CSS/JS จากทั้งธีมและปลั๊กอินหลายตัว รวมไปถึงจากตัว WordPress เองด้วย ในบางครั้งที่เราต้องการ Optimize (บีบอัด) เพื่อความเร็วในการแสดงผลที่จำเป็นจะต้องมีการ Minify หรือ Combine ไฟล์เหล่านี้ จะพบว่าบางครั้งจะทำให้การแสดงผลของหน้าเว็บผิดเพี้ยนจากปกติเนื่องจากสคริปต์เหล่านั้นไม่สามารถทำงานได้ ซึ่งปลั๊กอินที่ใช้ในการ Optimize ทั้งหลายก็จะมีตัวเลือกสำหรับให้เรากรอกชื่อไฟล์ JS/CSS ที่ต้องการยกเว้น หรือ Exclude อยู่แล้ว แต่เราจะรู้ได้อย่างไรว่าเราต้องกรอกไฟล์อะไรบ้าง วันนี้เรามีวิธีการง่ายๆ ในการแสดงชื่อไฟล์ JS/CSS ที่ใช้ในหน้าเว็บมาฝากกันค่ะ

ปลั๊กอินที่มักใช้ในการ Optimize เช่น ปลั๊กอิน Autoptimize นอกจากนี้ก็ฟังชั่นการ Minify/Combine นี้ยังมีในปลั๊กอินที่ใช้สำหรับสร้าง Cache ส่วนใหญ่ด้วย โดยจะมีช่องสำหรับให้เรากรอก JS/CSS ที่ต้องการ Exclude แบบด้านล่าง หากเราพบว่าเว็บมีการแสดงผลผิดเพี้ยน

ปลั๊กอิน Autoptimize

วิธีการหา JS หรือ CSS ที่ใช้ในแต่ละหน้าเมื่อพบว่าการแสดงผลในหน้านั้นผิดเพี้ยน ทำได้ด้วยการปิดปลั๊กอินที่เราใช้ในการ Optimize หรือยกเลิกการ Optimize สำหรับ JS/CSS ไปก่อน จากนั้นทำการเปิดหน้าที่เราต้องการ คลิกขวา แล้วเลือก Inspect (Chrome) หรือ Inspect Element (Firefox) จากนั้นไปที่แท็บ Network แล้วทำการรีเฟรชหน้าเว็บอีกครั้ง ติ๊กที่หัวข้อ JS หรือ CSS ระบบก็จะแสดง JS/CSS ที่ใช้ในหน้านั้นให้เราดู

จากนั้นเราก็เอาชื่อไฟล์ JS เหล่านี้ไปกรอกในช่อง Exclude ของปลั๊กอินแบบก่อนหน้านี้ โดยเปิดทำงานปลั๊กอินตามปกติและลองใส่ไปทีละชื่อโดยไม่ต้องใส่ query string ?ver=… ใส่แค่ถึง .js ก็พอ เช่น jquery.js หรือ lazyload.js เป็นต้น ลองไปเรื่อยๆ จนกว่าจะเจอตัวที่ Exclude แล้วเว็บแสดงผลได้ปกติ ซึ่งส่วนใหญ่เลยตัวแรกที่ต้องลองคือ jquery.js นี่เองค่ะ

การคาดเดาสคริปต์อื่นๆ ที่ต้องนำไป exclude อาจจะสามารถลอง deactivate ปลั๊กอินดูว่า ปลั๊กอินตัวไหนที่เมื่อ deactivate แล้วเว็บสามารถกลับมาใช้งานได้ปกติ ก็แสดงว่าต้องเป็นสคริปต์ที่มาจากปลั๊กอินนั้น ซึ่งปลั๊กอินส่วนใหญ่จะตั้งชื่อสคริปต์ที่ค่อนข้างจะเดาได้ว่าไฟล์ไหนน่าจะเป็นของปลั๊กอินไหน ซึ่งบางครั้งก็มักจะเป็นชื่อย่อของปลั๊กอินก็ได้ ซึ่งแต่ละปลั๊กอินก็จะมี js และ css หลายตัวประกอบกัน วิธีนี้ก็จะเป็นวิธีหนึ่งที่ย่นเวลาในการค้นหาได้

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