Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel and Vue have performance error with LCP

I have a project with Laravel v6 (mix) and vueJs v2
It has LCP error

enter image description here

My website LCP is a hero image that I used it like this

<picture>
                   <source media="(min-width: 1536px)" :srcset="getAssetPath('/v2/assets/images/home-new.webp')" type="image/webp">
                   <source media="(min-width: 1280px)" :srcset="getAssetPath('/v2/assets/images/home-bg-1535.webp')" type="image/webp">
                   <source media="(min-width: 1024px)" :srcset="getAssetPath('/v2/assets/images/home-bg-1279.webp')" type="image/webp">
                   <source media="(min-width: 768px)" :srcset="getAssetPath('/v2/assets/images/home-bg-1023.webp')" type="image/webp">

                   <img fetchpriority="high" class="hero-img" :src="getAssetPath('/v2/assets/images/home-bg-767.webp')" alt="hero image">
               </picture>

enter image description here

ALso, I use extract method in webpack.mix.js

.extract([
        'vue', 'vuex', 'vee-validate', 'lodash',
        'vuetify', 'feather-icons', 'dayjs',
        'tailwindcss', 'masonry-layout',
        'swiper', 'mapbox-gl', 'vue-awesome-swiper', '@mapbox/mapbox-gl-draw'
    ])

How can i fix that?

Tags:

2

Answers


  1. 0

    To reduce LCP for your hero image in Laravel 6 (Mix) and Vue.js 2:

    1. Optimize Image Size/Format: Use display-sized, compressed WebP images.

    2. Preload Hero Image: Add this to your head:
      <link rel="preload" as="image" href="path_to_your_hero_image.webp" imagesizes="(min-width: 1536px)" />

    3. Use a CDN: Serve images via CDN for faster delivery.

    4. Lazy-Load Other Images: Keep fetchpriority="high" for the hero image; lazy-load others.

    These steps should help reduce your LCP time.

    Login or Signup to reply.
  2. 0

    The LCP sub-parts breakdown screenshot shows there is a long delay (9.6 seconds) between the HTML document first being sent to the browser, and the LCP image being requested.

    This suggests it’s a client side rendered JavaScript app and needs a lot of JavaScript to be run to inject the LCP image into the HTML for the browser to discover it.

    Test what renders when JavaScript is disabled. If the LCP resource cannot be seen then that is why the browser is slow here. It’s best if you deliver HTML to the browser so it can start fetching resources. If you hide resources in JavaScript then the browser cannot see them until it executes the JavaScript. Can the app be server-side rendered?

    After this, there is another large render delay (5.6 seconds) from when the LCP image is fetched, until it is displayed.

    How is the image fetched? Is it from a fetch request in the JavaScript? Or is it by the app inserting an <img> tag into the HTML? If it’s the former, then you need to look into why there is a large delay after the fetch and before using that resource (maybe it’s busy processing something else).

    All in all, such large LCP times, and those two sub-parts being large, are classic signs of using too much JavaScript and giving the browser too much work to do the initial render.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search