Can I increase the loading performance of my Rails app even more

Question

I am using the "layzr-rails" gem to lazy load images, this works ok, but can I somehow do something else to increase page loading?

It takes almsot 6 seconds on my local machine to load the site:

Started GET "/" for 127.0.0.1 at 2018-09-19 00:51:43 +0200
  Processing by SlotsController#index as HTML
  Rendering slots/index.html.erb within layouts/application
  Slot Load (2.0ms)  SELECT "slots".* FROM "slots"
  ↳ app/views/slots/index.html.erb:1
  Rendered collection of slots/_slot.html.erb [1585 times] (5749.7ms)
  Rendered slots/index.html.erb within layouts/application (5783.6ms)
Completed 200 OK in 5906ms (Views: 5888.7ms | ActiveRecord: 2.0ms)

Can I somehow do something better here?

How I render it:

index.html.erb

<%= render @slots %>

_slot.html.erb

<%= image_tag(slot.file_name, size: "200x200", lazy:true, class: 'slot-image') %>

I want to only render as many image views as the user is able to see on screen. At this moment all of the 1,5k views are rendered and then the content itself, the images, are lazy loaded if they scroll into the screen.

I am fairly new to web developing and so I dont know the approach how to handle so many image views on one page correctly in a real world application.

Maybe someone could give me good direction where I can read up those things or give me some keywords about this issue.

Here is the page on Heroku: https://secret-reef-56473.herokuapp.com/

Any help or tipps really much appreciated!

(I hope this post isnt against the rules of StackOverflow and my request is clear and understandable)

Answer 1

You can try moving the partials rendering to inline code and use partial caching. But rendering 1,5k images is just plain crazy. Have you tought about bottomless pagination? render a more reasonable amount of images and when the user scrolls you check the height of the scroll and the height of the content and you can do an ajax request to load more images when the user es reaching the end, and so on until there are no more images to show.