Good morning,

I have created a media query for my website. I have the feeling that it is slowing down my website, because it is not optimized. On mobile phones, I have a specific image. For tablets and desktops I have another image to be shown. The media query I have works just fine. But it is not optimized. Can anyone help me to get it optimized?

this is the query:

body, html {
    height : 100%;
    width: 100%;
    margin:0;
}

@media only screen and (min-width: 320px)  {

.Frontpage-image {
    background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height:100vh;
    }
}
    

@media screen and (min-width: 768px) {
    .Frontpage-image{
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height: 100vh;
    }
}
@media screen and (min-width: 1025px) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        height:100vh;
    }
}

CodePudding user response：

Please use this CSS code.
In media query, styles defined outside of query is inherited.
So my code works exactly like yours, but the code has been greatly reduced.

body, html {
    height : 100%;
    width: 100%;
    margin:0;
}
.Frontpage-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100vh;
}

@media only screen and (min-width: 320px)  {

.Frontpage-image {
    background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}
    

@media screen and (min-width: 768px) {
    .Frontpage-image{
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}
@media screen and (min-width: 1025px) {
    .Frontpage-image {
        background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
    }
}

You can check this answer.

CodePudding user response：

For better optimization and fast Loading, follow these steps:-

1. Use GIFs instead of Video or mp4 files.
   
2. Use images under max. 25mb to fast reload.
   
3. Use SEO for better detailed report.
   

For SEO use Google Lighthouse.
Steps:-

1. Open Google Inspect by right or pressing Ctrl Shift I.
   
2. Go to the Lighthouse Section and generate a report !

Done.

CodePudding user response：

Here are some tips to optimize this

1. Use Low size images
2. Use Low size videos or embed them from YouTube or Vimeo
3. Compress this CSS code.