Giảm tải hình ảnh với plugin Hammy

Giảm tải hình ảnh với plugin Hammy

Trong bài giới thiệu 8 plugin hỗ trợ tăng tốc website mình đã có giới thiệu qua plugin Hammy rất tốt để sử dụng nếu bạn sử dụng nhiều hình ảnh trên website. Nhưng có một số bạn đã phản hồi lại là chưa biết cách thiết lập plugin này nên gây ra lỗi, vì vậy ở bài này mình sẽ giải thích công dụng của plugin này và hướng dẫn cấu hình nó.

Công dụng của Hammy

Như các bạn cũng biết thì nếu website của bạn có những tấm ảnh rất to với dung lượng khá nặng thì dù bạn tải bức ảnh đó trên di động hay máy tính đều với dung lượng như nhau. Vậy thì hãy tưởng tượng, khách truy cập của bạn đang dùng 3G và truy cập vào website của bạn thì chi phí để họ tải hình ảnh trên trang của bạn là bao nhiêu? Đó là chưa kể đến các tấm ảnh quá lớn so với độ rộng của khung trang website sẽ trở nên thừa thải và làm website tải lâu hơn.

Plugin Hammy sinh ra là để khắc phục nhược điểm này, công dụng của nó là sẽ tự tính toán độ rộng của trang nội dung của màn hình hiện tại, sau đó nó sẽ tự tạo ra một bản cache (có thời hạn) của bức ảnh đó với kích thước phù hợp.

Ví dụ ảnh gốc của bạn là 1280x768px nhưng chiều rộng của khung nội dung trên website của bạn lại thấp hơn chiều rộng của bức ảnh thì nó sẽ tự tạo ra một bản cache của ảnh với breakpoint gần nhất so với chiều rộng của nội dung, và dung lượng cũng như kích thước tấm ảnh đó sẽ nhẹ hơn ảnh gốc.

Nói tóm lại, nó sẽ tự tạo ra các size ảnh nhỏ (và tự xóa đi sau 1 thời gian nhất định) để hiển thị phù hợp với màn hình và chiều rộng nội dung. Khi xem nội dung trên di động nó sẽ hiển thị ảnh nhỏ và sẽ chỉ hiển thị ảnh to nếu bạn xem trên desktop.

Hướng dẫn Hammy

Sau khi cài xong plugin Hammy, bạn hãy vào Settings -> Hammy để thiết lập cho nó. Chỉ có mỗi 2 thiết lập quan trọng thôi nhưng hãy thiết lập cho phù hợp nhé.

hammy-options

Ngay phần số 1, là nơi bạn nhập vùng chọn của khu vực hiển thị nội dung trên website. Bạn hãy sử dụng Google Chrome ấn chuột phải vào nội dung bài viết rồi chọn Inspect Element, sau đó dò tìm xem nội dung nằm trong vùng chọn nào.

hammy-inspect-selector

Tìm vùng chọn của phần nội dung

Nếu nó là class thì bạn nhập là .single-content, nếu nó là ID thì nhập là #single-content.

Phần số 2 là phần khai báo breakpoint, bạn có thể hiểu breakpoint là chiều rộng tối đa mà ảnh sẽ được tạo ra cho mỗi loại màn hình. Ví dụ mình nhập là 320 nghĩa là nó sẽ tạo ra một tấm ảnh với chiều rộng là 320 để hiển thị ở màn hình có chiều rộng từ 320px trở xuống. Tốt nhất bạn nên thêm 3 breakpoint là 320, 568, 768 và có thể thêm 1024 nếu thích.

Phần số 3 nghĩa là các vùng chọn mà nó sẽ không tạo ảnh cache ra, trong thời gian sử dụng nếu thấy bố cục bị vỡ thì xem ảnh đó nằm phần nào rồi thêm vùng chọn vào. Tính năng này mình chỉ khuyến khích các bạn áp dụng cho nội dung bài viết.

Sau khi thiết lập xong thì hãy Save lại và ra website xem kết quả.

hammy-worked

Như bạn thấy bây giờ hình ảnh đã được chuyển sang một link khác và ảnh đó sẽ nằm trong cache, chiều rộng của ảnh cũng được thu lại như chúng ta đã thiết lập trong breakpoint, thời gian tải trang cũng nhanh hơn và nhẹ hơn đúng không nào?

Nguồn: Giảm tải hình ảnh với plugin Hammy | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage & coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben & tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Cách làm dropdown menu bằng Superfish
10 tiêu chuẩn nâng cao trải nghiệm người dùng
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme