Lazy load chỉ dùng cho Image ?

Bài viết này sẽ chỉ cho bạn cách sử dụng lazyload để website chạy vù vù 💨

Có lẽ khi anh em nhắc đến việc sử dụng lazyload cho trang web của mình đa số sẽ đều nghĩ đến việc sử dụng cho image. Thực tế không chỉ sử dụng cho riêng image mà lazyload còn được sử dụng trên nhiều các tài nguyên khác nhau.

Để bắt đầu chúng ta cần tìm hiểu về bản chất lazyload là gì ?

Lazyload (tải lười) là trì hoãn việc tải tài nguyên cho đến khi chúng thực sự cần thiết.
Trong quá trình trau dồi kinh nghiệm và tìm tòi thông tin trên mạng về lĩnh vực lập trình frontend của mình, mình có đọc được một nguyên tắc tối ưu về performance rất hay: "Only load what users want and prefetch what users will want"
Chính điều này về sau đã in sâu vào tiềm thức của mình khi viết code, nó giúp cho các đoạn mã của mình được nâng cao chất lượng và tốc độ trang web cải thiện rất nhiều.

Tại sao lại cải thiện tốc độ ?

Chỉ load những thứ user cần tức là load càng ít càng tốt. Load ít thì tốc độ tải trang cao. Tốc độ tải trang cao thì việc tải các file tĩnh html, css, js nhanh. Việc parse các đoạn mã JS bỏ vào engine cũng vì thế mà nhanh hơn.

Định nghĩa thì đơn giản dễ hiểu như vậy tuy nhiên áp dụng vào thực tế thì sẽ như thế nào ?
Lúc mình còn ít kinh nghiệm, mình thường bỏ quên các bước tối ưu cho các layout như Popover

Hay call cả thư viện clipboard.js chỉ để xử lý một cái hàm duy nhất là copy dòng text

Rồi những thẻ image nằm dưới cuối trang

Mình dám cá rằng khi anh em làm việc với framework 99% anh em có ít kinh nghiệm sẽ đều đang ném thẳng những đoạn code đó vào mặt user của mình.

Sau này khi tìm hiểu được nhiều kiến thức hơn, mình thấy được rằng chúng ta có thể đẩy rất nhiều các user interactive ra lazyload.
Nó có thể là:

• Modal chỉ xuất hiện khi user click vào một button nào đó
• Popover/ Tooltip xuất hiện khi hover
• Action copy link
• Image khi scroll xuống dưới

Nếu tư duy theo hướng trang web là những layer xếp chồng lên nhau thì những layer bên trên có thể lazy được

Cụ thể hơn chúng ta sẽ đi vào ví dụ:

Ví dụ với Component

Ở đây mình sẽ tách riêng component Login

// File LoginModal.tsx

import { useState } from 'react';
import { Modal, Input, Button } from 'antd';

const LoginModal = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

    return (
        <Modal>
            <Input placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
            <Input placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
            <Button>Login</Button>
        </Modal>
    );
}

export default LoginModal;

Sau đó mình sẽ lazy import component

import { Suspense, useState } from "react";
const LoginModal = React.lazy(() => import('components/LoginModal'));

const HomePage = () => {
  const [showLoginModal, setShowLoginModal] = useState(false);

  return (
    <div>
      Some other stuff here

      {showLoginModal && <Suspense fallback={null}>
        <LoginModal />
      </Suspense>}
    </div>
  );
};

export default HomePage;

Xong lúc này component Login sẽ chỉ được load hoàn toàn khi trạng thái showLoginModal = true

Ví dụ tiếp theo là đối với những action cần cài lib

import { Button } from "antd";

const PostItem = () => {
  const handleCopy = (e) =>{
    import('clipboard.js').then(module => {
      module.default('Hello world from thanhle.blog')
    }).catch(error => {
      console.log(error);
    })
  }
  return (
    <div>
      Some other stuff here

      <Button onClick={handleCopy}>Copy to clipboard</Button>
    </div>
  );
};

export default PostItem;

Có thể thấy rằng clipboard.js chỉ được load khi user click vào button thay vì được load cùng lúc tải function component

Khi scroll image

<img src="https://thanhle.blog/_next/image?url=%2Fme.jpeg&w=128&q=75" loading="lazy" alt="Thanh Le" />

Dạng này thì quá quen thuộc rồi

Lợi ích là thế tuy nhiên chúng ta sẽ phải đánh đổi gì khi sử dụng ?

Cái gì cũng có hai mặt và sự đánh đổi
Để đổi lấy việc

• giảm bundle file cho user
• tốc độ load trang
• SEO
• tăng điểm bigspeed

Bạn phải trả giá:

• User phải chờ một chút khi có action
• Code nhiều hơn, dài dòng hơn, khó maintain

Thế nên mình rút ra kinh nghiệm cho bản thân:
Chỉ sử dụng cho action mà user hiếm khi dùng tới.
Dùng cho web chú trọng SEO hoặc những interactive phức tạp

Trên đây là chia sẻ của mình về việc tối ưu hiệu quả sử dụng lazy load. Chúc các bạn thực hành thành công 😉.