Các nội dung chính
“Tại sao website của mình lại chậm như vậy?”
Đây là câu hỏi mà rất nhiều chủ doanh nghiệp, người làm marketing hay thậm chí người quản trị web đặt ra khi thấy trang web của mình cần quá nhiều thời gian để load. Theo nghiên cứu từ Google, khách hàng dễ dàng từ bỏ nếu website mất hơn 3 giây để tải nội dung và truy cập vào trang web khác. Tuy nhiên trên thực tế, nghiên cứu cũng cho thấy có đến 70% website trên di động cần 5 giây để tải nội dung trên màn hình đầu tiên, và mất hơn 7 giây để có thể tải đầy đủ tất cả nội dung còn lại.
Việc tối ưu tốc độ website trở nên đặc biệt quan trọng, nó sẽ trở thành ưu điểm nổi trội nhất để doanh nghiệp tăng khả năng cạnh tranh và chất lượng phục vụ khách hàng. Vậy ngay sau đây hãy cùng Ecomweb tìm hiểu cách thức giúp tối ưu hình ảnh để tăng tốc độ website mà không cần phải là kĩ thuật viên bạn cũng có thể làm được nhé!
Hình ảnh chiếm tới hơn 80% nguyên nhân làm chậm website
Không chỉ riêng hình ảnh, bất cứ tập tin nào có dung lượng lớn mà cần tải xong mới thể hiện được “đầy đủ ý nghĩa” trên website thì đều ảnh hưởng rất lớn tới tốc độ load trang.
Đa phần giao diện của các website hiện nay được phủ đầy bằng rất nhiều hình ảnh (nhất là các website thương mại điện tử). Những thành phần cấu thành website còn lại như: HTML, CSS, JS, Font,… dù khá nhiều tập tin nhưng lại chiếm dung lượng không đáng kể chỉ tầm 10-20%.
Vậy nên, đa phần các website bị chậm chủ yếu do không xử lý hình ảnh kịp ( không nén, định dạng sai, kích thước không phù hợp,….). Do đó, việc quan trọng nhất là nên bắt tay vào tối ưu hình ảnh trước rồi mới xử lý các yếu tố khác.
3 bước tối ưu hình ảnh để tăng tốc website
Dưới đây sẽ chỉ tóm tắt 3 bước chính cần phải làm để có thể tối ưu hình ảnh để tăng tốc website. Cụ thể:
Bước 1: Nắm được 4 định dạng ảnh hay được dùng nhất trên internet hiện nay
Theo PageSpeed Insights thì 96% hình ảnh đăng tải trên Internet hiện nay từ các định dạng ảnh GIF, PNG, JPG và WebP. Bởi vì độ phổ biến của chúng trên website nên ta không cần quan tâm tới các định dạng khác mà chỉ cần tập trung vào 4 định dạng này.
Trước tiên phỈ biết nên dùng định dạng ảnh nào cho từng mục đích?
- JPGs:
Đây là định dạng phổ biến nhất hiện nay vì dung lượng khi nén tốt mà vẫn giữ được đáng kể chất lượng ảnh. Phù hợp cho người dùng ảnh với chất lượng cao và ảnh có nhiều màu sắc phức tạp. Được khuyến cáo dùng trong rất nhiều trường hợp nếu có thể, ví dụ như: ảnh sản phẩm, background, banner, ảnh mẫu,…
Khuyết điểm là do luôn có nền mặc định là trắng nên không thể áp dụng cho các trường hợp chèn ảnh hay ảnh cần có nền trong suốt.
- PNG:
Cũng là định dạng ảnh phổ biến không thua kém gì JPGs lại còn có chất lượng hình ảnh nhỉnh hơn JPGs. Rất phù hợp để dùng trong các trường hợp cần chất lượng ảnh gần như tối đa, hình ảnh chụp sống động, chuyên nghiệp và xóa được phông nền áp dụng được như: logo, icon, hoặc các ảnh chồng lên nhau phức tạp.
Nhược điểm là ảnh PNG lại có dung lượng lớn hơn rất nhiều gấp x2, x3 lần so với JPGs. Và chỉ nên dùng cho logo hoặc khi ảnh này thật sự cần thiết, không còn lựa chọn nào nữa.
- GIF:
Là viết tắt của Graphics Interchange Format nghĩa là định dạng trao đổi hình , một loại ảnh được tạo ra bởi CompuServe. Là một định dạng tập tin hình ảnh bitmap cho các hình ảnh dùng ít hơn 256 màu sắc khác nhau và các hoạt hình dùng ít hơn 256 màu cho mỗi khung hình. Vì ảnh GIF thường gồm khá ít tập tin nên ảnh GIF (tĩnh) thường có dung lượng nhỏ hơn JPGs nhiều.
GIF có thể lưu lại dưới dạng nền trong suốt và hỗ trợ làm ảnh động khá tốt, thay cho các clip ngắn khá hiệu quả và tối ưu dung lượng hơn video nhiều lần.
Tuy nhiên, đó là đối với các GIF ngắn và đừng lạm dụng GIF quá nhiều vì các GIF dài có khi lại nặng hơn cả PNG. Tốt nhất là chỉ nên dùng GIF cho trường hợp ảnh động giả lập trạng thái đang tải trang hoặc những chỗ cần làm website trở nên sinh động hơn thay cho video.
- WEBP:
Định dạng ảnh này được Google tạo ra và họ đang khuyến cáo sử dụng trong mọi trường hợp nếu có thể. Định dạng ảnh này có khả nén cực tốt (hơn JPG, PNG nhiều) mà chất lượng không quá thay đổi, kể cả ảnh có nền trong suốt và ảnh động. Hầu hết trình duyệt hiện tại như Chrome, Firefox, Edge, Opera đều hỗ trợ định dạng ngoại trừ Safari của Apple.
Google phát triển định dạng này nhằm mục đích tối ưu hóa trong quá trình duyệt web. Khi sử dụng WebP, quản trị viên và nhà phát triển có thể tạo ra những hình ảnh giảm dung lượng giúp website chạy nhanh hơn.
Bước 2: Chủ động nén ảnh trước khi tải lên website
Vì không phải lúc nào các hệ thống quản trị nội dung (CMS) cũng nén hình ảnh giúp bạn và nếu có nén thì cũng chưa chắc nén tự động có thể đáp ứng đủ yêu cầu chất lượng của bạn. Thế nên, hãy chủ động nén ảnh trước khi tải lên website.
Các CMS phổ biến hiện nay mặc định chỉ tự thay đổi ảnh ra nhiều kích thước khác nhau dựa trên ảnh gốc. Muốn tự động nén (compress) ảnh thì cần cài thêm vài phần mềm bổ trợ (plugin). Dĩ nhiên mỗi khi bạn upload ảnh lên CPU của máy chủ cũng phải hoạt động nhiều hơn.
Tóm lại, sau khi chọn đúng định dạng ảnh mong muốn, bạn nên nén trước khi đẩy lên website bằng các công cụ nén ảnh phổ biến hiện nay.
Bước 3: Sử dụng đúng kích thước ảnh hiển thị trên website
Khi chấm điểm trên PageSpeed hay GTMetrix bạn sẽ nhìn thấy các từ khóa như Dimension hay Responsive Image. Đại khái đây là những lời khuyên bạn nên đưa lên website các ảnh khớp kích thước mà website sẽ hiển thị cho người dùng.
- Kích thước ảnh đúng là gì?
Kích thước ảnh đúng là kích thước ảnh cố định hoặc tối đa mà website cho phép hiển thị ở một vị trí cụ thể để người dùng có thể thấy được. Kích thước này thường được quy định ngay từ đầu bởi thiết kế website. Dù bạn có dùng ảnh kích thước lớn hơn rất nhiều lần thì website cũng chỉ hiển thị đúng hoặc tối đa như kích thướcm đã mặc định sẵn.
Ví dụ 1 về kích thước cố định: Khi thiết kế web Banner này đã được website định sẵn hiển thị ảnh 350×240 pixel. Nếu bạn upload ảnh 700×480 pixel hay 1400×960 pixel thì web cũng chỉ hiển thị 350×240 pixel thôi. Khi tải lên ảnh lớn hơn kích thước được website hiển thị, bạn sẽ chỉ làm web nặng nề hơn chứ hình ảnh không hề sắc nét hay đẹp hơn.
Ví dụ 2 về kích thước tối đa: Chiều rộng tối đa của khung nội dung bài viết là 825 pixel. Tương tự như ví dụ trên, nếu bạn đăng tải ảnh 960px thì website cũng chỉ hiển thị tối đa là 825px thôi.
- Làm sao biết được kích thước đúng?
Hiện nay, có nhiều cách để xác định được kích thước ảnh đúng cho website, có 3 cách phổ biến là:
- Hỏi người đã thiết kế website, họ sẽ cung cấp cho bạn danh sách các kích thước được quy định khi thiết kế để hiển thị tốt nhất.
- Xem các hướng dẫn, có ngay kích thước đúng trong chỗ thiết lập trong giao diện nếu bạn mua giao diện mẫu sẵn có trên kho.
- Nếu bạn biết sử dụng công cụ Inspect (F12) có trong trình duyệt bạn hoàn toàn có thể tự đo.
Tóm tại ngoài việc biết cách sử dụng đúng định dạng ảnh và nén ảnh trước khi đăng tải lên website, bạn cần nhớ luôn sử dụng đúng kích thước ảnh website cần hiển thị để có thể tối ưu tốc độ tải trang một cách tối đa. Làm tốt 3 lưu ý này website của bạn đã có thể tăng tốc lên đến 80%.
Trên đây là những chia sẻ của Ecomweb về Bí kíp tối ưu hình ảnh để tăng tốc độ website bán hàng. Vì bài viết dành cho những người không quá rành về công nghệ nên sẽ không đi sâu hơn, chỉ đề cập một số cách tối ưu cho nền tảng website. Nếu bạn đang có điều gì thắc mắc hay nếu bạn muốn tìm một đơn vị uy tín để thiết kế, tư vấn cho mình một website phù hợp với giá cả hợp lý hãy liên hệ ngay với chúng tôi thông qua ECOMCX hoặc facebook để được tư vấn và hỗ trợ tốt nhất.