SYSADMIN, NGINX

เปิด Gzip ฝั่ง Server สำคัญไฉน

เว็บที่ดีควรโหลดเร็ว แสดงหน้าเว็บเร็ว บ้างก็ว่า หากเว็บโหลดช้ากว่า 3 วินาที คน 40% จะออกจากเว็บไซต์นั้นๆ การจับอันดับการค้นหาของ Google และ Search Engine เจ้าอื่นๆยังเอาความเร็วในการโหลดมาเป็นปัจจัยหลักอีกด้วย

เว็บจะโหลดเร็วหรือช้าขึ้นอยู่กับขนาดของไฟล์ทั้งหมดที่ browser ต้องทำการโหลด เพราะฉะนั้นเราต้องมาลดขนาดไฟล์ เราสามารถทำการ minify ไฟล์ต่างๆในเว็บของเราเช่นไฟล์ Javascript หรือ CSS หรือแม้กระทั้งพยายามทำให้ไฟล์รูปต่างๆในเว็บเราเล็กลง แต่วิธีที่กล่าวมานั้น อาจจะทำให้ไฟล์เล็กลง แต่มันก็อาจจะยังใหญ่สำหรับผู้ใช้อยู่ดี

ยกตัวอย่างเช่นเว็บ profile ของผม เว็บเล็กๆนี้ถูกเขียนด้วย React + jQuery และ package modules ต่างๆโดยใช้ webpack เป็นตัวรวบเร็ว หากผมไม่ได้ทำการ minify เลย ไฟล์ทั้งหมดในเว็บเล็กนี้มีขนาดถึง 4.2 MB แต่ถ้าทำการ minify ขนาดเว็บของผมลดลงเหลือเพียง 2.4 MB

แต่สำหรับเว็บเล็กๆแค่นี้ ถึงจะเป็น Single Page Application ก็ตาม ผมก็ยังคิดว่ามันใหญ่เกินไปอยู่ดี โดยเฉพาะหากมีคนเข้าเว็บ profile ของผมผ่านมือถือ โดยใช้ 4G สุดแสนเร็วของประเทศไทย (ประชด) ทางเลือกนึงที่ง่ายกว่าไปนั่งแก้ dependencies ของเว็บก็คือการเปิดใช้ gzip ฝั่ง server

gzip ว่ากันง่ายๆก็คือการบีบอัดไฟล์จากฝั่ง server เพื่อให้เราโหลดได้เร็วและให้ browser ไปแตกไฟล์กันเอง ซึ่งการใช้งานก็ง่ายมากเพียงเข้าไปแก้ config ของ nginx.conf (ปกติจะอยู่ที่ /etc/nginx/nginx.conf) ดังนี้

# ใส่ไว้ใน bracket http นะครับ
http {
  ...

  gzip on;
  gzip_http_version  1.1;

  # เลเวลการบีบอัดไฟล์ (1-9)
  gzip_comp_level    5;

  # ตั้งค่าขนาดขั้นต่ำที่จะบีบอัด เพราะถ้าบีบอัดไฟล์ที่เล็กอยู่แล้ว หลังจากบีบแล้วอาจจะใหญ่กว่าก่อนบีบซะอีก
  gzip_min_length    256;

  gzip_proxied       any;

  # ให้ proxy เก็บไฟล์ทั้งแบบ gzipped และปกติ เพื่อป้องกันผู้ที่ใช้ browser ที่รับ gzip ไม่ได้
  gzip_vary          on;

  # บีบอัดไฟล์ที่เป็น type ดังกล่าว
  gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component;
}

หลังจากนั้นก็เพียง restart nginx โดยการ sudo service nginx restart ก็เสร็จแล้ว สำหรับเว็บ profile ของผมนั้น ลดลงจาก 2.4 MB เหลือเพียง 402 KB

สำหรับผู้ที่ใช้ apache ลองอ่านบทความนี้ดูนะครับ

อ้างอิง