มีไอเดีย
แต่ไม่มีคนทำ?

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

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

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

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

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

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

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

• https://skalman.github.io/UglifyJS-online/ (ลดขนาดไฟล์ JS)
• https://cssminifier.com/ (ลดขนาดไฟล์ CSS)

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

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

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

4. Meta Tag

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

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

5. SEO Checkup

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

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

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