Tăng tốc Website – Sử dụng Scaled Images

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tăng tốc Website – Sử dụng Scaled Images Scaled images là một trong các đánh giá của các công cụ tối ưu tăng tốc website. Điểm số cao hơn sẽ tăng thứ hạng website

Giới thiệu

Scaled image là gì?

Scaled image là ảnh mà kích cỡ khớp với kích cỡ được khái niệm trong CSS hoặc HTML. Ví dụ một người dùng upload một ảnh có kích cỡ 400 x 400 và sử dụng nó như một thumbnail với kích thước 40 x 40 qua HTML/CSS. Có tức là trình duyệt bắt buộc phải tải một ảnh lớn trước và giảm nó xuống kích cỡ cần phải có trước khi hiển thị ra. Một phương thức hiệu quả hơn là hạ kích thước hình xuống 40 x 40 để trình duyệt không phải tải file và nén file vô ích.

Thuận lợi của việc dùng scaled images

Sử dụng ảnh đúng kích cỡ càng phải có có thể giảm dung lượng và bức tốc website, đặc biệt là trên thiết bị di động và tablet. Cung cấp scaled images là một trong các đánh giá của các công cụ tối ưu tăng tốc website. Điểm số cao hơn sẽ tăng thứ hạng website trên Goolge và tăng SEO.

Bạn cần gì?

Trước khi bắt đầu hướng dẫn này bạn cần chuẩn bị:

  • Truy cập FTP (đặc biệt là thư mục chứa hình ảnh)
  • Image editor (Paint, hoặc các công cụ editor online như là picresize)

Bước 1 — Phân tích Website của bạn

Tại bước này, chúng tôi khuyên dùng GTMetrix vì nó cũng cho biết kích thước chuẩn xác cần sử dụng là gì.

Ví dụ, chúng mình đã phân tích một site WordPress được tạo từ trước bởi GTMetrix và có bản kê ảnh với địa thế chính xác của nó và giá trị được khuyên dùng.

WP-analysis-1.

Dựa vào phân tích trên, cung cấp ảnh scaled sẽ giảm kích cỡ ảnh xuống hơn 50%. Càng có nhiều hình, ảnh càng được tải nhanh hơn sau khi hạ dụng lượng xuống.

Bước 2 — Thu nhỏ và thay thế ảnh

Để se khít hình ảnh, bạn phải tải nó về trước. Ảnh được định vị ở bước 1 cũng có thể có thể tải về qua FTP client. Sau đó, cũng đều có thể dùng image editor (Paint) hoặc các tool online để se khít ảnh. Sử dụng picresize, mình đã se khít tất cả ảnh tới giá trị cần thiết.

Image-resize-1.

Sử dụng tên mới đầu cũng cần được thiết. Bằng cách này bạn chỉ cần thay thế những file hình cũ bằng những file hình mới mà chẳng cần thay đổi gì ở mã nguồn. Khi những ảnh cũ được thay thế bởi ảnh đã được thu nhỏ. Việc còn sót lại là kiểm tra lại.

Bước 3 — Kiểm tra thay đổi

Để so sánh, này là kết quả sau khi upload ảnh đúng kích thước thu nhỏ:

Scaled-images-final-result.

Điều quan trọng đặc biệt là việc upload lại ảnh cũ cần giống tên cũ để không gặp lỗi 404.

Kết luận

Tóm lại, chúng ta đã học cách se khít ảnh đúng kích thước. Việc này sẽ giảm tài nguyên sử dụng của server, cũng như tăng tốc độ và hiệu xuất website. Ưu điểm là chẳng cần kiến thức lập trình để thực thiệc việc scaled images.

Các bài hướng dẫn liên quan:

Improving website performance: leveraging browser cache

Improving website performance: gzip compression

Improving website performance: using progressive JPEG images

Improving website performance: Enabling Keep-Alive

Improving website performance: Using a CDN

Improving website performance: minifying CSS, HTML and JavaScript

Từ khóa bài viết: dinhthuanit.com,

Bài viết Tăng tốc Website – Sử dụng Scaled Images được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang