Laravel8x: Hướng dẫn tích hợp lazy loading cho website

Xin chào các bạn, trong bài viết trước đó mình đã chia sẻ về khái niệm lazy loading, trong bài viết này mình sẽ tập trung vào việc triển khai lazy loading cho website với framework là laravel version 8x ( mới nhất tại thời điểm này).

Chuẩn bị

Cài đặt project laravel8x
– Chuẩn bị hình ảnh

Các bức thực hiện

1. Download và nhúng thư viện lazy loading vào site

Trong bài viết này mình sẽ dùng Polyfill để lazy loading hình ảnh, và mình sẽ nói rõ lý do tại sao mình dùng nó mà không dùng thư viện khác.

Tại sao sử dụng Polyfill mà không sử dụng thư viện khác như lazysizes:

1.  Hầu hết trình duyệt hiện đại đều hỗ trợ lazy load thông qua thuộc tính lazy loading=“lazy” và chúng ta không cần phải viết một đoạn script nào, điều đó dẫn đến trải nghiệm của người dùng nhanh hơn và nó được Mozilla khuyến nghị nên dùng.
2. Thư viện Polyfill chỉ được kích hoạt trên các trình duyệt cũ và safari, điều giúp cho tiết kiệm tài nguyên máy khách một cách tối đa.
3. Trong trường hợp script không tải được:
– Lazysizes: Không có hình ảnh sẽ được tải, hình ảnh sẽ không hiển thị bởi vì URL hình ảnh được ẩn trong thuộc tính data-src và nó không có cơ chế dự phòng.
– Polyfill: Cung cấp một cơ chế chuyển đổi dự phòng mạnh mẽ với việc sử dụng trình bao bọc noscript, CSS và thuộc tính src.
Download thư viện
Hoặc cài đặt thông quan NPM:

Sử dụng Laravel sail thì dùng command này tại folder gốc (ví dụ laravel8x-app) của project.

Vào file laravel8x-app/resources/js/bootstrap.js, mở file bootstrap.js để nhúng thư viện polyfill vào.

Nếu bạn chưa run npm install cho project laravel thì bạn hãy chạy lệnh này:

Đối với Laravel sail:

Tiếp đó chạy lệnh sau để build script của ứng dụng
Môi trường dev

Môi trường production

Tương tự cho Laravel sail thì theo cú pháp: ./vendor/bin/sail command.
Sau khi bạn hoàn thành các bước trên thì bạn đã nhúng được thư viện Polyfill vào project.

Làm thế nào để bạn biết rằng mình đã nhúng thư viện thành công?

1. Kiểm tra xem output khi chạy câu lệnh npm run dev or npm run prod có xảy ra lỗi không?
2. View source code app.js xem có mã của thư viện chưa?

result output command
Ảnh minh hoạ kết quả sau khi chạy command

2. Áp dụng lazy loading cho hình ảnh

Thêm hình ảnh vào project:

Copy hình ảnh đã chuẩn bị sang folder storage có đường dẫn như sau: storage/images
Tiếp theo cấu hình đường dẫn cho hình ảnh vào file config/filesystems.php, tại key links, thêm một đường dẫn vào như sau:

Sau đó tạo một symbolic link bằng cách:

Tạo route product để ứng dụng lazyload:

Trong file laravel8x-app/routes/web.php thêm vào đoạn code như sau:

Ý nghĩa đoạn code trên: Tạo một route là product, nó có 35 sản phẩm và có sử dụng lazy loading. Đây là code mẫu dùng để tham khảo, khi code dự án thực tế bạn nên dùng controller để thay thế và code chuẩn theo mô hình MVC.

Tạo giao diện

Tạo file product.blade.php trong folder laravel8x-app/resources/views có nội dung như sau:

Mở đường dẫn http://localhost:8084/product để xem kết quả.

laravel8x-demo-lazy-loading
Ảnh kết quả của tích hợp laravel8x lazy loading

Chú ý: Trong lúc triển khai lazy load tôi có sử dụng một số kỹ thuật như sau:

1. Không áp dụng lazy loading cho khung nhìn đầu tiên, nên áp dụng khi dữ liệu ngoài tầm nhìn của user.
2. Xử lý lỗi trong trường hợp không tải được hình ảnh.
3. Đưa ra noscript trong trường hợp JavaScript không có sẵn, thư viện đã hỗ trợ
4. Sử dụng thuộc tính widthheight cho hình ảnh.
Bài viết trước đó mình có chỉ ra một số điểm cần chú ý khi dùng lazy loading nếu quên bạn có thể xem lại nó ở đây

Tổng kết

Qua bài viết này thì tôi tin rằng bạn cũng có thể hiểu về lazy loading như thế nào, và đã trả lời được câu hỏi tại sao lại dùng nó, và các thủ thuật hay khi triển khai lazy loading.

Source code

Hi vọng sẽ giúp được bạn. Thanks