Trang chủ Blog Phát triển offshore

Tối ưu hình ảnh cho website để...

Tối ưu hình ảnh cho website để tăng tốc độ tải trang

Rabiloo

02-12-2021

Vì sao phải tối ưu hình ảnh cho website?

Xu hướng của Website hiện nay là sử dụng nhiều hình ảnh để giúp nội dung bài viết được sinh động, rõ ràng và dễ tiếp cận tới người dùng. 

Tuy nhiên, việc sử dụng rất nhiều hình ảnh khiến website hay người dùng có thể gặp phải những vấn đề sau:

  • Dung lượng lưu trữ ảnh nhanh chóng cạn kiện khi số lượng bài viết tăng. Hiện nay dung lượng không còn là một thứ xa xỉ đối với máy chủ, nhưng dung lượng tăng quá cao kéo theo hàng loạt các công việc liên quan như backup, restore,… có thể gây khó khăn, tốn nhiều thời gian hơn.

  • Google hay một số công cụ tìm kiếm cũng dựa trên tối ưu ảnh để đánh giá thứ hạng trong kết quả tìm kiếm. Website của bạn sẽ xếp hạng thấp hơn nếu không tối ưu hình ảnh chuẩn SEO.

  • Ở khía cạnh trải nghiệm người dùng, khi có quá nhiều ảnh không tối ưu, tốc độ tải trang của website chậm. Hoặc quá trình người dùng upload ảnh phải chờ đợi lâu, làm người dùng mất kiên nhẫn trong việc chờ đợi.

Có thể bạn quan tâm: Hướng dẫn SEO web lên top Google bền vững

Với những lý do trên, bạn đã thấy sự cần thiết khi tối ưu hình ảnh cho website rồi chứ? Sau đây chúng tôi sẽ chia sẻ 1 số tips để tối ưu hình ảnh nhằm đạt được mục tiêu là tăng tốc độ tải trang web.

1. Giảm tối đa dung lượng ảnh khi upload

Bạn có băn khoăn nếu tối ưu dung lượng như vậy, chất lượng hình ảnh sẽ giảm xuống, không rõ nét và gây ảnh hưởng đến người dùng? Đừng lo, hãy thử xem qua 2 tấm hình sau đây:

 

Bạn có phân biệt được đâu là ảnh gốc, đâu là ảnh đã giảm dung lượng không? Hãy cùng xem lại 1 lần nữa để biết đáp án nhé

Bức ảnh bên phải đã được giảm dung lượng hơn 70%

Nếu để ý rất kỹ bạn có thể sẽ thấy ảnh bên trái có độ mượt màu sắc tốt hơn ảnh bên phải. Ảnh bên trái chính là ảnh gốc với dung lượng 57KB, sau khi tối ưu giảm đến 73% dung lượng chỉ còn 15KB. Một tỷ lệ thật tuyệt vời phải không nào.

Để làm được như vậy, bạn có thể dùng TinyPNG hoặc các công cụ nén ảnh trước khi tải lên website.

Tuy nhiên, bạn không nên buộc người dùng phải thực hiện thao tác đó trước khi tải ảnh lên trang của bạn. Điều đó có thể gây ra việc từ bỏ tải ảnh hoặc đăng bài. 

Thay vào đó, hãy tích hợp miễn phí công cụ giảm dung lượng ảnh vào website laravel của mình. Đối với TinyPNG, nó sử dụng các kỹ thuật nén dữ liệu thông minh để giảm kích thước của các tệp JPG, PNG,...  của bạn. Bằng cách giảm số lượng màu trong hình ảnh một cách có chọn lọc, cần ít byte hơn để lưu trữ dữ liệu, kết quả mang lại là một bức ảnh với chất lượng gần như gốc, nhưng kích thước thì chỉ còn khoảng 30% so với ban đầu.

Sử dụng TinyPNG để thu nhỏ hình ảnh cho các ứng dụng và trang web của bạn. Nó sẽ sử dụng ít băng thông hơn và tải nhanh hơn. 

2. Xử lý công việc kiểu hàng đợi? Giảm bớt thời gian chờ cho người dùng.

Khi người dùng của bạn muốn tải nhiều hình ảnh hoặc ảnh có dung lượng khổng lồ. Giả sử mỗi ảnh tải lên mất 5 giây, và phải đợi ảnh này tải xong mới đến ảnh khác. Vậy tổng thời gian đợi tải 10 ảnh là 50 giây (gần 1 phút). Điều đó dẫn tới việc phải chờ đợi quá lâu, gây ức chế cho người sử dụng, mang lại hiệu quả công việc thấp.

Lúc này Queue chính là giải pháp bởi nó sẽ mang lại những lợi ích tuyệt vời sau: 

  • Các file upload và các tác vụ có thể chạy ngầm, nên người dùng không cần đợi lâu.

  • Chỉ khi hệ thống rỗi, các tác vụ trong queue mới được thực hiện, điều này giúp website của bạn không bị quá tải trong các giờ cao điểm.

Nhưng khi nào nên sử dụng Queue? Không phải cái gì bỏ vào Queue cũng tốt. Chúng ta nên sử dụng Queue khi mà:

  • Các tác vụ chạy độc lập, không liên quan tới nhau, tốn nhiều thời gian để thực hiện.

  • Tác vụ không cần phải phản hồi ngay, thậm chí có thể trì hoãn 1 vài phút mà không làm ảnh hưởng tới người dùng.

Đối với việc khi người dùng upload nhiều ảnh sẽ mất nhiều thời gian, chúng ta có thể cân nhắc đến sử dụng Queue và thông báo cho người dùng biết khi hình ảnh đang được xử lý, đã tải lên hoàn tất hay thất bại.

Điều này sẽ không bắt user phải đợi khi tất cả các ảnh hay file đã được tải lên xong rồi mới làm được việc khác.

Kết luận

 

Bài viết đã chia sẻ 2 cách tối ưu hình ảnh cho website để giảm tối đa thời gian upload ảnh và tăng tốc cho website. Nếu bạn muốn đọc thêm nhiều bài viết hơn xoay quanh chủ đề về Website, SEO,... vui lòng ghé thăm kênh tri thức của Rabiloo.