Web Page Loading Time Long for Rails web page

Question

I'm developing a web page using ruby on rails. I found one of my page loading time is very long. I use pingdom to test it,here is the result:

Then I refer to this and Yslow report

some of the F grade options:

1.Grade F on Make fewer HTTP requests This page has 78 external Javascript scripts. Try combining them into one. Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

2.Grade F on Add Expires headers There are 82 static components without a far-future expiration date.

3.Grade F on Use cookie-free domains There are 81 components that are not cookie-free

4.Grade F on Put JavaScript at bottom There are 78 JavaScript scripts found in the head of the document

I feel mostly is the messy java script or CSS cause the long waiting time. Suggestion is put java script at end of page.

problem is:for ruby on rails,my Javascript is in file : app\assets\javascripts\custom.js while my view page is in: app/view/sth.html.erb I have no idea how to put it at the end.

attached is my code in app/view/sth.html.erb

    <h3>Project Information</h3>
<div class="project-report">
  <table class="content-table">
    <tr>
      <td><strong>PJO Number</strong></td>
      <td><%= @project.job_number %></td>
    </tr>
    <tr>
      <td><strong>Client</strong></td>
      <td><%= @project.client_name %></td>
    </tr>
    <tr>
      <td><strong>Location</strong></td>
      <td><%= @project.jobsite_location %></td>
    </tr>

    <br>
    <td>
    <tr>
      <td><strong>Contacts</strong></td>

    </tr>
        <br>
        <table class="yellow-header-table contact-table">
          <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>Email</th>
            <th>SMS</th>
            <th>Fax</th>
          </tr>
          <% @project.contacts.each do |contact| %>
          <tr>
            <td><%= contact.contact_person_name %></td>
            <td><%= contact.designation %></td>
            <td><%= contact.email %></td>
            <td><%= contact.phone_number %></td>
            <td><%= contact.fax_number %></td>
          </tr>
          <% end %>
        </table>

    </td>
  </table>

  <table class="yellow-header-table">
    <tr>
      <th>Instrument Type</th>
      <th>Total</th>
      <th>Installed</th>
      <th>Active</th>
      <th>Remarks</th>
    </tr>
    <tr>
      <td>first Meter</td>
      <td><%= @project.quantity_active %></td>
      <td><%= @project.quantity_active %></td>
      <td><%= @project.quantity_active %></td>
      <td><%= @project.sound_remarks %></td>
    </tr>

  </table>
<div style='margin-left:50px;float:left;'>
  <button id="buttonN" class="btn btn-info" style="width:190px;">View Data1</button>
  <button id="buttonV" class="btn btn-info" style="margin-left:50px;width:190px;">View Data2</button>
  <button id="buttonR" class="btn btn-info" style="margin-left:50px;width:190px;">Generate Report</button>
</div>





<div id="report-reviewn" class="hidden" style='margin-top:55px;'>  
<% if (@devices.count > 0) %>
    <h4 style="width:100%">1st Devices</h4>

    <table id="tableselect" class="yellow-header-table">
    <tr>
      <th scope="Row">Select</th>
      <th>Device ID</th>
      <th>Brand</th>
      <th>Address</th>
    </tr>



    <%= form_tag viewdata_devices_path,class:"form-horizontal viewlist-form" do %>
    <% @project.first_devices.each do |first_device| %>
    <tr>
      <th scope='col'>
      <%= radio_button_tag(:deviceID, first_device.id ) %></th>
      <td><%= first_device.device_id %></td>
      <td><%= first_device.serial_number %></td>
      <td><%= first_device.brand %></td>
      <td><%= first_device.last_calibration_date %></td>
      <td><%= first_device.remarks %></td>
      <td><%= @project.project_type %></td>
      <td>
      <select style='border:none;'>
       <option><%= first_device.device_location %></option>
       <option><%= first_device.device_latlng %></option>
      </select>
     </td>
    </tr>
    </tr>
    <% end %>
  </table>

        <table class="table-row">

        <tr>

        <th> <%= text_field_tag 'startday', nil, placeholder: 'Start Date',style:'width:100px;', class: "date-picker" %></th>

        <th> <%= text_field_tag 'endday', nil, placeholder: 'End Date' ,style:'width:100px;',class: "date-picker" %><th>
          <%= hidden_field_tag "project_id", @project.id %>

        <th> <%= submit_tag "View Data",class: "btn" %></th>

    <% end %>
        </tr>
        </table>



    <% else %>
    <p style="width:100%;text-align:left;margin-left:50px;">There is no first device for this project </p>
    <% end %> 

