Giới ThiệuFanpages Support
Login

Ý nghĩa các modules trong Google Pagespeed và cách bật/tắt

16 Tháng Ba, 2015  Trong Mục - Linux Webserver



data vpn
Bài này thuộc phần 5 của 5 phần trong serie Tăng tốc với Google Pagespeed

Trong các bài hướng dẫn cài đặt Google Pagespeed của mình, nếu bạn đã làm theo thì hiện tại nó đã hoạt động tốt với một số chức năng chính. Thế nhưng thực tế, Google Pagespeed có rất nhiều chức năng khác nhau (gọi là Module) nên trong bài này mình sẽ giải thích chi tiết ý nghĩa của từng module và cách bật/tắt các module trong thiết lập Google Pagespeed.

Mục lục nội dung

Thay đổi cấu hình PageSpeed thế nào?

CentOS:

Ubuntu:

Bật/Tắt Google Pagespeed

Thêm một tham số vào HTTP Header của website

Rewrite Level

Thêm module vào Google Pagespeed

Danh sách các tên module của Google Pagespeed và ý nghĩa

Lời kết

Xem tiếp bài trong serie

Thay đổi cấu hình PageSpeed thế nào?

Tất cả những đoạn cấu hình mình đề cập tới bài này đều sẽ được lưu trong file pagespeed.conf, cụ thể:

CentOS:

Đối với Apache, các thiết lập trong bài bạn phải thêm vào file pagespeed.conf, nhưng sẽ nằm bên trong cặp thẻ <IfModule pagespeed_module>...</IfModule>

Còn NGINX thì cứ nhét vào file pagespeed.conf, chỗ nào cũng được miễn sao bạn dễ dàng quản lý.

Ubuntu:

Nếu bạn dùng Ubuntu mà làm theo hướng dẫn của mình thì sửa file /etc/nginx/common/pagespeed.conf. Riêng phần thiết lập bật/tắt Google Pagespeed ở Ubuntu sẽ nằm ở /etc/nginx/conf.d/pagespeed.conf.

Và sau khi thay đổi nội dung các file cấu hình, bạn phải khởi động lại Apache hoặc NGINX.

Bật/Tắt Google Pagespeed

Nếu bạn muốn tắt chức năng Google Pagespeed thì chỉ cần đưa giá trị của tham số sau về off thay vì on.

Apache:

 # Bật ModPagespeed on  # Tắt ModPagespeed off

NGINX:

 # Bật pagespeed on;
# Tắt pagespeed off;

Thêm một tham số vào HTTP Header của website

Nếu bạn muốn thêm một tham số nào đó vào website khi sử dụng Google Pagespeed để tiện lợi trong việc kiểm tra thì có thể thêm dễ dàng bằng đoạn sau:

Apache:

 ModPagespeedXHeaderValue "Powered By mod_pagespeed"

NGINX:

 pagespeed XHeaderValue "Powered By ngx_pagespeed";

Kết quả:

 Cache-Control:max-age=0, no-cache Connection:close Content-Length:7215 Content-Type:text/html; charset=UTF-8 Date:Sat, 14 Mar 2015 13:00:50 GMT Server:Apache/2.2.15 (CentOS) Vary:Accept-Encoding X-Mod-Pagespeed:Powered By mod_pagespeed X-Pingback:https://cddos.net/xmlrpc.php X-Powered-By:PHP/5.4.38

Rewrite Level

Thiết lập Rewrite Level của Google Pagespeed nghĩa là cấu hình kiểu ghi lại cache của các dữ liệu mà nó được nén. Sở dĩ bạn cần lưu ý điểm này là bởi vì có một số modules (hay còn gọi là Filters), chỉ hoạt động với một số Rewrite Level nhất định.

Hiện tại Google Pagespeed hỗ trợ 3 kiểu Rewrite Level như sau:

  • PassThrough: Tắt Rewrite Level.
  • CoreFilters (mặc định): Bạn nên sử dụng cái này để hạn chế xảy ra lỗi.
  • OptimizeForBandwidth: Kiểu rewrite nhằm tiết kiệm băng thông cho website

