0

I'm currently trying to optimise my website to perform better. My main page has plenty (4) of Vimeo videos embedded and I noticed that each of them requests the same css file and js file. I was wondering how one would go about preventing such requests. Even a site wide block on requests for already downloaded files would be viable, where they're redirected to their cache?

Vimeo embeds in an iframe like this:

<div class="codegena">
    <iframe src="https://player.vimeo.com/video/216855176?title=0&byline=0&portrait=0" width='1920' height='1080' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

player.css is loaded for every iframe instance. There's also some javascript that get loaded in, I've seen player.js and sentry.js I'm not sure how these are loaded in; on pingdom it seams as though player.js gets requested for every iframe instance, but on inspection in chrome I can only see it listed once in resources. I only see sentry.js requested the once in both on inspection in chrome and pingdom, but the ability to defer this script might be beneficial.

pingdom results of multiple requests of the same files

Chrome Results

Any ideas are much appreciated.

dillonbrannick
  • 322
  • 1
  • 5
  • 16
  • @juvian I don't think I have, but why would it be taking time to pull the exact same file from the exact same location on pingdom, would it not just skip that request. And the js could that not just be implemented after all the videos on the page have loaded instead of for each one as well as the just making one request? Or do the likes of pingdom not cache when they're testing sites? Edit: the comment was deleted, but it was in relation to the fact that browsers should cache automatically unless turned off by the user – dillonbrannick Mar 11 '19 at 18:01
  • 1
    You could try if iframe requests go over your site service worker. – juvian Mar 11 '19 at 18:14
  • @juvian I've never heard of service workers till you just said there, I had a quick look. I'm not sure if they're a bit out of my depth. Would such a thing cache on the fly? or would it only be for returning visits? Also is it possible that vimeo's embedding forces those redownloads to keep everything up to date. I don't mind the scripts downloading the once every visit. – dillonbrannick Mar 11 '19 at 18:34
  • 1
    service workers allow you to set the caching policy for any request made on your page. I´m just not sure if it still applies to requests made by an iframe. Anyway, I deleted my first comment because I tried an example and it wasn´t caching the player.css file as you said, but just noticed it was because I had disabled cache in developer tools. So yes, browser is already caching that css file and also the js files. There should be no need for you to do anything. Maybe add a picture of your requests if they are not being cached – juvian Mar 11 '19 at 18:44
  • @juvian oh okay, I've added the pingdom results to the question, when I was looking I found a few things regarding iframes and service workers, but honestly I couldn't fully grasp if they were saying it's possible and beneficial or not – dillonbrannick Mar 11 '19 at 18:56
  • 1
    You should test with your own browser instead of pingdom, I don´t know how they work. – juvian Mar 11 '19 at 18:58
  • @juvian was just thinking, it's added now – dillonbrannick Mar 11 '19 at 19:01
  • 1
    So yes, it is retrieving them from disk cache. No need to optimize anything – juvian Mar 11 '19 at 19:02
  • @juvian But it's still requesting the the same things multiple times, is that not like each element requesting the stylesheet, regardless of caching it still takes time. Look at player.js on that last one, it takes nearly half a second to get but on a previous request it was faster. I know an iframe is like an actual whole web page, but I was wondering would it not be possible to just put player.css and player.js in the head of my page and then force the iframe to take from my head not their own. Or would that even make the page load faster? – dillonbrannick Mar 11 '19 at 19:12
  • 1
    I don´t know the details of why it took half a second, maybe if you click it it says. You don´t really have almost any control from an iframe unless your site is from the same domain (you are the owner of iframe site). If you could, there would be security issues. Don´t think you can do anything without service worker, and not even sure that would work – juvian Mar 11 '19 at 19:26
  • 1
    If you are pro member, I think you can [avoid iframes](https://stackoverflow.com/questions/35055233/vimeo-video-player-in-html5) – juvian Mar 11 '19 at 19:30
  • @juvian Yeah I think you're right about being a pro member. And fair enough about the iframes, I guess I'll just leave it. The details are just that's how long "The browser is receiving the response" it's under "content download". Anyway thanks for everything! – dillonbrannick Mar 11 '19 at 20:45

0 Answers0