[FIXED] How to improve speed on my laravel website?

Issue

I built a website using Laravel and it's extremely slow.

This the code and the files for the website:

web.php:

Route::get('/product/{url}', 'FrontendController@getProduct')->where('url', '^[\w.-]*$');

FrontendController:

    public function getProduct(String $url){
    $product = Product::where('url', $url)->first();
    $imgs = ProductImage::all()->where('product_id',$product->id);
    return view('frontend.product', ['product' => $product, 'products' => Product::all(), 'images' => $imgs ]);
}

product.blade.php:

   <div class="container-fluid display-products-desktop px-5" style="margin-top:15rem">
    <div class="row mx-0 row-filters-desktop">
        <div class="col-12 d-flex justify-content-end mb-5">
            <a href="" class="cta-links cta-talk-designer" style="padding-right: 5rem">TALK WITH A DESIGNER</a>
            <!-- HOURS CONDITION -->
            @php
            $dt = new DateTime("now", new DateTimeZone('Portugal'));
            @endphp

            @if ($dt->format('H:i:s') >= '09:00:00' && $dt->format('H:i:s') <= '18:00:00')
                <a class="cta-links" data-toggle="modal" data-target="#contact-five-minutes-modal">CALL ME IN 5 MINUTES</a>
            @else
                <a class="cta-links" data-toggle="modal" data-target="#contact-us-modal">CONTACT US</a>
            @endif
        </div>
    </div>
    <div class="row m-0">
        <div class="col-2 p-0 thumb-div" style="border-right: 1px solid rgba(177, 177, 177, 0.8);">
            <div class="swiper-container gallery-thumbs m-0">
                <div class="swiper-wrapper">
                    @foreach ($images as $image)
                    <div class="swiper-slide thumbs"><img src="{{ $image->url }}" alt="" class="gallery-thumbs-slide"></div>
                    @endforeach
                </div>
              </div>
        </div>
        <div class="col-6 p-0">
            <div class="swiper-container gallery-top m-0">
                <div class="swiper-wrapper">
                    @foreach ($images as $image)
                    <div class="swiper-slide top"><img src="{{ $image->url }}" alt="" class="img-fluid"></div>
                    @endforeach
                </div>                
                <div class="swiper-next-2 swiper-dark"></div>
                <div class="swiper-prev-2 swiper-dark"></div>
            </div>
        </div>
        <div class="col-4 p-0 margin-top-text" style="padding-left: 1.5rem !important">
            <p class="product-page-pre-title">meet</p>
            <h1 class="m-0 main-product-title" style="font-weight: 500">{{ $product->name }}</h1>
            <h4 class="mb-5" style="font-weight: 500">by {{ $product->brand }}</h4>
            <p class="paragraph-product-page">{{ $product->description }}</p>
            <h5 class="mt-5 section-title-product-page">MATERIAL AND FINISHES:</h5>
            <p class="paragraph-product-page">{{ $product->finishes }}</p>
            <h5 class="mt-4 section-title-product-page">DIMENSIONS</h5>
            <p class="paragraph-product-page m-0">{{ $product->dimensions }}</p>
            <a class="cta-links" style="margin-top:2.5rem;margin-bottom:2.5rem; display:block;" href="#downloadCatalogue" data-bs-toggle="modal" data-bs-target="#downloadCatalogue">DOWNLOAD CATALOGUE</a>
            <a class="cta-links" style="margin-top:2.5rem;margin-bottom:2.5rem; display:block;" href="#productSheet{{ $product->id}}" data-bs-toggle="modal" data-bs-target="#productSheet{{ $product->id}}">DOWNLOAD PRODUCT SHEET</a>
            <a class="cta-links" style="margin-top:2.5rem;margin-bottom:2.5rem; display:block;" href="#reqCustom{{ $product->id}}" data-bs-toggle="modal" data-bs-target="#reqCustom{{ $product->id}}">REQUEST CUSTOMIZATION</a>
            <button class="product-price-btn" data-bs-toggle="modal" data-bs-target="#getPrice{{ $product->id }}">GET PRICE</button>
        </div>
    </div>    
    <div class="row mx-0">
        <div class="col-12 p-0 text-center" style="margin-top:6rem">
            <h1 class="m-5" style="font-weight: 600">Related Products</h1>
        </div>
    </div>
    <div class="d-row d-flex gap-2 justify-content-center">
        <div class="col-md-3 px-0">
            <img src="{{ $product->related_product_img_1}}" alt="" class="img-fluid">
        </div>
        <div class="col-md-3 px-0">
            <img src="{{ $product->related_product_img_2}}"  alt="" class="img-fluid">
        </div>
        <div class="col-md-3 px-0">
            <img src="{{ $product->related_product_img_3}}"  alt="" class="img-fluid">
        </div>
        <div class="col-md-3 px-0">
            <img src="{{ $product->related_product_img_4}}"  alt="" class="img-fluid">
        </div>
    </div>
    <div class="d-row d-flex gap-2 justify-content-center" style="margin-bottom: 5rem">
        @php
            $slug_1 = str_replace(' ', '-', $product->related_product_name_1);
            $url_1 = strtolower( $slug_1 );
            $slug_2 = str_replace(' ', '-', $product->related_product_name_2);
            $url_2 = strtolower( $slug_2 );
            $slug_3 = str_replace(' ', '-', $product->related_product_name_3);
            $url_3 = strtolower( $slug_3 );
            $slug_4 = str_replace(' ', '-', $product->related_product_name_4);
            $url_4 = strtolower( $slug_4 );
        @endphp
        <div class="col-md-3 px-0">
            <div class="text-center mt-1">
                <p class="product-subtitle">new</p>
                <a href="/product/{{ $url_1 }}"><h4 class="product-title">{{ $product->related_product_name_1}}</h4></a>
                <a class="product-price-link" href="#getPrice{{ $product->related_product_id_1}}" data-bs-toggle="modal" data-bs-target="#getPrice{{ $product->related_product_id_1}}">get price</a>
            </div>
        </div>
        <div class="col-md-3 px-0">
            <div class="text-center mt-1">
                <p class="product-subtitle">new</p>
                <a href="/product/{{ $url_2 }}"><h4 class="product-title">{{ $product->related_product_name_2}}</h4></a>
                <a class="product-price-link" href="#getPrice{{ $product->related_product_id_2}}" data-bs-toggle="modal" data-bs-target="#getPrice{{ $product->related_product_id_2}}">get price</a>
            </div>
        </div>
        <div class="col-md-3 pr-0 pl-1">
            <div class="text-center mt-1">
                <p class="product-subtitle">new</p>
                <a href="/product/{{ $url_3 }}"><h4 class="product-title">{{ $product->related_product_name_3}}</h4></a>
                <a class="product-price-link" href="#getPrice{{ $product->related_product_id_3}}" data-bs-toggle="modal" data-bs-target="#getPrice{{ $product->related_product_id_3}}">get price</a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="text-center mt-1">
                <p class="product-subtitle">new</p>
                <a href="/product/{{ $url_4 }}"><h4 class="product-title">{{ $product->related_product_name_4}}</h4></a>
                <a class="product-price-link" href="#getPrice{{ $product->related_product_id_4}}" data-bs-toggle="modal" data-bs-target="#getPrice{{ $product->related_product_id_4}}">get price</a>
            </div>
        </div>
    </div>
</div>

These are the results shown on a speed test website:

I am a beginner, so I´ve been studying ways to improve this. Do any of you have suggestions on how to improve the website performance? Thanks in advance.

Solution

Solved it by changing the following code and removing a few bootstrap modals from the product.blade.

FrontEndController:

public function getProductTest(String $url){
    $product = Product::where('url', $url)->first();
    $imgs = ProductImage::where('product_id',$product->id)->get();
    return view('frontend.product-test', ['product' => $product, 'images' => $imgs ]);
}

The speed went from almost eleven seconds to 1.22 seconds.

Answered By - Marília