I’ve spent an excellent chunk of my profession optimizing efficiency in internet apps — principally from the frontend perspective. Lately, I stumbled upon a easy trick with Turbo Frames that may enhance the person expertise when a selected a part of the web page is painfully gradual to load.
When Gradual Pages Harm UX
Think about you will have a view that reveals a large, advanced listing of information. Possibly it includes heavy database queries, superior filtering, or difficult logic that may take a few seconds to complete. Historically, the person is caught watching a clean or earlier web page till every part completes.
That’s clearly subpar for UX. The person would possibly suppose the web page is damaged or gradual, they usually would possibly depart earlier than the content material even reveals up.
Splitting Out the Gradual Part
One method to sort out that is to provide the gradual listing its personal route. Your principal view then serves every part else instantly — like a fast abstract or fundamental information — whereas the heavy question is executed in a separate request.
You drop a <turbo-frame> in your principal view, pointing its src to the brand new endpoint that returns simply the gradual information. Turbo routinely fetches that information and replaces the body’s content material as soon as it’s prepared. In the meantime, the person can already see and work together with the remainder of the web page.
<h1>My tremendous web page</h1>
<turbo-frame id="slow-section" src="<%= slow_data_path %>">
<!-- This may be empty or present a spinner / loading textual content -->
</turbo-frame>
When you place hyperlinks inside that body, you would possibly run right into a second shock: clicking a hyperlink will preserve you “trapped” within the body, rendering all subsequent pages inside it. That’s clearly not at all times what you need.
The repair is simple: add data-turbo-frame="_top" to any hyperlink that you simply need to get away of the body and cargo as a full web page.
<%= link_to "Go Full Web page", some_full_page_path, information: { turbo_frame: "_top" } %>
Or you need to use the goal="_top" on the body itself to make all hyperlinks open within the high body.
That manner, your customers aren’t caught inside a sub-view endlessly.
Last Ideas
This method might not be groundbreaking, but it surely’s a helpful shortcut for coping with efficiency bottlenecks on any web page. It received’t make your gradual question quicker – you continue to ought to take into consideration optimizing it. By isolating the gradual portion behind a <turbo-frame> that factors to a separate endpoint, you retain the remainder of the web page fast and responsive. The general notion of velocity will increase — and your customers will recognize the distinction.
