Mạng phân phối nội dung hình ảnh (CDN) rất hiệu quả trong việc tối ưu hoá hình ảnh cho web. Việc chuyển trang web của bạn sang CDN hình ảnh có thể giúp bạn tiết kiệm 40–80% kích thước tệp hình ảnh và trong hầu hết các trường hợp, CDN hình ảnh có thể tối ưu hoá hình ảnh của bạn tốt hơn so với tập lệnh tối ưu hoá hình ảnh tại thời điểm tạo bản dựng.
CDN hình ảnh là gì?
CDN hình ảnh chuyên về việc chuyển đổi, tối ưu hoá và phân phối hình ảnh. Bạn cũng có thể coi chúng là các API để truy cập và thao tác với hình ảnh được sử dụng trên trang web của bạn. Đối với hình ảnh được tải từ CDN hình ảnh, URL hình ảnh không chỉ cho biết hình ảnh nào sẽ tải mà còn cho biết các thông số như kích thước, định dạng và chất lượng. Điều này cho phép bạn tạo các biến thể của một hình ảnh cho nhiều trường hợp sử dụng.
CDN hình ảnh khác với tập lệnh tối ưu hoá hình ảnh tại thời điểm tạo bản dựng ở chỗ các CDN hình ảnh tạo phiên bản hình ảnh mới khi cần. Do đó, CDN thường phù hợp hơn với việc tạo hình ảnh được tuỳ chỉnh nhiều cho từng ứng dụng so với tập lệnh bản dựng.
Cách CDN hình ảnh sử dụng URL để cho biết các tuỳ chọn tối ưu hoá
URL hình ảnh mà CDN hình ảnh sử dụng truyền tải thông tin quan trọng về hình ảnh cũng như các phép biến đổi và tối ưu hoá cần áp dụng cho hình ảnh đó. Định dạng URL thay đổi tuỳ thuộc vào CDN hình ảnh mà bạn đang sử dụng, nhưng ở cấp cao, tất cả đều có các tính năng tương tự. Dưới đây là một số tính năng phổ biến nhất.
Điểm gốc
CDN hình ảnh có thể nằm trên miền của riêng bạn hoặc miền của CDN hình ảnh. Các CDN hình ảnh của bên thứ ba thường cung cấp lựa chọn sử dụng miền tuỳ chỉnh có tính phí. Việc sử dụng miền của riêng bạn sẽ giúp bạn dễ dàng chuyển đổi CDN hình ảnh sau này vì bạn không cần thay đổi URL.
Ví dụ trước sử dụng miền của CDN hình ảnh ("example-cdn.com") với một miền con được cá nhân hoá, thay vì miền tuỳ chỉnh.
Hình ảnh
Bạn thường có thể định cấu hình CDN hình ảnh để tự động truy xuất hình ảnh từ các vị trí hiện có khi cần. Khả năng này thường được thực hiện bằng cách đưa URL đầy đủ của hình ảnh hiện có vào URL của hình ảnh do CDN hình ảnh tạo. Ví dụ: bạn có thể thấy một URL có dạng như sau: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
URL này sẽ truy xuất và tối ưu hoá hình ảnh tồn tại tại https://flowers.com/daisy.jpg.
Định dạng tệp được yêu cầu (JPG trong ví dụ) có thể không giống với định dạng tệp hình ảnh được trả về (WebP trong ví dụ). Tiêu đề HTTP content-type cho trình duyệt biết URL ở định dạng nào để có thể xử lý URL đó một cách thích hợp. Điều này có thể gây nhầm lẫn nếu tệp được lưu vào ổ đĩa và được một chương trình khác sử dụng, trong đó chương trình này mong đợi định dạng khớp với đuôi tệp.
Một cách khác được hỗ trợ rộng rãi để tải hình ảnh lên CDN hình ảnh là gửi hình ảnh trong yêu cầu POST HTTP đến API của CDN hình ảnh.
Khoá bảo mật
Khoá bảo mật ngăn người khác tạo phiên bản mới của hình ảnh của bạn. Khi bật tính năng này, mỗi phiên bản hình ảnh mới đều yêu cầu một khoá bảo mật duy nhất.
Nếu có người cố gắng thay đổi các tham số của URL hình ảnh nhưng không cung cấp khoá bảo mật hợp lệ, thì họ sẽ không thể tạo phiên bản mới. CDN hình ảnh sẽ xử lý thông tin chi tiết về việc tạo và theo dõi khoá bảo mật cho bạn.
Phép biến đổi
CDN hình ảnh cung cấp hàng chục, và trong một số trường hợp là hàng trăm, phép biến đổi hình ảnh khác nhau. Các phép biến đổi này được chỉ định trong chuỗi URL và không có quy định hạn chế nào về việc sử dụng nhiều phép biến đổi cùng một lúc. Đối với hiệu suất web, các phép biến đổi hình ảnh quan trọng nhất là kích thước, mật độ pixel, định dạng và nén. Những phép biến đổi này là lý do khiến việc chuyển sang CDN hình ảnh thường làm cho các tệp hình ảnh của trang web nhỏ hơn.
Vì thường có một chế độ cài đặt khách quan tốt nhất cho các phép biến đổi hiệu suất, nên một số CDN hình ảnh hỗ trợ chế độ "tự động" cho các phép biến đổi này. Ví dụ: thay vì chỉ định hình ảnh được chuyển đổi sang định dạng WebP, bạn có thể để CDN tự động chọn và phân phát định dạng tối ưu. CDN hình ảnh có thể xác định cách tốt nhất để chuyển đổi hình ảnh bằng cách sử dụng các tín hiệu sau đây:
- Gợi ý cho ứng dụng (ví dụ: chiều rộng khung nhìn, DPR và chiều rộng hình ảnh)
- Tiêu đề
Save-Data - Tiêu đề yêu cầu User-Agent
- Network Information API
Ví dụ: CDN hình ảnh có thể phân phát AVIF cho trình duyệt Chrome, WebP cho trình duyệt Edge và JPEG cho trình duyệt rất cũ. Chế độ cài đặt Tự động phổ biến vì cho phép bạn tận dụng chuyên môn của CDN hình ảnh trong việc tối ưu hoá hình ảnh mà không cần thay đổi mã để áp dụng các công nghệ mới khi CDN hình ảnh bắt đầu hỗ trợ các công nghệ đó.
Các loại CDN hình ảnh
Có hai danh mục chính của CDN hình ảnh: tự quản lý và do bên thứ ba quản lý.
CDN hình ảnh tự quản lý
CDN tự quản lý có thể là lựa chọn phù hợp cho những trang web có nhân viên kỹ thuật tự tin duy trì cơ sở hạ tầng của riêng mình.
- Thumbor là CDN hình ảnh tự quản lý phổ biến nhất. Đây là một dịch vụ nguồn mở và miễn phí, nhưng có ít tính năng hơn so với hầu hết các CDN thương mại và tài liệu của dịch vụ này cũng có phần hạn chế. Các trang web sử dụng thumbor bao gồm Wikipedia, Square và 99designs. Hãy xem bài viết Cách cài đặt CDN hình ảnh Thumbor để biết hướng dẫn thiết lập.
- Tưởng tượng
- Imagor
CDN hình ảnh của bên thứ ba
CDN hình ảnh của bên thứ ba cung cấp CDN hình ảnh dưới dạng dịch vụ. Tương tự như cách các nhà cung cấp dịch vụ đám mây cung cấp máy chủ và cơ sở hạ tầng khác có tính phí, CDN hình ảnh cung cấp dịch vụ tối ưu hoá và phân phối hình ảnh có tính phí. Vì CDN hình ảnh của bên thứ ba duy trì công nghệ cơ bản, nên bạn thường có thể bắt đầu sử dụng một CDN khá nhanh, mặc dù việc di chuyển hoàn toàn cho một trang web lớn có thể mất nhiều thời gian hơn. CDN hình ảnh của bên thứ ba thường được định giá dựa trên các cấp sử dụng, trong đó hầu hết CDN hình ảnh đều cung cấp một cấp miễn phí hoặc bản dùng thử miễn phí để bạn dùng thử sản phẩm của họ.
Chọn CDN hình ảnh
Có nhiều lựa chọn tốt cho CDN hình ảnh. Một số có nhiều tính năng hơn các tính năng khác, nhưng bất kỳ tính năng nào trong số này cũng có thể giúp bạn tiết kiệm byte trên hình ảnh và do đó tải trang nhanh hơn. Ngoài bộ tính năng, bạn cũng cần cân nhắc các yếu tố khác khi chọn CDN hình ảnh, chẳng hạn như chi phí, dịch vụ hỗ trợ, tài liệu và khả năng dễ dàng thiết lập hoặc di chuyển.
Ảnh hưởng đến Thời gian hiển thị nội dung lớn nhất (LCP)
Hình ảnh là một phần quan trọng trong trải nghiệm người dùng trên nhiều trang web, vì vậy, hình ảnh là một yếu tố quan trọng trong Lượt vẽ có nội dung lớn nhất của trang web. Sau đây là một vài điều cần lưu ý nếu bạn quyết định sử dụng CDN hình ảnh:
- Hình ảnh được phân phát từ CDN có thể đến từ một máy chủ nhiều nguồn gốc, điều này có thể làm tăng thời gian thiết lập kết nối của trang web. Khi có thể, hãy cố gắng sử dụng một CDN hình ảnh được proxy thông qua nguồn gốc chính để bạn không thêm các nguồn gốc bổ sung cho trình duyệt kết nối. Cách này có tác dụng tương tự như việc tự lưu trữ hình ảnh trên nguồn gốc chính.
- Hãy cân nhắc sử dụng giá trị thuộc tính
fetchprioritylà"high"trên phần tử hình ảnh LCP để trình duyệt có thể bắt đầu tải hình ảnh đó sớm nhất có thể. - Nếu không thể phát hiện hình ảnh ngay trong HTML ban đầu, hãy cân nhắc sử dụng gợi ý
rel=preloadcho hình ảnh đề xuất LCP để trình duyệt có thể tải hình ảnh đó trước. - Nếu bạn không thể dùng proxy thông qua nguồn gốc và trình duyệt sẽ không biết hình ảnh nào sẽ tải cho đến khi tải trang, hãy thiết lập kết nối với CDN hình ảnh đa nguồn gốc càng sớm càng tốt để rút ngắn giai đoạn tải tài nguyên cho các hình ảnh đề xuất LCP tiềm năng.