Hướng dẫn tăng tốc website với Google Pagespeed và Nginx

Không có gì lạ khi website tải nhanh hơn thì mang tỉ lệ khách tróc nã cập cao hơn, tỉ lệ duy trì cũng như ảnh hưởng mang website cao hơn. Vỡi mỗi lần trễ 100ms, khiến cho cho Amazon sụt giảm 1% doanh số; trong khi với độ trễ 500ms, với nghĩa là Google đã mất 20% lưu lượng và lợi nhuận. Nếu sở hữu cách để nâng cao tốc web server của bạn mà ko phải bắt buộc nâng cấp máy chủ, không mang lý do gì để không thử.

rong bài viết này, tôi sẽ biểu hiện cách làm thế nào thông minh hóa cho web server Nginx để cài thiện hiệu năng, tăng tốc cho nó. Trong khi Nginx tự nó đã nổi tiếng như một trong các máy chủ web nhanh nhất và dễ mở rộng nhất, vẫn còn có đa dạng cách khác nhau để cải thiện hiệu suất hơn nữa cho Nginx .
Một trong số đấy là PageSpeed, một module cho web server được chính Google phát triển. PageSpeed nỗ lực cải thiện thời kì vận tải trang và giảm băng thông tiêu dùng web server. PageSpeed phát hành module cho cả Nginx và Apache, nhưng ở đây tôi chỉ hướng dẫn cách cấu hình và tiêu dùng module ngx_pagespeed cho Nginx.

Các tính năng của PageSpeed

PageSpeed vận dụng 1 số khoa học 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 tìm vấn DNS) bằng bí quyết sử dụng các bộ lọc (filter) để xử lý các request, mỗi filter sở hữu thể được bật/tắt tùy vào lựa chọn của bạn.
Dưới đây là 1 vài filter thường tiêu dùng của ngx_pagespeed. Bạn với thể xem khía cạnh tại  trang chính thức của Google Pagespeed.

• Collapse Whitespace: Giảm băng thông dùng bằng cách thay thế các cụm ký tự “khoảng trắng” bằng một ký tự “khoảng trắng” trong trang HTML.
• Canonicalize JavaScript Libraries:Giảm băng thông sử dụng bằng bí quyết tự động đổi link các thư viện javascript đến những CDN mạnh hơn (như, Google chẳng hạn).
• Combine CSS: Giảm số lượng truy nã vấn HTTP bằng phương pháp gộp đa dạng file css vào làm cho một.
• Combine JavaScript: Giảm số lượng tróc nã vấn HTTP bằng cách gộp rộng rãi file Javascript vào làm cho một.
• Elide Attributes: Giảm kích thước trang bằng cách mẫu bỏ các attribute mặc định trong tag HTML.
• Extend Cache: Giảm băng thông dùng bằng cách logic 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 bí quyết gỡ những lệnh @import trong file css.
• Lazyload Images: Trì hoãn tải hình ảnh cho đến lúc ảnh nằm trong vùng hiển thị/thấy được trên trình thông qua người dùng.
• Minify JavaScript: Giảm băng thông sử dụng sở hữu khoa học minifying JavaScript.
• Optimize Images: Giảm số lượng ảnh bằng phương pháp 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 tiêu dùng cho web (JPG)
• Pre-Resolve DNS: giảm thời kì 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 lúc Nginx chạy mà cần nạp lúc 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 cung cấp Nginx, do đó muốn sử dụng PageSpeed, bạn sẽ bắt buộc cần build và cài đặt từ mã nguồn của Nginx.

Build và cài đặt Nginx cùng với ngx_pagespeed

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:

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

Trên Fedora, CentOS hay RHEL:

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

1 2 3 4 5 6 7

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:

1 2 3

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

./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:

1	sbin/nginx -V

Kết quả hiển thị

1 2 3

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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.

 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 .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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

Xem thêm tại đây để biết danh sách đầy đủ các filters trong CoreFilters.

 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

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.

1 2	cd /home/johndoe mkdir -p temp/ngx_pagespeed_cache

Cuối cùng, start/restart Nginx

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