Hướng dẫn cụ thể việc dùng lazy load image cho web wordpress

Hướng dẫn cụ thể việc dùng lazy load image cho web wordpress
Hướng dẫn cụ thể việc dùng lazy load image cho web wordpress

Mình xin viết bài hướng dẫn cụ thể việc dùng lazy load image cho web wordpress.

Mặc định các bạn đã cài 1 plugin nào đó để dùng lazyload image.

Sau khi cài xong, các bạn truy cập web trên schrome, bấm f12 rồi bấm vào tabs Network rồi chọn Img. Sau đó bấm vào nút toggle device toolbar (ctl shift M). Sau đó chọn thiết bị giả lập là iphone hay gì cũng đc (vì 70% người dùng là xài mobile). Nhìn vào hình 1 để biết vị trí nút.

Sau đó bấm refresh web, lúc này các bạn ko thao tác kéo lên kéo xuống web mà ngồi đợi 1 lúc các bạn nhìn xuống phía dưới timeline sẽ biết đc các file hình nào sẽ load lúc khách mới truy cập.

Đọc vào timeline, nếu có nhiều hình được load mà màn hình giả lập ko có hiện nghĩa là đó là những hình mà khách khi kéo xuống mới thấy thì rõ ràng đó là những hình mình ko cần thiết phải tải.

Lúc này các bạn đọc hướng dẫn của plugin lazy mà bạn cài, tìm mục nào expand thì set về 1. Hoặc tự code script để set về 1 tuỳ plugin bạn dùng.

Sau đó bạn lại refresh để test thử xem có còn load những hình ở nội dung phía dưới nữa ko

Tiếp đến là giải quyết các hình bắt buộc tải ở màn hình đầu tiên. Thường sẽ là các file hình icon menu, logo web, banner, slide, back to top, phone…Hình thứ 2

Bây h mình giải quyết hình banner và slide. Nếu là mình thì mình sẽ bỏ slider đi vì nó ít nhất cũng là 3 tấm hình. Trong trường hợp ko bỏ được thì ráng tối ưu giảm dung lượng tới mức tối thiểu mà các bạn chấp nhận.

Giả xử bây h còn là slide hoặc banner. Các bạn tinh ý thì phía dưới slide, banner các bạn cố gắng thiết kế chữ, chèn nội dung sao cho tấm hình tiếp theo nó ở phía dưới màn hình điện thoại. Mục đích là để nó ko phải load lúc đầu.

Còn lại là logo, mấy hình chưa giải quyết thì các bạn convert thành svg cho nhẹ dung lượng vì svg là chủ yếu dùng cho mấy cái này.

Nếu là icon gặp mình thì mình sẽ thay thành text hết. Text là sao, nghĩa là các bạn lên google search từ menu symbol text rồi ưng cái nào thì copy paste thay cái icon menu đó. Theme nào lỡ khai báo theo kiểu font awesome ( ) thì các bạn f12 rồi bấm vô rồi thay đổi css content=”☰” xem có ok ko? Nếu ok thì khai báo lại css cái icon đó. Đây là text menu ☰, còn đây là wishlist ♡, đây là mũi tên back to top ⌅ , mũi tên lên xuống ˄ ˅ , icon cart thì mình dùng cái này ≱ ^^…….mình đã test trên android và ios đều hiển thị ok

Sau khi giải quyết hết mấy cái trên, các bạn khai báo thẻ preload cho mấy cái hình trên là xong, ai làm kiểu css content thì ko cần khai báo cái text đó

Làm xong mình có thể đảm bảo điểm các bạn tăng rõ rệt trên mobile và trải nghiệm thực tế khác hẳn.

guest
0 Comments
Inline Feedbacks
View all comments