5 Checklist ก่อนนำเว็บไซต์ขึ้นใช้งานจริง

Publish Published: 04/07/2019 Category Category: Web development

ลดขนาดเว็บไซต์

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

1. ลดขนาดไฟล์รูปภาพ

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

วิธีการลดขนาดไฟล์รูปภาพอ่านเพิ่มเติมได้ที่ วิธีเพิ่มความเร็วให้เว็บไซต์: การลดขนาดรูปภาพ

2. ลดขนาดไฟล์ JavaScript และ CSS

uglify js online

หรือที่นักพัฒนาโปรแกรมเรียกกันว่า Minify CSS และ Uglify JS วิธีการนั้นก็จะเหมือนกับการลดขนาดรูปภาพเลย แต่จะเป็นการลดขนาดไฟล์ข้อมูล .cs และ .js แทน ปัจจุบันมีเครื่องมือมากมายที่ช่วยให้เราสามารถทำพวกนี้ได้โดยที่ไม่ต้องใช้ทักษะความรู้เรื่องการเขียนโปรแกรม แค่เราเข้าเว็บไซต์เหล่านั้น แล้วคัดลอกโค้ดทั้งหมดในไฟล์ที่ต้องการย่อขนาด วางที่หน้าเว็บไซต์แล้วกดเพียงปุ่มเดียว ก็จะได้โค้ดที่ถูกย่อขนาดออกมาให้เรียบร้อย หรือสำหรับนักพัฒนาโปรแกรมก็สามารถใช้เครื่องมืออย่าง Gulp, Grunt ช่วยย่อให้แบบอัตโนมัติทุกครั้งที่มีการเขียนโค้ดขึ้นไปก็ทำได้เหมือนกัน ผลลัพธ์จากการย่อขนาดไฟล์ก็คือจะช่วยให้เว็บไซต์สามารถโหลดได้เร็วขึ้นนั่นเอง

ตัวอย่างเว็บไซต์ที่ย่อขนาดไฟล์ต่างๆ ได้ฟรี และทำผ่านออนไลน์

3. ตรวจสอบหน้าเว็บไซต์ด้วย W3C

W3C Validator

ถือเป็นเครื่องมือที่ช่วยให้เราสามารถตรวจสอบการเขียนโปรแกรมบนหน้าเว็บไซต์ของเราได้เป็นอย่างดีว่าเขียนโปรแกรมออกมาได้มาตรฐานของ W3C หรือเปล่า (W3C คือองค์กรที่ออกมาตรฐานการเขียนเว็บไซต์) ขั้นตอนการตรวจสอบก็ง่ายมาก เพียงแค่ก็อบลิงค์เว็บไซต์เราไปวาง แล้วกดปุ่ม Check up เว็บไซต์จะแสดงรายการต่างๆ ที่ต้องแก้ไขให้ถูกต้องตามหลัก ข้อดีของการปรับแก้ไขให้เรียบร้อยก็คือ เราจะทำคะแนน SEO จาก Search Engine ต่างๆ ได้ดีขึ้นด้วย

ลิงค์เว็บไซต์ตรวจสอบของ W3C: http://validator.w3.org/

4. Meta Tag

async-defer
การทำ Async และ Defer สำหรับเรียกไฟล์ JS จากภายนอก ภาพประกอบจาก Growth your website

หรือการตรวจสอบ tag ต่างๆ ที่เราเขียนโปรแกรมเพิ่มลงไป ไม่ว่าจะเป็น script tag ที่ได้มาจากโซเชียลมีเดียในการเพิ่มปุ่มไลค์ หรือ Page Plugin ของ Facebook, Analytics tag ของ Google หรือจะเป็นการใส่ Google Maps ลงหน้าเว็บไซต์เองก็ตาม พวกนี้เราจำเป็นต้องเพิ่มโค้ดของผู้ให้บริการภายนอกมาแปะไว้ที่เว็บไซต์ของเราทั้งสิ้น และการนำโค้ดเหล่านั้นมาก็มีข้อควรระวังคือ หากใส่มากเกินไปเว็บไซต์ของเราจะโหลดได้ช้าขึ้น(เพราะต้องรอโหลดโค้ดจากภายนอกด้วย) และหากใส่ไม่ถูกวิธี ก็อาจจะทำให้บางส่วนในเว็บไซต์เราทำงานได้ไม่ถูกต้อง

เพราะฉะนั้นควรอ่านวิธีการติดตั้งโค้ด ตำแหน่งที่วางโค้ดให้ถูกต้อง หรือสำหรับนักพัฒนาโปรแกรม อาจจะใช้ async และ defer เข้ามาช่วยในการโหลดไฟล์จากภายนอกครับ

5. SEO Checkup

SEO Checkup

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

ตัวอย่างเว็บไซต์ตรวจสอบคะแนน SEO: https://varvy.com/

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