Cách inline ảnh sử dụng Base64/SVG 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 Contentful Paint và First 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, cộng với trì hoãn tải JavaScript và CSS 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.

---

#1. Ả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 biểu diễn được 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í dụ thực tế, chuyển logo trang Kiến càng sang dạng base64:

---

#2. Vậy ảnh SVG là gì?

SVG (viết tắt từ cụm tiếng Anh: Scalable Vector Graphics / Đồ họa Vector có thể mở rộng) là ả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>

---

#3. 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.

---

#4. 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ó ba ảnh được tôi nội tuyến ở đây:

• Logo – SVG, kích cỡ 2,5 KB;
• Icon tìm kiếm – SVG, kích cỡ 0,2 KB;
• Ảnh nhóm FB – PNG, kích cỡ 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.

---

#5. 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:

• Chuyển ảnh sang dạng base64 – base64-image.de
• Thay đổi kích cỡ ảnh – resizeimage.net
• Nén ảnh – compressor.io
• Giảm thiểu ảnh SVG – jakearchibald.github.io/svgomg

Ả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:

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ó.

---

#6. 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 & 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 nhé.

(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)