เรียนรู้วิธีเพิ่มความเร็วเว็บไซต์โดยใช้โมดูล Nginx และ Gzip

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

ในบทความนี้ เราจะพูดถึงวิธีการเพิ่มความเร็วในการถ่ายโอนโดยการลดขนาดไฟล์ผ่านการบีบอัด วิธีการนี้ให้ประโยชน์พิเศษตรงที่ยังช่วยลดปริมาณแบนด์วิดท์ที่ใช้ในกระบวนการ และทำให้เจ้าของเว็บไซต์ที่ชำระค่าบริการมีราคาถูกลง

เพื่อให้บรรลุเป้าหมายที่ระบุไว้ในย่อหน้าข้างต้น เราจะใช้ Nginx และโมดูล gzip ในตัวในบทความนี้ ตามที่ระบุไว้ในเอกสารอย่างเป็นทางการ โมดูลนี้เป็นตัวกรองที่บีบอัดการตอบสนองโดยใช้วิธีการบีบอัด gzip ที่รู้จักกันดี เพื่อให้แน่ใจว่าขนาดของข้อมูลที่ส่งจะถูกบีบอัดลงครึ่งหนึ่งหรือมากกว่านั้น

การอ่านที่แนะนำ: สุดยอดแนวทางในการรักษาความปลอดภัย เพิ่มความแข็งแกร่ง และเพิ่มประสิทธิภาพของเว็บไซต์ Nginx

เมื่อมาถึงด้านล่างสุดของโพสต์นี้ คุณจะมีเหตุผลอีกประการหนึ่งในการพิจารณาใช้ Nginx เพื่อให้บริการเว็บไซต์และแอปพลิเคชันของคุณ

การติดตั้งเว็บเซิร์ฟเวอร์ Nginx

Nginx พร้อมใช้งานสำหรับการแจกแจงสมัยใหม่ที่สำคัญทั้งหมด แม้ว่าเราจะใช้เครื่องเสมือน CentOS 7 (IP 192.168.0.29) สำหรับบทความนี้

คำแนะนำที่ให้ไว้ด้านล่างจะใช้ได้โดยมีการปรับเปลี่ยนเล็กน้อย (ถ้ามี) ในการแจกแจงอื่นๆ เช่นกัน ถือว่า VM ของคุณเป็นการติดตั้งใหม่ มิฉะนั้น คุณจะต้องตรวจสอบให้แน่ใจว่าไม่มีเว็บเซิร์ฟเวอร์อื่น (เช่น Apache) ทำงานอยู่บนเครื่องของคุณ

หากต้องการติดตั้ง Nginx พร้อมกับการขึ้นต่อกันที่จำเป็น ให้ใช้คำสั่งต่อไปนี้:

----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
apt update && apt install nginx

หากต้องการตรวจสอบว่าการติดตั้งเสร็จสมบูรณ์และ Nginx สามารถให้บริการไฟล์ได้ ให้เริ่มเว็บเซิร์ฟเวอร์:

systemctl start nginx
systemctl enable nginx

จากนั้นเปิดเว็บเบราว์เซอร์แล้วไปที่ http://192.168.0.29 (อย่าลืมแทนที่ 192.168.0.29 ด้วยที่อยู่ IP หรือชื่อโฮสต์ของเซิร์ฟเวอร์ของคุณ) . คุณควรเห็นหน้ายินดีต้อนรับ:

เราต้องจำไว้ว่าไฟล์บางประเภทสามารถบีบอัดได้ดีกว่าไฟล์ประเภทอื่น ไฟล์ข้อความธรรมดา (เช่น ไฟล์ HTML, CSS และ JavaScript) บีบอัดได้ดีมาก ในขณะที่ไฟล์อื่นๆ (.iso ไฟล์ต่างๆ, tarballs และ รูปภาพ เป็นต้น) ไม่เป็นเช่นนั้น เนื่องจากไฟล์เหล่านี้ถูกบีบอัดโดยธรรมชาติแล้ว

ดังนั้นจึงคาดว่าการรวมกันของ Nginx และ gzip จะทำให้เราสามารถเพิ่มความเร็วการถ่ายโอนของแบบแรกได้ ในขณะที่แบบหลังอาจแสดงการปรับปรุงเพียงเล็กน้อยหรือไม่มีเลยที่ ทั้งหมด.

สิ่งสำคัญคือต้องจำไว้ว่าเมื่อเปิดใช้งานโมดูล gzip ไฟล์ HTML จะถูกบีบอัด เสมอ แต่ไฟล์ประเภทอื่น ๆ มักพบใน เว็บไซต์และแอปพลิเคชัน (ได้แก่ CSS และ JavaScript) ไม่ใช่

ทดสอบความเร็วเว็บไซต์ Nginx โดยไม่ต้องใช้โมดูล gzip

ขั้นแรก มาดาวน์โหลดเทมเพลต Bootstrap ที่สมบูรณ์ ซึ่งเป็นการผสมผสานกันอย่างลงตัวระหว่างไฟล์ HTML, CSS และ JavaScript

หลังจากดาวน์โหลดไฟล์บีบอัด เราจะแตกไฟล์ลงในไดเร็กทอรีรากของบล็อกเซิร์ฟเวอร์ของเรา (โปรดจำไว้ว่านี่คือ Nginx ที่เทียบเท่ากับคำสั่ง DocumentRoot ในการประกาศโฮสต์เสมือนของ Apache ):

cd /var/www/html
wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip -a gh-pages.zip
mv startbootstrap-creative-gh-pages tecmint

