This content originally appeared on DEV Community and was authored by Jess Alejo
What it Does
Turbo 8 introduces the InstantClick (also known as turbo-prefetch) feature, which significantly improves the perceived speed of your web application by preloading links before the user clicks on them. This feature predicts which links the user is likely to click on and preloads their content in the background. When the user actually clicks on the link, the content is loaded instantly, resulting in a faster and smoother user experience.
Demo:
-
Without InstantClick:
- User clicks on a link.
- Browser sends a request to the server.
- Server processes the request and responds with the new page.
- Browser renders the new page.
-
With InstantClick:
- User hovers over a link.
- Browser prefetches the page in the background.
- User clicks on the link.
- Prefetched page is displayed almost instantly.
Why Should I Use InstantClick?
Enhanced User Experience: Faster page transitions lead to a smoother and more responsive user experience.
Reduced Load Time: By prefetching pages, the perceived load time is reduced, making your application feel faster.
Improved Engagement: Users are more likely to stay on your site and navigate through multiple pages when the experience is seamless.
Competitive Advantage: Faster navigation can give you a competitive edge, as users tend to prefer websites that load quickly and efficiently.
How to Use InstantClick
The Turbo-prefetch feature was enabled by default starting from version 1.4.0 of the turbo-rails gem. This version includes the InstantClick feature, which automatically prefetches links to improve the perceived speed of web applications.
To take advantage of this feature, ensure that you have Turbo set up in your Rails application.
Add Turbo to Your Application: If you haven't already, add Turbo to your Gemfile:
gem 'turbo-rails'
Install Turbo: Run the following command to install Turbo:
bundle install
rails turbo:install
Enable InstantClick: InstantClick is enabled by default so you don't need to do anything extra. Your links will automatically use the prefetch feature.
How to Disable InstantClick
If you need to disable InstantClick for any reason, you can do so by modifying the Turbo configuration.
- Disable Globally: To disable the InstantClick feature globally without disabling the entire Turbo functionality, you can add a meta tag in your application layout.
<!DOCTYPE html>
<html>
<head>
<meta name="turbo-prefetch" content="false">
<!-- Other head elements -->
</head>
<body>
<!-- Body content -->
</body>
</html>
-
Disable for Specific Links: To disable InstantClick for specific links, add the
data-turbo-prefetchattribute to the link tag.
<%= link_to "My Link", my_path, data: { turbo_prefetch: false } %>
Conclusion
Turbo 8's InstantClick feature is a powerful tool to enhance the performance and user experience of your web application. By preloading links, it significantly reduces the perceived load time, making your application feel faster and more responsive. However, you also have the flexibility to disable this feature globally or on specific links as needed.
Incorporating turbo-prefetch effectively can lead to higher user engagement, better SEO, and an overall smoother experience for your users.
This content originally appeared on DEV Community and was authored by Jess Alejo
Jess Alejo | Sciencx (2024-07-01T01:12:58+00:00) Turbo 8 InstantClick (Turbo-Prefetch) Feature. Retrieved from https://www.scien.cx/2024/07/01/turbo-8-instantclick-turbo-prefetch-feature/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.