Loading multiple images from S3 on a Rails 4 app: slow loading page

Question

I have an users index page that simply list users and show their avatars (uploaded on Amazon S3 with carrier wave and fog):

app/views/users/index.html.erb

<% @users.each do |user| %>
    <% if ! user.avatar_url.nil? && user.avatar.file.exists? %>
        <div class=“avatar">
            <%= link_to (image_tag user.avatar_url.to_s), user %>
        </div>
    ...
    <% end %>   
<% end %>

config/initializers/carrierwave.rb

CarrierWave.configure do |config|
   config.fog_credentials = {
     :provider               => 'AWS',
     :aws_access_key_id      => ENV["AWS_ACCESS_KEY_ID"],
     :aws_secret_access_key  => ENV["AWS_SECRET_ACCESS_KEY"],
     :region                 => 'eu-west-1'                  # optional, defaults to 'us-east-1'
   }
   config.fog_directory  = ENV["AWS_S3_BUCKET"]                     # required
   config.fog_public     = true                                   # optional, defaults to true
end

The index page is really slow to load, while getting all images.

Is there a way to speedup page loading, maybe through a lazy load and an ajax request?

Thank you for your help and time, and sorry for this newbie question.

p.s. I would add that even when I load an user profile page sometimes it doesn't display any avatar (in that case, only if I reload page avatar is shown correctly)

Answer 1

Since your images are stored on S3, you don't really have control over how fast your images load. One option would be to consider using Amazon Cloudfront to serve images.

Images are loaded asynchronously by the browser so slow loading images shouldn't affect how fast your users index page is loading. If your users page is loading slowly, you should consider caching your users index page: see http://guides.rubyonrails.org/caching_with_rails.html#fragment-caching for more information.

An example would be

<% @users.each do |user| %>
    <% cache(user) do %>
      <%= render user %>
    <% end %>  
<% end %>