Sau bài viết thiết kế web với chuẩn hình ảnh mới nhất chúng ta trở lại với phần 2.

Thiết kế website với chuẩn WEBP và CDN

Đầu tiên mình sẽ giải thích một tí về chuẩn HTTP2. Các bạn có thể google chi tiết về các điểm tối ưu ở HTTP2 nhưng mình chỉ đưa ra vài điểm quan trọng:

• Tốc độ nhanh hơn HTTP 10 lần
• Khả năng đáp ứng cho các clients được nhiều hơn 

Chính vì đặc tính này các CDN hiện nay đã và đang triển khai HTTP2 nhiều hơn.

Đơn cử là khi so sánh các Features (tính năng) của các gói dịch vụ từ một nhà cung cấp CND nổi tiếng là https://www.cloudflare.com/plans/#compare-features bạn có thể thấy được với 20$/tháng bạn mới được quyền tắt HTTP2. Lý do: vì các servers phải xử lý nhiều hơn nếu bạn sử dụng HTTP.

Như vậy để có thể chuyển đổi qua HTTP2, tích hợp CDN, các hình ảnh bạn phải tối ưu thêm để tăng tốc độ website. Ở phần này mình sẽ đi qua về chuẩn webp. 

Chuẩn này nôm na là được phát triển bởi google với tham vọng là sẽ thay thế chuẩn PNG đã tồn tại cũ kĩ lâu nay. Ưu điểm khi sử dụng chuẩn hình ảnh này:

• Tốc độ load hình nhanh hơn
• Kích thước hình ảnh nhỏ hơn.
• Có thể sử dụng hình ảnh với phông nền (transparent layers)

Tuy nhiên nó cũng có nhược điểm

• Một số chương trình xử lý hình ảnh không hỗ trợ tạo ra file dạng này.
• Không chạy được trên một số trình duyệt web: điểm hình là Safari

Tin mừng là đối với những điểm khó khăn trên, các developers cũng có khả năng khắc phục để giúp tối ưu website của mình. 

Hiện nay có khá nhiều website hỗ trợ convert từ PNG sang WEBP, thích nhất vẫn là https://squoosh.app/ để có thể nhanh chóng có được một hình webp gọn nhẹ mà chất lượng không hề thay đổi.

Tiếp đến để khắc phục sự không hỗ trợ của các trình duyệt, các nhà phát triển đã tích hợp thẻ picture - chạy được trên HTML5 để giúp các hình ảnh có thể chạy được trên các trình duyệt khác nhau

<picture>

<source srcset="https://img-9gag-fun.9cache.com/photo/a1Rm6ZP_460swp.webp" type="image/webp">

 <img src="https://img-9gag-fun.9cache.com/photo/a1Rm6ZP_460s.jpg" alt="Just don&amp;#039;t be poor. It&amp;#039;s that simple!" style="min-height: 608.696px;">

</picture>

Ta có thể thấy cú pháp như trên, đơn giản là khi trình duyệt không hỗ trợ chuẩn webp, các trình duyệt sẽ tự tìm đến một hình ảnh thứ hai để đảm bảo tính toàn vẹn của website.

Tóm lại có thể thấy MozJPEG và WEBP là những chuẩn hình ảnh mới có thể thay thế hoàn toàn các chuẩn hình ảnh hiện tại, điều này sẽ giúp website chạy nhanh hơn, kết hợp dễ dàng với các CDN để mang lại hiệu suất website cao hơn.

Mình cũng đã triển khai cho một khách hàng mình tại Canada, sử dụng hosting tại Việt Nam, đa số khách truy cập website tại Canada, với việc sử dụng CDN https://www.cloudflare.com/ đã mang lại hiệu suất đang kể.

Sau khi cached CDN sẽ phân tán nội dung qua các servers gần clients nhất, điều này giúp khách hàng cảm nhận tốc độ website nhanh hơn. Các bạn có thể kiểm tra việc tốc độ truy cập website của bạn qua trang web https://gtmetrix.com/