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

RA CONTENT MAY 23 C2 Blog Size [1200x628px] (4)

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

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on tumblr

Related Articles

เมนู

We use cookies to improve your experience and performance on our website. for more information click here PDPA Policy You can manage your preferences by clicking Setting

ตั้งค่าความเป็นส่วนตัว

You can choose cookie settings by on/off. Cookies of each type are available on request, except for essential cookies.

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • เปิดใช้งานตลอด

บันทึกการตั้งค่า