Hi everyone,
I’m working on optimizing the performance of a Rails application and recently ran into an issue when trying to improve the response times for the following route:
https://.../patients/pat_yb2vmd93E6a6CVQL7WwZg4DR/medical_certificates/new
According to my browser’s network tools, the original request had a 46ms waiting time and a 362ms download time.
Here’s the relevant code for the view and controller:
Original View:
<% content_for :bg_class, "bg-neutral-100 overflow-hidden shadow ring-1 ring-gray-900/5 rounded-lg" %>
<div data-controller="patients-show" class="p-2">
<%= render partial: 'shared/breadcrumbs', locals: { back_link: patients_path, back_text: 'Voltar', breadcrumbs: [
{ name: t('patients.title'), path: patients_path },
{ name: @patient.name.titleize, path: patient_path(@patient) },
] } %>
<div class="mt-6">
<%= render 'patients/patient_header' %>
<%= turbo_frame_tag 'tab_content' do %>
<div data-content="documents" class="mt-6 flex w-full default-area">
<div id="container" class="mt-4 flex w-full flex-row">
<nav class="flex hidden w-auto flex-col lg:block" aria-label="Sidebar">
<ul role="list" class="space-y-2">
<li>
<%= link_to new_patient_medical_certificate_path, class: "h-32 w-32 rounded-lg bg-gray-100 border border-1 border-ow-500 flex items-center justify-center flex-col text-center" do %>
<%= inline_svg_tag("medication_notes_icon_highlighted", height: 52, class: "pt-2 h-12 text-ow-600 text-sm") %>
<span class="pt-2 text-sm text-ow-600"><%= t('.certificate') %></span>
<% end %>
</li>
<li>
<%= link_to new_patient_prescription_path, class: "h-32 w-32 rounded-lg border border-gray-200 hover:border-ow-500 hover:bg-gray-50 hover:border-2 flex items-center justify-center flex-col text-center" do %>
<%= inline_svg_tag("prescription_icon", height: 52, class: "pt-2 h-12 text-ow-600 text-sm") %>
<span class="pt-2 text-sm text-gray-600"><%= t('prescriptions.new.prescriptions') %></span>
<% end %>
</li>
</ul>
</nav>
<div id="content" class="flex w-full flex-auto rounded-lg">
<div class="w-full px-12 py-3">
<div class="sm:flex sm:items-center sm:justify-between">
<div>
<h3 class="default-h1"><%= t('.certificate') %></h3>
<p class="text-gray-500 default-p"><%= t('.certificate_description') %></p>
</div>
<div class="mt-5 flex justify-center sm:mt-0">
<%= link_to t('.history'), patient_medical_certificates_path(@patient), target: '_top', class: "flex items-center justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" %>
</div>
</div>
<div class="py-8">
<div class="rounded-lg bg-gray-900/5 shadow ring-1 ring-gray-200">
<div class="px-16 pt-8 pb-8">
<%= turbo_frame_tag 'certificate_form' do %>
<%= render partial: 'form', locals: { patient: @patient, certificate: MedicalCertificate.new } %>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
Original Controller:
def new
end
To improve the download time, I made the following changes:
- Created a partial:
<%= turbo_frame_tag 'tab_content' do %>
<div data-content="documents" class="mt-6 flex w-full default-area">
<div id="container" class="mt-4 flex w-full flex-row">
<nav class="flex hidden w-auto flex-col lg:block" aria-label="Sidebar">
<ul role="list" class="space-y-2">
<li>
<%= link_to new_patient_medical_certificate_path, class: "h-32 w-32 rounded-lg bg-gray-100 border border-1 border-ow-500 flex items-center justify-center flex-col text-center" do %>
<%= inline_svg_tag("medication_notes_icon_highlighted", height: 52, class: "pt-2 h-12 text-ow-600 text-sm") %>
<span class="pt-2 text-sm text-ow-600"><%= t('.certificate') %></span>
<% end %>
</li>
<li>
<%= link_to new_patient_prescription_path, class: "h-32 w-32 rounded-lg border border-gray-200 hover:border-ow-500 hover:bg-gray-50 hover:border-2 flex items-center justify-center flex-col text-center" do %>
<%= inline_svg_tag("prescription_icon", height: 52, class: "pt-2 h-12 text-ow-600 text-sm") %>
<span class="pt-2 text-sm text-gray-600"><%= t('prescriptions.new.prescriptions') %></span>
<% end %>
</li>
</ul>
</nav>
<div id="content" class="flex w-full flex-auto rounded-lg">
<div class="w-full px-12 py-3">
<div class="sm:flex sm:items-center sm:justify-between">
<div>
<h3 class="default-h1"><%= t('.certificate') %></h3>
<p class="text-gray-500 default-p"><%= t('.certificate_description') %></p>
</div>
<div class="mt-5 flex justify-center sm:mt-0">
<%= link_to t('.history'), patient_medical_certificates_path(@patient), target: '_top', class: "flex items-center justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" %>
</div>
</div>
<div class="py-8">
<div class="rounded-lg bg-gray-900/5 shadow ring-1 ring-gray-200">
<div class="px-16 pt-8 pb-8">
<%= turbo_frame_tag 'certificate_form' do %>
<%= render partial: 'form', locals: { patient: @patient, certificate: MedicalCertificate.new } %>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
- Updated the View:
<% content_for :bg_class, "bg-neutral-100 overflow-hidden shadow ring-1 ring-gray-900/5 rounded-lg" %>
<div data-controller="patients-show" class="p-2">
<%= render partial: 'shared/breadcrumbs', locals: { back_link: patients_path, back_text: 'Voltar', breadcrumbs: [
{ name: t('patients.title'), path: patients_path },
{ name: @patient.name.titleize, path: patient_path(@patient) },
] } %>
<div class="mt-6">
<%= render 'patients/patient_header' %>
<%= render 'new_content' %>
</div>
</div>
- Updated the Controller:
def new
render partial: "new_content" if turbo_frame_request?
end
After these changes, the download time significantly improved, dropping to around 4ms, but the waiting time increased to around 290ms. I was expecting the waiting time to stay the same, while the download time would decrease.
Did I miss something? Why would the waiting time increase so much after these changes?
Thanks in advance for any insights!
