1. Properly size images – reduce images to recommended size.
Online image compressor - https://compressnow.com | https://tinyjpg.com | or edit with photoshop
2. Image elements do not have explicit width and height.
Add width and height attribute to image tag
If image comes from component, we can add width and height using jQuery
For eg: $(".about-text-inner img").attr("width", 470).attr("height", 313);
In CSS add max-height:100% Or height: auto;
3. when using as background image
<div class="lozad" data-background-image=""></div>
4. When using as image tag
<img class="lozad" data-src="https://growthplugcal.s3.amazonaws.com/logo/2017/09/21/logo.png">
5. For Video Tag
Add class="lozad-picture" for video tag
add data-src = "path" for source tag
<video width="560" height="315" controls loop muted class="lozad-picture"><source data-src="https://s3.amazonaws.com/growthplug-prod/website_files/2019/05/08/DRNICKLES_dn28yrs_30HD_1.mp4" type="video/mp4"></video>
6. For Iframe tag
<iframe frameborder="0" data-src="//www.youtube.com/embed/TwXoFRxgpZc" width="640" height="360" class="note-video-clip lozad"></iframe>
7. For DIV tags
Add lozad class for div tag.
8. Largest Contentful Paint element
For now we can add this to set timeout function.
For eg: if this only needed in mobile view we need to add the below code
function myFunction(x) {
if (x.matches) { // If media query matches
console.log("test1");
$(".about").hide();
setTimeout(function(){
$(".about").show();
}, 10000);
console.log("test2");
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
or else
$(".about").hide();
setTimeout(function(){
$(".about").show();
}, 10000);
9. Avoid large layout shifts
Set a min height to the recommended shifting element