Laravel 9 page lags when scrolling

Hi, I'm relatively new in Laravel and I have one basic question. I'm creating simple page (portfolio) with 6 different sections. I'm using Laravel 9 with Jetstream and Livewire on Homestead. When I click on my navbar elements (ex. About) it takes me to the about section. The problem here is when I click on About link it takes me to my About section but my page is lagging which I think is very bad, and I only have two tables in the database and some basic queries. Here is example from my navbar:

    <!-- Navbar -->
    <header>
    <div
        class="navbar fixed flex justify-between items-center bg-white px-4 md:px-2 w-full py-2 border-b-[1px] border-white border-opacity-10 h-16 transition-all ease-in-out duration-500">

        <a href="#">
            <div
                class="logo flex text-lg md:text-xl items-center font-medium text-white lg:ml-[130px] transition-all ease-in-out duration-500">
                <img src="{{ asset('img/wedevelopstufflogo.svg') }}" alt="weDevelopStuff"
                    class="h-14 w-16 py-2 transition-all ease-in-out duration-500 text-dark dark:text-white" ">weDevelopStuff</div>
            </a>

            <nav>
                <button class=" md:hidden" @click="navbarOpen = !navbarOpen">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 lg:h-8 lg:w-8 text-white mt-1" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
                </button>
                <ul class="fixed left-0 right-0 min-h-screen text-base mt-[5px] text-white space-y-5 md:mt-0 text-center transform translate-x-full transition-all duration-500 delay-200 ease-in-out md:relative md:flex md:min-h-0 md:space-y-0 md:space-x-6 md:p-0 md:translate-x-0 lg:mr-[100px] xl:mr-[150px]"
                    :class="{ 'translate-x-full': !navbarOpen }" :class="{ 'translate-x-0': navbarOpen }">
                    <li
                        class="hover:text-turquoise font-medium transition duration-300 delay-150 hover:delay-0 hover:ease-in-out border-t-[0.2px] border-b-[0.2px]  border-white border-opacity-10 md:border-none pt-4 md:pt-0 pb-5 md:pb-0">
                        <a href="#about" class="active" @click="navbarOpen = false">About</a></li>
                    <li
                        class="hover:text-turquoise font-medium transition duration-300 delay-150 hover:delay-0 hover:ease-in-out border-b-[0.2px] border-white border-opacity-10 md:border-none pb-5 md:pb-0">
                        <a href="#services" @click="navbarOpen = false">Services</a></li>
                    <li
                        class="hover:text-turquoise font-medium transition duration-300 delay-150 hover:delay-0 hover:ease-in-out border-b-[1px] border-white border-opacity-10 md:border-none pb-5 md:pb-0">
                        <a href="#portfolio" @click="navbarOpen = false">Portfolio</a></li>
                    <li
                        class="hover:text-turquoise font-medium transition duration-300 delay-150 hover:delay-0 hover:ease-in-out border-b-[1px] border-white border-opacity-10 md:border-none pb-5 md:pb-0">
                        <a href="#testimonials" @click="navbarOpen = false">Blog</a></li>
                    <li
                        class="hover:text-turquoise font-medium transition duration-300 delay-150 hover:delay-0 hover:ease-in-out border-b-[1px] border-white border-opacity-10 md:border-none pb-5 md:pb-0">
                        <a href="#contact" @click="navbarOpen = false">Contact</a></li>
                </ul>
                </nav>
            </div>
        </header>
            <!-- Navbar Section End -->

Can someone tell me how can I optimize my code, for example can I delete some packages that comes with Laravel? I have only 5 section with basically 3 images and my code is 130 MB.

vincent15000

3 years ago

Level 63

Perhaps the problem is not in your sections, but inside the head tags.

Can you show the code inside the head tags ?

1 like

vajricaaaa

3 years ago

Level 2

@vincent15000 Sure.

I'm using components for this project and every single component is in my home blade. Here is my code:

<x-app-layout>
    <x-layout.navbar></x-layout.navbar>
    <x-home.hero></x-home.hero>
    <x-home.about></x-home.about>
    <x-home.services></x-home.services>
    <x-home.portfolio :projects="$projects"></x-home.portfolio>

    <x-layout.footer></x-layout.footer>

</x-app-layout>

And after that this home blade is rendered in app blade

here is my app blade:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">
        <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
        
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
        <link rel="stylesheet" href="{{ asset('css/style.css') }}">
        <link rel="stylesheet" href="{{ asset('css/loco.css') }}">

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body x-data="{ navbarOpen: false, scrolledFromTop: false }" x-init="window.pageYOffset >= 50 ? scrolledFromTop = true : scrolledFromTop = false"
        :class="{
            'overflow-hidden': navbarOpen,
            'overflow-auto': !navbarOpen
        }" class="antialiased relative z-0">
        <div data-scroll class="min-h-screen bg-gray-100 dark-bg-dark-gray">


  {{ $slot}}


        </div>
        <script src="{{ asset('js/app.js') }}"></script>
        <script src="{{ asset('js/main.js') }}"></script>
        <script src="{{ asset('js/scroll.js') }}" defer></script>
        <script src="{{ asset('js/vanilla-tilt.js') }}"></script>

    </body>
</html>

I don't know if this is the right way that I'm doing, so I hope you can help me. Thanks in advance!

1 like

vincent15000

3 years ago

Level 63

@vajrica You are importing a lot of CSS and JS files ... just to check it, have you tried to comment all CSS and JS import tags and to load your page to check if the loading time is better ?

vajricaaaa

3 years ago

Level 2

@vincent15000 yes, it is the same, but the problem is not the loading time on my page, but lagging when I click on link on my navbar and then when the page is scrolling, you can see lagging when it goes from section to section, which is very bad.

1 like