Laravel page speed performance improvement

Laravel page speed performance Intro

In the Laravel project, if you need to improve performance, increase google page speed then you have to take care of the following things. I am Pawan Kumar a Full Stack web developer working since 2009. I found Laravel is the best PHP framework to build any robust web applications.  

I have used below method to improve Laravel website performance .

CSS, JS CDN

If you using css framework like bootstrap then try using it's CDN  ex:

Using a CDN (Content Delivery Network) for CSS and JS libraries like Bootstrap has several benefits:

• Faster Loading: Files are served from servers closest to users.
• Browser Caching: Users may already have the files cached.
• Reduced Server Load: Saves bandwidth on your server.
• Up-to-Date: Ensures you use the latest stable version.
• Easy Setup: No need to download or host files yourself.
• Reliability: CDNs handle high traffic with high uptime.

However, for offline development or customized files, hosting locally might be better.

CSS, JS compression

CSS and JavaScript compression reduces file sizes for faster website loading. This is achieved by removing extraneous characters like whitespace and comments, and shortening variable names.

I have created a laravel function to compress CSS and JS files. Put below function in your Controller file, I have put this in Controller.php

Also create a combined css file in location public/css/all/all.css . You can change to other location that you like.

Above put your css files inside $files_css array as shown in my code.

To use this function, you need to put below in your route file

Also create a view showing a button to generate CSS, JS combined file

Enable cache 'route'

Laravel's route caching significantly enhances performance, especially for large applications, by storing all routes in a single, optimized file for faster resolution. This reduces route parsing time. However, it's a production-only optimization, as any route changes necessitate clearing and regenerating the cache.

Put in laravel route file routes/web.php and enable and flush cache depending upon requirement

Put below in your view file to use above

Use lazy loading for image

Lazy loading images in Laravel (and in general) enhances website performance and user experience by delaying the loading of images that aren't immediately visible on the screen. This approach speeds up initial page loads, minimizes bandwidth usage, and ensures smoother navigation, which can positively impact SEO. It typically works by using JavaScript to detect when an image enters the viewport, loading it only at that point, while placeholder images are displayed beforehand.

Put inside img tag

class="lazy" and data-src="PUT_IMAGE_PATH_HERE" ex:

Note: do not put regular src="" attribute below js autometically generate src attribute when user page scroll and reach to the img tag

put below in your js file

Image Webp extension

Using the WebP image format offers these key benefits:

• Smaller File Sizes**: Up to 30% smaller than JPEG/PNG, reducing load times and bandwidth usage.
• Lossy & Lossless Compression**: Suitable for both photos and transparent images.
• Transparency Support**: Handles transparency like PNG but with smaller sizes.
• Better User Experience**: Faster loading enhances browsing.
• SEO Boost**: Faster websites rank better on search engines.
• Cost Efficiency**: Saves hosting storage and bandwidth.

Put below function inside your Controller to resize image to webp except gif image

Use above function using below

Caching and gzip compression by htaccess

using caching and Gzip compression in your .htaccess file is a really smart way to speed up your website. Here's the breakdown:

Caching: Think of caching like giving returning visitors a shortcut. When someone visits your site, their browser stores things like images, CSS, and JavaScript files. The next time they come back, their browser can grab these files locally instead of downloading them all over again, making the page load much faster. It also eases the load on your server and saves bandwidth. You set this up in your .htaccess file using either Expires or Cache-Control headers.

Gzip Compression: Gzip compression is like shrinking down text-based files (HTML, CSS, JavaScript) before sending them to the browser. This makes the files much smaller, sometimes by as much as 50-80%, which means they load a lot quicker. You enable this in .htaccess using either mod_deflate or mod_gzip.

Basically, both caching and Gzip compression work together to make your website faster, which is great for your visitors (they get a better experience), your server (it doesn't have to work as hard), and even your SEO (search engines like fast websites). It's a win-win-win.

Put below in your .htaccess

In this way by using CSS,JS CDN , Compression, Image lazy loading, Image webp conversion, Caching and gzip compression we can improve laravel performance and can achieve good score in google page speed. If you want any laravel project support then can contact us.