Too slow response

#1

Hi.
I have a simple livewire component that fill select element about 2000 items
It takes about 10 sec (inc db time < 100ms)

When I do the same in general laravel controller it takes 1.5 sec at all.

Why livewire 10 times slowlier and how to response speed up?

livewire
livewire1482×1385 170 KB

#2

Hey, @jamesRUS52

Can you show use your code base? And what’s the part of your code takes much time that the others?

#3

Controller

<?php

namespace App\Billing\Entities\Http\Controllers;

use App\Http\Controllers\Controller;

class TestController extends Controller
{
    public function index()
    {
        return view('Entities.resources.views.test');
    }
}

View

@extends('General.resources.views.layouts.default')

@section('content')


    @livewire('entities.http.livewire.test-livewire')



@endsection

Livewire
<?php

namespace App\Billing\Entities\Http\Livewire;

use App\Billing\Entities\Enums\EntityStatusEnum;
use App\Billing\Entities\Models\EntityModel;
use Illuminate\Support\Facades\DB;
use Livewire\Component;

class TestLivewire extends Component
{
    public int $selected_entity = 0;
    public $entities;
    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('Entities.resources.views.livewire.test-livewire');
    }

    public function mount() {
        $this->entities = $entities = EntityModel::where('status','=',EntityStatusEnum::ACTIVE()->value)
            ->where('entitytypeid', '=', 1)
            ->orderBy('entityname')
            ->get(['entityid','entityname']);
//        $this->entities = $entities = DB::select("select entityid,entityname from entities where entitytypeid=? and status=? order by entityname",[1,'ACTIVE']);
    }

    public function click() {

    }
}

Livewire view

<div>
    <select wire:model.defer="selected_entity">
        @foreach($entities as $entity)
            <option value="{{$entity->entityid}}">{{$entity->entityname}}</option>
        @endforeach
    </select>
    <input type="button" wire:click="click">Refresh</div>
</div>

While first page load (mount) it takes 287 ms
After refresh 7 sec

livewire2
livewire2850×322 28.4 KB

#4

@jamesRUS52 I think you should have to use eager loading if you EntityModel has relationship with model you fetch the data…

#5

Thanks, I know about it. This model with out any relationships. I think this is not DB issue. Mount is fast, update livewire component is slow

#6

In last screenshot I wrong mark livewire.js request. The full page response (first load page) about 1 second with mount method

#7

after some experiments I change

 public function mount() {
     $this->entities = EntityModel::where('status','=',EntityStatusEnum::ACTIVE()->value)
         ->where('entitytypeid', '=', 1)
         ->orderBy('entityname')
         ->get(['entityid','entityname']);
 }
 
 public function click() {
 }

to

public function mount() {
    $this->entities = EntityModel::where('status','=',EntityStatusEnum::ACTIVE()->value)
        ->where('entitytypeid', '=', 1)
        ->orderBy('entityname')
        ->get(['entityid','entityname']);
}

public function click() {
    $this->entities = EntityModel::where('status','=',EntityStatusEnum::ACTIVE()->value)
        ->where('entitytypeid', '=', 1)
        ->orderBy('entityname')
        ->get(['entityid','entityname']);
}

and the response time reduced to normal (a bit more then usual non livewire request)
It look like, to restore variable $entities from state need more time than get it from DB again