4

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

pagespeed

 

Trong bài viết này, tôi sẽ mô tả cách làm thế nào tối ưu 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ó nhiều cách khác nhau để cải thiện hiệu suất hơn nữa cho Nginx .

Một trong số đó 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 gian tải trang và giảm băng thông sử 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à sử dụng module ngx_pagespeed cho Nginx.

Các 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. 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.

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:

Trên Fedora, CentOS hay RHEL:

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_pagespeedrelease1.9.32.6beta/. 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.

Tải về source code mới nhất từ http://nginx.org/, và giải nén ra:

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:

Bạn có thể kiểm tra xem ngx_pagespeed đã được thêm vào nginx hay chưa:

Kết quả hiển thị

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:

Đế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.

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

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

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

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.


Cuối cùng, start/restart Nginx

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 😀

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

4 Comments

  1. ./configure \
    –user=minhtd \
    –prefix=/home/minhtd/application/nginx \
    –error-log-path=/home/minhtd/application/nginx/log/error.log \
    –http-log-path=/home/minhtd/application/nginx/log/access.log \
    –with-http_gzip_static_module \
    –with-http_ssl_module \
    –with-pcre=/home/minhtd/source/pcre-8.37 \
    –with-file-aio \
    –with-http_realip_module \
    –without-http_scgi_module \
    –without-http_uwsgi_module \
    –add-module=/home/minhtd/setup/ngx_pagespeed-1.9.32.6-beta

    make
    make install
    ___________________________________________________________________
    Tại bước cấu hình pagespeed khi cd vào nginx rồi chạy lệnh configure trên thì gặp lỗi
    adding module in /home/minhtd/setup/ngx_pagespeed-1.9.32.6-beta
    ./configure: error: no /home/minhtd/setup/ngx_pagespeed-1.9.32.6-beta/config was found
    Cái này mình khắc phục làm sao vậy anh ?
    – Với lại tại phần cài đặt pagespeed :
    tar -xzvf ${NPS_VERSION}.tar.gz # extracts to psol/ thì ta thay bằng
    tar -xzvf ${NPS_VERSION}.tar.gz psol/ đúng ko anh ?

    • Bạn thử kiểm tra thử có quyền thao tác trên thư mục /setup ko nhé. hoặc chạy luôn lệnh `chown -R minhtd:minhtd setup” luôn cho chắc.

  2. em đã thay đường dẫn
    –add-module=/home/minhtd/setup/ngx_pagespeed-1.9.32.6-beta thành
    –add-module=/home/minhtd/source/ngx_pagespeed-1.9.32.6-beta và ko thấy báo lỗi nữa .
    Đến bước kiểm tra phiên bản đã được cài vào chưa : sbin/nginx -V
    thì nhận lỗi :
    -bash: nginx: command not found

    • Chào Minh,
      khi chạy sbin/nginx -V thì ko chạy được là phải rồi. Hoặc là Minh dùng full path /home/minhtd/application/nginx/sbin/nginx -V hoặc là cd vào /home/minhtd/application/nginx/ thì chạy ./sbin/nginx -V. Chú ý là có dấu chấm “.” tại đường dẫn thực thi nginx nha. Ko riêng gì nginx mà bất cứ file execute nào muốn chạy đều phải có dấm chấm ở đầu vậy á!

Leave a Reply

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