9

I'm using PictureFill on a large page, containing many image transforms, that doesn't seem to be caching despite most of the page being wrapped in {% cache %} tags. When I view the page after several refreshes with Dev Mode enabled, the Profiling Summary Report is reporting Total Queries at 174, and the HTML source still contains many examples of image urls that contain something like /cpresources/transforms/XX.

I read in this answer that Craft won't cache a page with unresolved transforms, which might explain why this page isn't being cached. But then the question is, why aren't these transforms resolving?

Improve this question
8
  • Are you getting any JS errors in your browser's console? If the transforms are throwing an error, it'll be logged in craft/storage/runtime/logs. With that many transforms running at once, it's highly possible PHP is running out of memory and/or time.
    – Brad Bell ♦
    Commented Jul 28, 2014 at 22:58
  • Thanks, Brad. No javascript errors in the console, and my craft/storage/runtime/logs aren't reporting anything. Can you tell me where I could check to determine whether PHP is running out of memory/time?
    – cmal
    Commented Jul 29, 2014 at 0:30
  • If it's a PHP error, that would get logged in the same folder in a file called phperrors.log. If it's an Apache error, that's wherever your error log files are setup for. Probably worth checking the network tab in your browser and seeing what the response is for the transform AJAX request, too.
    – Brad Bell ♦
    Commented Jul 29, 2014 at 0:40
  • No PHP errors, and no Apache Errors. Can you elaborate on the AJAX request? All of the image responses seem to return okay, but when the page loads the next time they all need to be made again. The viewed page source always contains a large number /cpresources/transforms/` urls.
    – cmal
    Commented Jul 29, 2014 at 1:02
  • I'm not sure it matters, but one thing that is unique about this situation is that most of the images on the page are not being loaded with the page, they are stored in a data-src attribute and PictureFill loads them asynchronously after the initial page load. Here's a snippet for reference: gist.github.com/cmalven/202027816afb2604e302
    – cmal
    Commented Jul 29, 2014 at 1:07

1 Answer 1

Reset to default
12

Seems to be the case that Craft won't attempt to resolve these /cpresources/transforms/ URLs until the asset is actually requested, which can mess with a setup like PictureFill where there is no guarantee that the transformed assets will ever be loaded.

Solution in my case was to to set 'generateTransformsBeforePageLoad' => true, in your Craft config array as mentioned here

After doing this, all transform URLs resolve and the page is properly cached.

Improve this answer
2
  • Thanks for solving this, cmal! This is really helpful as I also want to set up PictureFill on a Craft install this week.
    – carlcs
    Commented Jul 29, 2014 at 10:09
  • 2
    Wow - I can confirm that if you're using Picturefill and image transforms, this makes a huge difference with regard to caching performance. Just dropped my page load from 150 queries down to 17.
    – Patrick Harrington
    Commented Jul 29, 2014 at 20:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.