Boost Laravel PageSpeed with 3 Best CDN Caching Services

Laravel stands out as a highly sought-after web development framework, operating on PHP. It empowers developers to adopt a more structured architectural pattern, a departure from the comparatively lenient approach found in core PHP development. The latest trends indicate that approximately 650,000 websites use this framework to run their businesses.

Despite its numerous advantages, encompassing features such as a robust templating engine, middleware, and exceptional testing support, it is worth noting that Laravel may not emphasize speed performance from the end user’s standpoint. Nonetheless, its strengths lie in its comprehensive feature set, fostering a supportive community and streamlining the development process.

Role of PHP Frameworks

While it is possible to create a website solely using PHP without leveraging any framework, as the application expands, the codebase can swiftly become intricate and challenging to maintain. This is where a framework proves invaluable. By bundling essential libraries and pre-built components, a framework accelerates development, simultaneously instilling a level of organizational discipline into the code. This ensures that even sizable development teams can collaborate seamlessly without losing sight of the project’s coherence.

When considering popular frameworks, Laravel, Symfony, and CodeIgniter emerge as top contenders, followed by Zend, CakePHP, Phalcon, and others. While these frameworks greatly benefit development teams, optimizing their performance often involves additional efforts.

This may include implementing content delivery networks (CDN) to cache and compress assets like CSS and JS, converting conventional PNG and JPEG images to the more efficient AVIF and WebP formats, and incorporating lazy loading for non-critical assets. These optimizations contribute to enhancing the overall efficiency and speed of web applications built on these frameworks.

Advantages of Using Laravel

Almost all PHP frameworks have mostly these core features built that benefit the application developer and maintainer-

• Easy setup of routing and middleware
• Out-of-the-box security features including authentication and password management
• Better CRUD operations with database due to object-relational mapper (ORM)
• Templating engine for easy view rendering and separation of concerns with MVC
• Testing support with integration with libraries such as PHPUnit.

Additional Needs to Grow Traffic

Having so many benefits, there are still many additional setups required to improve the Laravel website’s performance. Below are the checklist items you would like to touch upon-

• Cache static assets using Content Delivery Network for faster loading
• Convert images to NextGen AVIF and WebP formats
• Lazy load images and YouTube videos below the fold
• Defer JavaScript and unused CSS files
• Compression and minification of static JS and CSS assets
• Ensure healthy Core Web Vitals state on Google Search Console

Why a CDN is Required on a Website

The Content Delivery Network (CDN) needs no elaborate introduction; it stands as an essential tool for any public website. Its primary function is to store a copy of static assets like CSS, images, and JavaScript files globally, allowing them to be delivered to website visitors from the nearest geographical location. This approach is instrumental in minimizing download latency. Various service providers operate in this space, including Akamai, AWS Cloudfront, Bunny, and Google Cloud, among others.

Adding a CDN on the Laravel Website

Next, we are going to cover how to configure AWS, Bunny, and RabbitLoader caching on the website. All service providers have some pros and cons in their offerings and core benefits. They also differ in how much one has to spend to run them.

Using AWS CloudFront

AWS is a known brand for its computing infrastructure. The Cloudfront CDN service has 600+ Points of Presence which gives a great service. First, you need to create a new CloudFront distribution.

After the distribution is created, you will get a distribution domain name like ‘dxxx.cloudfront.net’. This is the domain that you can now use to serve the assets of the website by replacing the original host. For example, if the current image path is –

https://www.mylaravelwebsite.com/images/image.jpg

then change it to

https://dxxx.cloudfront.net/images/images.jpg

The change of the host for assets can be done by setting the ASSET_URL variable in the .env file. The .env file is located in the root directory where the app is installed. This is the same directory where composer.json file is also saved. Below is a sample content for the .env file-

ASSET_URL=https://dxxx.cloudfront.net

After making modifications to the .env file, make sure to clear the application cache by running the below command-

php artisan config:cache

Instead of Cloudfront, If you want to use S3 then you can explore juhasev/laravelcdn package.

• Pros – Brotli compression support for CSS and JS, reliable infrastructure
• Cons – Complex setup, metered bandwidth, no way to automatically convert images to AVIF/WebP

Using Bunny CDN

Bunny is a bit pocket friendly than Cloudfront. Bunny can be used with the Laravel website as a File System Adapter. There are a few Composer packages available that make the integration a little easier. You can explore platformcommunity/flysystem-bunnycdn package and integrate it with the website.

Make sure you have a Bunny account created before you start the integration. You will also going to need a “Storage Zone” to be created in your account.

For a better performance, choose the Edge (SSD) option over Standard. the Edge (SSD) storage tier has a consistent latency of 1-5 ms while the standard tier can have a variable latency of 30-300 ms.

• Pros – Brotli compression support for CSS and JS, reliable infrastructure, pocket-friendly
• Cons – Complex setup, metered bandwidth, limited image optimizations, does not reduce database connections

Read next: Boost Laravel PageSpeed with CDN Caching Services

Using RabbitLoader

RabbitLoader transcends the conventional role of a CDN and caching service, offering comprehensive solutions for achieving a truly high-performing website.

It seamlessly handles the conversion of both existing and forthcoming JPG/PNG images into AVIF and WebP formats. By serving these optimized images through the CDN, RabbitLoader significantly diminishes the size and loading time, resulting in an approximate 40% reduction. Moreover, it intelligently defers the loading of JavaScript and non-critical CSS files until they are required, effectively mitigating render-blocking calls and enhancing overall webpage loading speed.

How RabbitLoader Caching Works

RabbitLoader adds a middleware in the Laravel app and caches the entire HTML when a page is first visited. Next time when it seems the same requests, it serves the entire page from the local cache. There are two caching strategies that RabbitLoader uses-

1. Caching the webpage itself – this happens for all public pages. The content is cached on the first visit and served from the cache on subsequent visits. This strategy reduces the number of times a webpage has to be re-generated by the hosting server and reduces database connections too.
2. Caching the static assets used on the webpage – static files like CSS, JavaScript, and Images come under this category. The caching of these files is done on the global Content Delivery Network which replicates automatically to all Points of Presence across the globe.

Installing RabbitLoader Optimizer Package

RabbitLoader has a free tier too which is sufficient for a small website or trying the service on a non-production environment. Installing the RabbitLoader Laravel package is pretty easy and can be done in minutes.

• Pros – Simple installation, unlimited bandwidth, takes care of all PageSpeed optimization, reduces database connections
• Cons – Can not use the caching alone

Check Also: PageSpeed Optimization Services

Points to Take Care When Updating CSS, JS, and Images

When updating an existing CSS/JS file or an image, make sure that you use some kind of versioning in the resource path. Since the existing files are already cached on the edge servers, modifying the file on the hosting server may introduce a delay in reflecting those for the website visitors.

Below is an example where you see '?v=1.2' appended as a GET parameter to a CSS file. When you update this file, simply change the version to '?v=1.3' or anything of that sort that ignores the previous version of the CSS file when serving the page to visitors.

<link rel="stylesheet" href="https://mywebsite.com/assets/css/theme.css?v=1.2" />

The same concept of all other static files like JavaScript and images.