Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add cache control header to IA CDN endpoint #8944

Merged
merged 3 commits into from
Mar 27, 2024

Conversation

QuantuM410
Copy link
Contributor

Closes #8927

This PR adds a cache header to IA CDN requests and provides a defer script tag to the respective scripts

Technical

Testing

  • On your browser's network, check for the Request Header to the analytics.js & donate.js to check for Cache-Control header
  • Check the duration of the request and response to be relatively less as the defer tag runs the requests in the background instead and loads them once DOM content loaded

Screenshot

image

Stakeholders

@RayBB

@RayBB
Copy link
Collaborator

RayBB commented Mar 22, 2024

Can you please explain why you chose defer vs async for each of the scripts? We should investigate which is best. @QuantuM410

@QuantuM410
Copy link
Contributor Author

QuantuM410 commented Mar 22, 2024

@RayBB From what I understood using async and defer does the same job just async doesnt have an order of execution as well as it executes stuff in the background and then doesnt wait while defer wait for the loading of DOM. Async would have been fine if both the files work independently I think and I was not really sure if thats the case hence I used defer. Moreover I think from what I think analytics.js posts the site's analytics data and is independent while donate.js seems to be dependent (as I am assuming it displays a donation banner?). If those are external scripts and dont interfere with the DOM I think we can use async.

@RayBB
Copy link
Collaborator

RayBB commented Mar 22, 2024

@QuantuM410 that makes sense, good explanation.

Can you do a comparison of the page load time on regular internet and "slow 3g" (or similar in your dev tools) of the before and after? So screenshots of dev tools loading times of:

  • Slow 3g before
  • slow 3g after change
  • regular internet before
  • regular internet after

For each request we should already have the loaded the page once before so the scripts are cached. You might need to clear your cache between each screenshot so it's not accidentally left in cache for the "before" tests.

Thanks!

@@ -38,7 +38,7 @@
</script>

<!-- Must be loaded after jquery -->
<script src="/cdn/archive.org/analytics.js" type="text/javascript"></script>
<script src="/cdn/archive.org/analytics.js" type="text/javascript" defer></script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we can make this one defer ; if you'll notice below we have a raw <script> tag which makes use of window.archive_analytics (which is exposed by this script). If we make this defer, I think this script will run after the script below.

@QuantuM410
Copy link
Contributor Author

@QuantuM410 that makes sense, good explanation.

Can you do a comparison of the page load time on regular internet and "slow 3g" (or similar in your dev tools) of the before and after? So screenshots of dev tools loading times of:

  • Slow 3g before
  • slow 3g after change
  • regular internet before
  • regular internet after

For each request we should already have the loaded the page once before so the scripts are cached. You might need to clear your cache between each screenshot so it's not accidentally left in cache for the "before" tests.

Thanks!

Hey @RayBB ! I did a page load time comparison and I feel adding defer didn't do much and also @cdrini quotes about removing defer from the analytics script as its being further used in a script, moreover I felt this needed a bit more discussion hence I have removed the tags as for now as I am a bit confused :)

Here are the results

No throttling (before)
Screenshot from 2024-03-22 23-48-01

No throttling (after)
Screenshot from 2024-03-22 23-40-54

slow-3g (before)
Screenshot from 2024-03-22 23-47-38

slow-3g (after)
Screenshot from 2024-03-22 23-41-48

PS: I tested it after removing defer from analytics.js script. I didn't really find any significant change after observing it

@RayBB
Copy link
Collaborator

RayBB commented Mar 23, 2024

@QuantuM410 @cdrini I did some testing of my own and here are the results:

No Throttle Fast 3G Slow 3G
Caching 0.47 1.07 2.60
No Caching 0.51 1.71 4.76

Overall, we are seeing a very nice improvement in speed when on slow connections :)

@QuantuM410 I think your results are different because the cache is disabled in the devtools.

@cdrini how long do you think the cache time should be? I think one day is very safe but I'm really not sure how likely those libraries are to change.

@QuantuM410 I'll guess that we should only cache for one day in case those libraries do change. So maybe make that change and if Drini agrees he'll merge it and if not he'll ask for a different duration.

@RayBB RayBB requested review from RayBB and removed request for RayBB March 23, 2024 01:50
@RayBB RayBB added the Needs: Review This issue/PR needs to be reviewed in order to be closed or merged (see comments). [managed] label Mar 23, 2024
@QuantuM410
Copy link
Contributor Author

@QuantuM410 @cdrini I did some testing of my own and here are the results:

No Throttle Fast 3G Slow 3G
Caching 0.47 1.07 2.60
No Caching 0.51 1.71 4.76
Overall, we are seeing a very nice improvement in speed when on slow connections :)

@QuantuM410 I think your results are different because the cache is disabled in the devtools.

@cdrini how long do you think the cache time should be? I think one day is very safe but I'm really not sure how likely those libraries are to change.

@QuantuM410 I'll guess that we should only cache for one day in case those libraries do change. So maybe make that change and if Drini agrees he'll merge it and if not he'll ask for a different duration.

Ah I though I needed to test the page load storing no cache for each cdn request to test the feasibility of defer tag :). Great then @RayBB I have updated the cache age to 1 day

@cdrini cdrini merged commit 9eb1483 into internetarchive:master Mar 27, 2024
3 checks passed
@cdrini cdrini changed the title Added: Cache control header & defer taf to IA CDN requests & their script Add cache control header to IA CDN endpoint Mar 27, 2024
Achorn pushed a commit to Achorn/openlibrary that referenced this pull request Apr 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Review This issue/PR needs to be reviewed in order to be closed or merged (see comments). [managed]
Projects
None yet
Development

Successfully merging this pull request may close these issues.

No Cache-Control headers on IA CDN requests
3 participants