How to improve speed on my laravel website? [closed] - php

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last year.
Improve this question
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">
TALK WITH A DESIGNER
<!-- 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>
<h4 class="product-title">{{ $product->related_product_name_1}}</h4>
<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>
<h4 class="product-title">{{ $product->related_product_name_2}}</h4>
<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>
<h4 class="product-title">{{ $product->related_product_name_3}}</h4>
<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>
<h4 class="product-title">{{ $product->related_product_name_4}}</h4>
<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.

Answer 1

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.

Answer 2

First change the below code in your frontendController
$imgs = ProductImage::where('product_id',$product->id)->get();
This will improve your query loading time.
Then in the below code
return view('frontend.product', ['product' => $product, 'products' => Product::all(), 'images' => $imgs ]);
why are you passing all the products to blade
'products' => Product::all(),
This is a bad idea, and it must be slowing down your page
only get what you need. calling everything in database is really not a good idea