JQuery AJAX Caching with PHP file

Question

I'm currently trying to speed up the ajax requests made. Basically the site works by live filtering. So when a user clicks on a form element, the data will load accordingly. This all works fantastically well but it's not as quick as I want it to be.

My AJAX looks a bit like this (i've obviously omitted the variables):

$.ajax({
        type: "GET",
        url: 'URL NAME',
        data: {
            'Var1': Var1,
            'Var2': Var2
        },
        cache:true, // Set cache to TRUE
        success: function(data) {
            $('.content').html(data);
        },
        complete: function () {
            $("#loading_ajax").hide();
            $('.content').fadeIn();
        }   
    }).error(function (event, jqXHR, ajaxSettings, thrownError) {
        $('.content').html("<h2>Could not retrieve data</h2>");
        //alert('[event.status:' + event.status + '], [event:' + event + '], [jqXHR:' + jqXHR + '], [ajaxSettings:' + ajaxSettings + '], [thrownError:' + thrownError + '])');
});

On the other side where the data is getting requested, the first lines in the PHP are this:

$seconds = 86400;

header("Cache-Control: private, max-age=$seconds");
header("Expires: ".gmdate('r', time()+$seconds));

I then went into Firebug to check for caching and it didn't seem to work at all. Firebug printed out the following:

The second screenshot there shows that the request had actually slowed down (I repeated it to see if the caching would improve it and it hasn't made a difference). Any ideas? Thanks.

Answer 1

Optimize your website loading time by compressing files into smaller size.

Add this to your .htaccess file

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript application/json