# Improving Page Load Time - Lazy Image Loads? **URL:** \ **Category:** CMS Development\ **Tags:** hubdb, css\ **Created:** [February 20, 2020, 7:15pm UTC](https://community.hubspot.com/t/improving-page-load-time-lazy-image-loads/18933 "2020-02-20T19:15:44Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![MiaPV](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miapv/32/54847_2.png) [@MiaPV](https://community.hubspot.com/u/MiaPV)\ **Post date:** [February 20, 2020, 7:15pm UTC](https://community.hubspot.com/t/improving-page-load-time-lazy-image-loads/18933/1 "2020-02-20T19:15:44Z")
Hello - reaching out here as a first step (second after realizing I don’t know how to do this myself). Has anyone had luck with website load time optimization? When running our pages through the Google tool, we can see that there is a lot of 3rd party code weighing our pages down (HS code is part of it) but we also have a lot of images weighing our pages. Have you had luck with lazy loading? Thanks in advance! Mia ---
**Author:** ![prosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/prosa/32/4387_2.png) [@prosa](https://community.hubspot.com/u/prosa)\ **Post date:** [February 20, 2020, 8:52pm UTC](https://community.hubspot.com/t/improving-page-load-time-lazy-image-loads/18933/2 "2020-02-20T20:52:05Z")
Lazy loading requires you to add a js lib to your pages and modify a little the code of your images while editing it.-- view source code and change the src with data-src and add the class lazy to your classes. here is and example `` you can learn more here. [https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video? __hstc=20629287.6b273df00a10011f9213b6533fa1bae5.1581729478677.1582173808089.1582231743936.4&__ hssc=20629287.10.1582231743936&__hsfp=3277725582) this is the lib I’m using > **[GitHub - malchata/yall.js: A fast, flexible, and small SEO-friendly lazy...](https://github.com/malchata/yall.js)** > > A fast, flexible, and small SEO-friendly lazy loader. ---
**Author:** ![MiaPV](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/miapv/32/54847_2.png) [@MiaPV](https://community.hubspot.com/u/MiaPV)\ **Post date:** [February 20, 2020, 9:07pm UTC](https://community.hubspot.com/t/improving-page-load-time-lazy-image-loads/18933/3 "2020-02-20T21:07:16Z")
Thank you! I figured there would be something like this that can be done. Another [community post](https://community.hubspot.com/t5/CMS-Development/Using-Lazy-Loading-with-HubDB/m-p/308095) said the following: "For a simpler solution, you could get rid of the javascript library, revert the image markup back to normal (replace the `data-src` back to just `src`) and add the `loading=“lazy”` attribute to your images. This uses the native browser lazy loading functionality that was recently introduced in Chrome. More info here:[AddyOsmani.com - Native image lazy-loading for the web!](https://addyosmani.com/blog/lazy-loading/) Example image: `` It makes lazy loading super simple and quick but the only downside is it doesn’t yet work in all major browsers. " If the js requires you to add extra code to your images anyway (class=“lazy”) would this be an easier(ish) solution? I feel like no matter what I’ll have to go back and update all of our images. Or is the benefit of doing it the way you suggested be that it works with all browsers? Thanks again! ---
**Author:** ![prosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/prosa/32/4387_2.png) [@prosa](https://community.hubspot.com/u/prosa)\ **Post date:** [February 20, 2020, 9:16pm UTC](https://community.hubspot.com/t/improving-page-load-time-lazy-image-loads/18933/4 "2020-02-20T21:16:22Z")
that is only going to work for this new versions of browsers. you can verify what is supported here. > **[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=loading-lazy-attr)** > > "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. ---
**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\ **Post date:** [November 30, 2020, 8:13pm UTC](https://community.hubspot.com/t/improving-page-load-time-lazy-image-loads/18933/5 "2020-11-30T20:13:07Z")
@prosa @MiaPV This is _technically correct_ but you’re actually both still wrong. You can use `loading=“lazy”` that all modern browsers no support and check with javascript if the native behavior is there + polyfill it. It’s called progressive enhancements… or cutting the mustard if you want to be old school. That’s how you actually do this. Given the lack of development experience I’m sensing I’m going to presume that’s unclear or potentially complex: So, here’s a breakdown \ Way down at the end of the body… if native feature is available swap attributes: polyfill target → src if not inject polyfill for loading. once polyfill is loaded, if required by library, initialize it. Honestly, just google it. I’m not typing the code out. How it should really be done is not being such a crappy CMS and having everything below the fold automatically having the native attribute added for you instead of an ad-hoc mess of case by case image adjustments. ---
**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\ **Post date:** [December 7, 2020, 5:27pm UTC](https://community.hubspot.com/t/improving-page-load-time-lazy-image-loads/18933/6 "2020-12-07T17:27:46Z")
As an FYI, [lazy loading](https://developers.hubspot.com/docs/cms/guides/speed/lazy-loading) is now built into the CMS.