Level 14
The blade portion of your site has close to no effect on the speed of the site. Porting an application into an SPA will not fix bad queries
1 like
Feb 22, 2024
12
Level 1
How to convert existing Laravel 9 project to single page application
Hi there!
I'm having a Laravel 9 project with view files in blade.php format. , which have huge files. I feel like my project is loading on every page redirection. With each click on the menu for a new page the entire screen flashes with a white screen and then slowly loading the contents one by one makes the user experience a little lazy.
So, I want to convert my project into a single-page application (SPA). I'm a beginner in Laravel. I can't understand the official documentation clearly because it has various SPA methods. I'm confused about which procedure I need to learn and start the conversion. Are there any step-wise guidance or docs available to achieve this?
Level 1
@krisi_gjika Actually, the project images and Bootstrap data table make the page loading time. That's why, I thought about this SPA concept
Level 35
@ManoMahe if you have control over your server make sure the have things like gzip, http2, caching activated. Optimise your images. You can use the Intervention package to transform your images to webp or avif. You can also make multiple versions at different sizes and use srcset attribute to let the browser server the appropriate size for the device.
1 like
Level 1
@Ben Taylor Yes, I have checked on my server. The gzip, http2 and caching were already activated.
Now, I'll try to optimize my image assets with the format of webp or avif. But, for the bootstrap data table replacement, I didn't get a better package for that. Yajra table doesn't have an inbuilt search bar like a data filter, do you have any suggestions for this?
Level 35
@ManoMahe I just build my own
1 like
Level 1
@Ben Taylor With the help of ajax?
Level 80
@manomahe Converting your app to a single page application isn’t going to magically make it faster.
Debug and actually diagnose why your app is slow, and fix your actual issues, instead of just thinking, “Oh, I’ll rewrite it as a SPA. That might make things better” because it might not as well. It might have the opposite affect and make your site even slower.
1 like
Level 1
@martinbean Oh!... thanks for the guidance
Level 35
If you want the experience of a single page application (i.e. without the white flicker of page changes) then I would suggest slowly introducing Livewire into your application That would probably be the easiest way to gradually change over while still having a functional application. It won't actually be a SPA, but will act like one.
But as others have already said, fix the real performance issues first.
1 like
Level 1
@Ben Taylor Thanks, noted and will try to learn about this
Level 51
More often than not, problems are caused because of n + 1. Install debug bar and get those queries down. There are series` on here that show some really good techniques for managing cumbersome queries... try watching those
1 like
Level 1
@jaseofspades88 Thanks for the note!
Please or to participate in this conversation.