Tối ưu tốc độ load web

 18/03/2020  Đăng bởi: Biguns

Dựa vào bài viết về Tối ưu tốc độ load web của bạn Võ Quốc Cường trên Cộng Đồng Haravan

Link bài viết: https://www.facebook.com/groups/haravan/permalink/1525839010916105/

 

Mình sẽ bổ sung thêm về việc tối ưu hình ảnh, load hình ảnh trên website sử dụng Haravan.

Việc tối ưu hình ảnh sản phẩm, hình banner trước khi up lên web rất quan trọng, nhiều khách hàng thường up luôn hình có sẵn, hình chụp trong máy hình mà không tối ưu, mỗi hình có dung lượng tới vài trăm kb, có trường hợp lên tới >2mb khiến website rất nặng.

Để tối ưu hình, cách đơn giản là dùng các tool online:
https://imagecompressor.com/
https://tinypng.com/
https://compressor.io/
https://kraken.io/ (tốn phí)
https://imagify.io/ (tốn phí)

 

Nhưng cách tốt nhất vẫn là dùng photoshop:

1. Về hình ảnh banner/slider:  
-Nên làm đúng size đã được gợi ý theo theme trong phần giao diện, tránh tình trạng hình cao hình thấp, hình to/nhỏ khác nhau... để website đều và đẹp.

Khi save hình ảnh / banner trước khi up lên web, mình nên dùng tính năng Save for web (phím tắt: Shift+Command+option+S) của photoshop:

Ở màn hình này, chọn Preset là JPEG, với trường hợp chưa tối ưu, chất lượng hình (quality) là 100 thì dung lượng hình đang tới 399.8k, một dung lượng khá nặng, với website có nhiều hình nặng như vậy thì ảnh hướng đến tốc độ web là điều đương nhiên.

 

Mình nên chọn quality từ 60-70, lúc này dung lượng hình chỉ còn 106.1k, chất lượng hình có giảm, nhưng hiển thị trên web thì sẽ khó nhận ra.

Với một hình giảm được hơn 200kb, thì nhiều hình như vậy sẽ tăng được kha khá điểm pagespeed và tốc độ load web.

 

2. Về hình ảnh sản phẩm:
-  Ngoài tốc độ load web, để website đẹp và gọn gàng, hình ảnh sản phẩm nên là hình vuông hoặc là hình chữ nhật nhưng cùng tỉ lệ với nhau.
- Nếu khách hàng có hình sản phẩm chất lượng, kích thước đủ lớn, mình có thể tạo sẵn 1 file mới trong photoshop với kích thước hình vuông, size phù hợp với kích thước của hình, có thể 900x900 hoặc 1200x1200 hoặc 1600x1600, không quá 2048x2048
- Kéo 1 line từ ruler để canh đáy các hình sản phẩm trùng nhau <= Các hình sản phẩm sẽ không bị lồi lõm, bị xê dịch lên xuống không đều

Và save for web như banner/slider bên trên.

Ở phần này mình có thể sử dụng kích thước hình lớn mà không cần sợ ảnh hưởng đến website, vì hệ thống Haravan đã tự tối ưu các kích thước cho hình sản phẩm khi up lên như:
- Thumb
- Small
- Medium
- Large
- Master
- Original

Ngoài website, mình chỉ cần gọi đúng các kích thước đủ dùng:
- Các trang collection / listing sản phẩm: không load hình Original hay master, chỉ cần dùng các hình small, medium, larger hay grande là được. 

- Với hình Original hay master, dung lượng hình sẽ khá nặng, không phù hợp với trang listing sản phẩm, vốn đã nhiều hình ảnh.

 

- Với hình grande hay các hình nhỏ hơn, dung lượng hình đã được hệ thống tối ưu sẵn, rất nhẹ với trang nhiều hình như collection/listing sản phẩm:

Các hình original hay master chỉ dùng cho trang product detail, để khách xem hình sản phẩm lớn, trang product detail cũng ít sản phẩm, ít hình ảnh và banner nên cũng sẽ không ảnh hưởng nhiều.

Việc load đúng kích thước hình tại đúng vị trí cũng sẽ giúp tăng điểm Pagespeed hay GTMetric vốn dựa trên dimension hay responsive Image. Và cuối cũng, các theme  Haravan đã tối ưu và load sẵn các kích thước hình phù hợp với từng vị trí, khách hàng chỉ cần làm hình ảnh và up lên :)

Hy vọng chia sẻ sẽ giúp các bạn tư vấn khách hàng tốt hơn, giúp khách hàng có website nhẹ, đẹp & nhanh để bán được hàng <3

=====================

P/s 1.: Việc chịu khó tốn công sức làm hình ảnh ngay từ đầu khi còn ít sản phẩm, sẽ giúp website đẹp, nhẹ và chỉnh chu... từ đó duy trì về sau.

P/s 2: 100% website đẹp là nhờ hình, dù bố cục hay layout, font chữ có hoàn hảo, nhưng hình ảnh xấu, nặng, lồi lõm không đều... cũng sẽ ảnh hưởng đến trải nghiệm mua hàng của khách.

P/s 3: Khoe hàng chút https://dellstorevn.vn/ :)

Thank you!

Trở thành chi nhánh

Enador

trên toàn quốc