Cách Medium tối ưu tốc độ load hình ảnh

1141

27-12-2025

Tốc độ tải trang không còn là yếu tố “nên có”, mà đã trở thành tiêu chuẩn bắt buộc trong thiết kế website hiện đại. Với những nền tảng có mật độ hình ảnh cao, hình ảnh chính là nguyên nhân lớn nhất khiến website chậm, ảnh hưởng trực tiếp đến trải nghiệm người dùng, Core Web Vitals và hiệu quả SEO.

Trong bài viết này, Bizfly Cloud sẽ phân tích cách Medium tối ưu tốc độ load hình ảnh, từ kỹ thuật Progressive Image Loading cho đến những biến thể nâng cao, đồng thời rút ra bài học triển khai phù hợp cho website.

Vì sao tối ưu tốc độ load hình ảnh?

Trong bối cảnh Google ngày càng ưu tiên trải nghiệm người dùng thực (Real User Experience), hình ảnh tác động trực tiếp đến ba chỉ số cốt lõi:

LCP (Largest Contentful Paint): Ảnh hero hoặc ảnh nội dung chính thường là LCP element
CLS (Cumulative Layout Shift): Ảnh không giữ chỗ gây “nhảy layout”
INP (Interaction to Next Paint): Ảnh nặng làm tăng độ trễ tương tác

Thực tế đo lường cho thấy:

Hình ảnh thường chiếm 60–85% tổng dung lượng trang
Phần lớn website vẫn tải ảnh “nguyên khối”, không phân giai đoạn
Người dùng rời trang nếu chờ quá 2–3 giây

Đây chính là lý do Medium được xem như một case study kinh điển về tối ưu image loading.

Medium tiếp cận bài toán tốc độ hình ảnh như thế nào?

Để xem hình ảnh trên Medium được load thế nào, hãy cùng xem qua demo này:

https://www.youtube.com/watch?v=YJsCyLb_IJ

Nếu bạn muốn tự test, hãy mở Medium'post này (https://medium.com/backchannel/exclusive-why-apple-is-still-sweating-the-details-on-imac-531a95e50c91) trong browser, disable cache rồi xem hiệu ứng.

Đây là những gì đã xảy ra:

Render div chứa ảnh sẽ hiển thị

