Hướng dẫn cài đặt và cấu hình Pagespeed cho server nginx

Thảo luận trong 'Website' bắt đầu bởi Bill Gates, 20 Tháng tư 2018.

  1. Bill Gates

    Bài viết:
    4
    • Link ảnh hỏng, cần bổ sung lại, up ảnh qua công cụ diễn đàn để hạn chế link hỏng
    PageSpeed là một công cụ do Google phát triển nhằm giúp các webmaster có thể dễ dàng tối ưu hóa tốc độ tải trang web của mình cũng như chấm điểm hệ thống website của bạn dựa trên tốc độ đo được. Một trang web chất lượng và được tối ưu hóa tốt sẽ có vai trò đặc biệt quan trọng trong việc xây dựng thương hiệu cũng như tăng khả năng tiếp cận khách hàng mục tiêu, giúp nâng cao trải nghiệm của người dùng. Pagespeed Insights chính là công cụ hữu hiệu trong việc hỗ trợ người dùng phân tích và đánh giá trang web, từ đó đưa ra những đề xuất chỉnh sửa sao cho hoàn thiện nhất.

    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.

    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.

    Mã:
    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ừ nginx news, và giải nén ra:

    Mã:
    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:

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

    Mã:
    sbin/nginx -V
    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:

    Mã:
    vi conf/nginx.conf
    Trình biên tập vi sẽ mở file như bên dưới:

    Mã:
    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 .

    Mã:
    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.

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

    Mã:
    cd /home
    mkdir -p temp/ngx_pagespeed_cache
    Cuối cùng, start/restart Nginx

    Mã:
    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.
     
    Aki Re, Bảo Ngọc ❤️Mem thích bài này.
    Last edited by a moderator: 13 Tháng chín 2021
  2. Đăng ký Binance
Trả lời qua Facebook
Đang tải...