Tối ưu Nginx Web server với Google Pagespeed

Trong bài viết này, tôi sẽ mô tả cách tối ưu hóa máy chủ web Nginx để cải thiện hiệu suất, tăng tốc độ. Mặc dù bản thân Nginx nổi tiếng là một trong những máy chủ web nhanh nhất và có khả năng mở rộng cao nhất hiện có, nhưng có nhiều cách khác nhau để cải thiện hơn nữa hiệu suất của Nginx.

Một trong số đó là PageSpeed, một mô-đun dành cho máy chủ web do chính Google phát triển. PageSpeed ​​nỗ lực cải thiện thời gian tải trang và giảm mức sử dụng băng thông của máy chủ web. PageSpeed ​​xuất bản các mô-đun cho cả Nginx và Apache, nhưng ở đây tôi chỉ cho bạn cách định cấu hình và sử dụng mô-đun. ngx_pagespeed (tốc độ trang nginx) cho Nginx.

Tính năng Tốc độ trang

PageSpeed ​​áp dụng một số kỹ thuật tối ưu hóa (chẳng hạn như giảm số lượng HTML, giảm số lượng yêu cầu HTTP, giảm độ trễ ping, giảm số lượng truy vấn DNS) bằng cách sử dụng bộ lọc để xử lý yêu cầu, mỗi bộ lọc có thể được bật / tắt tùy thuộc vào sự lựa chọn của bạn.

Dưới đây là một số bộ lọc thường được sử 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.

– Thu gọn khoảng trắng: Giảm sử dụng băng thông bằng cách thay thế các cụm từ ký tự “khoảng trắng” bằng 1 ký tự “khoảng trắng” trong trang HTML.

– Canonicalize Thư viện JavaScript: Giảm mức sử dụng băng thông bằng cách liên kết động các thư viện javascript với các CDN mạnh hơn (ví dụ: Google).

– Kết hợp CSS: Giảm số lượng truy vấn HTTP bằng cách kết hợp nhiều File CSS thành một.

– Kết hợp JavaScript: Giảm số lượng truy vấn HTTP bằng cách hợp nhất nhiều File Javascript thành một.

– Các thuộc tính khác: Giảm kích thước trang bằng cách loại bỏ các thuộc tính mặc định trong thẻ HTML.

– Mở rộng bộ nhớ đệm: Giảm sử dụng băng thô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 (hình ảnh, js, css, …).

– Làm phẳng nhập CSS: Giảm độ trễ yêu cầu HTTP bằng cách xóa lệnh @import trong File css.

– Lazyload hình ảnh: Trì hoãn việc tải hình ảnh cho đến khi nó nằm trong vùng hiển thị / hiển thị của trình duyệt của người dùng.

– Giảm thiểu JavaScript: Giảm mức sử dụng băng thông với kỹ thuật thu nhỏ JavaScript.

– Tối ưu hóa hình ảnh: Giảm số lượng hình ảnh bằng cách nhúng trực tiếp hình ảnh vào HTML (dữ liệu url theo mã endcode base64), nén hình ảnh, chuyển đổi sang định dạng nhẹ hơn cho web (JPG).

– Phân giải trước DNS: Giảm thời gian phân giải DNS bằng cách “phân giải trước” DNS.

– Ưu tiên CSS quan trọng: thay vì tải các File css nhỏ, nó sẽ nhúng trực tiếp vào thẻ style ở đầu trang.

Không giống như máy chủ Apache, mô-đun Nginx không thể được tải khi Nginx đang chạy, nhưng cần được tải khi biên dịch chương trình. Tại thời điểm viết bài, mô-đun ngx_pagespeed không được đóng gói với bản phân phối Nginx, vì vậy để sử dụng PageSpeed, bạn sẽ cần phải xây dựng và cài đặt từ mã nguồn của Nginx.

Đầu tiên hãy cài đặt chương trình cần thiết để xây dựng nginx và ngx_pagespeed.

– Trên Debian, Ubuntu hoặc Linux Mint:

sudo apt-get install build-essential zlib1g-dev libpcre3-dev 

– Trên Fedora, CentOS hoặc RHEL:

sudo yum install gcc-c   pcre-devel zlib-devel make wget 

– Tải và giải nén mã nguồn của module ngx_pagespeed như bên dưới, chúng ta sẽ có mã nguồn tại /home/johndoe/source/ngx_pagespeed–release–1.9.32.6–beta/.

– Cùng với đó, dòng lệnh cũng sẽ tải thư viện PSOL tương ứ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 xuống mã nguồn mới nhất từ http://nginx.org/và giải né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 bạn đã làm theo hướng dẫn cài đặt Nginx trên CentOS / Ubuntu từ nguồn, bạn đã biết cách biên dịch mã nguồn. Để thêm mô-đun ngx_pagespeed vào Nginx, chúng ta cần thay đổi một chút trong lệnh cấu hình trình biên dịch.

Nginx có tùy chọn -add-module để chỉ định mô-đun của bên thứ ba để thêm vào chương trình, vì vậy cấu hình và lệnh biên dịch từ bài trước sẽ chỉnh sửa 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 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 . . . . 

Định cấu hình ngx_pagespeed trong Nginx

Để kích hoạt và cấu hình ngx_pagespeed, chúng ta cần chỉnh sửa khối khai báo máy chủ trong File cấu hình conf / nginx.conf. Dưới đây là ví dụ về khai báo sử dụng bộ lọc Tốc độ trang:

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.     } 

Cho đến phần cấu hình bộ lọc, có hai mức sử dụng: CoreFilters và PassThrough. nếu không được chỉ định, CoreFilters được sử dụng theo mặc định.

Đối với gà mờ: sử dụng CoreFilters

CoreFilters chứa một tập hợp các bộ lọc Tốc độ trang tuân theo một tiêu chuẩn mặc định mà Google coi là hợp lý và an toàn nhất cho các trang web. Khi bạn kích hoạt CoreFilters, bạn cũng bật bộ cấu hình “an toàn” mặc định được bao gồm. Tôi khuyến khích các “newbies” sử dụng phương pháp này. Nếu muốn, bạn có thể tắt một số bộ lọc trong CoreFilters hoặc bật một số bộ lọc khác. Đây là một ví dụ về 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;     } 

Đối với chuyên nghiệp: Sử dụng PassThrough

Đối với những người dùng chuyên nghiệp đã quen và quen với web server, có lẽ bạn nên sử dụng mức PassThrough, sử dụng mức này bạn có thể tùy chỉnh các thông số cho từng bộ lọc.

     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àn thành cấu hình

Tạo thư mục cho Nginx để lưu vào bộ nhớ cache, đảm bảo rằng người dùng đang chạy nginx có quyền ghi File. Vì tôi chia sẻ người dùng đăng nhập linux với người dùng đang chạy nginx, nên tôi cũng sẽ tạo một thư mục trong / home / johndoe.

cd /home/johndoe mkdir -p temp/ngx_pagespeed_cache 

Sau cùng, bắt đầu / khởi động lại Nginx

service nginx start 

Kinh nghiệm

Bây giờ hãy thử mở trang web bằng Chrome, nhấn phím F12 và chọn tab mạng, bạn sẽ thấy ngay tốc độ tải trang tăng lên đáng ngạc nhiên. Chúc các bạn luôn hạnh phúc.

Tham khảo: http://webfaver.com/

Theo viblo.asia