Tăng tốc website với Google Pagespeed và Nginx

Posted on by

Những tính năng của PageSpeed

PageSpeed á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 và 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.

Với 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;
    }

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

Vớ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

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.

Leave a Reply