Sử dụng Google PageSpeed Insights để nén ảnh, tại sao không?

Sử dụng Google PageSpeed Insights để nén ảnh, tại sao không?

Mọi người đều biết tới Google PageSpeed Insights – một công cụ hỗ trợ tối ưu tốc độ tải trang và thân thiện với người dùng do Google cung cấp. Tại sao chúng ta không sử dụng chính nó để làm công cụ nén ảnh hàng loạt thay cho những plugin của WordPress?

Ý tưởng của cách này như sau:

  • Show toàn bộ ảnh trong thư mục uploads của WordPress lên 1 url. Cơ chế lưu ảnh của WordPress dạng năm/tháng, bạn chỉ việc cho hiển thị hết các hình ảnh của từng tháng cho đến hết năm.
  • Truy cập vào Google PageSpeed Insights và tối ưu url đó.
  • Download toàn bộ ảnh mà Google nó nén cho bạn và up đè lại ảnh trong thư mục upload của WordPress

Quá đơn giản phải không?

Xem thêm: Hướng dẫn tối ưu hóa Google Pagespeed Insights cho WordPress

Để thực hiện được việc này chúng ta cần có một đoạn code để hiển thị toàn bộ ảnh lên 1 url. Code gốc bạn có thể tham khảo tại đây, nhưng chúng ta chỉnh sửa đoạn code này một chút (code được chỉnh sửa bởi bạn  Đinh Quốc Hân.

Code chỉnh sửa sẽ có thêm hai chức năng là: giới hạn số lượng ảnh hiển thị và phân trang. Cụ thể mình sẽ nói bên dưới.

B1: Upload code lên Hosting

Sau khi bạn tải về và giải nén, bạn upload lên Hosting/VPS của bạn để sử dụng. Như trong ảnh mình đổi tên thư mục thành nenanh.

Upload code lên hosting

Sau đó bạn copy thư mục hình ảnh của WordPress vào thư mục bạn vừa upload như hình.

Copy thư mục ảnh để hiển thị

B2: Chỉnh sửa hiển thị ảnh

Trong code mình cung cấp phía trên thì bạn chỉ cần quan tâm file ins-imgs.php mà thôi. Để hiển thị ảnh thì bạn làm như sau:

1. Mở file ins-imgs.php tìm tới dòng 06 và thay bằng đường dẫn tới folder bạn muốn hiển thị ảnh:

Như phía trên thì mình đã copy thư mục 2017 vào trong thư mục chứa code, thư mục 2017 này sẽ chứa 12 thư mục con của 12 tháng. Mình chỉ việc thay tháng để nó show hình ảnh của tháng đó và làm từ tháng 01 -> 12, tương tự thì bạn làm với các năm khác (nếu có).

Tiếp theo, ta chỉnh sửa số hình ảnh tối đa để hiển thị tại dòng 43:

Số 70 có nghĩa là hiển thị tối đa 70 bức ảnh trong thư mục mà bạn chỉnh ở dòng 06. Mình khuyên bạn nên để từ 50 – 70 vì nếu để nhiều Google sẽ không nén được và có thể nó sẽ nén không được tối ưu.

Nếu bạn có nhiều hơn 70 tấm thì cũng đừng lo, code đã có chức năng phân trang. Ví dụ thư mục 2017/02 của mình có 120 tấm ảnh và mình cài hiển thị 70 tấm mỗi trang.

Khi mình truy cập vào https://namngo.net/nenanh/?page=1 thì trang này sẽ hiển thị 70 tấm ảnh và trang https://namngo.net/nenanh/?page=2 sẽ chứa 50 tấm còn lại (120 – 70 = 50). Nếu thư mục của bạn có 1000 tấm thì cứ truy cập từ trang 1 cho đến khi hiển thị hết số ảnh thì thôi.

Cuối cùng thì bạn lưu lại nhé.

B3: Sử dụng Google PageSpeed Insights để nén ảnh

Sau khi chúng ta đa chỉnh sửa code ở phía trên thì bạn truy cập vào thư mục đó sẽ hiển thị ảnh của đường dẫn sửa ở đoạn 06.

Hiển thị ảnh trong thư mục upload

Tiếp theo ta truy cập vào: https://developers.google.com/speed/pagespeed/insights/ và điền trang chứa ảnh để nó tối ưu.

Điền url vào Google Pagespeed Insight

Sau khi được Google PageSpeed Insights nén ảnh thì ta chỉ cần tải toàn bộ số ảnh đã nén đó về máy và upload lên lại thư mục chứa ảnh của WordPress.

Tải ảnh đã nén bởi Google

Như đã nói ở trên, nếu một thư mục có nhiều ảnh thì bạn sử dụng chức năng phân trang và cho Google nó nén ảnh hết từng trang một sau đó tải về và cho những file này vào đúng thư mục gốc. Lưu ý là làm thật cẩn thận để không bỏ sót một ảnh nào.

Như vậy mình đã giới thiệu cho bạn 1 cách sủ dụng Google PageSpeed Insights để nén ảnh hàng loạt cho trang WordPress rồi đó. Ngoài ra bạn có thể xem thêm Thủ thuật tối ưu hình ảnh trước khi đăng lên website để biết thêm cách tối ưu hình ảnh

Ý tưởng của bài viết thuộc về NamLee.Net tại https://namlee.net/huong-dan-su-dung-google-pagespeed-insights-lam-cong-cu-nen-anh/ vì mình thấy nó quá hay nên đem về cho mọi người cùng đọc.

Sử dụng Google PageSpeed Insights để nén ảnh, tại sao không?
5 (1 vote)

Để lại một bình luận

2 Bình luận trên "Sử dụng Google PageSpeed Insights để nén ảnh, tại sao không?"

avatar
500
Đặng Quốc Thắng
Khách

Lâu lâu mới thông báo có bài. Bài viết rất cần thiết cho mọi người làm website.

wpDiscuz
Đăng kí BẢN TIN

Đăng kí BẢN TIN

Đăng kí bản tin to cập nhật bài viết nhanh nhất and receive the following phần quà hấp dẫn từ Nam Ngô Blog.

Bạn đã đăng kí thành công!