CODEWITHSUNDEEP
htmlcsspagespeed
user1275105
user1275105

Reputation: 2753

How to delay loading of large background image

How can I delay /defer the loading of large background image? The reason am asking this question is because I have a poor score for "first meaningful paint" When I run performance tests on the page. I have tried reducing image size as much as possible.

Upvotes: 2

Views: 684

Answers (2)

Min Joon So
Min Joon So

Reputation: 35

First meaningful paint (I'll call it FMP) doesn't have to be an image. If FMP doesn't have to be the background image (it can be a h1, p or other elemnets), you can probably separate the line referencing the image in a separate file so that other components can be painted without being blocked by downloading the image.

Upvotes: 0

user7582130
user7582130

Reputation:

If it is a background image you can use the Javascript onLoad event. This event excutes only after the whole page is finished loading.

Example:

function loadBGIMG(){
    document.getElementById("any-menu").style.backgroundImage="url(../images/any-menu.jpg)";
}
window.onload=loadBGIMG();

Upvotes: 1

Related Questions