HTTP Caching URLs with Query String

Question

I am currently storing svg code in arrays in a php file that, in short, I am then referencing to throughout the site to retrieve the desired image.

The file looks something like this:

<?php
$svg_ticons = array(...);
$svg_icons = array(...);
$svg_inputs = array(
    'checkbox_0' => '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"><symbol id="Checkbox_Blank" viewBox="-7.5 -7.5 15 15"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M-4.81 6.97h9.63c1.19 0 2.16-0.97 2.16-2.16v-9.63c0-1.19-0.97-2.16-2.16-2.16H-4.81c-1.19 0-2.16 0.97-2.16 2.16v9.63C-6.98 6-6 6.97-4.81 6.97L-4.81 6.97z"/><path fill="#333333" d="M4.82-7.5h-9.63c-1.48 0-2.68 1.21-2.68 2.69v9.63c0 1.48 1.2 2.69 2.68 2.69h9.63c1.48 0 2.68-1.21 2.68-2.69V-4.81C7.5-6.29 6.3-7.5 4.82-7.5zM-4.82 6.45c-0.9 0-1.64-0.73-1.64-1.64V-4.81c0-0.9 0.74-1.64 1.64-1.64h9.63c0.9 0 1.64 0.73 1.64 1.64v9.63c0 0.9-0.74 1.64-1.64 1.64H-4.82z"/></symbol><use xlink:href="#Checkbox_Blank" width="15" height="15" x="-7.5" y="-7.5" transform="matrix(4 0 0 -4 29.9997253 29.9989338)" overflow="visible"/></svg>'
);

$svgall = $svg_ticons+$svg_icons+$svg_inputs;
if(array_pop((explode("/", $_SERVER['SCRIPT_FILENAME']))) == array_pop((explode("/", __FILE__)))){
    if($reqsvg = $_GET["r"]?:false){header("Content-type: image/svg+xml"); echo $svgall[$reqsvg]; exit();}
}
?>

So the when I call to these images, let us say, as a background-image, it looks something like this:

background-image:url(DOMAIN/images/svg.php?r=checkbox_0);

Unfortunately, these 'images' are not being cached, which is causing a very undesirable delay time upon page load. So my question is: How can I cache from urls with query string? (.htaccess solution is prefered.)

Side Note: I am aware of this post. However, the answer marked is not my solution.

Edit: I am not simply asking how to enable caching. I am already aware of how to do that. Parts of my site are caching beautifully. I am looking to specifically cache from urls with a query string.

You will probably need to make sure the header is being sent and then maybe use ExpiresByType from mod_expire. httpd.apache.org/docs/current/mod/mod_expires.html — Panama Jack
– Panama Jack, Commented Jun 25, 2015 at 20:49
Setting cache-control headers in PHP. A decent explanation of the Cache-Control values. — Sammitch
– Sammitch, Commented Jun 25, 2015 at 20:57
Have you tried this from a variety of browsers (or devices)? It's possible that the settings for the particular browser with which you are testing has some environment setting that's causing the resources to be aggressively re-downloaded. — Jerbot
– Jerbot, Commented Jun 25, 2015 at 21:44
@PanamaJack What would you suggest I set the ExpiresByType to? As far as I know there is not a file type for a Query String. — Crystal Miller
– Crystal Miller, Commented Jun 25, 2015 at 22:01
An .htaccess solution may not work or may be more complicated, since it looks like you're serving the svg using php. If you put the following at the top of your svg.php file, what happens? header('Expires: ' . gmdate('D, d M Y H:i:s', strtotime('+1 hours')) . ' GMT'); — Jerbot
– Jerbot, Commented Jun 25, 2015 at 22:13

php_nub_qq · Accepted Answer · 2015-06-25 23:18:31Z

2

What you want to do, if I understand correctly, is not possible without some awful hacks I can't even think of and would advise against anyway.

The way caching works is, I believe, in a key - value storage system, where the key is the URI + the query string. So the browser will save your image with a certain key, when there is an image requested with the same key the browser will use the cached version if it matches expiration criteria or will send a request to see if the file has been modified.

In your case it seems like the r=checkbox_0 part of the query string is dynamic, meaning it changes it's value every time you refresh the page. You cannot cache this for the reason I mentioned above. If you're getting a different query string each time, the browser will eventually end up caching a separate image every time.

IMO the best you can do is to use a static value for the r parameter, if that is possible.

Additionally, if you could cache images regardless of the query string then how would cache busting work :P

EDIT:

Here's the caching function, it takes in the time you want the cache to be active before expiring in seconds.

function cache($sec) {
    if ($sec > 0) {
        header('Cache-Control: must-revalidate, max-age=' . (int)$sec);
        header('Pragma: cache');
        header('Expires: ' . str_replace('+0000', 'GMT', gmdate('r', time() + $sec)));
    } else {
        header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
        header('Pragma: no-cache'); // HTTP 1.0.
        header('Expires: 0'); // Proxies.
    }
}

edited Jun 25, 2015 at 23:18

answered Jun 25, 2015 at 22:25

php_nub_qq

16.1k25 gold badges84 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Crystal Miller Over a year ago

While query string are typically used for dynamicy, I am using so I can put all my SVGs in one file. All of these images have specific names, so no, they are not dynamic, but "r" can equal many different values.

php_nub_qq Over a year ago

@CrystalMiller if you try to access an image at the exact same URL twice it will be retrieved from the cache the second time. If not it means that there's a problem with your caching headers or something

Crystal Miller Over a year ago

One would think..... but everything else caches perfectly. It's just that this file has not been set up for caching, I suspect because it has no definitive filetype extension.

php_nub_qq Over a year ago

@CrystalMiller I can bet. You can cache whatever you want, if you have a URL like http://example.com/news/page/*, for some reason, then ultimately the file is * which is an invalid file name, however the browser will still cache it with proper headers

Crystal Miller Over a year ago

I believe that is actually what I wanted to know. However, I do not believe I did exactly what you were saying properly as it caused my entire site to go down. This is what I entered in my .htaccess file: "ExpiresByType /images/svg.phpr=*" Could you inform me of what I did incorrectly?

|

Community · Accepted Answer · 2017-05-23 12:22:22Z

It was recommended that I put headers in my php file (php_nub_qq recommended a function & SuperJer recommended header('Expires: ' . gmdate('D, d M Y H:i:s', strtotime('+1 hours')) . ' GMT');).

I was fairly certain that putting headers in this file was doing nothing for me & SuperJer's code was breaking my images, though after messing with it the next morning with a fresh mind I finally figured out why.

This is the code I entered:

header("Expires: ".gmdate("%D, %d %M %Y %H:%i:%s", strtotime("+30 days"))."GMT");

However, I forgot in order to call strtotime in my site, I must first set date_default_timezone_set();

So the end result was:

date_default_timezone_set("America/Los_Angeles");
header("Expires: ".gmdate("%D, %d %M %Y %H:%i:%s", strtotime("+30 days"))."GMT");

However, upon further examination of Chrome's Network Developer Tool, I realized that SuperJer's initial suspicion of it being my browser setting was correct. My file had been caching all along, I'd just had "Disable Cache" checked in my developer tools. (Guess I was a bit more exhausted than I thought, because I could have sworn I checked that.)

Summary: If your query string is not dynamic & other things (such as images) cache on your site; close your eyes, take a nice long relaxing breath, & check all of your browser setting & do not forget your Dev Tool settings.

Collectives™ on Stack Overflow

HTTP Caching URLs with Query String

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related