Cách tối ưu hình ảnh cho website giúp tăng tốc độ tải trang cho mobile

Tốc độ tải trang là một chỉ số được google đánh giá là rất quan trọng trong việc website có chuẩn SEO hay không, do đó nó ảnh hưởng trực tiếp tới thứ hạng tìm kiếm của website. Hôm nay WEB100 sẽ hướng dẫn các bạn cách tối ưu hình ảnh cho website, qua đó giúp tăng tốc độ tải trang cho trang web của bạn, đặc biệt là trên màn hình mobile.

Hầu hết tốc độ tải trang chậm đến từ việc load ảnh quá nặng khiến cho trình duyệt gặp khó khăn trong việc hiển thị đầy đủ website. Không chỉ ảnh hưởng tới SEO, việc hình ảnh load chậm còn ảnh hưởng tới trải nghiệm của người dùng. Họ có thể đánh giá website không chuyên nghiệp và rời đi.

Điều đầu tiên để tối ưu cho website, bạn cần xác định được trang cần tối ưu có những loại hình ảnh gì đang được sử dụng (Lưu ý chúng ta phân loại dựa trên kích thước ảnh khi hiển thị trên màn hình). Thông thường một page chỉ có khoảng 3-7 loại hình ảnh, ví dụ banner, logo, ảnh đại diện của image, ảnh trong bài viết ...

Sau khi xác định được các loại ảnh, việc tiếp theo là tối ưu cho từng nhóm ảnh.

1. Ưu tiên sử dụng ảnh định dạng webp

Ảnh webp có kích thước nén nhỏ hơn các loại ảnh thông thường như jpg, jpeg, png, ... mà chất lượng thì tương đương. Hiện nay các loại trình duyệt hiện đại 100% đều đọc được loại ảnh webp này nên bạn không cần phải quá lo lắng. Để sử dụng loại ảnh này thì trước khi lưu lại, bạn cần chuyển nó sang đuôi webp hoặc sử dụng một số công cụ xử lý ảnh để đổi format ảnh.

2. Tối ưu kích thước ảnh tối đa.

Mỗi nhóm ảnh đều có kích thước chiều rộng tối đa trên màn hình (trừ khi bạn không giới hạn cho chúng). Để kiểm tra giới hạn này, bạn có thể F12 trên trình duyệt để vào chế độ Developer tools, và tăng kích thước chiều rộng màn hình lên thật lớn. Sau đó kiểm tra xem những hình ảnh đó đang có kích thước chiều rộng tối đa là bao nhiêu. (Lưu ý trong một số trường hợp đặc biệt, cách này không chính xác tuyệt đối).

Sau khi xác định được giới hạn thì bạn hãy sửa lại logic đoạn code sao cho trước khi lưu ảnh lại hãy nén ảnh lại với kích thước tối đa đó. Như vậy bạn đã giảm đi được một lượng lớn kích thước ảnh không cần thiết.

3. Sử dụng ảnh theo kích thước màn hình

Đây chính là kinh nghiệm quan trọng nhất. Sử dụng ảnh theo kích thước màn hình có nghĩa là khi màn hình dài thì sử dụng ảnh lớn, màn hình vừa thì dùng ảnh vừa,  màn hình nhỏ thì dùng ảnh nhỏ. Do đó kích thước ảnh luôn được tối ưu nhất.

Thông thường rất ít website tích hợp tính năng này vì nó còn khá mới. Tuy nhiên hiện nay 100% trình duyệt hiện đã cập nhật tính năng này do đó nếu website bạn không ứng dụng nó thì thật sự là một sự thiếu sót.

Có 2 cách để sử dụng ảnh theo kích thước màn hình. Một là sử dụng srcset và sizes cho thẻ img. Còn hai là sử dụng picture, source với srcset. Cả hai đều giúp tăng tốc độ tải ảnh như nhau, tuy nhiên picture thì có thể tuỳ biến tốt hơn, dễ hiểu hơn, dễ test hơn, ngược lại code cũng dài hơn. Bản thân mình thì dùng cách picture hơn.

Cách này đặc biệt hữu hiệu cho màn hình vừa và nhỏ hay còn gọi là màn hình Mobile.

Document cụ thể bạn có thể xem ở: Responsive Images

4. Sử dụng Cache và CDN để tối ưu ảnh.

Sử dụng Cache và CDN (Mạng phân phối nội dung) là cách hiệu quả để tối ưu hóa hình ảnh trên website. Cache giúp lưu trữ tạm thời hình ảnh trên trình duyệt của người dùng, giảm tải máy chủ và cải thiện tốc độ tải trang cho các lần truy cập sau. CDN phân phối hình ảnh từ các máy chủ gần người dùng nhất, giảm thời gian truyền tải dữ liệu. Kết hợp hai phương pháp này không chỉ tăng tốc độ hiển thị ảnh mà còn giảm băng thông và tải trọng máy chủ, mang lại trải nghiệm tốt hơn cho người dùng. Một công cụ rất mạnh trong việc sử dụng kết hợp cả Cache và CDN đó là Cloudfont. 

Tuy nhiên nhược điểm của phương pháp này là tốn khá nhiều chi phí. Nếu bạn kết hợp hoàn hảo giữa 3 cách đầu thì cách thứ 4 này có thể xem xét bỏ qua.

Trên đây là những kinh nghiệm và ứng dụng thực tiễn mà WEB100 đã biết và sử dụng trong dự án của mình. Các website được phát triền bằng dịch vụ của WEB100 đều sẽ đạt tốc độ tải trang 100 ngay cả trên mobile cũng như Destop. Một điều mà hiếm có website nào làm được.