ngx_pagespeed tăng tốc website của bạn và giảm thời gian load đáng kể bằng cách tự động áp dụng các kỹ thuật tối ưu hóa page và các thành phần tĩnh như CSS, Javascript, Image.
Một số filter hay của ngx_pagespeed:
Collapse Whitespace: giảm băng thông sử dụng bằng cách thay thế nhiều khoảng trắng (whitespace) trong HTML bằng 1 khoảng trắng mà thôi.
Canonicalize JavaScript Libraries: giảm băng thông sử dụng bằng cách tự động sử dụng các thư viện Javascript phổ biến trên server free (vd như của Google).
- Combine CSS: giảm số lượng HTTP requests bằng cách kết hợp nhiều file CSS thành một file.
- Combine JavaScript: giảm số lượng HTTP requests bằng cách kết hợp nhiều file JavaSript thành một file.
- Extend Cache: giảm băng thông sử dụng bằng cách tối ưu chức năng cache của browser.
- Flatten CSS Imports: giảm số lượng HTTP request bằng cách xóa @import trong file CSS.
- Lazyload Images: làm chậm lại việc load các hình ảnh ko được hiển trị trên trình duyệt người dùng.
- Minify JavaScript: giảm băng thông sử dụng bằng cách tối ưu kích thước file Javascript.
- Optimize Images: tối ưu hóa hình ảnh bằng cách sử dụng inline images, nén hình ảnh, hoặc convert GIF sang PNG.
- Pre-Resolve DNS: giảm thời gian phân giải DNS bằng cách phân giải trước DNS sử dụng HTML.
Và còn rất nhiều filter và ví dụ minh họa khác của ngx_pagespeed trong trang chính thức.
Chúng ta không thể cài đặt ngx_pagespeed như một module riêng lẻ mà cần phải cài đặt bằng cách build Nginx từ mã nguồn.
I - Build và cài đặt Nginx với ngx_pagespeed
– Chuẩn bị các thành phần cần thiết để build nginx và ngx_pagespeed
Trên Debian, Ubuntu hoặc Linux Mint:
- Mã: Chọn tất cả
sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip
Trên Fedora, CentOS hoặc RHEL:
- Mã: Chọn tất cả
sudo yum install gcc-c++ pcre-dev pcre-devel zlib-devel make unzip
– Tải mã nguồn ngx_pagespeed (bản mới nhất 1.9.32.3-beta) và giải nén vào thư mục /usr/local/nginx/modules/
- Mã: Chọn tất cả
cd
NPS_VERSION=1.9.32.3
wget https://github.com/pagespeed/ngx_pagespeed/archive/release-${NPS_VERSION}-beta.zip
unzip release-${NPS_VERSION}-beta.zip
– Tải về PSOL (PageSpeed Optimization Libraries) và giải nén vào trong thư mục ngx_pagespeed
- Mã: Chọn tất cả
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ề nginx bản mới nhất và giải nén vào thư mục /usr/local, sau đó compile Nginx với module ngx_pagespeed và tiến hành cài đặt
- Mã: Chọn tất cả
cd
# check http://nginx.org/en/download.html for the latest version
NGINX_VERSION=1.6.3
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xvzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/
./configure --add-module=$HOME/ngx_pagespeed-release-${NPS_VERSION}-beta
make
sudo make install
Ghi chú: tùy từng nhu cầu mà bạn cần add thêm module khi compile Nginx cùng với ngx_pagespeed.
– Khởi động lại Nginx
- Mã: Chọn tất cả
service nginx restart
– Kiểm tra xem module ngx_pagespeed đã được tích hợp vào Nginx chưa bằng lệnh
- Mã: Chọn tất cả
nginx -V
Nếu bạn thấy kết quả trả về tương tự như sau thì đã cài đặt thành công
- Mã: Chọn tất cả
nginx version: nginx/1.6.3
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-4) (GCC)
TLS SNI support enabled
configure arguments: [COLOR=#FF0000]--add-module=/usr/local/nginx/modules/ngx_pagespeed-release-1.9.32.3-beta[/COLOR] --prefix=/usr/share/nginx --sbin-path=/usr/sbin/nginx --with-http_ssl_module --conf-path=/etc/nginx/nginx.conf --with-http_gzip_static_module --with-http_realip_module --group=nginx --user=nginx --pid-path=/var/run/nginx.pid --with-http_stub_status_module
II - Cấu hình module ngx_pagespeed
– Trước khi tiến hành cấu hình, bạn cần tạo thư mục cache cho module
- Mã: Chọn tất cả
mkdir /var/ngx_pagespeed_cache
chown nginx:nginx /var/ngx_pagespeed_cache
– Để kích hoạt và cấu hình ngx_pagespeed, bạn cần chỉnh sửa file configuration của Nginx /etc/nginx/nginx.conf
ngx_pagespeed có rất nhiều filter khác nhau, tùy theo mục đích sử dụng khác nhau mà các bạn lựa chọn cho phù hợp. Có 2 level khác nhau bạn có thể sử dụng là CoreFilters (mặc định) và PassThrough.
1. CoreFilters: đơn giản nhất và phù hợp với những bạn mới bắt đầu
CoreFilters là một tập hợp các filter được Google xác nhận là an toàn với hầu hết các website. Do đó, cách này phù hợp với các bạn newbie mới tìm hiểu. Nếu muốn, bạn có thể disable một filter bất kỳ khỏi CoreFilters hoặc thêm một filter khác vào.
Đây là một ví dụ cấu hình ngx_pagespeed với CoreFilters:
- Mã: Chọn tất cả
server {
listen 80 hocvps.com;
access_log off;
error_log off;
# error_log /home/hocvps.com/logs/error.log;
root /home/hocvps.com/public_html;
index index.php index.html index.htm;
server_name hocvps.com;
# enable ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;
# let's speed up PageSpeed by storing it in the super duper fast memcached
# pagespeed MemcachedThreads 1;
# pagespeed MemcachedServers "localhost:11211";
# enable CoreFilters
[COLOR=#ff0000]pagespeed RewriteLevel CoreFilters;[/COLOR]
# 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 danh sách toàn bộ filter có trong CoreFilters tại đây
2. PassThrough: advanced phức tạp hơn
Với các bạn đã có nhiều kiến thức, trải nghiệm thì nên sử dụng PassThrough. Khi đó sẽ cần tự kích hoạt những filter cần dùng.
Cấu hình ví dụ với PassThrough:
- Mã: Chọn tất cả
server {
listen 80 hocvps.com;
access_log off;
error_log off;
# error_log /home/hocvps.com/logs/error.log;
root /home/hocvps.com/public_html;
index index.php index.html index.htm;
server_name hocvps.com;
# enable ngx_pagespeed
pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;
# let's speed up PageSpeed by storing it in the super duper fast memcached
# pagespeed MemcachedThreads 1;
# pagespeed MemcachedServers "localhost:11211";
# disable CoreFilters
[COLOR=#ff0000]pagespeed RewriteLevel PassThrough;[/COLOR]
# 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 [url=http://chiase123.com/memberlist.php?mode=viewprofile&un=import]@[b]import[/b][/url] 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;
}
Khởi động lại web server để các thay đổi có tác dụng
- Mã: Chọn tất cả
service nginx restart
ngx_pagespeed cùng với memcache, Zend Opcache là một trong số những module mình khuyến khích mọi người sử dụng cùng với Nginx. Trong bài tiếp theo mình sẽ hướng dẫn mọi người cách cài đặt tổng hợp các thành phần này để build một server hoàn hảo.
Chúc các bạn thành công!
Nguồn tham khảo:
http://hocvps.com/huong-dan-tang-toc-nginx-web-server-voi-pagespeed/
https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source
