nuxt vuetify 灯塔低性能

Question

我已经使用 nuxt 和 vuetify 构建了一个 web，并使用了一个非常简单的代码，尽管我在 lighthouse 中的分数很低并且出现以下错误

存在影响本次 Lighthouse 运行的问题：

页面可能无法按预期加载，因为您的测试 URL (https://www.estudiosclaw.com/service) 已重定向到 https://www.estudiosclaw.com/service/。尝试直接测试第二个 URL。

https://www.estudiosclaw.com/service/

当我查看画廊的帖子时甚至没有完成测试

https://www.estudiosclaw.com/gallery/sylvia-yssei-tribalfusion-musara

我试过延迟加载和占位符似乎可以显着提高开发性能

这是画廊帖子的代码。

<template>
  <v-container class="mt-12">
    <v-row align="center" justify="center">
      <v-col class="mt-6 text-center" cols="12">
        <h1 class="text-h4 font-weight-thin mb-4">
          {{ title }}
        </h1>
        <v-container>
          <div v-html="$md.render(description || 'No content available')"></div>
        </v-container>
      </v-col>
    </v-row>
    <div class="gallery">
      <v-img
        class="mb-2 nobreak enlarge"
        v-for="image in post.data.attributes.gallery.data"
        :key="image.id"
        :src="`${image.attributes.formats.medium.url}`"
        :alt="`${image.attributes.alternativeText}`"
        @click="toggleFullscreen(image.attributes.url)"
        >
        <template v-slot:placeholder>
          <v-row
            class="fill-height ma-0"
            justify="center"
          >
            <v-progress-circular
              indeterminate
              color="grey-lighten-5"
            ></v-progress-circular>
          </v-row>
        </template>
    </v-img>
      <div v-if="selectedImage" class="overlay">
        <v-img
          class="mt-12"
          :src="selectedImage"
          alt=""
          height="95vh"
          contain
          dark
          @click.stop="selectedImage = null"
        >
          <template v-slot:placeholder>
            <v-row class="fill-height ma-0" align="center" justify="center">
              <v-progress-circular
                indeterminate
                color="grey lighten-5"
              ></v-progress-circular>
            </v-row>
          </template>
        </v-img>
      </div>
    </div>
  </v-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      post: [],
      error: null,
      selectedImage: null,
    };
  },
  async asyncData({ route, i18n, title, description }) {
    try {
      const locale = i18n.locale;
      const qs = require("qs");
      const query = qs.stringify(
        {
          populate: "*",
          publicationState: "live",
          //locale: [locale],
        },

        {
          encodeValuesOnly: true,
        }
      );
      const response = await axios.get(
          `https://strapi-estudiosclaw.herokuapp.com/api/posts/find-by-slug/${route.params.slug}?&` +
           query
      );

      let post = response.data;
     
      if (locale != post.data.attributes.locale) {
        
        post.data.attributes.localizations.data.forEach((element) => {
          if (element.attributes.locale === locale) {
            title = element.attributes.title;
            description = element.attributes.description;
          }
        });
      } else {
        title = post.data.attributes.title;
        description = post.data.attributes.description;
      }
      return { post, title, description };
    } catch (error) {
      this.error = error.response.data.error.details.errors;
    }
  },

  methods: {
    toggleFullscreen(elem) {
      this.selectedImage = elem;
      console.log(elem);
    },
  },
  head() {
    return {
      title: `${this.title}`,
      meta: [
        {
          hid: "description",
          name: "description",
          content: `${this.description}`,
        },
      ],
    };
  },
};
</script>

<style>
.overlay {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}
.gallery {
  columns: 4 320px;
  column-gap: 0.5em;
  margin-top: 3.5rem;
}
.enlarge {
  transition: transform 0.2s; /* Animation */
}
.enlarge:hover {
  z-index: 2;
  transform: 
  scale(
    1.1
  ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  cursor: pointer;
}
.nobreak {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
</style>