Lazy load ảnh là gì? Tối ưu lazy load ảnh

Lazy load là một kĩ thuật trì hoãn tải ảnh chỉ tài khi cần thiết, lazy load giúp bạn tiết kiệm giảm tải cho webhost và tăng tốc lên đáng kể website.
Với các Blogger như mình thì lazy load ảnh là một kĩ thuật không thể thiếu.

Các trang thương mai điện tử có nên sử dụng hay không?

Lazy load ảnh là một thủ thuật được rất nhiều cao thủ tối ưu WordPress yêu thích và rất nhiều cao thủ tối ưu WordPress ghét, đó là trên thế giới.

Nhưng mình thấy các trang lớn của Việt Nam như điện máy xanh, fpt… taobao của trung quốc đều sử dụng lazy load, là một kĩ thuật quan trọng trong tải nghiệm người dùng, nó củng cố niềm tin của tôi rằng toàn những ông lớn sử dụng lazy load chắc họ đã nghiên cứu kĩ hết rồi, một blogger nhỏ nhoi như mình thì sao phải suy nghĩ.

Tóm lược nhẹ lại thì theo cá nhân mình lazy load rất tốt cho website với điều kiện bạn phải tối ưu chuyển cách thật tốt giảm sự khó chịu của lazy load, mình sẽ chia sẻ bí quyết giảm sự giật lag của lazy load với một đoạn css được học hỏi từ website Điện Máy Xanh, rất quen thuộc với người Việt Nam chúng ta.

Cảm ơn Điện Máy Xanh một website tuyệt vời để học hỏi.

Bạn muốn nhận đoạn code tối ưu mình sẽ nói ở dưới bài viết : Bạn có thể sử dụng cho litespeed cache hay plugin wp-rocket và themes flatsome. Mình làm mẫu 3 kiểu này thôi nhé!

Litespeed cache hay plugin wp-rocket là 2 plugin mình rất yêu thích, cũng thiên vị cho themes flatsome vì đây là themes thuộc những năm đầu tiên, vì đây là themes có người sử dụng Việt Nam khá đông đảo, vì có ux builder dễ dàng tạo trang.

Quay trở về chủ đề chính.

Phân loại lazy load

1: lazy load bằng javascript, đây là cách phổ biến và hiện tại là tốt nhất, đại điện một số plugin wp-rocket lazy load, litespeed lazy load… và một số themes hỗ trợ lazy load như flastome… nếu bạn có thể tự làm bằng javscript tuy nhiên theo mình tốt hơn và đơn giản hơn là dùng plugin hoặc themes tích hợp sẵn họ cập nhật phát triển cho mình.
2: lazy load native là một kĩ thuật lazy load tính năng sẵn có sẵn của trình duyêt của google những bản mới nhất, đây là một phương pháp mới và khá hay nhưng thật sự ít trình duyệt hỗ trợ và nó còn mới vẫn cần thời gian thêm để phát triển đây mình nghĩ sẽ là tương lai của thế hệ lazy load. Hiện tại thì nó vẫn chưa nên sử dụng 2020 nếu bạn có thời gian hãy sử dụng thử như theo mình an toàn hơn là hãy sử dụng lazy load javscript.

Lazy load native do google phát triển bản có thể tải plugin WordPress do google phát triển: Native Lazyload của google trước mình nghe tin google phát triển plugin cho WordPress mình vui lắm được vài tháng giờ mất hút chưa thấy phát triển cho WordPress nhiều thêm vẹo thật.

Cách thức hoạt động của lazy load ảnh

Hiểu một cách đơn giản là nó khai báo một ảnh giả dạng html base64 để trình duyệt xác nhận là đã load xong thế là cho hiện thị trang, rồi khi người dùng load đến đâu thì sẽ hiện thị ảnh đến đó.

Như vậy rất tốt cho tăng tốc độ load website mà người dùng không mất thời gian phải đợi, giảm được thời gian hiển thị đầu trang, một chỉ số quan trọng bậc nhất trong tối ưu tốc độ website.

Làm như thế nào để kích hoạt lazy load

1: Hãy sử dụng plugin : Mình đánh giá cao các plugin này wp-rocket tích hợp sẵn lazy load và litespeed cache lazy load và Flying Images, mình không đánh giá cao các một như a3 lazy load, bj lazy load… những plugin lazy load ảnh tốt nhất dành cho WordPress
2: Sử dụng javascript tự làm : Cách này mình khuyên là không nên làm để các plugin chuyên gia họ làm thì vẫn tốt hơn, mình chỉ là một trong những blogger cơ bản không thực sự phải làm cách này, nếu bạn là lập trình viên chuyên nghiệp thì có thể hãy sử dụng cách này nhưng nó có thể tùy biến theo nhu cầu website của bạn một cách chính xác nhất.
3: Sử dụng themes tích hợp sẵn tính năng lazy load ảnh như flatsome mình phải tùy chỉnh thì nó mới ngon được, mình thấy cách themes thì cũng khá hay để đảm bảo tương thích tốt nhất nhưng đa phần sẽ không có nhiều tùy chọn tùy biến thêm cho người dùng…

