Nginx

Ý nghĩa và cách sử dụng bộ lọc của Pagespeed

Nguyễn Nhân

Nguyễn Nhân

— 4 min read
Ý nghĩa và cách sử dụng bộ lọc của Pagespeed

Trang chủ pagespeed cho Nginx: http://ngxpagespeed.com/

Cách bật tắt:

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

Cách thêm hoặc bớt bộ lọc (filter):

# Khai báo một dòng
pagespeed EnableFilters filter_1,filter_2,...,module_2;
 
# Khai báo nhiều dòng
pagespeed EnableFilters filter_1,filter_2,...,module_2;
pagespeed EnableFilters filter_1,filter_2,...,module_2;

Danh sách các bộ lọc của Google Pagespeed rất nhiều nên ở đây mình sẽ liệt kê ra các bộ lọc 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ộ bộ lọc có ở trang chủ Pagespeed tại đây.

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

Những tính năng trên không phải cứ bật là chạy, nó còn tùy thuộc vào code của website nữa, có nhiều trường hợp minify javascript sẽ khiến javascript trên website của bạn bị lỗi, vì do javascript đó viết không tốt.

Tốt hơn hết, là bạn cứ thử bật/tắt từng bộ lọc để xem website có lỗi không nhé.

Read more