กล่าวถึงความเร็วในการโหลดแล้ว … บางทีผมก็คิดว่าเน็ตสมัยนี้ก็เร็วแล้ว เข้าเว็บไรก็ไม่ได้รอนาน จึงไม่ได้ให้ความสำคัญในส่วนนี้มากนัก ผมมองข้าม “มือถือ” ไปถนัด.. หลังจากได้ดู วิดีโอ (ซึ่งเป็นวีดีโอที่ดีมากแนะนำอย่างยิ่ง :D) กล่าวว่า เว็บสำหรับมือถือควรเข้าได้ในเวลาไม่มากกว่า 1 วินาที … ไม่ได้หมายความว่าต้องโหลดได้ทั้งเว็บแต่ต้องมีอะไรบอกว่า “คุณได้เข้าเว็บไปแล้วนะครับ” ตรงนี้สำคัญมาก เพราะหากเว็บเราตอบสนองได้ดีคนเข้าเว็บก็จะอยากเข้าเว็บเราอีกในอนาคต

ปัญหาก็เกิดขึ้นเนื่องจากหากเราใช้ 3g ในการเข้าอินเตอร์เน็ต แค่ช่วงติดต่อกับสถานีพื้น (ก่อนที่จะได้ส่งข้อมูลอะไร) ก็ต้องเสียเวลาไม่น้อยกว่า 200 ms ไปแล้ว และยังต้องมี DNS, TLS (ถ้ามี) แล้วจึงเริ่มโหลด ตรงนี้เราไม่น่าจะเหลือเวลาเกินกว่า 500 ms จาก 1 วินาที และเนื่องจาก TCP connection มีพฤติกรรมเป็น slow-start คือ round-trip แรกจะรับข้อมูลได้ในขนาด window size ที่จำกัดไว้เล็ก ๆ ในวีดีโอบอกว่าประมาณ 14 KB (กล่าวคือถ้าข้อมูลที่ต้องโหลดไม่เกินนี้ก็จะใช้แค่ 1 RTT ซึ่งจะเร็วมาก; update - OS X Yosemite มี w) และเนื่องจาก round-trip time ของมือถือค่อนข้างสูงกว่าเน็ตที่ใช้ตามบ้านมาก เช่น 3g คุณภาพดีอาจจะมี RTT อยู่ที่ 100 ms (อาจจะแย่กว่านี้ในกรณีปกติ) ซึ่งก็สูงกว่าเน็ตตามบ้านที่น่าจะคาดหวังไว้ไม่เกิน 50 ms เพราะฉะนั้น 1 RTT ของมือถือจึงมีราคา แพง กว่าเน็ตบ้านมาก เมื่อเป็นเช่นนี้การลดปริมาณการโหลดในช่วงแรกให้ได้มากที่สุดก็จะทำให้ผู้ใช้รู้สึกว่าเว็บนี้โหลดได้เร็วขึ้นและอยากเข้าเว็บนี้มากขึ้นตามไปด้วย categories: dev

สิ่งที่เราควรทำก็เช่น ลดปริมาณข้อมูลทีต้องโหลดจนกว่าจะสามารถแสดงหน้าเว็บได้ คือในส่วน <head> พยายามเอาโค้ดออกจากส่วนนี้ให้ได้มากที่สุดและไปโหลดแบบ async พร้อม ๆ กับหน้าเว็บหรือพิจารณาโหลดแบบ lazy เมื่อที่ต้องการใช้จริง ๆ แทน

หรืออีกทางหนึ่งก็เช่น การ บีบอัดข้อมูล เหมือน zip ข้อมูลที่ server แล้วก็ส่งไปทาง internet แล้ว client ก็ค่อย unzip เพื่อเอาข้อมูลนั้น ตรงนี้อาจจะช่วยลด bandwidth ได้ถึง 40% และแน่นอนว่าก็จะช่วยลดเวลาในการโหลดโค้ดส่วน head ได้มากเช่นกัน แต่แน่นอนว่า web browser ไม่ได้รองรับการบีบอัดแบบ winzip แต่รู้จักอีกแบบหนึ่งคือ gzip ซึ่งเป็น open-source และเว็บ browser ใหม่ ๆ รองรับ อนึ่งการเปิดบริการนี้ใน web server ทำได้ง่ายอย่างยิ่งโดยเฉพาะ nginx

ในที่นี้จะเสนอวิธีการเปิดบริการ gzip บน nginx ด้วยการเพิ่มคำสั่งต่อไปนี้ไปยัง nginx.conf และ reload หรือ restart nginx server ก็เสร็จแล้ว !

gzip on;
gzip_proxied any;
gzip_types text/plain text/css application/javascript text/xml application/xml+rss;
gzip_vary on;
gzip_disable msie6;

แท้จริงแล้วสำหรับหลาย ๆ คนบรรทัดพวกนี้แทบจะมีมาพร้อมกับการลง nginx อยู่แล้วเพียงแต่ว่าถูก comment ไว้ อย่างไรก็ดีสำหรับคนที่มี config ส่วนนี้อยู่ในไฟล์เป็น application/x-javascript แทน application/javascript ก็ให้แก้เป็นแบบหลังเนื่องจาก x-javascript ไม่ใช่ชื่อเรียกที่ใช้ในปัจจุบัน และถูกเลิกใช้ไปแล้วทำให้การทำ gzip ไม่ได้ผลตามที่ควร

หมายเหตุ การใช้ gzip จะทำให้ web server เราทำงานหนักขึ้น แน่นอนว่าฝั่ง client ก็ต้องทำงานหนักขึ้นด้วย แต่โดยทั่วไปแล้วผลดีก็มากกว่าผลเสียอยู่มาก