Hello,
With a pure Laravel / blade app, I have a problem : when the pages load, the screen becomes white for a while and the pages loads (less than one second), and this generates a sensation of blinking.
This comes probably from the JS scripts loading in the head.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paintball</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/fontawesome.js') }}"></script>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles
</head>
Or perhaps from the layout blade file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@include('layouts.partials.head')
<body id="home" class="antialiased">
@include('layouts.partials.header')
<main>
@yield('content')
</main>
@include('layouts.partials.footer')
@livewireScripts
</body>
</html>
I have tried to add defer inside all JS script tags but nothing changes.
If you need more information, ask me.
If you have any idea, I would be happy to receive help ;).
Thanks a lot.
V
I believe sometime depending on traffic that this is normal. Even laracast site sometimes a slight delay, you see a white screen just for a split second then it loads. Other times it loads fast and you don't see the white screen first.
Of course some sites even have a larger delay depending on traffic.
@jlrdw Ok so there's nothing to search inside the code, it just depends on the traffic ?
But I have this problem on the local server ...
@vincent15000 does it happen exactly the same each time, or is it intermittent. What OS?
If intermittent then background processes play a role, I know my system if a Windows update is happening in the background things slow down even with 16 GB memory.
@jlrdw I'm on Ubuntu on an old computer with only 4 GB memory.
Effectively it happens almost every time, but sometimes it doesn't happen.
I have tried on a shared webhosting and it does exactly the same.
Is it possible that some nested blade views generate this behavior ?
@jlrdw Lighthouse tells me that I have 2 files which slow the page loading : app.js 1500 ms and fontawesome.js 1000 ms, even when the code is minified (500 ms and 1000 ms respectively).
@vincent15000 that's extremely slow. Maybe try with a cdn?
@Sinnbeck Yes ! I don't understand because I don't have this problem with other apps on my computer.
@Sinnbeck With the CDN, the loading time is a bit better, but not so much.
@vincent15000 if you can share a simple example of how I can recreate I can perform find the error. Maybe make a repo on github?
@vincent15000 when I tried Ubuntu on an older computer with 4 gig it was super slow, so I went with Lubuntu, much faster.
On a Windows 11 machine with 16 gig, light speed.
@jlrdw Interesting ... in fact I never tried on another computer, I have always worked on this one.
I know that I probably need to buy another computer, more recent ... it's Christmas in 2 months ;) ... do you know Father Christmas address ? ;)
@vincent15000 Can you share the url so we can test it ?
@Sinnbeck Sure here it is.
I have a similar issue, after incorporating the tailwindcss template (app UI, navbar) as done in the Laracast tutorial noticed that the Title of the page flickers although the content of the page or the page itself doesn't flicker?
Could not check if this happens in the tutorial also as the tutorial video doesn't show the title? This flicker of the Title is very much obvious and obviously not desirable, I believe I am doing exactly what is being done in the Tutorial step by step. Was wondering if others also are seeing this issue? If so what's the fix? TIA
The flicker is whilst your css loads. One option is to add a few styles directly to the html so that these are immediately available
Please or to participate in this conversation.