Nuxt3 CSR Background Image Lazy loading

Nick Milillo — Thu, 20 Jun 2024 02:43:38 +0000

I currently have background images being displayed for my pages from within the CSS. i.e.

.Inner-Page-Banner {
    width: 100%;
    height: auto;
    min-height: 280px;
    background: url(../img/trailer-owners.webp) no-repeat center top;
    margin-top: 85px;
    text-align: center;
}

I'm going through the process of performance optimisation and changing from img to NuxtImg

I've already changed my Background images to web however I'm wanting to know if there is a way to apply NuxtImg to the CSS or whether there is another way I should be doing this.

Thanks

Nuxt3 CSR Delayed Hydration

Nick Milillo — Wed, 19 Jun 2024 06:11:49 +0000

Are there any strategies for delaying certain scripts from running when deploying in CSR mode?

I deploy my front end to AWS S3 using SSR False.

PageSpeed is telling me my site is a little slow, however I've optimised and converted all my base images to webp.

There are certain JavaScripts that could be delayed however delaying them using nuxt-delay-hydration wont work due to being CSR.

Thanks

DEV Community: Nick Milillo

Nuxt3 CSR Background Image Lazy loading

Nuxt3 CSR Delayed Hydration