-1

I'm running a shopify website and the big problem with this kind of websites is that when they load the static resources (images for example), they generate a query so the URL in the generated HTML will look like:

<img src="logo.jpg?123244334324">

For optimization reasons I need to remove everything after the "JPG" so the code will look like

<img src="logo.jpg">

As the title says, I'm trying to remove the queries from static resources from a loaded HTML document by using JavaScript or any other wide-supported method. Just the query used in order to refresh the static resources on every load, not # or anything else.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
FFF
  • 13
  • 7
  • 1
    What do you mean optimisation reasons? – James Monger Nov 30 '16 at 12:15
  • 2
    By the time your script runs those resources will already have been requested, so removing anything from the URL will not stop that. This can only be fixed on the server. – Reinstate Monica Cellio Nov 30 '16 at 12:21
  • what @Archer said is true, so if you want to load images after javascript execution, you must move your images to a folder, and then using javascript add that path to urls ( and remove unwanted part from url). also see http://stackoverflow.com/questions/5402680/jquery-javascript-html-how-to-load-images-after-everything-else-is-loaded – SalmanAA Nov 30 '16 at 12:24
  • @SalmanAA While that would work, if the OP can access server-side code then they should simply remove everything after the filename. The linked question is for something different and would be overkill in this instance. – Reinstate Monica Cellio Nov 30 '16 at 12:27
  • @Archer, OK, that's right. – SalmanAA Nov 30 '16 at 12:29
  • @JamesMonger It looks like the site is disabling caching of images by appending a timestamp onto the image url. This is pretty common but a terribly bad practise (great in the right circumstances, of course). – Reinstate Monica Cellio Nov 30 '16 at 12:31
  • I've created code to do the exact same thing strictly for optimization! This allows serving assets with an affectively unlimited cache time yet ensuring only one download per user per version while at the same time ensuring no user will ever see an outdated version of an asset. What I do is simply append 8 digits of an MD5 sum of the asset. – Abram Nov 30 '16 at 15:46

1 Answers1

1

Resources in Shopify come with cache keys like that for a reason. If the resource has not changed, it gets downloaded exactly once. Hence those extra codes. You cannot optimize this yourself, as you are not the expert at the delivery of assets, and Shopify, as a hosted platform takes responsibility for rendering assets.

So just forget those extra query params! Nothing you can do there.

David Lazar
  • 10,865
  • 3
  • 25
  • 38
  • Thank you for your answer. I found a solution on the internet but for some reason it does not work on all the images. Since I noticed that you are a developer for Shopify, maybe you can help me. Appending the following code to images should do the trick and it does for some images but not for all of them. Example: {{ 'logo.png' | asset_url | split:'?' | first }} – FFF Nov 30 '16 at 16:00