4 bước tăng tốc website nhiều ảnh dung lượng lớn
Hình ảnh là một trong những thành phần rất quan trọng trong mỗi websitecho dù đó là thương mại điện tử, tin tức, trang web thời trang, blog hay cổng thông tin du lịch. Hình ảnh chiếm hơn 60% dữ liệu tải lên trên các website, do đó tối ưu hình ảnh là một nhiệm vụ cực kỳ quan trọng và có lẽ là dễ tác động nhất, nếu bạn đang muốn tăng tốc trang web chứa nhiều hình ảnh của mình.
Tối ưu hình ảnh có thể được chia thành 3 loại - tải nhẹ hơn, tải ít hơn và tải nhanh hơn. CùngBizfly Cloud tìm hiểu 5 kỹ thuật trong bài viết hoặc bất kỳ kỹ thuật nào khác mà bạn biết đến có lẽ sẽ thuộc một trong 3 loại này.
1. Thay đổi kích thước hình ảnh
Đây là một yêu cầu bắt buộc. Thay đổi kích thước hình ảnh chính xác theo yêu cầu của website. Và chúng ta không thay đổi kích thước bằng CSS hoặc trong HTML. Việc thay đổi kích thước hình ảnh cần được thực hiện trên máy chủ và sau đó gửi đến trình duyệt.
Ví dụ: ta có hình ảnh sản phẩm 4000x3000px. Tuy nhiên, trên website, bạn cần hiển thị hình ảnh kích thước nhỏ hơn nhiều. Kích cỡ yêu cầu có thể là 200x300px trên trang danh sách sản phẩm và 800x1000px trên trang chi tiết sản phẩm. Đảm bảo rằng bạn thu nhỏ hình ảnh gốc xuống các kích thước này Trước khi gửi nó tới trình duyệt. Các hình ảnh đã thay đổi kích thước nhỏ hơn nhiều so với hình ảnh gốc và sẽ tải nhanh hơn nhiều so với hình ảnh gốc.
Sử dụng kích thước hình ảnh không chính xác là vấn đề tối ưu hóa lớn nhất đối với hầu hết các website. Và thông thường, mọi người có xu hướng bỏ qua vấn đề. Xem xét tình huống sau: Bạn bắt đầu với hình ảnh có kích thước hoàn hảo cho website mới. Trong vài tháng tiếp theo, bố cục website được thay đổi kéo theo yêu cầu thay đổi kích thước hình ảnh. Tuy nhiên, thay vì tạo các hình ảnh mới để đáp ứng các yêu cầu về kích thước mới (một nhiệm vụ khá quan trọng) bạn lại lựa chọn cách thức tiện lợi và dễ thực hiện hơn. Ví dụ: bạn dùng hình ảnh 300x200px có sẵn trong khi hình ảnh 200x200px mới là tối ưu. Thường thì điều này xảy ra với hầu hết tất cả mọi người.
Trong ví dụ trên, sự khác biệt về Kilobytes là khá nhỏ đối với một hình ảnh. Nhưng tỷ lệ vẫn là 21%. Và sự khác biệt nhỏ này, khi nhân lên với rất nhiều hình ảnh, rất có thể là yếu tố cản trở website tăng tốc và giảm mức tiêu thụ băng thông xuống 21%.
Phương án tốt nhất là có một máy chủ hình ảnh có thể thay đổi kích thước hình ảnh theo bất kỳ kích thước cụ thể nào, theo thời gian thực, chỉ bằng cách thay đổi URL hình ảnh. Theo cách đó, bất cứ khi nào có thay đổi về yêu cầu kích thước hình ảnh, tất cả những gì bạn cần để có được hình ảnh mới là chỉ định kích thước đó trong URL.
Có nhiều mã nguồn mở và server-side mà bạn có thể tự thực hiện.
2. Tối ưu hóa hình ảnh
Bước tiếp theo để tăng tốc website nhiều hình ảnh là chọn định dạng và chất lượng phù hợp cho mọi hình ảnh trên trang web.
JPG, PNG và GIF là các định dạng hình ảnh phổ biến nhất hiện đang được sử dụng cho website và mỗi định dạng phù hợp cho các trường hợp sử dụng khác nhau. Có một định dạng hình ảnh tương đối mới gọi là WebP – kết hợp toàn bộ những ưu điểm của các định dạng hình ảnh này, với kích thước nhỏ hơn 30% và được hỗ trợ trên gần 75% các trình duyệt hiện đại.
Nguồn: Codeburst.io
Để đạt được nhiều ưu thế hiệu suất, bạn nên phân phối hình ảnh của mình ở định dạng WebP bất cứ khi nào có thể. Trên các trình duyệt khác, bạn có thể tiếp tục cung cấp định dạng hình ảnh gốc.
Chất lượng hình ảnh, nói một cách đơn giản, là thước đo hình ảnh hiển thị. Có một mối tương quan trực tiếp giữa chất lượng hình ảnh và kích thước hình ảnh. Chất lượng cao hơn dẫn đến kích thước cao hơn và kết quả là làm chậm tốc độ tải web.
Các phương pháp nén hình ảnh khác nhau lợi dụng sự hạn chế của mắt người trong việc phân biệt các thay đổi nhỏ về độ phân giải màu sắc để nén hình ảnh. Theo tiêu chuẩn, mức chất lượng từ 80 đến 90 (trên thang điểm 100) thường là mức đánh tốt giữa kích thước và chất lượng hình ảnh.
Nguồn: codeburst.io
So sánh giữa cùng một hình ảnh được mã hóa ở các mức chất lượng khác nhau. Các hình ảnh gần như tương tự khi hiển thị nhưng trên thực tế lại có kích thước khác nhau.
3. Tối ưu cho thiết bị di động
Nếu bạn nghiêm túc trong việc vận hành website hiệu quả, bỏ qua người dùng di động là một sai lầm rất lớn. Dữ liệu chỉ ra gần 60% lưu lượng truy cập toàn cầu bắt nguồn từ các thiết bị di động. Và đúng vậy, trong khi điện thoại di động đã trở nên mạnh mẽ và mạng di động trở nên tốt hơn, dữ liệu cho thấy tốc độ dữ liệu di động vẫn chậm hơn nhiều so với tốc độ băng thông rộng. Có những quốc gia hoặc khu vực trong các quốc gia nơi kết nối dữ liệu di động không ổn định. Vì vậy, điều quan trọng là phải hết sức cẩn thận khi thiết kế trải nghiệm web cho thiết bị di động.
Nếu bạn có một trang web tương thích trên desktop và thiết bị di động, bạn có thể chuyển sang sử dụng hình ảnh tương thích. Với các thẻ hình ảnh tương thích, sử dụng các thuộc tính `srcset` và` size` trong img tag, bạn có thể cung cấp cho trình duyệt danh sách các biến thể của một hình ảnh cụ thể và giới hạn kích thước tương đối trên các màn hình khác nhau. Trình duyệt sau đó sẽ quyết định kích thước tài tốt nhất trên một thiết bị cụ thể từ danh sách có sẵn theo kích thước thiết bị và bố cục bạn chỉ định.
Nguồn: codeburst.io
Thuộc tính `size` cung cấp thông tin về bố cục hình ảnh, thuộc tính` srcset` cung cấp danh sách hình ảnh với chiều rộng thực tế được chỉ định theo từng URL.
Một yếu tố khác trên thiết bị di động cần xem xét là Tỷ lệ pixel của thiết bị - Device Pixel Ratio hay giá trị DPR. Điện thoại di động hiện nay có mật độ màn hình tích hợp nhiều pixel hơn trong cùng một inch vuông.
Một hình ảnh trông đẹp trên các thiết bị thông thường, sẽ trông hơi mờ trên màn hình mật độ cao. Giải pháp cho vấn đề này là tải hình ảnh kích thước 2x trên màn hình với DPR 2, hình ảnh 3x trên màn hình với DPR 3 và hình ảnh kích thước 1x hình ảnh bình thường trên các thiết bị khác. Điều này cũng có thể được thực hiện bằng cách sử dụng thẻ hình ảnh đáp ứng như dưới đây.
4. Sử dụng CDN chất lượng để phân phối hình ảnh
Khi bạn đã giải quyết được kích thước của hình ảnh và số lượng hình ảnh được tải trên một trang cụ thể, bước tiếp theo là đảm bảo rằng hình ảnh có thể tải lên trang web một cách nhanh chóng. Giảm thời gian tải hình ảnh không chỉ giúp bạn có thời gian tải trang nhanh hơn và do đó trải nghiệm người dùng trên trang web của bạn tốt hơn mà còn giúp bạn xếp hạng cao hơn trên các công cụ tìm kiếm.
Nguồn: codeburst.io
Mạng phân phối nội dung hay CDN là một tập hợp các máy chủ cache/proxy được phân phối trên toàn cầu.
Giả sử máy chủ web của bạn được đặt tại Hồ Chí Minh. Mạng phân phối nội dung sẽ lưu trữ hình ảnh của bạn trên toàn mạng máy chủ. Sau đó, nếu người dùng từ Hà Nội yêu cầu hình ảnh từ trang web của bạn, thay vì nhận hình ảnh đó từ máy chủ của bạn ở Hồ Chí Minh, CDN sẽ gửi nó từ một node gần nhất với người dùng đó ở Hà Nội. Điều này cắt giảm thời gian quãng đường "khứ hồi" để tải một hình ảnh.
Khi chọn CDN, đảm bảo rằng CDN hỗ trợ HTTP/2. HTTP/2 là một giao thức mới để phân phối nội dung trên web giúp tăng tốc đáng kể thời gian tải. Giao thức sử dụng các kỹ thuật như ghép kênh, nén tiêu đề và đẩy máy chủ để giảm thời gian tải trang.
Hiện nay, tại Việt Nam CDN đến từ Bizfly CDN do công ty VCCORP cung cấp hiện có hỗ trợ giao thức HTTP/2. Ngoài ra công nghệ còn tích hợp nhiều kỹ thuật truyền và nén dữ liệu tiên tiến khác, cho website khả năng bứt phá tốc độ ấn tượng - gấp 16 lần tốc độ tải trang hiện tại. Bizfly CDN đang phục vụ rất nhiều hệ thống lớn cho các doanh nghiệp hàng đầu trên thị trường như báo Tuổi trẻ, Dân trí, Topica, VTV...
Theo Bizfy Cloud tổng hợp
>> Có thể bạn quan tâm: 3 thay đổi về tốc độ trang trên thiết bị di động và cách nó tác động đến tìm kiếm
