WebP: định dạng nén cho trang web

 (purplesyringa.moe)
1 điểm bởi GN⁺ 2024-09-08 | 1 bình luận | Chia sẻ qua WhatsApp

WebP: định dạng nén cho trang web

Trở ngại

  • Tối giản HTML để tăng khả năng truy cập của website và giảm thời gian tải trang
  • GitHub Pages không hỗ trợ nén Brotli
  • gzip được dùng mặc định, nhưng Brotli cho tỷ lệ nén tốt hơn

Ý tưởng đơn giản

  • Vì GitHub Pages không hỗ trợ Brotli, tác giả cân nhắc cách giải nén ở phía client bằng JavaScript
  • Có thể giải nén Brotli bằng brotli-dec-wasm và tiny-brotli-dec-wasm

Lần thử thứ hai

  • Compression Streams API hỗ trợ định dạng gzip và DEFLATE, nhưng không hỗ trợ Brotli
  • Có thể dùng thư viện Zopfli để nén gzip hiệu quả hơn, nhưng vẫn kém Brotli

Phá luật

  • Cân nhắc cách nén dữ liệu bằng cách sử dụng nén hình ảnh
  • PNG và GIF dùng thuật toán DEFLATE, nhưng WebP cho hiệu năng tốt hơn

Ưu điểm của WebP

  • WebP dùng phép biến đổi dự đoán tương tự PNG, nhưng thay vì DEFLATE thì sử dụng phương pháp do Google phát triển
  • Dùng nhiều cây Huffman khác nhau để nén hiệu quả hơn
  • Dùng bộ nhớ đệm màu để lưu trữ hiệu quả các màu lặp lại

Thử nghiệm

  • Thử nén tệp HTML bằng crate webp
  • Kết quả ban đầu cho thấy kích thước nhỏ hơn gzip 2 lần

Tối ưu bổ sung

  • Điều chỉnh kích thước ảnh để đạt hiệu năng nén tốt hơn
  • Thử nhiều phương pháp nén khác nhau để tìm kết quả tối ưu

Benchmark

  • So sánh gzip, bzip2, Brotli và WebP trên nhiều định dạng tệp khác nhau
  • Trong đa số trường hợp, WebP cho hiệu năng tốt hơn gzip
  • Dù kém Brotli, nó vẫn mang lại cải thiện đáng kể

Giải mã bằng JavaScript

  • Giải thích cách giải mã WebP bằng Canvas API
  • Dùng WebGL để vượt qua kỹ thuật chống fingerprinting

Tinh chỉnh cuối cùng

  • Giữ phần style và phần đầu trang ở dạng gzip để giảm hiện tượng nhấp nháy khi tải trang
  • Đề xuất một giải pháp tạm thời để giữ nguyên vị trí cuộn

Nhúng

  • Nhúng WebP trực tiếp vào JavaScript để giảm độ trễ
  • Dùng base64 data URL để tối thiểu hóa kích thước

Ví dụ

  • Cung cấp ví dụ dùng WebP để nén trong một trang web thực tế
  • Xác nhận rằng kích thước trang giảm sau khi nén

Tóm tắt của GN⁺

  • Bài viết này khám phá nhiều cách để cải thiện hiệu năng nén của trang web
  • Định dạng WebP cho hiệu năng tốt hơn gzip nhưng kém Brotli
  • Giải thích cách giải mã WebP ở phía client bằng JavaScript và WebGL
  • Đề xuất nhiều kỹ thuật tối ưu để giảm thời gian tải trang
  • Các dự án khác cung cấp chức năng tương tự gồm có Brotli và Zopfli

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-09-08
Ý kiến trên Hacker News

  • Kích thước của một bài viết dài đã giảm từ 92 KiB xuống 37 KiB, nhưng mức tăng thời gian tải thực tế chỉ là 0,001%

    • Thời gian giải nén có thể khiến trải nghiệm người dùng tệ hơn

  • Không thể hiểu vì sao readPixels lại không chịu cơ chế chống lấy dấu vân tay

    • Có một kỹ thuật giữ nguyên phần tạo kiểu ở đầu trang và chỉ nén nội dung bên dưới viewport bằng WebP
    • Nếu tắt WebGL trong LibreWolf thì trang sẽ không bị cắt

  • zstd đã được đưa vào Chrome và cũng nên được áp dụng cho Safari

  • Việc gỡ bỏ Google Fonts có thể cải thiện thời gian tải trang

    • Vì được tải từ máy chủ từ xa nên cần thêm các bước bắt tay kết nối

  • Kiểm tra mã nguồn thì thấy phần khai báo doctype không có khoảng trắng

    • Hiện tại đang là <!doctypehtml>, nhưng cần sửa thành <!doctype html>

  • Có thể đóng gói trang HTML thành một tệp ZIP tự giải nén

    • Có thể tạo ra một tệp tương thích với HTML, ZIP và PNG, bao gồm cả ảnh PNG
    • Ví dụ, có thể hiển thị ảnh PNG từ trong một trang HTML

  • Trang bị vỡ bố cục trên trình duyệt của Sailfish OS

    • Có một khoảng trắng dài sau các đoạn văn
    • Overhead của nén HTML bằng gzip và brotli là không đáng kể nếu so với lượng JS/hình ảnh/video mà các website hiện nay sử dụng

  • Dù Brotli có một từ điển (dictionary) lớn, hiệu năng của nó vẫn tương tự gzip

    • Tò mò không biết thuật toán nén của nó kém hơn, hay là tầm quan trọng của từ điển thực ra nhỏ hơn tưởng tượng

  • Lý do Brotli không được dùng trong CompressionStream API là vì nó làm kích thước trình duyệt tăng lên đáng kể

    • Từ điển nén lớn hơn có thể là vì nó chứa các biểu diễn hiệu quả nhất đã được tính toán sẵn