How Can I Optimize Images-CodePudding

I have built a website for my ortfolio using Elementor Pro. However, everytime I load the site the logo seems to load a few milliseconds slower than the rest of the page and I cannot get it all to load at the same time?

Secondly, it is relatively slow to load on mobile and I have been advised to Eliminate render-blocking resources - what is the best way to go about this?

jacarywebdesign.com/

Any help much appreciated!

CodePudding user response：

Your logo seems to have the below opacity transition rule. Try erasing it and see if it works or setting transition: opacity 0ms;.

.lazyloaded {
    opacity: 1;
    transition: opacity 400ms;
    transition-delay: 0ms;
}

Regarding eliminating render-blocking resources you can check the WP-Rocket post.

CodePudding user response：

A look at the element inspector in Chrome shows that your logo is "lazy loaded". The CSS class lazyloaded has transition set to opacity 400ms. Reset this to 0ms.

From:

.lazyloaded {
    opacity: 1;
    transition: opacity 400ms;
    transition-delay: 0ms;
}

To:

.lazyloaded {
    opacity: 1;
    transition: opacity 0ms;
    transition-delay: 0ms;
}

As for your question regarding eliminating render-blocking resources, here's a detail explanation of how to do it manually: See here.

If you would rather go with plugins, read this article.