I use the Ruby Open Graph Protocol Gem to grab images related to YouTube, Vimeo, Metacafe and Dailymotion videos as well as their titles and descriptions. These images are displayed with a play button over them and when a user clicks the image it uses ajax to load and play the related video for the image.
Anyway I’ve noticed that my page takes over 15 seconds to load now after a refresh. When I delete all the microposts that have videos (images) attached to them the page load times go back to normal.
When a user makes a micropost they can link to a video they want to include with the micropost and the url of that link/url is stored in the link column of the microposts table that is setup in my DB.
From my view, I pass the link of the micropost currently being looped over into my helper method to get the open graph protocol object for video. Then from the returned object I get the image property and use an image_tag helper to display the related image.
image_tag get_video_data(micropost.link).image
This is how I communicate with open graph protocol gem..
helper:
def get_video_data(url)
OpenGraph.fetch(url)
end
Anyway this all slows down my page load times dramtically. I was wondering if there is some way to fix this? I’m thinking the issue is caused by having to load those individual images from different URL’s. I say this because when I remove the related microposts and reload my page it’s load time is back to normal. The images located in my app cause no issues.
When a user is posting a micropost they basically paste the link of the video they wish to add to the post in and then the image for the video is displayed back to them, they click post and the micropost is posted.
I was wondering if I should some how have that image uploaded to my app so I can just display images for videos like:
image_tag micropost.video_image
This way the page will load fast as it won’t need to pull images form external URL’s.
I’m not really sure how this is done by the larger websites e.g. fb, google+ but would like to know how and if possible be given a solution thanks.
Kind regards.
This is because OpenGraph.fetch(url) launches an http request to get the necessary data to find the image tag. Since this has to occur during the render of your action, you can’t send any information to the client until they all complete.
While there are many ways to deal with this, I would recommend creating a new action that given an opengraph identifier will return the opengraph data (basically put the helper method into the controller) and only output the identifier into the main action’s view html. Then, in javascript, find all of those and execute an AJAX request to get the OpenGraph data and update the page’s HTML once you have the response. This will allow the browser to execute the http requests in parallel while also not blocking the render of the page. For bonus points you can cache the OpenGraph responses in memcache or something with a reasonable expiration time and save the latency of having to HTTP request from your app each time.