Cách tăng điểm tốc độ trang bằng cách thay đổi cấu hình Nginx của bạn trên Ubuntu 16.04
Nginx vượt trội khi xử lý các yêu cầu cho các trang web, nhưng mặc dù một trang web có vẻ nhanh nhưng cấu hình Nginx mặc định sẽ khiến công cụ PageSpeed Insights của Google gắn cờ sự kém hiệu quả trong trang web và xếp hạng nó kém. Google sử dụng tốc độ trang web như một yếu tố chính để xác định vị trí tìm kiếm của trang web .Trong hướng dẫn này, bạn sẽ thực hiện các chỉnh sửa nhanh chóng đối với file cấu hình cho domain của bạn để tăng ngay tốc độ phản hồi của trang web và chỉ số Tốc độ trang của nó. Mục đích là đạt được số điểm trên 80/100 vì đây là ngưỡng trên đó Google sẽ áp dụng điểm đánh dấu màu xanh lá cây cho điểm của bạn, báo hiệu một trang web nhanh.
Đầu tiên, bạn sẽ bật tính năng nén Gzip cho các loại file cụ thể. Sau đó, bạn sẽ cấu hình bộ nhớ đệm của trình duyệt để tăng thêm. Các phương pháp này sẽ cải thiện tốc độ của bất kỳ trang web nào chạy trên Nginx, dù phần mềm hoặc CMS mà nó được xây dựng. Ví dụ: cài đặt Wordpress chậm và hoạt động kém hiệu quả sẽ thấy được lợi nhuận tức thì mà không cần phải chạm vào lõi hoặc trả tiền cho các plugin hiệu suất đắt tiền. Cách tiếp cận này hoạt động ngay cả khi trang web đang chạy trên dịch vụ lưu trữ được chia sẻ công suất thấp, miễn là server là Nginx và bạn có thể chỉnh sửa file cấu hình.
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần :
- Một server Ubuntu 16.04 được cài đặt với hướng dẫn cài đặt server ban đầu này , bao gồm một user không phải root có quyền sudo và một firewall .
- Nginx được cài đặt trên server của bạn theo hướng dẫn Cách cài đặt Nginx trên Ubuntu 16.04 .
Bước 1 - Nhận điểm tốc độ trang ban đầu
Trước khi ta thực hiện bất kỳ thay đổi nào, hãy nắm bắt điểm Tốc độ trang hiện có để ta có đường cơ sở hiệu suất để so sánh sau khi hướng dẫn hoàn tất. Thực hiện việc này bằng cách dán URL của trang web vào dịch vụ PageSpeed Insights của Google và nhấp vào Run Insights .
Bạn sẽ thấy kết quả như sau:
Trong ví dụ này, ta thấy số điểm thấp là 63 trên Thiết bị di động và 74 trên Máy tính để bàn vì tính năng nén và bộ nhớ đệm của trình duyệt không được cấu hình chính xác trên server . Đến cuối hướng dẫn này, hai mục này sẽ được giải quyết trên tất cả các loại thiết bị thông qua thay đổi cấu hình Nginx.
Lưu ý : Trong một số trường hợp, cấu hình Nginx mặc định có thể đã được bật tính năng nén và bộ nhớ đệm Gzip trong file cấu hình chung, dẫn đến kết quả giống như điểm PageSpeed hoàn hảo. Nếu đúng như vậy, hãy tiếp tục đọc, vì các giá trị mặc định không đủ tốt để cài đặt trong thế giới thực.
Hãy bắt đầu bằng cách cấu hình Nginx để nén một số phản hồi.
Bước 2 - Bật nén
Các file CSS, JavaScript và hình ảnh có thể lớn, làm tăng lượng dữ liệu mà user phải download . Nén nghĩa là các nội dung này được giảm kích thước thành một version nhỏ gọn hơn, nhỏ hơn nhưng vẫn chứa tất cả dữ liệu được yêu cầu. Gzip là một tùy chọn để thực hiện nén này trên Nginx. Nó có sẵn trong tất cả các bản phân phối Linux chính và chỉ cần được kích hoạt và cấu hình chính xác. Với tính năng nén Gzip được bật, các trình duyệt có thể download nội dung tĩnh nhanh hơn, đó là lý do tại sao công cụ Tốc độ trang gắn cờ nó là thứ cần được giải quyết.
Để bật tính năng nén, hãy mở file cấu hình Nginx cho trang web ở dạng nano hoặc editor yêu thích của bạn. Ta sẽ sử dụng file mặc định trong ví dụ này:
- sudo nano /etc/nginx/sites-available/default
Xác định vị trí đoạn cấu hình server , khối này sẽ giống như sau:
server { listen 80 default_server; listen [::]:80 default_server; . . . } Hãy thêm một loạt đoạn mã để cấu hình nén.
Đầu tiên, bật tính năng nén Gzip và đặt mức nén:
server { listen 80 default_server; listen [::]:80 default_server; gzip on; gzip_comp_level 5; Bạn có thể chọn một số từ 1 đến 9 cho giá trị này. 5 là sự thỏa hiệp hoàn hảo giữa kích thước và mức sử dụng CPU, giảm khoảng 75% cho hầu hết các file ASCII (gần như giống với mức 9).
Tiếp theo, yêu cầu Nginx không nén bất kỳ thứ gì đã nhỏ và không có khả năng thu nhỏ hơn nữa. Mặc định là 20 byte, điều này không tốt vì nó thường dẫn đến các file lớn hơn sau khi nén. Đặt nó thành 256 thay thế:
... gzip_comp_level 5; gzip_min_length 256; Tiếp theo, yêu cầu Nginx nén dữ liệu ngay cả đối với các ứng dụng client đang kết nối với ta thông qua proxy như CloudFront :
... gzip_min_length 256; gzip_proxied any; Sau đó, yêu cầu các proxy này lưu vào bộ nhớ cache cả version nén và thông thường của tài nguyên khi nào tiêu đề khả năng Accept-Encoding của khách hàng thay đổi. Điều này tránh được sự cố trong đó ứng dụng client không có khả năng Gzip, điều cực kỳ hiếm ngày nay, sẽ hiển thị vô nghĩa nếu proxy của họ cung cấp cho họ version nén.
... gzip_proxied any; gzip_vary on; Cuối cùng, chỉ định kiểu MIME cho kết quả bạn muốn nén. Ta sẽ nén hình ảnh, dữ liệu JSON, phông chữ và các loại file phổ biến khác:
... gzip_vary on; gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy; # text/html is always compressed by gzip module Khi bạn hoàn thành, toàn bộ phần sẽ giống như ví dụ sau:
server { listen 80 default_server; listen [::]:80 default_server; gzip on; gzip_comp_level 5; gzip_min_length 256; gzip_proxied any; gzip_vary on; gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy; # text/html is always compressed by gzip module } Lưu và đóng file .
Bạn đã thêm nhiều dòng vào file cấu hình và luôn có khả năng thiếu một ký tự hoặc dấu chấm phẩy có thể làm hỏng mọi thứ. Để đảm bảo file của bạn không có lỗi tại thời điểm này, hãy kiểm tra cấu hình Nginx:
- sudo nginx -t
Nếu bạn đã áp dụng các thay đổi chính xác như đã nêu trong hướng dẫn này, bạn sẽ không thấy thông báo lỗi nào.
Thay đổi này sẽ cung cấp khả năng tăng tốc lớn nhất về tốc độ trang web , nhưng bạn cũng có thể cấu hình Nginx để tận dụng bộ nhớ đệm của trình duyệt, điều này sẽ làm giảm hiệu suất bổ sung của server .
Bước 3 - Cấu hình cache trình duyệt
Lần đầu tiên bạn truy cập một domain , các file này được download và lưu trữ trong bộ nhớ cache của trình duyệt. Trong những lần truy cập tiếp theo, trình duyệt có thể cung cấp các version local thay vì reload file xuống. Điều này cho phép trang web tải nhanh hơn nhiều vì nó chỉ cần truy xuất dữ liệu đã thay đổi kể từ lần truy cập cuối cùng. Nó mang lại trải nghiệm tốt hơn nhiều cho user và là lý do PageSpeed Insights của Google khuyến nghị triển khai nó.
, hãy mở file cấu hình Nginx mặc định trong editor :
- sudo nano /etc/nginx/sites-available/default
Bạn sẽ thêm một đoạn mã nhỏ để yêu cầu các trình duyệt lưu trữ các file CSS, JavaScript, hình ảnh và PDF trong bộ nhớ cache của chúng trong repository ảng thời gian bảy ngày.
Chèn đoạn mã sau vào bên trong khối server ngay sau mã trước đó để nén Gzip:
... # text/html is always compressed by gzip module location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ { expires 7d; } Lưu ý : Đây là cấu hình cho nội dung thay đổi thường xuyên. Nếu bạn đang chạy một blog đơn giản mà chỉ có hoạt động phát triển tối thiểu, thì không có lý do gì để buộc download mới mỗi tuần. Thay vào đó, bạn có thể yêu cầu trình duyệt lưu nội dung vào bộ nhớ cache trong một khoảng thời gian dài hơn, chẳng hạn như 30 ngày trở lên.
Tệp cấu hình Nginx cuối cùng sẽ giống như sau:
server { listen 80 default_server; listen [::]:80 default_server; gzip on; gzip_comp_level 5; gzip_min_length 256; gzip_proxied any; gzip_vary on; gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy; # text/html is always compressed by gzip module location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ { expires 7d; } } Lưu file để thoát. Đảm bảo cấu hình không có lỗi:
- sudo nginx -t
Sau đó, khởi động lại Nginx để áp dụng các chỉ thị mới này cho các yêu cầu đến.
- sudo systemctl restart nginx
Bạn đã điều chỉnh Nginx để mang lại điểm Tốc độ trang tốt hơn. Hãy xem những thay đổi này ảnh hưởng như thế nào đến Tốc độ trang của ta .
Bước 4 - Đo lường kết quả
Để kiểm tra xem những thay đổi cấu hình này đã nâng điểm Tốc độ trang web lên bao nhiêu điểm, hãy chạy trang web thông qua các công cụ Thông tin chi tiết về tốc độ trang bằng cách dán URL và nhấp vào Chạy thông tin chi tiết . Bạn sẽ thấy rằng cảnh báo nén và bộ nhớ đệm của trình duyệt đã biến mất:
So sánh điểm số mới với chỉ số cơ bản ban đầu của bạn. Sau khi hoàn thành hướng dẫn này, bạn phải có điểm cao hơn ít nhất 10 điểm so với trước đây.
Mục tiêu của ta là có điểm trên 80. Nếu trang web vẫn ở dưới ngưỡng này, bạn cần chú ý đến những điều khác. PageSpeed Insights sẽ trình bày chi tiết chính xác những vấn đề này và chỉ cho bạn cách khắc phục chúng nếu bạn nhấp vào liên kết Hiển thị cách khắc phục cho từng vấn đề. Các bước chính xác khác nhau đối với từng trang web và nằm ngoài phạm vi của hướng dẫn này.
Kết luận
Bạn đã tăng tốc trang web của bạn bằng cách áp dụng các thay đổi đơn giản đối với cấu hình Nginx. Điểm PageSpeed của bạn hiện đã tốt hơn nhiều và trang web tải nhanh hơn rất nhiều. Điều này sẽ làm cho user hạnh phúc hơn và tăng chất lượng trang web trong mắt Google. Tốc độ trang là một tín hiệu xếp hạng rất quan trọng và bạn hiện đang chứng minh rằng domain của bạn đang cung cấp trải nghiệm thú vị cho khách truy cập.
Thay đổi cấu hình Nginx của bạn chỉ là một phương pháp để cải thiện Tốc độ trang và có thể không đủ. Bạn vẫn cần viết mã hiệu quả, lưu trữ mọi thứ một cách thích hợp, cho truy cập qua Mạng phân phối nội dung (CDN) và sử dụng tính năng thu nhỏ nếu có thể để giữ cho mọi thứ nhanh chóng.
Các tin liên quan
Cách thêm module log vào Nginx trên Debian 82017-06-21
Cách triển khai ứng dụng Laravel với Nginx trên Ubuntu 16.04
2017-06-14
Cách bảo mật CI bằng SSL bằng Nginx trên Ubuntu 16.04
2017-05-26
Cách cấu hình Buildbot với SSL bằng Nginx Reverse Proxy
2017-05-17
Cách cấu hình Jenkins với SSL bằng cách sử dụng Nginx Reverse Proxy
2017-05-02
Cách tạo chứng chỉ SSL tự ký cho Nginx trên CentOS 7
2017-01-09
Cách thiết lập Django với Postgres, Nginx và Gunicorn trên Debian 8
2016-12-22
Cách tạo chứng chỉ SSL tự ký cho Nginx trên Debian 8
2016-12-20
Cách bảo mật Nginx bằng Let's Encrypt trên Debian 8
2016-12-19
Cách cung cấp các ứng dụng Django với uWSGI và Nginx trên Debian 8
2016-12-19
