Cách inline ảnh sử dụng Base64/SVG trong WordPress

bởi Nguyễn Đức Anh
nội tuyến ảnh trong WordPress

Một trong các mục tiêu chính của tôi trong việc tối ưu hóa tốc độ website là cải thiện First Content PaintFirst Meaningful Paint, làm cho nội dung thuộc màn hình đầu tiên hiển thị nhanh nhất có thể.

Lý tưởng nhất, trình duyệt nên có khả năng render và style nội dung thuộc màn hình đầu tiên (above fold content) với số lượng ít nhất các yêu cầu HTTP. Tạo critical CSS, trì hoàn CSS và JS rất có ích trong chuyện này.

Một trong các kỹ thuật tương tự mà tôi dùng để cải thiện first meaningful paint là inline (nội tuyến) ảnh base64 và SVG.

Ảnh Base64 là gì?

Base64 là kiểu mã hóa nhị-phân-thành-văn-bản (binary-to-text). Nói cách khác, bất cứ dữ liệu nào cũng được biểu diễn dưới dạng văn bản. Trong trường hợp của chúng ta, ảnh được biểu hiện dưới dạng văn bản. Bất kỳ ảnh nào cũng có thể được chuyển thành dạng base64.

Một ảnh thông thường trong HTML có dạng như thế này:

<img src="https://ten-mien-cua-ban.com/logo.png"/>

Một ảnh base64 trong HTML (được nội tuyến):

<img src="data:image/png;base64,...[nội dung]..."/>

base64-image.de là công cụ rất hay để chuyển đổi ảnh sang định dạng base64.

Vậy ảnh SVG là gì?

SVG (viết tắt từ cụm tiếng Anh: Scalable Vector Graphics) là một ảnh với kiểu định dạng khác được mã hóa dưới dạng XML. Đây là định dạng ảnh lý tưởng với ảnh vector. Thường thì ảnh logo, icon hay có dạng vector.

Các đoạn mã trong SVG được dùng để vẽ các đường thẳng, đường viền, đường cong, vân vân. Do vậy, kích cỡ của SVG thường nhỏ hơn nhiều so với JPG/PNG/GIF.

Một ảnh SVG trong HTML:

<img src="logo.svg"/>

Một ảnh SVG được nội tuyến trong HTML:

<svg xmlns="http://www.w3.org/2000/svg">...[nội dung]...</svg>

Inline ảnh có khả năng gây ra vấn đề gì?

Bạn cần cẩn trọng khi lựa chọn ảnh đưa vào trang dưới dạng nội tuyến (inlined).

Dưới đây là một số vấn đề với ảnh nội tuyến:

  • Chuyển ảnh sang dạng base64 làm ảnh gia tăng kích cỡ lên khoảng 30%
  • Làm tăng kích cỡ trang HTML (kích cỡ quá lớn sẽ ảnh hưởng đến TTFB)
  • Ảnh không thể phân phối qua CDN

Mặc dù có những nhược điểm như vậy, trong một số tình huống, nội tuyến ảnh là điều bạn nên cân nhắc tiến hành.

Khi nào bạn nên nội tuyến ảnh?

Hình bên dưới cho thấy các vị trí mà tôi thực hiện nội tuyến ảnh:

các vị trí được nội tuyến ảnh trên trang của tác giả

Có ba ảnh được tôi nội tuyến ở đây:

  • Logo – SVG, 2.5 KB
  • Icon tìm kiếm – SVG, 0.2 KB
  • Ảnh nhóm FB – PNG, 4.5 KB. Sau khi chuyển sang dạng base64 là 6 KB

Trang HTML sau khi nội tuyến tăng từ 19KB lên 25KB (tôi phải cảm ơn kiểu nén brotli).

Bạn nên giữ kích cỡ trang HTML dưới 100 KB. Vượt con số đó sẽ ảnh hưởng một chút đến TTFB.

Logo, icon và các ảnh khác nằm trong màn hình đầu tiên là vị trí lý tưởng để nội tuyến ảnh.

Nội tuyến ảnh trong WordPress

Dưới đây là các công cụ hỗ trợ cho công việc nội tuyến:

Ảnh SVG không cần chuyển sang dạng base64 vì bản thân nó cũng là dạng văn bản rồi.

Khi bạn chỉnh sửa URL của ảnh, bạn có thể paste trực tiếp văn bản base64 vào:

paste trực tiếp văn bản base64 vào

Tuy nhiên, một số ảnh/icon được nhúng vào theme/plugin tương đối phức tạp, trong trường hợp như vậy, bạn cần tìm đúng file, đúng vị trí để đưa mã vào.

Mẹo tôi thường làm là: tìm tên class của ảnh tương ứng (hoặc phần tử cha) và tìm kiếm file trong theme/plugin.

Plugin String locator rất có ích trong việc này. Nó sẽ tìm kiếm chuỗi văn bản bên trong file và từ đó bạn có thể chỉnh sửa nó.

tìm kiếm chuỗi văn bản bằng String Locator

chỉnh sửa mã

Kết luận

Nội tuyến ảnh là việc có thể có chút khó khăn, khi mã không dễ chèn trong theme/plugin và một số nhược điểm tôi đã thảo luận bên trên. Nhưng nếu bạn chọn đúng ảnh và làm chính xác, nó sẽ đem lại kết quả tốt.

Bạn hãy thử xem thế nào.

(Dịch từ bài viết: How to & When to Inline Images using Base64/SVG in WordPress, tác giả: Gijo Varghese, website: WP Speed Matters)

0 bình luận

Khu vực bình luận

avatar