如何提高我的 laravel 网站的速度？

Question

我使用 Laravel 建立了一个网站，它非常慢。

这是网站的代码和文件：

web.php:

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

前端控制器：

    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>

这些是速度测试网站上显示的结果：

我是初学者，所以我一直在研究如何改进它。你们对如何提高网站性能有什么建议吗？提前致谢。

Answer 1

首先在您的 frontendController 中更改以下代码

$imgs = ProductImage::where('product_id',$product->id)->get();

这将缩短您的查询加载时间。

然后在下面的代码中

return view('frontend.product', ['product' => $product, 'products' => Product::all(), 'images' => $imgs ]);

为什么要将所有产品都交给 blade

'products' => Product::all(),

这是个坏主意，它一定会减慢您的页面速度只得到你需要的。调用数据库中的所有内容真的不是一个好主意

Answer 2

通过更改以下代码并从 product.blade 中删除一些 bootstrap 模态来解决它。

前端控制器：

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 ]);
}

速度从将近 11 秒缩短到 1.22 秒。

如何提高我的 laravel 网站的速度？

How to improve speed on my laravel website?

php

optimization

performance

laravel