Nginx bản thân nó đã là một web server có hiệu suất hoạt động rất tốt. Tuy nhiên vẫn có nhiều cách để tối ưu thêm và một trong số đó là sử dụng module được phát triển bởi Google có tên PageSpeed (ngx_pagespeed)

ngx_pagespeed

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.

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:

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

Trên Fedora, CentOS hoặc RHEL:

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

– Tải mã nguồn ngx_pagespeed (bản mới nhất 1.8.31.4-beta) và giải nén vào thư mục /usr/local/nginx/modules/

cd
NPS_VERSION=1.8.31.4
mkdir -p /usr/local/nginx/modules
wget https://github.com/pagespeed/ngx_pagespeed/archive/release-${NPS_VERSION}-beta.tar.gz
tar xvfvz release-${NPS_VERSION}-beta.tar.gz -C /usr/local/nginx/modules --no-same-owner

– Tải về PSOL (PageSpeed Optimization Libraries) và giải nén vào trong thư mục ngx_pagespeed

wget https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz
tar xvfvz ${NPS_VERSION}.tar.gz -C /usr/local/nginx/modules/ngx_pagespeed-release-${NPS_VERSION}-beta --no-same-owner
find /usr/local/nginx/modules/ngx_pagespeed-release-${NPS_VERSION}-beta/ -type d -exec chmod +rx {} \;
find /usr/local/nginx/modules/ngx_pagespeed-release-${NPS_VERSION}-beta/ -type f -exec chmod +r {} \;

– Tải về nginx bản mới nhất và giải nén vào thư mục /usr/local

wget http://nginx.org/download/nginx-1.6.0.tar.gz
tar xvfvz nginx-1.6.0.tar.gz -C /usr/local --no-same-owner

– Cuối cùng, compile Nginx với module ngx_pagespeed và tiến hành cài đặt

cd /usr/local/nginx-1.6.0
./configure --add-module=/usr/local/nginx/modules/ngx_pagespeed-release-${NPS_VERSION}-beta --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

make
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

service nginx restart

– Kiểm tra xem module ngx_pagespeed đã được tích hợp vào Nginx chưa bằng lệnh

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

nginx version: nginx/1.6.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-4) (GCC)
TLS SNI support enabled
configure arguments: --add-module=/usr/local/nginx/modules/ngx_pagespeed-release-1.8.31.4-beta --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

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

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

Nếu bạn sử dụng HocVPS Script thì có thể lựa chọn chỉnh sửa file cấu hình của riêng domain, ở đây mình lấy ví dụ với VPS của hocvps.com:

nano /etc/nginx/conf.d/hocvps.com.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.

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:

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
        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 danh sách toàn bộ filter có trong CoreFilters tại đây.

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:

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

Khởi động lại web server để các thay đổi có tác dụng

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 HocVPS Script. 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!

