0

I'm lazyloading all my routes, but the only way I've found to implement all my background-images the way I want them is with this method:

App.vue

<template>
  <div id="app" v-bind:class="[
    { 'forside' : $route.path == '/' }, 
    { 'konferanse' : $route.path == '/konferanse' }, 
    { 'pizzeria' : $route.path == '/pizzeria-del-generale' }, 
    [ { 'lobby' : $route.path == '/om-oss/bedriften' || $route.path == '/om-oss/jobb' || $route.path =='/om-oss/yrke' || $route.path == '/om-oss/kontakt' || $route.path == '/om-oss/personvern' || $route.path == '/om-oss/veien-hit' || $route.path == '/opplevelser/spill' || $route.path == '/opplevelser/aktiviteter' }], 
    { 'selskap' : $route.path == '/selskap' || $route.path == '/catering' || $route.path == '/blogg' }  ]">
      <my-header></my-header>
      <router-view />
      <my-footer></my-footer>
  </div>
</template>

I suspect this provides me with a pretty slow page load time. Google's page speed test gives me a score of 47 for mobile (80 for desktop).

Is there a way I can lazyload these background-images?

Jonas__G
  • 155
  • 2
  • 10

1 Answers1

1

That's not a bad load score for desktop (though lighthouse isn't always the best gauge compared to how it actually feels to you), though, for mobile, it's best to resize the images.

You could use image-set, but the browser support's not great, or you could use a media-query on each class which swaps out the image for a smaller version.

As for lazy-loading background images, there are ways but I'm not sure without looking into it. Might be worth reading through this: How to Lazy Load div background images

Daniel_Knights
  • 5,599
  • 3
  • 10
  • 32