คุณควรมีโครงสร้างไดเร็กทอรีต่อไปนี้ภายใน /var/www/html/tecmint:

ls -l /var/www/html/tecmint

ตอนนี้ไปที่ http://192.168.0.29/tecmint และตรวจสอบให้แน่ใจว่าหน้าเว็บโหลดอย่างถูกต้อง เบราว์เซอร์ที่ทันสมัยที่สุดมีชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ใน Firefox คุณสามารถเปิดได้จากเมนู เครื่องมือ → นักพัฒนาเว็บ

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

การอ่านที่แนะนำ: ติดตั้ง Mod_Pagespeed เพื่อเร่งความเร็วประสิทธิภาพของ Nginx สูงสุด 10 เท่า

ทางลัดในการเปิดเมนู เครือข่าย ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์คือ Ctrl + Shift + Q กดคีย์ผสมนั้นหรือใช้แถบเมนูเพื่อเปิด

เนื่องจากเราสนใจที่จะตรวจสอบการถ่ายโอนไฟล์ HTML, CSS และ JavaScript ให้คลิกที่ปุ่มด้านล่างและรีเฟรชหน้าเว็บ ในหน้าจอหลัก คุณจะเห็นรายละเอียดการถ่ายโอนไฟล์ HTML, CSS และ JavaScript ทั้งหมด:

ทางด้านขวาของคอลัมน์ขนาด (ซึ่งแสดงขนาดไฟล์แต่ละไฟล์) คุณจะเห็นกำหนดเวลาในการโอนแต่ละรายการ คุณยังสามารถคลิกสองครั้งที่ไฟล์ใดก็ได้เพื่อดูรายละเอียดเพิ่มเติมในแท็บ เวลา

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

การเปิดใช้งานและการกำหนดค่าโมดูล gzip ใน Nginx

หากต้องการเปิดใช้งานและกำหนดค่าโมดูล gzip ให้เปิด /etc/nginx/nginx.conf ค้นหาบล็อกเซิร์ฟเวอร์หลักตามที่แสดงในภาพด้านล่าง และเพิ่มหรือแก้ไขสิ่งต่อไปนี้ บรรทัด (อย่าลืมเครื่องหมายอัฒภาคต่อท้าย ไม่เช่นนั้น Nginx จะส่งคืนข้อความแสดงข้อผิดพลาดขณะรีสตาร์ทในภายหลัง!)

root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

คำสั่ง gzip จะเปิด เปิด หรือ ปิด โมดูล gzip ในขณะที่ gzip_types ใช้เพื่อแสดงรายการประเภท MIME ทั้งหมดที่โมดูลควรจัดการ

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับประเภท MIME และดูประเภทที่มีอยู่ ให้ไปที่ Basics_of_HTTP_MIME_types

ทดสอบความเร็วเว็บไซต์ Nginx ด้วยโมดูลการบีบอัด Gzip

เมื่อเราทำตามขั้นตอนข้างต้นเสร็จแล้ว ให้รีสตาร์ท Nginx และโหลดหน้าเว็บซ้ำโดยกด Ctrl + F5 (อีกครั้ง ซึ่งใช้งานได้ใน Firefox ดังนั้น หากคุณใช้เบราว์เซอร์อื่นโปรดดูเอกสารประกอบที่เกี่ยวข้องก่อน) เพื่อแทนที่แคชและสังเกตเวลาการถ่ายโอน:

systemctl restart nginx

แท็บคำขอเครือข่ายแสดงการปรับปรุงที่สำคัญบางประการ เปรียบเทียบเวลาเพื่อดูตัวคุณเอง โปรดทราบว่าเป็นการถ่ายโอนระหว่างคอมพิวเตอร์ของเรากับ 192.168.0.29 (การถ่ายโอนระหว่างเซิร์ฟเวอร์ของ Google และ CDN อยู่นอกเหนือการควบคุมของเรา):

ตัวอย่างเช่น ลองพิจารณาตัวอย่างการถ่ายโอนไฟล์ต่อไปนี้ก่อน/หลังเปิดใช้งาน gzip การกำหนดเวลาจะได้รับในหน่วยมิลลิวินาที:

1. index.html (แสดงโดย /tecmint/ ที่ด้านบนของรายการ): 15/4
2. Creative.min.css: 18/8
3. jquery.min.js: 17/7

นี่ไม่ได้ทำให้คุณรัก Nginx มากขึ้นใช่ไหม เท่าที่ฉันกังวลมันก็เป็นเช่นนั้น!

การอ่านที่แนะนำ: 5 เคล็ดลับในการเพิ่มประสิทธิภาพของเว็บเซิร์ฟเวอร์ Apache ของคุณ

สรุป

ในบทความนี้ เราได้แสดงให้เห็นว่าคุณสามารถใช้โมดูล Nginx gzip เพื่อเพิ่มความเร็วในการถ่ายโอนไฟล์ได้ เอกสารอย่างเป็นทางการสำหรับโมดูล gzip แสดงรายการคำสั่งการกำหนดค่าอื่น ๆ ที่คุณอาจต้องการดู

นอกจากนี้ เว็บไซต์ Mozilla Developer Network ยังมีรายการเกี่ยวกับ Network Monitor ที่อธิบายวิธีใช้เครื่องมือนี้เพื่อทำความเข้าใจว่าเกิดอะไรขึ้นเบื้องหลังในคำขอเครือข่าย

และเช่นเคย โปรดใช้แบบฟอร์มความคิดเห็นด้านล่างหากคุณมีคำถามเกี่ยวกับบทความนี้ เรารอคอยที่จะได้ยินจากคุณเสมอ!