</div>  










  <div id="report-reviewv" class="hidden" style='margin-top:55px;' >
      <% if (@vdevices.count > 0) %>

    <table class="yellow-header-table">
    <h4 style="width:100%">second Devices</h4>
    <tr>
      <th scope="Row">Select</th>
      <th>Device ID</th>
      <th>Address</th>
    </tr>

    <%= form_tag viewdata_second_devices_path,class:"form-horizontal viewlist-form" do %>
    <% @project.second_devices.each do |second_device| %>
    <tr>
      <th scope='col'>
      <%= radio_button_tag(:deviceID, second_device.id ) %></th>
      <td><%= second_device.device_id %></td>
      <td><%= second_device.serial_number %></td>
      <td><%= second_device.brand %></td>
      <td><%= second_device.current_trigger_value %></td>
      <td><%= second_device.last_calibration_date %></td>
      <td><%= second_device.remarks %></td>
      <td><%= @project.project_type %></td>
      <td>
      <select style='border:none;'>
       <option><%= second_device.device_location %></option>
       <option><%= second_device.device_latlng %></option>
      </select>
     </td>
    </tr>
    <% end %>

    </table>

       <table class="table-row">

        <tr>

        <th> <%= text_field_tag 'startday', nil, placeholder: 'Start Date',style:'width:100px;', class: "date-picker" %></th>

        <th> <%= text_field_tag 'endday', nil, placeholder: 'End Date' ,style:'width:100px;',class: "date-picker" %><th>
         <%= hidden_field_tag "project_id", @project.id %>
        <th> <%= submit_tag "View Data",class: "btn" %></th>

    <% end %>
        </tr>
        </table>

    <% else %>
    <p style="width:100%;text-align:left;margin-left:50px;">There is no second device for this project </p>
    <% end %> 
</div>




    <div id="report-reviewr" class="hidden" style='margin-top:100px;'>  

    <div class="report-forms report-left-align">
    <span><strong>Report Type</strong></span>
    <%= select_tag "report-type", options_for_select([["first", "first-report"], ["second", "second-report"]]), :prompt => "Choose Report" %>

    <div id="first-report" class="report-form hidden">
      <%= form_tag report_first_devices_path, class: "form-horizontal device-form", target: "_blank" do %>
      <div class="control-group">
        <%= label_tag "Choose Devices", nil, class: "control-label" %>
        <div class="controls">
          <% selected_first_device = @project.first_devices.blank? ? nil : @project.first_devices.first.id %>
          <%= select_tag "devices", options_from_collection_for_select(@project.first_devices, "id", "serial_number", selected_first_device), :multiple => false %>
        </div>
      </div>

      <div class="control-group">
        <%= label_tag "Choose Time", nil, class: "control-label" %>
        <div class="controls">
          <%= text_field_tag "time_range", nil, class: "input-large date-picker" %>
        </div>
      </div>

      <%= hidden_field_tag "project_id", @project.id %>
      <%= hidden_field_tag "device_type", "first" %>

      <div class="control-group">
        <div class="controls">
          <%= submit_tag "Generate Report", class: "btn" %>
        </div>
      </div>
      <% end %>
    </div>

    <div id="second-report" class="report-form hidden">
      <%= form_tag report_second_devices_path, class: "form-horizontal device-form", target: "_blank" do %>
      <div class="control-group">
        <%= label_tag "Choose Devices", nil, class: "control-label" %>
        <div class="controls">
          <% selected_second_device = @project.second_devices.blank? ? nil : @project.second_devices.first.id %>
          <%= select_tag "devices", options_from_collection_for_select(@project.second_devices, "id", "serial_number", selected_second_device), :multiple => false %>
        </div>
      </div>

      <div class="control-group">
        <%= label_tag "Choose Time", nil, class: "control-label" %>
        <div class="controls">
          <%= text_field_tag "time_range", nil, class: "input-large date-picker" %>
        </div>
      </div>

      <%= hidden_field_tag "project_id", @project.id %>
      <%= hidden_field_tag "device_type", "second" %>

      <div class="control-group">
        <div class="controls">
          <%= submit_tag "Generate Report", class: "btn" %>
        </div>
      </div>
      <% end %>
    </div>
  </div>



  </div>

</div>

anyone can give some suggestions?

Answer 1

In the default app/views/layouts/ directory there should be a file named application.html.erb. This file contains the following lines within the head

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

If you move this to just below the closing body tag all your JS will be at the bottom of the page on every pageload. This is the most effective way of not blocking the rendering of the page client side.

All your files will be included via the compiled application.js in the end.

EDIT 1

As you've seen in your YSLOW results, you have alot - and with that i mean alot of JS. All these files perform a dns lookup (they will be cached but still frequently updated). Every n of dns lookups comes with a penalty due to the fact that a cached dns lookup only exists for something upto a day. Reducing the number of requests is key to making your application alot faster.

• Info about the asset pipeline
• SO post of assets not being compiled into one file

You may want to look at these for extra information about the asset pipeline and / or what to do to compress your assets.