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}