0

Im developing a blog in laravel hosted in apache. Im using laravel mix for compiling my assets (css, js). When I go to some route, the page takes less than 1 second to charge the css:

Page loading

Page after load

The elapsed time is very short, however it is very annoying. Why does this happen? I know that the answer can come from many factors and the only thing that occurs to me is something wrongly configured in laravel mix but my js and css assets only have a couple of codes.

For example this also happens on my home page (index) which have a very simple code (except for the menu bar). the code of my Home page:

home.blade.php

<html>
    @extends('layout/layout')
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Blog</title>

    </head>

    <body>
        <div class="contenedor">
            @include('menu/menu-nav')
            <h1>Bienvenidos al Blog!</h1>

        </div>
    </body>
</html>

layout.blade.php

<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

menu-nav.blade.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@if(Auth::check())
    <a class="navbar-brand" href={{ route('editProfile')}}>
        {{ Auth::user()->username }}
    </a>
@endif

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href={{ route('home') }} >Home</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href={{ route('viewposts') }}>Blog</a>
        </li>

        @if(Auth::user())
            @if(Auth::user()->hasRole('creator'))
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Posts
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href={{ route('createpost') }}>Crear Post</a>
                    <a class="dropdown-item" href="#">Editar Post</a>
                </div>
            @endif
        @endif

        @if(Auth::user())
            @if(Auth::user()->hasRole('admin'))
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Administración
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="{{ route('viewusers') }}">Usuarios</a>
                    <a class="dropdown-item" href="#">Estadísticas</a>
                </div>
            @endif
        @endif

    </ul>

    @if(Auth::user())
        <span class="navbar-text">
            <a class="nav-link" href={{  route('logout') }}>Log out</a>
        </span>
    @else
        <span class="navbar-text">
            <a class="nav-link" href={{  route('register') }}>Registrarse</a>
        </span>

        <span class="navbar-text">
            <a class="nav-link" href={{  route('login') }}>Log in</a>
        </span>
    @endif
</div>
Bricam
  • 71
  • 5

1 Answers1

0

I would recommend you place the CSS and JS tags into the <head> section, as explained here: https://stackoverflow.com/a/18392465/14481105 the browser looks for those files inside the head section.

I'm not sure if you have just omitted it for Stack Overflow purposes but you also want the <html> tags and <body> tags.

Josh Bonnick
  • 2,281
  • 1
  • 10
  • 21
  • I changed the CSS and JS inside but it doesnt work :/ . On the other hand, i ommited the in the code in question (fixed). – Bricam Oct 19 '20 at 22:26
  • Have you tried adding the doctype? above the without it, the browser renders the page differently. – Josh Bonnick Oct 19 '20 at 22:30
  • Yeah, i did too :/, i tried to changed the browser using chrome ( i was using firefox). the css not load, but time decrease and its almost imperceptible but its still there :( – Bricam Oct 20 '20 at 01:55