Cách mình đang sử dụng và mình nghĩ là tốt nhất và yêu thích nhất về lazy load ảnh là sửa lại, mod lại plugin theo chính xác nhu cầu của mình.

Sử dụng lazy load có tăng điểm số công cụ chấm điểm không

Câu trả lời là có nhé, tăng nhiều là đằng khác, nó chỉ thêm một đoạn javascript không nặng lắm và được tối ưu tốt họ sẽ trì hoãn javscript đó defer.

Cách sử dụng lazy hiệu quả và tối ưu

Mình phải skip-lazy bỏ lazy load những ảnh đầu trang, một số plugin tối ưu thật sự thì họ đã làm sẵn cho mình rồi. Nếu bạn không skip-lazy load ảnh đầu trang mà bị trì hoãn là bị tác hại của lazy load chứ không phải tác lợi điểm này bạn phải thật sự lưu ý kĩ lưỡng.

Khi trì hoãn javascript thì html hoàn tất, nó mới bắt đầu phân tích cú pháp, ảnh lazy load mới được hiện thế thì toang, giảm khả năng hiện thị đầu trang giảm chất lượng website đi thì đúng hơn.

Ảnh trên mình minh họa về chiến lược trì hoãn defef javscript. Bạn có thể tim hiểu các chiến lược tải javascript để tăng tốc độ website.

Một plugin sẽ về lazy load ảnh sẽ có 1 class ngừng lazy ảnh đó ví dụ litespeed lazy load là skip-lazy hãy tìm hiểu hoặc hỏi nhà phát triển plugin về class đó là gì để bạn sử dụng nhé, thậm chí có những plugin họ còn hỗ trợ làm bạn chỉ cần gắn url đường dẫn ảnh là loại bỏ lazy load ảnh đó.

Có trường hợp họ không có tích hợp sẵn class ngừng lazy nhưng mà bạn rất thích lazy load của plugin đó bạn có khả năng, hãy xâm nhập vào hệ thống plugin của họ, tự tạo cho mình cái này thì cần một kỹ năng tuy nhiên theo cá nhân mình họ không hỗ trợ class ngừng lazy thì bỏ đi dùng plugin khác cho nhanh để thuận tiện cho cập nhật sau này.

Vòng lặp ảnh hãy bỏ lazy load.

Bạn có 2 ảnh xuất hiện cùng một trang và cùng một link ảnh hiển thị, nếu bạn dùng lazy load trình duyệt sẽ tải 2 lần làm tiêu tốn tài nguyên máy chủ của bạn, hãy skip-lazy trình duyệt tải 1 cái còn 1 cái kia sẽ cache trước đó không phải load thêm lần nữa.

Những file javascript ảnh thì tốt nhất bạn hãy để mặc định không nên trì hoãn hoãn defer.

Sử dụng css để tạo hiệu ứng chuyển cảnh đẹp giảm sự khó chịu cho giật của lazy load với css

Thông thường sẽ có 2 cách tùy thuộc vào plugin hay themes phương thức bạn hoạt động. Hãy cho nó vào file style.css nhé.

Phương pháp này chỉ áp dụng được cho lazyload bằng javascript không thể áp dụng cho lazy load mặc định của trình duyệt, nguyên lý là khi lazyload thì sẽ thực thi xóa class nào đó hoặc là thêm class nào đó vì vậy mới có thể thực hiện được kỹ thuật này.

Phương pháp 1: Css rời 2 đoạn đây là đang sử dụng litespeed lazy load bạn hoặc nếu bạn đang sử dụng plugin hay themes hay thay class tương ứng.

Ví dụ ở đây là litespeed cache plugin lazy load, khi người dùng kéo đến ví trị của anh thì file plugin sẽ thực thi add thêm class litespeed-loader vào phần thử img.

Cách thực hiện:

