4 เคล็ดลับทำให้เว็บไซต์เร็วขึ้นด้วยการปรับ JavaScript ให้เหมาะสม

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

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

1. ลดจำนวนไฟล์ JavaScript 

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

วิธีการตรวจว่ามีไฟล์ JavaScript มากเกินไปหรือไม่ 

หากสงสัยว่าเว็บไซต์อาจมีปัญหา JavaScript มากเกินไปอาจลองใช้เครื่องมืออย่าง Google’s PageSpeed Insights โดยใส่ URL ของเว็บไซต์ที่ต้องการตรวจสอบลงไป

จากนั้นระบบจะแสดงรายละเอียดพร้อมให้คำแนะนำที่ควรทำตาม อย่างในรูปตัวอย่าง

วิธีแก้ไข

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

2. ลบไฟล์ JavaScript ที่ไม่มีประสิทธิภาพ

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

วิธีการตรวจสอบ

สำหรับการตรวจสอบว่าบนเว็บไซต์มีไฟล์ JavaScript ที่ไม่มีประสิทธิภาพหรือไม่ สามารถตรวจสอบได้ผ่าน Google PageSpeed Insights โดยเมื่อระบบตรวจพบไฟล์ JavaScript ที่อาจส่งผลเสียต่อเว็บไซต์ จะมีรายละเอียดต่างๆ ขึ้น ดังนี้

• Reduce JavaScript Execution Time สำหรับข้อแนะนำแรกนี้จะเป็นการรายงานเกี่ยวกับไฟล์ JavaScript บนเว็บไซต์ที่ต้องใช้เวลาในการรันโค้ดนานจนเกินไป อาจมีสาเหตุมาจากไฟล์ที่ใหญ่เกินไป หรือมีจำนวนไฟล์มากเกินไป

• Eliminate Render Blocking Resources สำหรับคำแนะนำนี้จะเป็นการรายงานเกี่ยวกับไฟล์ JavaScript ที่ปกติแล้วเมื่อมีการเข้าเว็บไซต์ เบราว์เซอร์จะทำการโหลด โดยการอ่านโค้ดจากบนลงล่างไปเรื่อยๆ แต่ในระหว่างที่กำลังโหลดนั้น หากพบไฟล์ CSS หรือ JavaScript มันจะหยุดอ่านและทำการวิเคราะห์ว่าไฟล์ว่า ไฟล์นี้จะถูกนำไปใช้ในส่วนใดของเว็บ จากนั้นถึงค่อยทำการโหลดหน้าเว็บต่อไป สคริปต์เหล่านี้จะทำให้เว็บโหลดช้าลง
• Document.write ไฟล์ JavaScript ที่มี Document.write จะหน่วงเวลาในการโหลดหน้ามากกว่า 10 วินาที ซึ่งส่งผลเสียต่อการดาวน์โหลดหน้าเว็บไซต์เป็นอย่างมาก 

• Does not use Passive Listeners สำหรับไฟล์ Javascript ที่อาจส่งผลให้เกิดความผิดปกติกับประสิทธิภาพของ Scrolling ได้

วิธีแก้ไข

สำหรับการแก้ปัญหาเกี่ยวกับไฟล์ JavaScript ที่ไม่มีประสิทธิภาพนั้นจะมีเทคนิคที่แตกต่างออกไปตามแต่ละสาเหตุข้างต้น อย่างเช่น หากพบว่าเว็บไซต์มีไฟล์ Document.write มากเกินไปจนเป็นสาเหตุที่ทำให้เกิดอาการหน่วง ก็เพียงแค่พยายามลบโค้ดที่มี Document.write ออกไป

3. ลบไฟล์ JavaScript ที่ไม่ได้ใช้

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

วิธีการตรวจสอบ

สามารถตรวจสอบปัญหาต่างๆ บน Google’s PageSpeed Insights ดังนี้

• Reduce unused JavaScript รายงานนี้จะแสดงให้เห็นถึงไฟล์ Java Script ที่ไม่ได้ถูกนำไปใช้งาน
• Avoid enormous network payloads เป็นปัญหาที่เกิดบ่อยมากกับเว็บไซต์ที่มีเนื้อหายาวๆ เนื่องจากจะทำเว็บไซต์ต้องใช้ทรัพยากรมากขึ้น ทำให้หน้าเว็บไซต์เกิดอาการหน่วงหรือช้า
• Minimize main-thread work ทุกครั้งที่เว็บไซต์ถูกเปิดขึ้นมา ระบบจะสร้าง Thread ขึ้นมา ซึ่งเรียกกันว่า Main-Thread หรืออีกชื่อหนึ่งคือ UI Thread สิ่งนี้คือ Thread ที่เป็นส่วนที่เอาไว้ติดต่อสื่อสารกับผู้ใช้ ที่ประกอบไปด้วย HTML, CSS และ JavaScript หากการทำงานของ Main Thread ใช้เวลานานเกินไปอาจส่งผลให้ใช้เวลาในการโหลดหน้าเว็บช้า 

วิธีแก้ไข

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

4. บีบอัดไฟล์ JavaScript

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

วิธีตรวจสอบ

บน Google’s PageSpeed Insights ให้คลิกเปิดใช้งานฟังก์ชันคำแนะนำในการบีบอัดไฟล์ จากนั้นระบบจะแสดงรายการว่าไฟล์ JavaScript ใดจะต้องบีบอัดไฟล์

วิธีแก้ไข

โดยสวนมากเว็บเบราว์เซอร์หรือระบบ CMS (Content Management System)  มักจะมีฟีเจอร์ที่จะช่วยแจ้งเตือนให้กับผู้ใช้งานทราบว่าไฟล์ใดที่ควรจะถูกบีบอัด หรืออย่างการเลือกใช้ปลั๊กอินที่ช่วยบีบอัดไฟล์ก็สามารถใช้ได้เช่นกัน

รับปรึกษาการทำ Digital Marketing ที่ Relevant Audience

Relevant Audience บริษัทที่ให้บริการเกี่ยวกับ Digital Performance Marketing Agency โดยมีเป้าหมายหลักเพื่อให้บริการด้านการตลาดดิจิทัล ให้ธุรกิจเข้าถึงกลุ่มเป้าหมายที่กำลังมองหาผลิตภัณฑ์หรือบริการในเวลา สถานที่ และอุปกรณ์ที่เหมาะสม ผ่านช่องทางออนไลน์ต่างๆ บริการของเราครอบคลุมทั้ง Search Marketing, Social Media Ads, Search Ads และ SEO (Search Engine Optimization) ไปจนถึง Influencer Marketing และยังเป็นส่วนหนึ่งในโปรแกรม Google Partners อีกด้วย

สอบถามข้อมูลเพิ่มเติม 

โทร.: 02-038-5055 

อีเมล: info@relevantaudience.com เว็บไซต์: www.relevantaudience.com