Greetings,
I really like Mark's note that this could be a good technique for RSS feeds, and have another use case that might help someone.
I arrived at this thread via search for a use case that's a little bit different (mobile-first responsive), but the header-setting tips in this thread helped me deal with my particular use case, so I thought I'd add-on here in the hope that it assists others who come across it in the future.
I'm working on a mobile-first responsive design site (pretty much all I do any more), but this particular client has some pretty bandwidth-challenged content (big 'accent' images, photo galleries that don't add value to the mobile user, etc.) that they want to use on the larger devices, but agreed to let them be kept off the mobile device output.
Use Case
To solve this I'm using a variant of what Filament Group labeled the Ajax-Include-Pattern (
https://github.com/filamentgroup/Ajax-Include-Pattern). It goes like this in my MODX use-case:
- Page template has an empty HTML element that will contain the bandwidth-expensive content for devices that should display it
- That HTML element has an HTML5 data attribute that specifies the URL that'll provide that content via Ajax load
- That Ajax-fetched content is a non-menu MODX HTML resource that has no template
- Front-end JS, when DOM's ready, checks a media query to see if running on a device that should display the content
- If on a device that shouldn't show that content, stops there; saving much time for mobile by not downloading extraneous stuff
- If on a device that will show the content, JS does an Ajax fetch to the url in the data attribute and places what it gets into the DOM
The Reason I Wanted to Cache
The above does a great job for performance for the mobile visitor, but the large device visitor has to go through the HTTP request(s)in #6 each time the visitor gets to a URL that calls that Ajax load (even on re-visits in the same browser session), and the resulting visible lag compared to if that content had been served directly from the template in #1 (and thus cached by the browser).
While the bandwidth-expensive content being loaded via that Ajax call in this case is dynamic, it is infrequently updated, so I can set an HTTP header expiration date to something like an hour or a day, and when the browser looks at that Ajax call the second and subsequent times, it doesn't bother to make the HTTP request, and the Ajax content comes out of browser cache.
So.. im my case, I put the HTTP future expires cache headers code in a snippet that is called by the Ajax-included page, keeping the browser from re-accessing it until it expires. Voila - large device browsers see performance benefits too.
Hope this helps someone else that comes across it.