Medium sử dụng 1 thẻ <div/> với padding-bottom set theo tỷ lệ %, tương ứng với tỉ lệ ratio của ảnh. Điều này cũng được đề cập đến trong intrinsic placeholders (https://daverupert.com/2015/12/intrinsic-placeholders-with-picture/).

Load 1 phiên bản thu nhỏ của ảnh

Lúc này, nó request 1 ảnh JPEG thu nhỏ với chất lượng rất thấp (cỡ 20%). Markup cho ảnh thu nhỏ này được trả về trong initial HTML với 1 thẻ, nên trình duyệt bắt đầu fetch chúng vào.

Một khi ảnh đã được load, nó sẽ đẩy vào <canvas/>

Sau đó, dữ liệu sẽ được lấy và truyền vào function blur(). Bạn có thể thấy, trong main-base.bundle JS file. Đồng thời, ảnh chính đã được requested.

Một khi ảnh chính đã được load, nó hiển thị ra và canvas được ẩn đi

Toàn bộ quá trình này được diễn ra một cách trơn tru nhờ vào CSS animation.

2. Markup

Đây là cái nhìn toàn cảnh về markup cho image:

Cách Medium tối ưu tốc độ load hình ảnh - Ảnh 1.

Một ví dụ cụ thể:

<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">

<div class="aspectRatioPlaceholder is-locked">

<div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"><div/>

<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">

<img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">

<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>

<noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"></noscript>

</div>

</figure>

Chú ý là chất lượng ảnh request còn phụ thuộc vào thiết bị.

>>> Nếu bạn quan tâm tới dịch vụ tăng tốc website Bizfly CDN thì có thể tham khảo tại: https://bizflycloud.vn/cdn

3. Tái hiện lại hiệu ứng

Trong CodePen bên dưới, tác giả đã implemented 1 hiệu ứng tương tự, tuy nhiên thay thế canvas bằng cách sử dụng CSS filters để làm mờ.

Hình ảnh gốc ban đầu chưa làm mờ

Các ảnh loading dưới thể hiện cách load ảnh khi disable cache:

Cách Medium tối ưu tốc độ load hình ảnh - Ảnh 3.

Thực hiện quá trình làm mờ ảnh khi disable cache

4. Vậy có đáng để thực hiện việc này không?

Rõ ràng có khá nhiều việc phải làm để render ảnh theo cách này. Và tất nhiên nó có thể gây nản chí, nhưng hiệu quả nó mang lại thì quá tuyệt. Việc hiểu và nắm rõ được cách load image có khá nhiều lợi thế:

- Lazy loading

Sử dụng JS cho việc tạo request cho phép kiểm soát được image nào đã requested. Khi tất cả ảnh thu nhỏ đã được request, ảnh lớn chỉ được request khi chúng được nằm trong viewport.

- Placeholder tốt hơn

Ảnh thumbnails rất nhỏ, cỡ 2kB, kết hợp với hiệu ứng làm mờ sẽ tốt hơn 1 màu solid, mà ko ảnh hưởng gì đến payload.

- Kích thước hình ảnh phù hợp

Medium chuẩn bị rất nhiều ảnh có size khác nhau phụ thuộc vào từng device request lên, nên tải trọng sẽ được tối ưu hơn qua đó tăng tốc độ upload.

5. Các biến thể

Inlining image data

Thay vì tạo request cho ảnh thumbnails, ta có thể inline chúng bằng cách sử dụng data URIs. Việc này làm tăng kích thước HTML, nhưng giúp đẩy nhanh quá trình render placeholder, ngay khi markup được tải xuống.

Hiệu ứng làm mờ

Mặc định thì khi trình duyệt render 1 ảnh nhỏ theo kiểu scaled up, nó sẽ tạo ra 1 hiệu ứng mờ để làm mịn dần các góc cạnh của ảnh đó. Hiệu ứng này có thể tắt/mở được. Cả Chrome, Safari, Firefox đều có hiệu ứng này, tuy nhiên Chrome có hiệu ứng làm mịn tốt hơn cả. Đây là demo, bạn nên mở to màn hình lên xem cho rõ:

Ảnh này nó chỉ có 27px và chất lượng rất thấp, nhưng được phóng to lên khá mịn

Hiệu ứng này cũng có thể đạt được khi sử dụng CSS Filter Effects (có support IE). Lợi thế của kỹ thuật này là bạn có thể dể dàng tinh chỉnh độ mờ của ảnh bao nhiêu tùy thích, và mọi thứ đã có CSS lo. 1 option khác là sử dụng SVG filter, được đề cập đến ở đây.

Một cách khác để cải thiện placeholder: Google Images Search

Một kỹ thuật đơn giản được dùng bởi Google Search khi search ảnh trên điện thoại:

Google image search

Google Image Search hiển thị 1 background solid làm placeholder (ảnh bên trái là khi đang load, ảnh bên phải là khi đã load xong).

Họ lấy 1 mã màu và sử dụng solid colour background. Điều này làm cho user cảm thấy ảnh được load nhanh hơn :man_detective:

Thêm 1 kỹ thuật nâng cao nữa: Facebook's 200 bytes

Đầu năm nay Facebook đã post bài: "The technology behind preview photos", một chủ đề rất thú vị về việc sử dụng 1 ảnh 42x42 px làm ảnh previews với JPEG headers. Bạn có thể tham khảo thêm nếu muốn.

Cách Medium tối ưu tốc độ load hình ảnh - Ảnh 5.

LQIP: Low Quality Image Placeholders

Thay vì chờ ảnh cuối cùng đc load, ta có thể dùng ảnh nén trước, xong rồi switch qua ảnh to kia sau. Đây có 1 bài viết về chủ đề này: Low Quality Image Placeholders. Ý tưởng này cũng giống như của Medium, nhưng dùng ảnh nén kích thước cao hơn.