80 Comments

  1. Thanh Nguyen 4 comment

    Hi Luân,
    VPS mình đang chạy bình thường, mình có cài thêm nginx-pagespeed. Cài đặt xong thì không khởi động lại được Nginx báo lỗi do Gzip. Lỗi thông báo như sau:
    [root@CENTOS6-64 ~]# nginx -t
    nginx: [emerg] unknown directive “gzip_static” in /etc/nginx/nginx.conf:45
    nginx: configuration file /etc/nginx/nginx.conf test failed
    Mình Hỏi kỹ thuật bên nhà cung cấp thì họ bảo chưa cài Gzip, và bảo đọc hướng dẫn ở đây: http://nginx.org/en/docs/http/ngx_http_gzip_static_module.html#gzip_static Sau đó bảo mình cài lại Nginx. Hixxx. Luân giúp mình với.
    Cảm ơn!

      1. Thanh Nguyen 4 comment

        Hi Luân, Dòng 45 là: gzip_static on;

        Dưới đây là toàn bộ nội dung file nginx.conf

        user nginx;
        worker_processes 2;
        worker_rlimit_nofile 65536;

        error_log /var/log/nginx/error.log warn;
        pid /var/run/nginx.pid;

        events {
        worker_connections 2048;
        }

        http {
        include /etc/nginx/mime.types;
        default_type application/octet-stream;
        pagespeed On;
        pagespeed FileCachePath “/var/cache/nginx_pagespeed”;

        log_format main ‘$remote_addr – $remote_user [$time_local] “$request” ‘
        ‘$status $body_bytes_sent “$http_referer” ‘
        ‘”$http_user_agent” “$http_x_forwarded_for”‘;

        access_log off;
        sendfile on;
        tcp_nopush on;
        tcp_nodelay off;
        types_hash_max_size 2048;
        server_tokens off;
        server_names_hash_bucket_size 128;
        client_max_body_size 20m;
        client_body_buffer_size 256k;
        client_body_in_file_only off;
        client_body_timeout 60s;
        client_header_buffer_size 256k;
        client_header_timeout 20s;
        large_client_header_buffers 8 256k;
        keepalive_requests 150;
        keepalive_timeout 30;
        keepalive_disable msie6;
        reset_timedout_connection on;
        send_timeout 60s;
        gzip on;
        gzip_static on;
        gzip_disable “msie6”;
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain text/css application/json text/javascript application/javascript text/xml application/xml application/xml+rss;

        #include /etc/nginx/conf.d/*.conf;
        fastcgi_cache_path /var/run/nginx-cache levels=1:2 keys_zone=WORDPRESS:100m inactive=60m;
        fastcgi_cache_key “$scheme$request_method$host$request_uri”;
        fastcgi_cache_use_stale error timeout invalid_header http_500;
        fastcgi_ignore_headers Cache-Control Expires Set-Cookie;
        include /etc/nginx/conf.d/*.conf;
        }

        Tiếp nữa nếu rebuild lại nginx thì làm như làm Luân, tại mình cài hocvps script?

        1. Luân Trần Admin

          Bạn off nó đi xem sao, có thể confict gzip khi bạn cài thêm cái kia rồi.

  2. John Kenny 23 comment

    [root@vultr nginx-1.6.0]# nginx -V
    nginx version: nginx/1.8.0
    built by gcc 4.4.7 20120313 (Red Hat 4.4.7-3) (GCC)
    built with OpenSSL 1.0.1e-fips 11 Feb 2013
    TLS SNI support enabled
    configure arguments: –prefix=/etc/nginx –sbin-path=/usr/sbin/nginx –conf-path=/etc/nginx/nginx.conf –error-log-path=/var/log/nginx/error.log –http-log-path=/var/log/nginx/access.log –pid-path=/var/run/nginx.pid –lock-path=/var/run/nginx.lock –http-client-body-temp-path=/var/cache/nginx/client_temp –http-proxy-temp-path=/var/cache/nginx/proxy_temp –http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp –http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp –http-scgi-temp-path=/var/cache/nginx/scgi_temp –user=nginx –group=nginx –with-http_ssl_module –with-http_realip_module –with-http_addition_module –with-http_sub_module –with-http_dav_module –with-http_flv_module –with-http_mp4_module –with-http_gunzip_module –with-http_gzip_static_module –with-http_random_index_module –with-http_secure_link_module –with-http_stub_status_module –with-http_auth_request_module –with-mail –with-mail_ssl_module –with-file-aio –with-ipv6 –with-http_spdy_module –with-cc-opt=’-O2 -g -pipe -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector –param=ssp-buffer-size=4 -m64 -mtune=generic’

    nginx -V Nó báo vậy Luân ơi. Xin hướng dẫn khắc phục

        1. Luân Trần Admin

          Hic, bạn hỏi không rõ ràng. Như thế kia là cài không được rồi, đâu có giống như test trong bài

  3. Văn Tiến 5 comment

    Bước make thì báo lỗi anh Luân ơi.

    checking for psol … found
    List of modules (in reverse order of applicability): ngx_http_write_filter_module ngx_http_header_filter_module ngx_http_chunked_filter_module ngx_http_range_header_filter_module ngx_pagespeed_etag_filter ngx_http_gzip_filter_module ngx_pagespeed ngx_http_postpone_filter_module ngx_http_ssi_filter_module ngx_http_charset_filter_module ngx_http_userid_filter_module
    + ngx_pagespeed was configured
    checking for PCRE library … found
    checking for PCRE JIT support … found
    checking for OpenSSL library … not found

    ./configure: error: SSL modules require the OpenSSL library.
    You can either do not enable the modules, or install the OpenSSL library
    into the system, or build the OpenSSL library statically from the source
    with nginx by using –with-openssl= option.

    [root@vultr nginx-1.6.0]# make
    make: *** No rule to make target `build’, needed by `default’. Stop.
    [root@vultr nginx-1.6.0]# make install
    make: *** No rule to make target `install’. Stop.

  4. Dũng 25 comment

    Mình cài đến bước cuối cùng bước compile Nginx với module ngx_pagespeed thì báo lỗi thế này
    http://www.upsieutoc.com/images/2016/03/16/Zalo_ScreenShot_16_3_2016_2315830.png

    cd /usr/local/nginx-1.6.0
    ./configure –add-module=/usr/local/nginx/modules/ngx_pagespeed-release-${NPS_VERSION}-beta –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

    1. Luân Trần Admin

      Bạn copy đoạn thông báo lỗi rồi paste lên Google search sẽ ra ngay vẫn đề. Cái này do thư viện OpenSSL.

      1. Dung 25 comment

        Mình đang dùng hocvps bản mới nhất bạn có thể cho mình xin hướng dẫn khắc phục với được không cảm ơn bạn

      2. Dũng 25 comment

        Bạn có thể cho mình xin link hướng dẫn với được ko?
        Mình ko rành về vps lắm
        Mình đang dùng bản hocvps mới nhất

  5. Nam Luu 11 comment

    Cho mình hỏi
    Mình kết hợp giữa pagespeed, memcached, w3 total cache cho wp chạy ngon lành rồi
    Nhưng có 1 điều là ko biết cách xóa cache mà pagespeed sinh ra vì khi chỉnh sửa css thì nó ko tự thay đổi.
    Có cách nào tự động ko? hay phải vào file domain.conf xóa cấu hình pagespeed đi sửa xong rồi add lại 🙂

  6. Bảo 17 comment

    PageSpeed có bản cập nhật mới rồi, hiện tại là 1.10.xxx
    Sao Luân không cập nhật bài viết đi ạ ?

  7. Truong Minh Tam 10 comment

    VPS đang chạy site wordpress rồi có cài pagespeed được không bạn. Sao trong bài tối ưu tốc độ không thây bạn nhắc đến pagespeed này ? hình như thấy update đã bỏ rồi ?

      1. Nguyễn Văn Hải 2 comment

        Chào admin. Mình đã cài hocvps script https://hocvps.com/script/ giờ muốn add thêm ngx_pagespeed thì làm thế nào. Mình thấy hướng dẫn trên thì phải cài lại hết, mong admin cho mình một chỉ dẫn.

    1. Luân Trần Admin

      Cái này compile từ source, nên nếu muốn bỏ thì bạn remove Nginx rồi install lại Nginx là ok.

  8. Tuyn Doan 1 comment

    Hi ,
    Mình bị lỗi này là sao bạn :
    ———————————–
    2016/09/13 05:30:22 [alert] 22193#22193: worker process 32010 exited on signal 11
    2016/09/13 05:30:22 [error] 32011#32011: [ngx_pagespeed 1.11.33.3-0] Unable to find SHM segment [1]globalstatistics to attach to.
    2016/09/13 05:30:22 [warn] 32011#32011: [ngx_pagespeed 1.11.33.3-0] Problem during shared memory setup; statistics functionality unavailable.
    ———————————-

  9. Cuong Tran 3 comment

    chinh file hocvps.com.conf
    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
    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à bị thế này

    502 Bad Gateway

    nginx

    cho hỏi mình sẽ xử ly the nao luân ơi .

    1. Việt Phương Moderator

      Thông báo 502 Bad Gateway chung chung quá. Mà domain name bạn để hocvps.com à hay bạn copy y nguyên đoạn code trên

  10. Thai 4 comment

    Ad cài xong pagespeed, gõ lệnh khởi động Nginx thì báo: Job for nginx.service failed because the control process exited with error code. See “systemctl status nginx.service” and “journalctl -xe” for details.?

    1. Việt Phương Moderator

      Không khởi động được Nginx. Vấn đề thường ở việc cấu hình lỗi file Nginx conf của domain chính. Bạn gõ # systemctl status nginx.service để biết kết quả hơn. Gửi mình kết quả đó và nội dung file Nginx conf của domain chính
      Paste qua đây cho gọn nhé: http://paste2.org/

  11. Nguyễn Văn Hải 2 comment

    Chào admin mình đã cài và đang chạy web bằng hocvps script https://hocvps.com/script/
    giờ làm thế nào để add ngx_pagespeed này mà không phải gỡ ra cài lại ? mong admin giúp đỡ

    1. Việt Phương Moderator

      Bạn chỉ cần rebuild lại nginx kèm pagespeed như hướng dẫn, không cần thiết phải gỡ cả hệ thống

      1. Ngô Quang Đạo 16 comment

        Liệu dùng 2 cái đồng thời có vấn đề gì không Việt Phương? Memcached là addon cache, còn cái này là addon để tối ưu source mà 😀

        1. Việt Phương Moderator

          Mình ít thấy dùng đồng thời, không chắc lắm về trường hợp này cũng như Pagespeed hiện tại ít dùng

Comment của bạn

Your email address will not be published. Required fields are marked *