LazyLoad hiệu quả để website chạy nhanh như một cơn gió 💨

Tại sao nên đọc bài này?

• Quy hoạch những phần có thể LazyLoad trên một website để optimize speed

• Một cách đơn giản nhất để cải thiện loading time

Chỉ load những thứ user cần

Only load what users want and prefetch what users will want

1. Chỉ load những thứ user cần

2. Nghĩa là load càng ít càng tốt

3. Càng ít, nghĩa là dung lượng file gửi xuống cho user nhỏ hơn

4. Nghĩa là thời gian chờ network download cái file xuống cho user nhanh hơn

5. Nghĩa là thời gian parse cái file bỏ vào JS engine nhanh hơn

6. Website chạy nhanh hơn 💨

Vậy những thứ gì có thể lazyload?

• Modal chỉ xuất hiện khi user click vào button nào đó

• Popover/tooltip khi user hover

• Action copy link

• Img khi user scroll xuống dưới

Đối với component

1. Tách các component ở layer interact ra file riêng

// 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;

2. 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;

Đối với những action cần library

1. Đưa các depedencies library vào trong hàm interaction

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;

Khi scroll

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

Tradeoff

• Giảm tối đa bundle size gửi xuống cho user

• SEO tốt hơn

• Liệu cắt được vài chục kB có tốt hơn? Có vài chục kB ở lượt ở mỗi trang sẽ là big problem cho điểm PageSpeed của bạn đó

• User sẽ phải chờ một chút khi có action gì đó. Mình nghĩ cái này không phải là vấn đề lớn, hấu hết khi load các chunk này thì size rất nhỏ nên chỉ mất tầm 100ms để load

• Nhiều code hơn, nghĩa là có khả năng nhiều bug hơn

• Code hơi khó đọc hơn, nghĩa là hơi khó maintain hơn

Summary