หลังจากบทความที่แล้ว(วิธีเพิ่มความเร็วให้เว็บไซต์: การลดขนาดรูปภาพ) เราได้เขียนถึงวิธี และเครื่องมือที่ใช้ในการลดขนาดของรูปภาพบนเว็บไซต์เพื่อให้ลูกค้าสามารถโหลดหน้าเว็บไซต์ได้เร็วยิ่งขึ้น ในบทความนี้เราจะขอนำเสนออีกหนึ่งวิธีที่ช่วยในการเรียกหน้าเว็บไซต์ขึ้นมาแสดงผลได้รวดเร็วอีกวิธีหนึ่ง ซึ่งสามารถทำได้ด้วยตัวเองง่ายๆ แล้วก็มีวิธีตั้งแต่พื้นฐานไปจนถึงระดับที่ต้องเขียนโปรแกรมด้วย
ลดขนาดโดยใช้ส่วนเสริมต่างๆ ให้น้อยลง
นอกเหนือจากรูปภาพแล้ว เว็บไซต์จะประกอบไปด้วยส่วนสำคัญอีกสามส่วนด้วยกันคือภาษาโครงสร้าง(HTML), ภาษาที่ใช้ตกแต่งหน้าเว็บไซต์(CSS) และส่วนที่เป็นสคริปสำหรับโต้ตอบกับผู้ใช้อย่าง คลิกปุ่มนี้ ให้แสดงป๊อปอัพ เป็นต้น ซึ่งก็คือ JavaScript ที่จริงแล้วอาจจะมีเยอะกว่านี้ขึ้นอยู่กับประเภทของแต่ละเว็บไซต์ด้วยเช่น รูปแบบตัวอักษร(font) และวิดีโอ แต่เว็บไซต์ทั่วไปแล้วจะประกอบไปด้วย HTML, CSS และ JavaScript ซึ่งจะเราจะเขียนในบทความนี้ครับ
เนื่องจากเราไม่ต้องการลงในเรื่องของเทคนิคมาก ผมจะขอสรุปให้ฟังโดยรวมๆ ว่าหากเราสามารถลดขนาดไฟล์ที่ใช้ในการสร้างเว็บไซต์เหล่านี้ได้ ก็จะช่วยลดเวลาในการเรียกหน้าเว็บเพจของผู้ใช้ได้ด้วยเหมือนกัน ในฐานะเจ้าของเว็บไซต์ คนส่วนใหญ่อาจจะไม่ได้คิดถึงเรื่องนี้มากนัก ซึ่งส่วนมากก็จะสนใจเพียงแต่ว่าหน้าตาดูโอเคมั้ย มีอะไรผิดพลาดที่ใช้งานไม่ได้หรือเปล่า และมักจะมองข้ามเรื่องของขนาดของหน้าเว็บเพจกันไป แต่ในความเป็นจริง ยิ่งเราสามารถลดขนาดของหน้าเว็บไซต์ได้มากเท่าไหร่ ก็จะยิ่งส่งผลดีกับลูกค้า และอันดับในการค้นหาบน search engine ด้วยเหมือนกัน
แล้วจะรู้ได้ยังไงล่ะว่าหน้าเว็บเพจของเรามีขนาดเท่าไหร่ มากหรือน้อย?
วิธีที่ง่ายที่สุดโดยที่เราเป็นเจ้าของเว็บ และไม่ต้องใช้ทักษะในการเขียนโปรแกรมเลยคือใช้เว็บไซต์ที่ช่วยตรวจสอบอย่าง Pingdom Website Speed Test ครับ ให้เรากรอกเว็บไซต์ของเราลงไป จากนั้นกดปุ่ม Start Test แล้วรอผลลัพธ์สักครู่
เว็บไซต์นี้สามารถบอกเราได้ด้วยว่าใช้เวลาในการโหลดหน้าเว็บไซต์ประมาณเท่าไหร่ ตัวอย่างในรูปบนอยู่ที่ 3.99 วินาที และถ้าอยากจะดูข้อมูลเชิงลึกกว่านั้นก็ให้เลื่อนลงมาด้านล่างอีกหน่อย จะพบกับตารางแสดงข้อมูลประเภทของส่วนต่างๆ ในหน้าเว็บไซต์ของเรา และเวลาในการโหลด ซึ่งจะแบ่งเป็นหมวดหมู่ให้ชัดเจน สามารถดูแล้วเข้าใจได้ไม่ยากนัก
เพียงเท่านี้ท่านก็สามารถเข้าใจ และสามารถนำไปปรับแก้ปัญหาได้อย่างตรงจุดได้แล้วว่าส่วนไหนที่ใช้เวลาในการโหลดขึ้นมามากที่สุด แต่ถ้าถามว่าเว็บไซต์ที่ดีต้องใช้เวลาในการโหลดไม่เกินกี่วินาที อันนี้ต้องขึ้นอยู่กับประเภทของเว็บไซต์ที่ท่านเป็นเจ้าของด้วย เพราะถ้าเราลองนึกกันดูเล่นๆ เว็บไซต์ที่เป็นแค่แบบสอบถาม ให้ลูกค้าสามารถกรอกแบบฟอร์มออนไลน์ เทียบกับเว็บไซต์ถ่ายภาพ ที่แสดง port folio ก็คงไม่สามารถเทียบแล้วบอกประสิทธิภาพได้
เราควรเทียบกับคู่แข่งในประเภทเว็บไซต์ที่ใกล้เคียงกันจะถือเป็นการเปรียบเทียบที่เท่าเทียมกว่า อย่างเช่นเว็บไซต์ข่าวอย่าง Kapook กับ Sanook ทำนองนี้ก็ได้ครับ แต่อย่างไรก็ตาม เป้าหมายของเราคือลดขนาดของหน้าเว็บไซต์ให้ได้มากที่สุด และลูกค้าก็ยังได้ประสบการณ์ที่ดีเหมือนเดิม ไม่ได้ลดทอน หรือทำให้ใช้งานได้ลำบากขึ้นต่างหากนั่นคือประเด็น
การลดขนาดสคริปต่างๆ ที่ใช้ในหน้าเว็บไซต์
นอกจากเครื่องมือที่ใช้ย่อขนาดไฟล์ภาพที่เราเขียนไปเมื่อบทความก่อนแล้วนั้น ยังมีเว็บไซต์ที่ช่วยลดขนาดไฟล์ประเภทสคริปให้เล็กลงได้อีก 10-30% ยกตัวอย่างเช่น CSS Minifier ที่ช่วยในการลดขนาดไฟล์ประเภท CSS (ภาษาทางเทคนิคเรียกการย่อขนาดนี้ว่า minify) ซึ่งวิธีการทำงานคร่าวๆ ก็คือตัวย่อขนาดจะทำการลบพวกข้อความที่ไม่จำเป็นอย่างเว้นวรรค, ช่องไฟ, คอมเม้นต์ของนักพัฒนา หรือบรรทัดใหม่ แล้วนำมาเรียงต่อกันใหม่นั่นเอง เช่นเดียวกับ JavaScript ที่สามารถลดขนาดไฟล์ได้เหมือนกัน อย่างเว็บไซต์ที่ชื่อว่า JSCompress ที่ใช้เทคนิคเดียวกัน แต่จะเปลี่ยนชื่อตัวแปรในไฟล์ให้สั้นลงด้วย (ภาษาทางเทคนิคเรียกการย่อขนาดนี้ว่า uglify)
สำหรับเจ้าของเว็บไซต์ที่ไม่มีทีมงานทางเทคนิค แล้วก็ไม่ต้องการใช้ทักษะการเขียนโปรแกรม หากท่านใช้ WordPress ในการสร้างเว็บไซต์ สามารถดาวน์โหลด และติดตั้งส่วนเสริมอย่าง WP Fastest Cache แล้วเปิดใช้งานได้เลย ตัวส่วนเสริมจะช่วยย่อขนาดไฟล์หน้าเว็บเพจ พร้อมทั้งทำ caching ให้ด้วยโดยที่ไม่ต้องทำอะไรเพิ่ม
สำหรับท่านที่สนใจสร้างเว็บไซต์ด้วยตัวเองบน WordPress ทางจินดาธีมได้เขียนหนังสือสำหรับผู้เริ่มต้นถึงระดับกลาง ซึ่งสามารถเข้าไปดูข้อมูลหนังสือ(แบบ PDF) ได้ที่ สอนสร้างเว็บไซต์ด้วย WordPress ภายใน 1 วัน ครับ