Để đổi kiểu Rewrite Level, bạn có thể sửa/chèn đoạn này:

Apache:

ModPagespeedRewriteLevel PassThrough

NGINX:

pagespeed RewriteLevel PassThrough;

Thêm module vào Google Pagespeed

Thêm module vào Google Pagespeed rất dễ dàng, bạn chỉ cần viết thêm một dòng bật module và tên của module cần bật là xong. Bạn có thể khai báo các module cần sử dụng trên một dòng hoặc nhiều dòng tùy thích. Kiểu thế này:

Apache:

 # Khai báo một dòng ModPagespeedEnableFilters module_1,module_2,...module_n  # Khai báo nhiều dòng ModPagespeedEnableFilters module_1,module_2,...module_n ModPagespeedEnableFilters module_3,module_4,...module_n

NGINX:

 # Khai báo một dòng pagespeed EnableFilters module_1,module_2,...,module_n;
# Khai báo nhiều dòng pagespeed EnableFilters module_1,module_2,...,module_n; pagespeed EnableFilters module_3,module_4,...,module_n;

Tại sao lại sử dụng khai báo nhiều dòng? Đơn giản là bạn có thể phân ra, ví dụ dòng thì thêm các module tối ưu ảnh, dòng thì thêm module tối ưu CSS/Javascript, dòng thì tối ưu protocol,…

Danh sách các tên module của Google Pagespeed và ý nghĩa

