CE Image, Assets, S3 and Caching

Question

We’re using CE Image along with Assets images stored in S3. We’ve used curl to go through all the pages so that CE Image does its thing to the image and stores its “made” image in S3. The hopes is to cut down the load time when a user goes to that page., BUT we’re still seeing slowdown when a user visits a page with CE Image modified/stored S3 images. Other pages open up really fast.

It seems like CE Image isn’t using the already existing “made” image on S3, but instead is double-checking each image over again. Does that make sense? How can we speed up the load time of CE Image assets? Particularly with pages that have a lot of images.

Example of how we're using CE Cache to wrap CE Image/Assets tags:

{exp:ce_cache:it id="{g:alamo_market:url_title}-slider-on-sale" tags="schedules" global="yes"}
<div class="row">
  <div class="medium-12 columns">
    <div class="js-slider-6 Slider">
    {exp:channel:entries
      channel="schedules"
      disable="categories|member_data|pagination"
      dynamic="no"
      status="{global:status}"
      entry_id="{segment_3}"
    }
      {schedule_on_sale}
        {schedule_show}
        <div class="Card Card--overlay">
          {show_poster var_prefix="file"}
            <img src="{exp:ce_img:pair src="{file:url}" width="396" height="594" crop="yes" save_type="jpg" allow_scale_larger="yes" quality="81" hide_relative_path="yes"}{made}{/exp:ce_img:pair}" alt="">
          {/show_poster}
          <a class="Card-overlayContent" href="{site_url}show/{url_title}">
            <div class="Card-overlayText">
              <h5 class="Card-overlayHeading">{title}</h5>
            </div>
          </a>
          <div class="Card-overlayButton">
            <a class="button tiny expand u-noMarginBot" href="{site_url}show/{url_title}">Buy Tickets</a>
          </div>
        </div>
        {/schedule_show}
      {/schedule_on_sale}
    {/exp:channel:entries}
    </div>
  </div>
</div>
{/exp:ce_cache:it}

Answer 1

A good way to do this is to cache the output of the tag. You can use built-in EE tag caching or something like CE cache, either with fragment caching or full page static. This way you're getting the resized URL and CE Image doesn't keep hitting S3.

We've had extremely high traffic sites where we actually create a local redis key/value store to keep track of what's already been uploaded to S3 and modify CE Image to check that before doing anything, but that only becomes relevant on multiple front-end instance sites. Before that you're probably best off just with regular fragment or page caching.