Turbolinks with Laravel. Speed up navigation in your Laravel App with Turbolinks

pulkit kathuria
May 11 · 4 min read

In this story, we are going to share 6 simple steps that all you need in your Laravel apps to speed up navigation by enabling Turbolinks. This will speed up your website to render pages fast.

Turbolinks and Laravel — speed up navigation

Turbolinks make navigation in your web application faster. With Turbolinks, your app will look like a Single Page Application, which is a great added benefit for the user experience. While at the same time, there is no need to sacrifice on SEO.
Mostly for Single Page Applications or Ajax driven pages, there is a big drawback that Google crawlers see an empty page empty. Therefore, the content that gets loaded by Ajax is not indexed.
Of course, frameworks like Vue now allow Server Side rendering. In that case, you are managing 2 vhosts on your server with a reverse proxy.

In this tutorial, we’ll go through simple steps for your Laravel app to work with Turbolinks.

End Result — Laravel App with Turbolinks

Without and with Turbolinks visualization.

■ Without Turbolinks :(

No Turbolinks
With Turbolinks

As you can see, there is a significant difference in navigation.

Let's go through the steps

  1. Install Turbolinks in your Laravel application
  2. Add require turbolinks.js in Laravel app.js
  3. Add data-turbolinks-track attribute to your script/CSS tags
  4. Replace document ready with turbolinks:load in your js files
  5. Verify all pages that app.js is loaded
  6. (optional) Animate items if you want

1Step 1 — Install Turbolinks in your Laravel application

2Step 2 — Add require turbolinks.js in Laravel app.js

Let's add Turbolinks to your app.js below bootstrap.js

3Step 3— Add data-turbolinks-track attribute to your script/CSS tags

This way, we can make sure that any other js or CSS files are properly tracked by Turbolinks upon navigation. Please also make sure that the tags go in the <head> section of your HTML

4Step 4 — Replace document ready with turbolinks:load in your js files

If you are using jquery, then it is important to replace your document ready page block to turbolinks:load. This way, each time a link is clicked on your page, you can make sure that your javascript code is executed.

If you are not using Jquery then in pure javascript codde you can do something like the following

5 Step 5 — Verify all pages that app.js is loaded

If on some pages app.js is not loaded, this means that there are no Turbolinks enabled. Then you should disable the href links for such pages. By adding data-turbolinks=”false” you can disable a Turbolink. In our app, we are loading docs URL from static pages.

Example

This is useful if your website also serves static pages as an example below

6Step 6— (optional) Animate items if you want

In this step, if you would like to animate any selector upon page transition then you can do that using the following snippet easily. You can also add multiple selectors to it. This is an optional step.

Here we are going to add aninmate.css library. You can even animate the whole body or container class in your app.

Conclusion

  1. Enabling Turbolinks in your Laravel Application makes navigation really fast and seamless
  2. Content that is appended within your DOM using javascript, make sure that you have a placeholder in HTML for better user experience to avoid the blinking effect
  3. As it just feels like a SPA, it’d be good to add some sort of loading indicator like pace.js
  4. Forms on Laravel work as they normally do.

Until now, Turbolinks was a Ruby on Rails thing, but it is good to be able to use it in Laravel Applications too and enhance the user experience. SPA are good, but they are not SEO friendly. If Server Side Rendering setup is too much extra work for your app then I would recommend using Turbolinks for your apps.

web-developer

Web Developer. HTML/CSS/JS/PHP/Mysql. Share tips and knowledge from your experience working in Enterprise Tech Companies

pulkit kathuria

Written by

web-developer

Web Developer. HTML/CSS/JS/PHP/Mysql. Share tips and knowledge from your experience working in Enterprise Tech Companies