Thời gian tải trang WordPress của bạn là một trong những yếu tố quan trọng giúp bạn tạo được thành công. Nhưng liệu bạn đã thực sự làm mọi thứ có thể để tăng tốc độ trang của mình? Chắc chắn rằng hiện tại bạn đã có thể làm được những việc cơ bản như chọn 1 máy chủ WordPress tuyệt vời và cài đặt một plugin bộ nhớ đệm. Thế nhưng, có bao giờ, bạn dùng thử lazy loading cho một số nội dung WordPress chưa?
Trong bài viết kì này, mình sẽ giới thiệu cho các bạn biết Lazy Loading là gì và làm thế nào để nó có thể đem lại hiệu suất tốt nhất cho trang web của bạn. Kế đó, mình sẽ chỉ cho bạn làm thế nào để thực hiện Lazy Load trên trang WordPress của bạn trong 3 mục sau:
- Comments.
- Images.
- Youtube Videos.
Nào! Chúng ta cùng bắt đầu bài viết Hướng dẫn Lazy load wordpress Comments, Images và Youtube
Lazy Loading là gì?
Trong cuộc sống, cha mẹ và thầy cô của bạn luôn dạy bạn rằng lười biếng là một thói xấu. Nhưng theo mình, lười biếng cũng không hẳn là xấu khi nó giúp bạn TĂNG TỐC trang WordPress của mình.
Lazy Loading là một dạng tối ưu hóa hiệu suất hoạt động bằng cách trì hoãn việc tải các tài liệu nhất định sau khi trang ban đầu được tải. Vì Lazy Loading là một ẩn ngữ, nên để hiểu được nó hoạt động ra sao?
Khi người dùng tải trang đầu tiên của bạn, họ chỉ nhìn thấy được các nội dung có thể xem được trên màn hình ( hay còn được biết đến là nội dung phần nửa trên của trang web), đúng không?
Do đó, bất kì nội dung của phần bên dưới không nhất thiết cần phải tải ngay tức thì. Như vậy, về cơ bản Lazy Loading sẽ giúp trì hoãn một số nội dung cho đến khi những người truy cập bắt đầu dịch chuyển xuống dưới để nhìn thấy mọi thứ.
Lazy Loading giúp cho trang WordPress của bạn hoạt động nhanh hơn như thế nào?
Đó là tất cả kích thước trang của bạn và số lượng yêu cầu sẽ bị giảm đi.
Ví dụ, bạn có biết rằng trung bình 65% kích thước trang của bạn đều phủ đầy rất nhiều hình ảnh? Trong thực tế điều đó có nghĩa là:
Các trang có thông số trung bình khoảng 2MB, 1.3MB trong đó được dùng cho việc đăng ảnh. Như vậy, Lazy Loading cho phép bạn có thể giảm bớt đi lượng hình ảnh ngay khi trang ban đầu của bạn được truy cập. Bằng cách này, bạn chỉ cần tải những hình ảnh có kích thước lớn ngay khi người truy cập tham gia vào trang của bạn.
Kế tiếp là các đoạn video. Bởi vì video chiếm 10% kích thước trang nên việc sử dụng Lazy Loading là rất cần thiết. Cuối cùng đó là những phần bình luận. Trên mỗi chủ đề mà mình từng thấy trên WordPress, phần bình luận này thường nằm phía dưới bài viết. Vì vậy, bạn thực sự không cần phải tải chúng cho đến khi độc giả bắt đầu di chuyển xuống dưới trang.
Việc Lazy Loading phần comments trở nên quan trọng hơn nếu bạn đang sử dụng hệ thống thứ 3 để nhận xét như Disqus hoặc Facebook. Những hệ thống này thường bổ sung các yêu cầu không cần thiết khiến cho thời gian tải trang của bạn bị chậm lại.
Nào bây giờ mình sẽ hướng dẫn cho bạn cách dùng Lazy Loading cho phần comment, hình ảnh và Videos YouTube trên WordPress.
Lazy Loading đối với Native WordPress Comments
Native WordPress Comments là hệ thống nhận xét đi kèm với cài đặt WordPress. Nêu bạn không cài dặt một plugin để chuyển đổi cách xử lý các ý kiến của bạn thì bạn có thể sử dụng Native WordPress Comments.
Để thực hiện Lazy Loading đối với Native WordPress Comments. Bạn có thể cài đặt trực tiếp từ bảng điều khiển sau: Plugins > Add New và tìm kiếm Native WordPress Comments.
Một khi nó đã được kích hoạt, bạn có thể dùng Lazy Loading cho phần Comment bằng cách: Settings Discussion Lazy Load Comments
Lúc này, bạn sẽ thấy được một khung menu khá quan trọng với các nội dụng sau:
- On Scroll: phần ý kiến sẽ bắt đầu tự động tải khi truy cập của bạn di chuyển xuống dưới trang. Không yêu cầu bất kì hành động từ phía người truy cập.
- On Click: phần ý kiến chỉ tải khi người dùng của bạn nhấp chuột vào nút Load Comment. Có yêu cầu hành động từ phía người truy cập.
- No Lazy Load- tắt hoàn toàn chức năng Lazy Load.
Dưới đây là mẫu ví dụ cho muc On Click:
Bây giờ, Lazy Loading đã được dùng cho phần Comments của bạn.
Lazy Loading đối với Disqus WordPress Comment
Nếu bạn đang sử dụng Disqus thì bắt buộc phải dùng đến Lazy Loading. Bởi vì, khi bạn dùng Disqus, trang web của bạn sẽ được yêu cầu dùng thêm một số yếu tố bên ngoài. Nếu bạn không dùng Lazy Loading thì trang web của bạn sẽ bị tải chậm đi.
Để dùng Lazy Loading cho Disqus Comment, bạn có thể dùng Plugin Diqus Conditional Load. Cũng giống với việc dùng Lazy Load cho phần Comment, nút Disqus Conditional Load hoàn toàn miễn phí và có thể được cài đặt trực tiếp từ bảng điều khiển WordPress của bạn.
Lưu ý: Disqus Conditional Load là một plugin độc lập. Điều đó có nghĩa là nó phải được xử lý tích hợp để đưa Disqus Comments vào trang web của bạn cũng như việc thêm vào Lazy Loading. Nếu bạn đã chính thức sử dụng Disqus plugin, bạn cần phải tắt nó trước khi cài đặt Disqus Conditional Load.
Khi Disqus Conditional Load được kích hoạt, bạn có thể cài đặt bằng cách vào tùy chọn DCL Settings trong bảng điều khiển của bạn. Nhưng trước tiên, bạn cần cài đặt chức năng bình luận cơ bản trên Disqus:
Khi bạn đã cài đặt Disqus Comments, bạn có thể thực hiện được Lazy Loading với những lựa chọn sau:
- On Click – yêu cầu người truy cập nhấp chuột vào nút Load Comments
- On Scroll – phần bình luận sẽ tự động tải khi người truy cập di chuyển xuống dưới.
- Normal – vô hiệu hóa.
Nếu bạn di chuyển xuống dưới, bạn cũng có thể tùy chỉnh các tin nhắn đến từ người dùng của bạn trong suốt quá trình bạn sử dụng Lazy Loading.
Lazy Loading đối với Facebook WordPress Comments
Cuối cùng, nếu bạn đang dùng Facebook Comments cho WordPress thì bạn nên dùng đến plugin Lazy Facebook Comments. Plugin này cũng đến từ các nhà phát triển giống như 2 plugin trước, vì vậy mà các bước thiết lập cũng tương tự như vậy.
Giống như Disqus Conditional Load, Lazy Facebook Comments cũng là một plugin độc lập. Nó cũng sẽ giúp cho bạn thực hiện được Lazy Load từ Facebook cho WordPress của bạn.
Bạn có thể cài đặt trực tiếp từ bảng điều khiển WordPress.
Sau đó, chọn Settings Lazy FB Comments. Đầu tiên, bạn cần thêm Facebook App ID của bạn ( nếu vẫn chưa có thì dưới đây mình sẽ chỉ bạn cách tạo ra ID App)
Một khi bạn thêm ID ứng dụng của mình, bạn cần phải có một phần bình luận trên Facebook. Sau đó, bạn chỉ cần di chuyển xuống trang cài đặt và lựa chọn cách thức Lazy Load mà bạn muốn:
Trên trang này, bạn cũng có thể cài đặt các thiết lập tổng quát như có bao nhiêu phần bình luận được hiển thị và cách sắp xếp những phần bình luận đó.
Lazy Load đối với WordPress Images
Để thực hiện Lazy Loading cho hình ảnh của bạn, mình khuyên bạn nên tạo plugin Lazy Load.
Tại sao lại là plugin này? Bởi vì, trước hết nó đến từ Automatic khiến cho mình tin vào chất lượng của nó. Thứ hai, rất nhiều bạn cần cài đặt, kích hoạt và tận hưởng Lazy Load images của mình.
Bạn có thể cài đặt Lazy Load trực tiếp từ bảng điều khiển WordPress. Chỉ cần vào Plugins Add New và tìm kiếm:
Một khi bạn kích hoạt nó, tất cả hình ảnh của bạn sẽ tải chậm đi cho đến khi người truy cập nhìn vào khung hoạt động của bạn
Một plugin khác mà mình rất thích dùng là BJ Lazy Load. Loại này khiến cho những hình ảnh của bạn khi dùng Lazy Load sẽ mượt hơn và cho thấy rõ được những tính năng của Lazy Load
Nếu bạn muốn lựa chọn thêm nhiều tùy biến khác, hãy cân nhắc thật kĩ. Bởi vì, theo một số báo cáo mà mình từng đọc thì việc cài đặt thêm nhiều tùy biến sẽ khiến cho CPU của bạn bị nặng.
Lazy Load đối với video Youtube trên WordPress
Nếu bạn đưa video YouTube vào bài viết của bạn thì việc dùng Lazy Load là một lựa chọn đúng đắn vì nó làm giảm những yêu cầu không cần thiết ở bên ngoài và giảm đi kích thước trang của bạn
Để thực hiện Lazy Load cho Video Youtube, bạn có thể dùng WP Youtube Lyte. Plugin này hoạt động bằng cách dùng “ lite” trong YouTube, chỉ tải những nguồn HTML5 khi bạn nhấp vào
Để bắt đầu, hãy cài đặt bằng cách PluginsAdd New và tìm:
Sau đó, vào Setting WP YouTube Lyte. Để đạt được hiệu suất tốt nhất, bạn nên nhập vào mã API của YouTube.
Bạn xem qua: Hướng dẫn lấy API Key YouTube
Nhập mã API YouTube của bạn và chọn Test Key.
Nếu muốn, bạn cũng có thể cài đặt bổ sung cho cách hiển thị video của mình (không bắt buộc)
Bây giờ, việc bạn cần làm là thêm video Youtube vào WordPress của mình. Những video được lazy load và những video bình thường trong trang web của bạn thoạt nhìn trông rất giống nhau. Nhưng nếu bạn xem mã nguồn của chúng thì bạn sẽ thấy rằng thực sự các plugin đã tạo ra một .jpg nhẹ hơn so với địa chỉ gốc trên YouTube.Khi người truy cập nhấp vào.
Khi người truy cập nhấp vào, YouTube sẽ tự động tải và phát những video đó.
Không quá phức tạp phải không nào? Chúc các bạn thành công khi thực hiện Lazy Load cho trang WordPress của bạn.
