Posts

Showing posts with the label Lazyload

Tối ưu tốc độ web/blog dùng lazyload image, iframe

Image
Lazy loading là 1 kĩ thuật tối ưu khi làm web, thay vì tải toàn bộ trang web và render ngay từ đầu, kỹ thuật này cho phép tải ngay các thành phần cần thiết để hiển thị tới người dùng và trì hoãn các tài nguyên còn lại cho đến khi cần. Tối ưu tốc độ web/blog dùng lazyload image, iframe Tại sao lại phải “lazyload images”? Giải quyết vấn đề về performance Ví dụ: khi bạn viết code 100 tấm ảnh chứa trong các thẻ img, browser sẽ tải về tất cả các tấm ảnh ấy, dù cho user có muốn hay không, hay có scroll và xem hết 100 tấm ảnh ấy không. Vì thế, việc lazy-load sẽ giúp browser tải ít resource (ảnh) lại, trả kết quả về user nhanh hơn. Bất kì user nào cũng thích các trang web chạy nhanh hơn là chậm. Tiết kiệm tài nguyên Việc “trì hoãn” những resource chưa cần thiết giúp tiết kiệm CPU, GPU, bộ nhớ, băng thông… đặc biệt là trên các thiết bị di động có tốc độ kết nối chậm. Tăng giải nghiệm người dùng Ngày nay số lượng người dùng trên mobile đã vượt qua cả trên desktop. Nếu trang của bạn có quá nhiều

Sử dụng Lazyload cho Google Adsense 2021

Image
 Ở bài viết này mình sẽ hướng dẫn các bạn sử dụng Lazyload với Google Adsense. Google Adsense Đầu tiên thì chúng ta cùng tìm hiểu về đoạn Javascript mặc định mà Google Adsense cung cấp cho chúng ta khi chèn ads vào website nhé.     <ins class="adsbygoogle"     style="display:inline-block;width:728px;height:90px"     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"     data-ad-slot="xxxxxxxxxx"></ins>     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>   Tiếp theo chúng ta cùng xem đoạn Javascript của Google Adsense đã được rút ngắn lại để load trang nhanh hơn.     <ins class="adsbygoogle"     style="display:inline-block;width:728px;height:90px"     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"     data-ad-slot="xxxxxxxxxx"></ins>     <script>(adsbygoogle=window.adsbygoogle||[]).push({});function td_adsense(){var t=document.createElement("script");t.