Speed up your Laravel application with the Speculation Rules API cover image

Speed up your Laravel application with the Speculation Rules API

Daniel Seuffer • August 27, 2024

laravel

The Speculation Rules API is an experimental but widely available browser technology that aims to improve web page loading performance.

It is engineered to enhance the performance of future page navigations. It focuses on entire document URLs rather than individual resource files, making it particularly suitable for multi-page applications (MPAs) rather than single-page applications (SPAs).

This API is an advanced alternative to the commonly used <link rel="prefetch"> feature and is intended to replace the deprecated Chrome-exclusive feature. It offers significant improvements over these earlier technologies, including a more flexible and configurable syntax for defining which documents should be prefetched or prerendered. This gives developers greater control and precision in optimizing their web applications' loading behavior.

Prerendering

A page is fully loaded in the background, and the DOM is pre-rendered—before the user even clicks the link. This prevents layout shifts and ensures faster loading times, as the browser already has all the necessary resources available.

Prefetching

Specific resources of a webpage, such as HTML, CSS, JavaScript files, or images, are downloaded before the user accesses the corresponding page. Unlike prerendering, the page is not fully rendered; only the required files are loaded in the background.

Why you should use the Speculation Rules API?

Guess what?

We have developed a package called "Laravel Speculation Rules API" that seamlessly integrates the Speculation Rules API into your Laravel applications. This package allows Laravel developers to implement prerendering and prefetching strategies easily, optimizing their web applications for faster page loads and improved user experience without extensive configuration or code changes.

Here is how to start

Install the package via Composer:

composer require innoge/laravel-speculation-rules-api

After installation, you can publish the configuration file:

php artisan vendor:publish --tag="laravel-speculation-rules-api-config"

To integrate the package into your Blade templates, add the following directive in the <head> tag:

<html>
<head>
    <!-- ... -->
    @speculationRulesApi
</head>
...
</html>

To define a route for prerendering or prefetching, use the prerender or prefetch methods in your route definition:

// Prerender
Route::get('/page-1', function () {
    return view('...');
})->prerender();

// Prefetch
Route::get('/page-2', function () {
    return view('...');
})->prefetch();

The eagerness level can be passed as a parameter to the prerender and prefetch methods:

// prerender
Route::get('/page-1', function () {
    return view('...');
})->prerender('moderate');

// prefetch
Route::get('/page-1', function () {
    return view('...');
})->prefetch('moderate');

The Eagerness Level Has the Following Effects:

The moderate level should be suitable for most applications since it strikes a nice balance between user experience and server load on the backend.

The Included Configuration File

The configuration file config/speculation-rules-api.php allows you to set custom prerender and prefetch rules for your application. Here, you can define URLs, referrer policies, and eagerness levels to control the behavior of prerendering and prefetching. Here's an example of the configuration file:

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Default Eagerness
    |--------------------------------------------------------------------------
    |
    | This value is the default eagerness for the prerender and prefetch rules.
    | You can set it to 'eager', 'moderate' or 'conservative'.
    |
    */

    'default_eagerness' => 'moderate',

    /*
    |--------------------------------------------------------------------------
    | Prerender Rules
    |--------------------------------------------------------------------------
    |
    | Here you may specify custom prerender rules for the application.
    |
    */

    'prerender' => [
//        [
//            'source' => 'list',
//            'urls' => ['page-1', 'page-2'],
//            'eagerness' => 'moderate',
//        ],
//        // parameter usage example
//        [
//            ['href_matches' => '/page-3/*'],
//            ['not' => ['href_matches' => '/page-3/*/*']],
//        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Prefetch Rules
    |--------------------------------------------------------------------------
    |
    | Here you may specify custom prefetch rules for the application.
    |
    */

    'prefetch' => [
//        [
//            'urls' => ['page-4'],
//            'referrer_policy' => 'no-referrer',
//            'eagerness' => 'moderate',
//        ],
    ],

];

Testing

To test the Speculation Rules API in Chrome, open the Developer Tools using Ctrl+Shift+I (or Cmd+Option+I on Mac). In the Application tab, look for a "Speculative Loads" section to see which URLs are being prerendered or prefetched. As you navigate your site, observe the network activity to verify if resources are being preloaded as expected. Keep an eye on the Console tab for any related errors.

Conclusion

With innoge/laravel-speculation-rules-api, you can significantly increase the speed of your Laravel-based applications with minimal effort. This package offers a quick and easy way to improve performance and is flexible in its configuration. Given users' rising expectations for fast and smooth web experiences, you shouldn't hesitate to integrate this powerful tool into your projects.

Find Our Package Here

Further Information about the Topic "Speculation Rules API"

Do you need help with your next project?

Unleash the full potential of your business, and schedule a no-obligation consultation with our team of experts now!

Schedule Meeting ☕️ Contact Us