Tăng tốc Website – Sử dụng ảnh nén Progressive JPEG

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tăng tốc Website – Sử dụng ảnh nén Progressive JPEG Trong bài này, chúng ta sẽ đi xa hơn nữa bằng cách học cách tối ưu ảnh Baseline JPEG thành ảnh progressive JPEG để tăng tốc website

Giới thiệu

Một việc quan trọng trong để tối ưu website mà mọi người thường quên là hình ảnh. Trong các bài hướng dẫn trước, chúng ta đã học cách bức tốc độ website bằng cách scaled hình ảnh. Trong bài này, chúng ta sẽ đi xa hơn nữa bằng cách học cách tối ưu ảnh Baseline JPEG thành ảnh progressive JPEG để tăng tốc website.

Sự khác biệt giữa ảnh baseline JPEGs và ảnh progressive JPEG?

Thông thường, hình JPEG sẽ tải từ trên xuống và chúng được xem là baseline images. Progressive JPEG images khác bằng cách hiển thị toàn album ảnh trong khi chỉ tải phần nào của dữ liệu, tức là nó cũng đều có thể bị vỡ trước khi tải hoàn tất. Bên dưới là tỉ dụ để bạn dễ hiểu hơn.

Quá trình tải ảnh Baseline JPEG:

Baseline-JPEG-image-load-cycle

Quá trình tải ảnh Progressive JPEG:

Progressive-JPEG-image-load-cycle

Làm làm sao mà ảnh progressive JPEG tăng tốc website?

Ngoại trừ việc cho cảm nhận ảnh tốt hơn, ảnh progressive JPEG còn nhỏ hơn từ 2% đến 10% so với ảnh baseline, vì thế việc dùng chúng có tức là sẽ giúp tăng hiệu xuất website về tổng thể. Yêu cầu tới server sẽ ngắn hơn và hiệu quả hơn, cũng có thể giảm tài nguyên sử dụng của server như là băng thông, dung lượng. Nó rất là hiểu quả nếu bạn hosting website trên dịch vụ miễn phí hoặc chia sẽ. Website với con số lượng hình baseline JPEG lớn sau khi chuyển về ảnh progressive JPEG cũng sẽ thấy hiệu quả rõ rệt. Cũng đáng để nói đến là nếu visitors truy cập website qua điện thoại haoc85 mạng yếu thì cũng cho kết quả hiện thị tốt hơn nếu sử dụng ảnh progressive JPEG.

QUAN TRỌNG! Một số trình duyệt (như Internet Explorer trên Windows 7 hoặc cũ hơn) không giúp ảnh progressive JPEG. Tuy nhiên, tất cả phiên bản mới hơn đều hỗ trợ.

Bạn cần chuẩn bị gì

Trước khi bắt đầu, hãy chắc là bạn có quyền:

  • Truy cập FTP

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

Để xác định ảnh baseline JPEG cũng có thể có thể thay thế bằng ảnh progressive, chúng ta dùng WebPageTest.org. Tool này rất tốt, vì bạn có thể lấy bản progressive của baseline JPEG image mà không cần dùng bất kỳ tools khác.

Đây là một số kết quả của mục Performance Review  sau khi phân tích website test:

0/100-progressive-JPEG-image-score

Bước 2 — Tải ảnh progressive JPEG

Có biết bao công cụ không trùng lặp có thể giúp bạn chuyển đổi ảnh baseline JPEG images sang ảnh progressive. Đây là một số cách:

Cách 1 – Tén baseline JPEG thành progressive bằng WebPageTest.org

Sau khi tìm thấy danh sách của ảnh cũng có thể có thể thay thế, chuyển tới mục Details  và nhấn nút View All Images

view-all-images-section

Mục này sẽ hiển thị tất cả hình ảnh trên trang web. Nhấn nút  Analyze JPEG  trên ảnh có ở Bước 1 và cuộn tới cuối trang.

view-all-images-section

Tại đó nhấn nút Quality 85 Image  của ảnh gốc. Lưu mọi thứ Quality 85 Images  tới máy của bạn và tiếp tục bước sau. Chúng ta cũng càng phải lưu mọi thứ hình ảnh bằng tên gốc, quá trình thay đổi sẽ dễ dàng hơn.

Cách 2 – Chuyển baseline JPEGs sang progressive bằng Optimizilla để tăng tốc load ảnh

Nếu bạn đang định upload thêm ảnh lên website của bạn, hoặc nếu website của bạn không được upload hoàn tất, bạn có thể dùng Optimizilla để chuyển ảnh baseline JPEG sang ảnh progressive. Sử dụng tool này bạn có thể tối ưu tới 20 ảnh đồng thời và nén nó bằng thuật toán nén sang Quality 85 hoặc ít hơn.

Optimizilla image optimization process from baseline to progressive jpeg

QUAN TRỌNG! Giảm xuống thấp hơn 85 có thể dẫn đến việc mất chất lượng ảnh. TIến hành cẩn trọng.

Cách  3 – Tối ưu ảnh bằng CMS plugins

Nếu bạn có WordPress Blog, bạn có thể đơn giản tối ưu ảnh baseline JPEG sử dụng WP Smush. Xem qua bài chỉ dẫn này để biết chi tiết hơn cách dùng WP Smush

Bước 3 — Thay đổi ảnh cũ Replacing old images

Quan trọng! Hãy đảm bảo bạn đã backup website backup your website hoặc hình ảnh bạn đang nén

Sử dụng File Manager hoặc FTP client, có ở bước 1 1. Xóa và thay thế bởi  Quality 85 Images  được làm ở Bước 2 . Once again, make sure that they have the same  file name to avoid any 404 errors or loading issues.

Step 4 – Kiểm tra kết quả tăng tốc

Khi tất cả ảnh đã được upload, xóa cache trình duyệt và mở website của bạn để xem tất cả có bình thường không. Sau đó, bạn có thể phân tích website bằng  WebPageTest.org để xem tất cả có được thực hiện đúng không. Đây là kết quả trong phần Details :

100/100-progressive-JPEG-image-score

Kết luận

Trong bài chỉ dẫn này, chúng ta đã học việc làm làm sao để tăng tốc website của bạn bằng phương pháp sử dụng  ảnh progressive JPEG thay vì baseline. Trải nghiệm lướt web càng mượt mà bao nhiêu, bạn và người truy cập của bạn sẽ càng hài lòng hơn, đồng thời ấy sẽ giảm tài nguyên tiêu thụ của server, tăng SEO, và hiệu xuất của website. Một trường hợp Win-Win cho mọi thứ mọi người.

Các hướng dẫn liên quan đến tối ưu Web sửa máy tính ITS:

  • Improving website performance: leveraging browser cache
  • Improving website performance: serving scaled images
  • Improving website performance: gzip compression
  • 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 ảnh nén Progressive JPEG đượ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