Tối ưu Nginx Web server với Google Pagespeed Insights
Khi website tải chậm hoặc điểm Google PageSpeed Insights giảm, nguyên nhân không chỉ nằm ở giao diện, hình ảnh hay mã JavaScript. Với các website chạy trên Nginx, cấu hình web server cũng ảnh hưởng trực tiếp đến tốc độ phản hồi, khả năng cache, nén tài nguyên và trải nghiệm tải trang của người dùng.
Trong bài viết này, Bizfly Cloud sẽ hướng dẫn cách tối ưu Nginx Web Server dựa trên các vấn đề thường gặp trong Google PageSpeed Insights. Nội dung vẫn giữ phần cấu hình ngx_pagespeed cho những hệ thống cần tối ưu tự động ở tầng server, đồng thời bổ sung các cấu hình Nginx phổ biến và an toàn hơn để cải thiện hiệu năng website.
Google PageSpeed Insights liên quan gì đến Nginx?
Google PageSpeed Insights là công cụ dùng để đánh giá hiệu năng của một trang web trên thiết bị di động và máy tính. Công cụ này không chỉ trả về một điểm số tổng quan, mà còn đưa ra các chỉ số và gợi ý liên quan đến tốc độ tải, khả năng tương tác và độ ổn định giao diện.
Với các website đang chạy Nginx, một số cảnh báo trong PageSpeed Insights có thể được cải thiện từ phía server, chẳng hạn:
- Thời gian phản hồi máy chủ chậm
- Tài nguyên tĩnh chưa được cache đúng cách
- File CSS, JavaScript, HTML chưa được nén
- Website chưa tận dụng HTTP/2 hoặc HTTPS
- Ảnh, CSS, JS tải chậm do chưa có cơ chế cache hoặc phân phối phù hợp
Tuy nhiên, cần hiểu đúng rằng Nginx không thể xử lý mọi vấn đề PageSpeed Insights đưa ra. Nếu website có JavaScript quá nặng, layout bị shift, ảnh hero chưa tối ưu hoặc theme WordPress sinh quá nhiều request, bạn vẫn cần tối ưu thêm ở mã nguồn, CMS, CDN và cách tổ chức nội dung.
Các tính năng của Pagespeed Insights
Pagespeed Insights áp dụng một số kỹ thuật tối ưu hóa (như giảm dung lượng HTML, giảm số lượng request HTTP, giảm độ trễ ping, giảm số lần truy vấn DNS) bằng cách sử dụng các bộ lọc (filter) để xử lý các request, mỗi filter có thể được bật/tắt tùy vào lựa chọn của bạn.
Dưới đây là một vài filter thường dùng của ngx_pagespeed. Bạn có thể xem chi tiết tại trang chính thức của Google Pagespeed.
- Collapse Whitespace: Giảm băng thông sử dụng bằng cách thay thế các cụm ký tự “khoảng trắng” bằng 1 ký tự “khoảng trắng” trong trang HTML.
- Canonicalize JavaScript Libraries: Giảm băng thông sử dụng bằng cách tự động đổi link các thư viện javascript tới các CDN mạnh hơn (như, Google chẳng hạn).
- Combine CSS: Giảm số lượng truy vấn HTTP bằng cách gộp nhiều file css vào làm một.
- Combine JavaScript: Giảm số lượng truy vấn HTTP bằng cách gộp nhiều file Javascript vào làm một.
- Elide Attributes: Giảm kích thước trang bằng cách loại bỏ các attribute mặc định trong tag HTML.
- Extend Cache: Giảm băng thông sử dụng bằng cách tối ưu hóa khả năng ccache của các tài nguyên trên trang web (images, js, css,…).
- Flatten CSS Imports: Giảm độ trễ của HTTP request bằng cách gỡ các lệnh @import trong file css.
- Lazyload Images: Trì hoãn tải hình ảnh cho đến khi ảnh nằm trong vùng hiển thị/thấy được trên trình duyệt người dùng.
- Minify JavaScript: Giảm băng thông sử dụng với kỹ thuật minifying JavaScript.
- Optimize Images: Giảm số lượng ảnh bằng cách nhúng trực tiếp ảnh vào HTML (url data by base64 endcode), nén ảnh, convert sang định dạng nhẹ hơn chuyên dùng cho web (JPG).
- Pre-Resolve DNS: giảm thời gian phân giải DNS bằng cách “phân giải trước” DNS.
- Prioritize Critical CSS: thay vì load các file css nhỏ nó sẽ nhúng trực tiếp vào thẻ style ở head của trang.
Không giống như server Apache, module của Nginx không thể nạp khi Nginx chạy mà cần nạp khi biên dịch chương trình. Tại thời điểm viết bài thì module ngx_pagespeed chưa được đóng gói kèm với bản phân phối Nginx, do đó muốn sử dụng PageSpeed, bạn sẽ cần phải build và cài đặt từ mã nguồn của Nginx.
Trước hết cài đặt chương trình cần thiết để build nginx và ngx_pagespeed.
- Trên Debian, Ubuntu hay Linux Mint:
sudo apt-get install build-essential zlib1g-dev libpcre3-dev - Trên Fedora, CentOS hay RHEL:
sudo yum install gcc-c pcre-devel zlib-devel make wget - Tải về và giải nén mã nguồn của module ngx_pagespeed như dưới đây, ta sẽ có source code tại /home/johndoe/source/ngx_pagespeed–release–1.9.32.6–beta/.
- Cùng với đó, các dòng lệnh cũng sẽ tải về thư viện PSOL tương ứng dùng cho PageSpeed.
cd /home/johndoe/source NPS_VERSION=1.9.32.6 wget https://github.com/pagespeed/ngx_pagespeed/archive/release-${NPS_VERSION}-beta.zip unzip release-${NPS_VERSION}-beta.zip cd ngx_pagespeed-release-${NPS_VERSION}-beta/ wget https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz tar -xzvf ${NPS_VERSION}.tar.gz # extracts to psol/ - Tải về source code mới nhất từ http://nginx.org/, và giải nén ra:
wget http://nginx.org/download/nginx-1.9.3.tar.gz tar zxf nginx-1.9.3.tar.gz cd nginx-1.9.3 Nếu các bạn đã theo dõi bài viết hướng dẫn cài đặt Nginx trên CentOS/ Ubuntu từ mã nguồn, thì các bạn cũng đã biết cách biên dịch mã nguồn rồi. Để bổ sung thêm module ngx_pagespeed cho Nginx, ta cần thay đổi một chút trong lệnh cấu hình biên dịch thôi.
Nginx có tùy chọn –add-module để chỉ định module bên thứ 3 cần bổ sung vào chương trình, do đó lệnh cấu hình và biên dịch từ bài trước ta sẽ sửa lại như sau:
./configure \ --user=johndoe \ --prefix=/home/johndoe/nginx \ --error-log-path=/home/johndoe/application/nginx/log/error.log \ --http-log-path=/home/johndoe/application/nginx/log/access.log \ --with-http_gzip_static_module \ --with-http_ssl_module \ --with-pcre=/home/johndoe/source/pcre-8.37 \ --with-file-aio \ --with-http_realip_module \ --without-http_scgi_module \ --without-http_uwsgi_module \ --add-module=/home/johndoe/setup/ngx_pagespeed-1.9.32.6-beta make make install Bạn có thể kiểm tra xem ngx_pagespeed đã được thêm vào nginx hay chưa:
sbin/nginx -V Kết quả hiển thị:
nginx version: nginx/1.9.3 built by gcc 4.8.2 20150808 (Red Hat 4.8.2-7) (GCC) configure arguments: --add-module=/home/johndoe/setup/ngx_pagespeed-1.9.32.6-beta . . . . Cấu hình ngx_pagespeed trong Nginx
Để kích hoạt và cấu hình ngx_pagespeed, ta cần sửa khối khai báo server trong file cấu hình conf/nginx.conf. Dưới đây là ví dụ về khai báo sử dụng PageSpeed filter:
vi conf/nginx.conf #Trình biên tập vi sẽ mở file như bên dưới server { # port to listen on listen 80; # server name server_name webfaver.com www.webfaver.com; # document root directory root /home/johndoe/www/mywebsite/public; # access log access_log /home/johndoe/www/mywebsite/logs/access.log main; # enable ngx_pagespeed pagespeed on; # Khai báo pagespeed filter(s) ở đây. } Đến đoạn cấu hình filters, có hai cấp độ sử dụng: CoreFilters và PassThrough. nếu không chỉ định, CoreFilters được dùng theo mặc định.
Cấu hình ngx_pagespeed trong Nginx
Với gà mờ: dùng CoreFilters
CoreFilters chứa một tập các PageSpeed filter, theo một tiêu chuẩn mặc định mà Google cho rằng hợp lý và an toàn nhất cho các website. Khi kích hoạt CoreFilters, bạn cũng kích hoạt luôn 1 tập cấu hình “an toàn” mặc định kèm theo. Tôi khuyến khích các “lính mới” dùng cách này. Nếu muốn, bạn có thể bất hoạt một số filter trong CoreFilters , hoặc kích hoạt thêm một số filter khác. Đây là một ví dụ của cấu hình CoreFilters cho ngx_pagespeed .
server { # port to listen on listen 80; # server name server_name webfaver.com www.webfaver.com; # document root directory root /home/johndoe/www/mywebsite/public; # access log access_log /home/johndoe/www/mywebsite/logs/access.log main; # enable ngx_pagespeed pagespeed on; pagespeed FileCachePath /home/johndoe/temp/ngx_pagespeed_cache; # enable CoreFilters pagespeed RewriteLevel CoreFilters; # disable particular filter(s) in CoreFilters pagespeed DisableFilters rewrite_images; # enable additional filter(s) selectively pagespeed EnableFilters collapse_whitespace; pagespeed EnableFilters lazyload_images; pagespeed EnableFilters insert_dns_prefetch; } Với các pro: Xài PassThrough
Với những người dùng chuyên nghiệp, đã rành rẽ và quen thuộc với web server, có lẽ bạn nên dùng cấp độ PassThrough, dùng level này bạn có thể tùy chỉnh thông số cho riêng từng filters.
server { # port to listen on listen 80; # server name server_name webfaver.com www.webfaver.com; # document root directory root /home/johndoe/www/mywebsite/public; # access log access_log /home/johndoe/www/mywebsite/logs/access.log main; # enable ngx_pagespeed pagespeed on; pagespeed FileCachePath /home/johndoe/temp/ngx_pagespeed_cache; # disable CoreFilters pagespeed RewriteLevel PassThrough; # enable collapse whitespace filter pagespeed EnableFilters collapse_whitespace; # enable JavaScript library offload pagespeed EnableFilters canonicalize_javascript_libraries; # combine multiple CSS files into one pagespeed EnableFilters combine_css; # combine multiple JavaScript files into one pagespeed EnableFilters combine_javascript; # remove tags with default attributes pagespeed EnableFilters elide_attributes; # improve resource cacheability pagespeed EnableFilters extend_cache; # flatten CSS files by replacing @import with the imported file pagespeed EnableFilters flatten_css_imports; pagespeed CssFlattenMaxBytes 5120; # defer the loading of images which are not visible to the client pagespeed EnableFilters lazyload_images; # enable JavaScript minification pagespeed EnableFilters rewrite_javascript; # enable image optimization pagespeed EnableFilters rewrite_images; # pre-solve DNS lookup pagespeed EnableFilters insert_dns_prefetch; # rewrite CSS to load page-rendering CSS rules first. pagespeed EnableFilters prioritize_critical_css; } server { # port to listen on listen 80; # server name server_name webfaver.com www.webfaver.com; # document root directory root /home/johndoe/www/mywebsite/public; # access log access_log /home/johndoe/www/mywebsite/logs/access.log main; # enable ngx_pagespeed pagespeed on; pagespeed FileCachePath /home/johndoe/temp/ngx_pagespeed_cache; # disable CoreFilters pagespeed RewriteLevel PassThrough; # enable collapse whitespace filter pagespeed EnableFilters collapse_whitespace; # enable JavaScript library offload pagespeed EnableFilters canonicalize_javascript_libraries; # combine multiple CSS files into one pagespeed EnableFilters combine_css; # combine multiple JavaScript files into one pagespeed EnableFilters combine_javascript; # remove tags with default attributes pagespeed EnableFilters elide_attributes; # improve resource cacheability pagespeed EnableFilters extend_cache; # flatten CSS files by replacing @import with the imported file pagespeed EnableFilters flatten_css_imports; pagespeed CssFlattenMaxBytes 5120; # defer the loading of images which are not visible to the client pagespeed EnableFilters lazyload_images; # enable JavaScript minification pagespeed EnableFilters rewrite_javascript; # enable image optimization pagespeed EnableFilters rewrite_images; # pre-solve DNS lookup pagespeed EnableFilters insert_dns_prefetch; # rewrite CSS to load page-rendering CSS rules first. pagespeed EnableFilters prioritize_critical_css; } Bước cuối cùng để hoành thành cấu hình
Tạo một thư mục để Nginx lưu cache, đảm bảo user chạy nginx có quyền ghi file. Do mình dùng chung user đăng nhập linux với user chạy nginx nên sẽ tạo thư mục trong /home/johndoe luôn.
cd /home/johndoe mkdir -p temp/ngx_pagespeed_cache Cuối cùng, start/restart Nginx
service nginx start Trải nghiệm
Bây giờ bạn hãy thử mở trang web với Chrome, bấm phím F12, và chọn tab network, bạn sẽ thấy ngay sự thay đổi trong tốc độ tải trang tăng lên một cách đáng ngạc nhiên. Chúc các bạn vui sướng.
FAQ về tối ưu Nginx với Google PageSpeed Insights
Có bắt buộc cài ngx_pagespeed để tăng điểm PageSpeed Insights không?
Không. Trong nhiều trường hợp, bạn có thể cải thiện điểm PageSpeed Insights bằng cách cấu hình Gzip/Brotli, cache tài nguyên tĩnh, HTTP/2, CDN, tối ưu ảnh và giảm JavaScript không cần thiết. ngx_pagespeed chỉ là một lựa chọn bổ sung, phù hợp hơn với một số hệ thống cần tối ưu tự động ở tầng server.
Tối ưu Nginx có cải thiện LCP không?
Có thể, nếu nguyên nhân LCP đến từ phản hồi server chậm, ảnh hero tải chậm, file CSS/JS chưa cache hoặc tài nguyên tĩnh truyền tải kém hiệu quả. Nếu LCP đến từ ảnh quá nặng, render-blocking JavaScript hoặc layout frontend, bạn cần tối ưu thêm ở mã nguồn và nội dung.
Nên dùng Gzip hay Brotli?
Gzip phổ biến, dễ bật và tương thích rộng. Brotli thường nén tốt hơn với tài nguyên dạng text nhưng cần module hỗ trợ. Nếu server đã có Brotli, bạn có thể bật Brotli và vẫn giữ Gzip làm phương án tương thích cho các trình duyệt hoặc client không hỗ trợ Brotli.
Tại sao đã tối ưu Nginx nhưng điểm PageSpeed chưa tăng?
Có thể do vấn đề chính không nằm ở Nginx mà nằm ở frontend, ảnh, font, script bên thứ ba, quảng cáo, tracking hoặc dữ liệu thực tế chưa cập nhật. Bạn nên xem chi tiết từng cảnh báo trong PageSpeed Insights thay vì chỉ nhìn điểm tổng.
Có nên cache toàn bộ website bằng Nginx không?
Không nên cache toàn bộ một cách máy móc. Bạn cần loại trừ các trang có nội dung cá nhân hóa như đăng nhập, tài khoản, giỏ hàng, thanh toán, trang quản trị hoặc API có dữ liệu riêng theo từng người dùng.
Kết luận
Tối ưu Nginx Web Server với Google PageSpeed Insights không chỉ là cài thêm một module hay cố đạt điểm 100. Cách làm hiệu quả hơn là đọc đúng cảnh báo, xác định phần nào xử lý được ở Nginx, bật nén và cache hợp lý, kiểm tra kỹ trước/sau khi triển khai và chỉ dùng ngx_pagespeed khi hệ thống thực sự phù hợp. Khi Nginx được cấu hình tốt trên một hạ tầng ổn định, website sẽ có nền tảng tốt hơn để cải thiện tốc độ tải trang, trải nghiệm người dùng và hiệu quả SEO.
Tham khảo: http://webfaver.com/