Danh sách các modules của Google Pagespeed rất nhiều nên ở đây mình sẽ liệt kê ra các modules thường dùng, dễ hiểu nhất để các bạn tham khảo. Ngoài ra các bạn nên tham khảo qua danh sách toàn bộ modules có trong Google Pagespeed tại đây.

  • add_head
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Tự thêm thẻ <head> vào website nếu chưa có.
  • combine_heads
    • CoreFilters: No
    • OptimizeForBandwidth
      : No
    • Tự gộp nếu website có nhiều thẻ <head> được tìm thấy trong tài liệu.
  • inline_import_to_link
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Tự tạo một tập tin CSS và chèn vào thẻ <link> nếu website chứa thẻ <style> và trong đó có sử dụng @import.
  • outline_css
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Gộp các đoạn CSS được chèn trực tiếp vào website ở thẻ <style> vào một file CSS đệm và chèn vào thẻ <link>.
  • outline_javascript
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Gộp các đoạn Javascript được chèn trực tiếp vào website ở thẻ <script> vào một file JS đệm và chèn vào thẻ <link>.
  • move_css_above_scripts
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự động đưa toàn bộ CSS của website lên trên các đoạn Javascript, hay nói cách khác là ép website tải CSS trước khi tải Javascript.
  • combine_css
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Tự nén nhiều file CSS vào trong một file CSS chung để giảm số lượng request trong website.
  • rewrite_css
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Rewrite lại CSS – việc rewrite này sẽ tối ưu CSS bằng cách tự bỏ các đoạn comment, xóa khoảng trắng, lưu cache cho các file ảnh có trong CSS,…
  • rewrite_style_attributes
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Kích hoạt rewrite cho các đoạn CSS nằm trong một thẻ nào được được khai báo bằng tham số style=”…”.
  • flatten_css_imports
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Tách nội dung của một file CSS được chèn vào bằng thẻ @import vào thẻ <style>.
  • prioritize_critical_css
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự động tách các thành phần CSS quan trọng trong website và đưa lên đầu website để nó tải trước.
  • make_google_analytics_async
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự động chuyển đoạn mã theo dõi của Google Analytics về kỹ thuật tải không đồng bộ (async). Tức là chỉ tải sau khi website tải xong CSS.
  • rewrite_javascript
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Rewrite lại Javascript – việc rewrite sẽ giúp nén file .js lại bằng cách bỏ comment, bỏ khoảng trắng.
  • rewrite_javascript_external
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Cho phép rewrite các file CSS nằm bên ngoài máy chủ.
  • rewrite_javascript_inline
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Cho phép rewrite các đoạn CSS được nhúng theo kiểu inline trong website, tức là được chèn vào thẻ <script>.
  • combine_javascript
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Gộp nhiều file .js thành một file .js chung để giảm thời gian tải.
  • canonicalize_javascript_libraries
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự động sử dụng các thư viện trên CDN của Google nếu có. Ví dụ website bạn đang sử dụng file jquery.js tự host thì nó sẽ tự chuyển sang file jquery.js trên CDN của Google.
  • inline_css
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Tự chuyển nội dung file CSS trong website ra ngoài tài liệu và chèn vào thẻ <style> trong website.
  • inline_google_font_css
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự động chuyển các thẻ chèn Google Font vào website thành định dạng font cố định .woff.
  • inline_javascript
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Tự chuyển nội dung Javascript trong các file .js và chèn trực tiếp vào tài liệu bằng thẻ <script>.
  • local_storage_cache
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự lưu nội dung của website như một bản bộ nhớ đệm là tiến hành load ra ở lần truy cập sau.
  • insert_ga
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự thêm mã nhúng Google Analytics vào mỗi trang của website.
  • rewrite_images
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Tối ưu lại hình thành bằng cách rewrite lại đường dẫn, nén ảnh về định dạng webp, giảm dung lượng ảnh và thêm thời hạn cache cho ảnh.
  • convert_jpeg_to_progressive
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Tự động chuyển tất cả hình ảnh định dạng JPEG sang định dạng nén.
  • convert_png_to_jpeg
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Chuyển tất cả hình ảnh định dạng PNG sang JPEG.
  • convert_jpeg_to_webp
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Chuyển tất cả hình ảnh từ định dạng JPEG sang Webp.
  • insert_image_dimensions
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Tự thêm tham số width và height vào thẻ <img>.
  • inline_images
    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Chuyển các hình ảnh cỡ nhỏ về định dạng base64.
  • co
    nvert_gif_to_png

    • CoreFilters: Yes
    • OptimizeForBandwidth: Yes
    • Chuyển đổi hình ảnh định dạng GIF về PNG.
  • resize_images
    • CoreFilters: Yes
    • OptimizeForBandwidth: No
    • Thay đổi kích thước hình ảnh.
  • resize_mobile_images
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Thay đổi kích thước hình ảnh nhưng chỉ có hiệu lực khi truy cập bằng các trình duyệt trên điện thoại di động.
  • remove_comments
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Xóa các đoạn comment trong mã nguồn HTML của website.
  • collapse_whitespace
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Xóa các khoảng trắng bên trong mã nguồn HTML của website.
  • sprite_images
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Tự động cắt nhỏ hình ảnh background ra và ráp vào mã nguồn HTML bằng CSS để giảm thời gian tải bằng cách tải luân phiên từng mảnh trong ảnh đã được cắt, kỹ thuật này gọi là Sprite Image.
  • defer_javascript
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Thiết lập website chỉ tải Javascript sau khi các thành phần trong website đã tải xong.
  • lazyload_images
    • CoreFilters: No
    • OptimizeForBandwidth: No
    • Thêm hiệu ứng LazyLoad cho toàn bộ ảnh trong website (kỹ thuật chỉ load ảnh khi kéo thanh cuộn website xuống tới thành phần chứa ảnh).

Lời kết

Nhìn qua các modules trong Google Pagespeed thì cái nào cũng có lợi cho website, nhưng việc sử dụng quá nhiều module sẽ giúp cho máy chủ của bạn sẽ cần thêm nhiều RAM hơn để xử lý, hao ổ cứng (lưu các file cache của nó) nên hãy chọn ra các modules mà bạn thật sự cần dùng để sử dụng thôi nhé.

Xem tiếp bài trong serie

Phần trước: Xem thống kê Google Pagespeed với pagespeed_admin




data vpn

Leave your comment