วิธีเพิ่มความเร็วให้เว็บไซต์: ลดขนาดของหน้าเว็บเพจ

Publish เขียนเมื่อ: 29/10/2018 Category หมวดหมู่: การพัฒนาเว็บไซต์

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

ลดขนาดโดยใช้ส่วนเสริมต่างๆ ให้น้อยลง

นอกเหนือจากรูปภาพแล้ว เว็บไซต์จะประกอบไปด้วยส่วนสำคัญอีกสามส่วนด้วยกันคือภาษาโครงสร้าง(HTML), ภาษาที่ใช้ตกแต่งหน้าเว็บไซต์(CSS) และส่วนที่เป็นสคริปสำหรับโต้ตอบกับผู้ใช้อย่าง คลิกปุ่มนี้ ให้แสดงป๊อปอัพ เป็นต้น​ ซึ่งก็คือ JavaScript ที่จริงแล้วอาจจะมีเยอะกว่านี้ขึ้นอยู่กับประเภทของแต่ละเว็บไซต์ด้วยเช่น รูปแบบตัวอักษร(font) และวิดีโอ แต่เว็บไซต์ทั่วไปแล้วจะประกอบไปด้วย HTML, CSS และ JavaScript ซึ่งจะเราจะเขียนในบทความนี้ครับ

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

แล้วจะรู้ได้ยังไงล่ะว่าหน้าเว็บเพจของเรามีขนาดเท่าไหร่ มากหรือน้อย?

วิธีที่ง่ายที่สุดโดยที่เราเป็นเจ้าของเว็บ และไม่ต้องใช้ทักษะในการเขียนโปรแกรมเลยคือใช้เว็บไซต์ที่ช่วยตรวจสอบอย่าง Pingdom Website Speed Test ครับ ให้เรากรอกเว็บไซต์ของเราลงไป จากนั้นกดปุ่ม Start Test แล้วรอผลลัพธ์สักครู่

pingdom speed test
ขนาดของหน้าเว็บเพจจะอยู่ในกล่อง Page Size ทางด้านขวา

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

ลดขนาดเว็บไซต์ เพิ่มความเร็วในการโหลด
กล่องด้านซ้ายแสดงให้เห็นว่า รูปภาพมีขนาดมากที่สุด รองลงมาเป็นสคริปโต้ตอบ

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

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

การลดขนาดสคริปต่างๆ ที่ใช้ในหน้าเว็บไซต์

นอกจากเครื่องมือที่ใช้ย่อขนาดไฟล์ภาพที่เราเขียนไปเมื่อบทความก่อนแล้วนั้น ยังมีเว็บไซต์ที่ช่วยลดขนาดไฟล์ประเภทสคริปให้เล็กลงได้อีก 10-30% ยกตัวอย่างเช่น CSS Minifier ที่ช่วยในการลดขนาดไฟล์ประเภท CSS (ภาษาทางเทคนิคเรียกการย่อขนาดนี้ว่า minify) ซึ่งวิธีการทำงานคร่าวๆ ก็คือตัวย่อขนาดจะทำการลบพวกข้อความที่ไม่จำเป็นอย่างเว้นวรรค, ช่องไฟ, คอมเม้นต์ของนักพัฒนา หรือบรรทัดใหม่ แล้วนำมาเรียงต่อกันใหม่นั่นเอง เช่นเดียวกับ JavaScript ที่สามารถลดขนาดไฟล์ได้เหมือนกัน อย่างเว็บไซต์ที่ชื่อว่า JSCompress ที่ใช้เทคนิคเดียวกัน แต่จะเปลี่ยนชื่อตัวแปรในไฟล์ให้สั้นลงด้วย (ภาษาทางเทคนิคเรียกการย่อขนาดนี้ว่า uglify)

optimized code

สำหรับเจ้าของเว็บไซต์ที่ไม่มีทีมงานทางเทคนิค แล้วก็ไม่ต้องการใช้ทักษะการเขียนโปรแกรม หากท่านใช้ WordPress ในการสร้างเว็บไซต์ สามารถดาวน์โหลด และติดตั้งส่วนเสริมอย่าง WP Fastest Cache แล้วเปิดใช้งานได้เลย ตัวส่วนเสริมจะช่วยย่อขนาดไฟล์หน้าเว็บเพจ พร้อมทั้งทำ caching ให้ด้วยโดยที่ไม่ต้องทำอะไรเพิ่ม

สำหรับท่านที่สนใจสร้างเว็บไซต์ด้วยตัวเองบน WordPress ทางจินดาธีมได้เขียนหนังสือสำหรับผู้เริ่มต้นถึงระดับกลาง ซึ่งสามารถเข้าไปดูข้อมูลหนังสือ(แบบ PDF) ได้ที่ สอนสร้างเว็บไซต์ด้วย WordPress ภายใน 1 วัน ครับ