/* PART 1 - truoc chuyen canh Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - hieu ung khi chuyen canh Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .3s ease-in;
	-moz-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
	opacity: 1;
}

Phương pháp 2: css class liền ví dụ một số plugin hay themes đang sử dụng hay ví bạn đang sử dụng themes flastome mình đã tối ưu…

.lazy-load {-ms-opacity:0;opacity:0;-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;-ms-transition:opacity .3s ease-in;-o-transition:opacity .3s ease-in;transition:opacity .3s ease-in}

Phương pháp này tác giả plugin sử dụng phương pháp khi người dùng kéo đến vị trí của ảnh thì javascript xóa thực thi removeclass(lazy-load) xóa class lazy-load ở trong phần tử img bên trên đi.

Nếu bạn đang dùng một plugin nào đó thì hãy thử xem một trong 2 phương pháp, phương pháp nào hoạt động được thì sử dụng nhé.

Nguyên lý là nếu lazyload phương pháp thêm class thì dùng phương pháp 1 và nếu xóa class thì dùng phương pháp 2, mỗi một tác giả thì họ sẽ đặt tên class khác nhau bạn thay thế sao cho phù hợp với plugin của bạn đang sử dụng. Còn nếu trong trường hợp không xóa và cũng không thêm thì chịu rồi.

Còn với plugin lazy load của wp-rocket thì là đoạn code này:

.lazyloading{
	opacity: 0;
} 

.lazyloaded{
	-webkit-transition: opacity .3s ease-in;
	-moz-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
	opacity: 1;
}

Kiểm tra xem chuyển cảnh có hoạt động tốt

Bạn hãy nâng nên từ 0.3 thành 20 giây chả hạn cho nó chậm thôi rồi để xem nó có hoạt động không.

Công thức kiểm tra.

/* PART 1 - truoc chuyen canh Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - hieu ung khi chuyen canh Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity 20s ease-in;
	-moz-transition: opacity 20s ease-in;
	transition: opacity 20s ease-in;
	opacity: 1;
}

.lazy-load {-ms-opacity:0;opacity:0;-webkit-transition:opacity 20s ease-in;-moz-transition:opacity 20s ease-in;-ms-transition:opacity 20s ease-in;-o-transition:opacity 20s ease-in;transition:opacity 20s ease-in}

Sử dụng một trong 2 để kiểm tra xem bạn thật sự hoạt động hiệu quả với cái nào thì sử dụng nhé, nếu mình chỉ làm ví dụ điển hình litespeed cache lazy load và flatsome lazy load, còn các plugin khác bạn hãy hay class tương ứng nhé.

Mình sẽ làm mỗi cho bạn một bức ảnh này bạn nếu chưa xem được bạn hãy f5 lại trình duyệt và tập trung vào bực ảnh này ngồi nhìn nó 20 giây.

Phương pháp chuyển cảnh này mình học hỏi từ Điện Máy Xanh một website rất nổi tiếng ở Việt Nam.

Đoạn css này khuyến cáo tốt nhất hãy cho vào style.css ở dưới cuối cùng file cho xong clear cache đi nếu bạn đang dùng cache.

Dành riêng cho themes flatsome

Để sử dụng hiệu quả nhất cho flastome bạn hãy vào đường dẫn themes

wp-content/themes/flatsome/assets/css/flastome.css tìm và xóa dòng mã này đi nhé.

.lazy-load {
    background-color: rgba(0, 0, 0, 0.03)
}

Truy cập vào quan trị website.
flatsome > advanced > performance

LAZY LOAD BANNER AND SECTION BACKGROUNDS trong cài đặt flatsome hãy tắt nó đi sẽ tốt hơn.
LAZY LOAD IMAGES hãy bật nó lên.

Nếu bạn có thắc mặc gì hãy đặt câu hỏi ở dưới bình luận!

Dành riêng cho Plugin A3 lazy load

img.lazy-hidden{
	opacity: 0;
}

img.lazy-loaded{
	-webkit-transition: opacity .3s ease-in;
	-moz-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
	opacity: 1;
}

Dành riêng cho Plugin WP rocket

[data-lazy-src]{opacity:0}
.lazyloaded{
-ms-opacity:0;opacity:0;-webkit-transition:opacity .3s ease-in;-moz-transition:opacity .3s ease-in;-ms-transition:opacity .3s ease-in;-o-transition:opacity .3s ease-in;transition:opacity .3s ease-in
opacity:1;}

Dành riêng cho Plugin LiteSpeed cache

/* PART 1 - truoc chuyen canh Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - hieu ung khi chuyen canh Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .3s ease-in;
	-moz-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
	opacity: 1;
}

Dành riêng cho plugin perfmatters

img.perfmatters-lazy{opacity: 0;}img.loaded{-webkit-transition: opacity .3s ease-in;-moz-transition: opacity .3s ease-in;transition: opacity .3s ease-in;opacity: 1;}
</pre<