<p>Your syntax is a bit off.</p>

<p>The <code>withTransforms</code> parameter is an <em>Asset criteria</em>, meaning it is only relevant when you're pulling Assets. Appending it to <code>entry.relatedArticles</code> (an Entries field, returning an ElementCriteriaModel) like you're currently attempting does nothing, but this does:</p>

<pre><code>{% set assets = entry.someAssetsField.find({
    withTransforms: ['someTransform', 'someOtherTransform']
}) %}
</code></pre>

<p>This means your current code should probably be refactored to look something like this (simplified):</p>

<pre><code>{% for article in entry.relatedArticles %}
    ...
    {% set bannerImage = article.bannerImage.find({
        withTransforms: ['cardImage']
    })[0] ?? null %}
    {% if bannerImage %}
        &lt;img src="{{ bannerImage.getUrl('cardImage') }}" /&gt;
    {% endif %}
    ...
{% endfor %}
</code></pre>

<p>Assuming there's not a <em>ton</em> of <code>relatedArticles</code> entries, and considering the fact that there's only one image per entry, the above might not make a huge impact on your performance. To take things a step further, you might consider eager loading the actual Asset field(s) as well as their transforms. There's a couple of ways to do this – you could use the same approach as above, adding the eager loading criteria to the Entries field <code>relatedArticles</code>:</p>

<pre><code>{% set relatedArticles = entry.relatedArticles.find({
  with: [
      ['bannerImage', {
          withTransforms: ['cardImage']
      }]
  ]
}) %}
{% for article in relatedArticles %}
    ...
    {% set bannerImage = article.bannerImage[0] ?? null %}
    {% if bannerImage %}
        &lt;img src="{{ bannerImage.getUrl('cardImage') }}" /&gt;
    {% endif %}
{% endfor %}
</code></pre>

<p>...or you could use a more "traditional" eager loading approach, using <code>craft.entries</code> and <a href="https://craftcms.com/docs/relations#the-relatedTo-param" rel="nofollow noreferrer">the <code>relatedTo</code> parameter</a>:</p>

<pre><code>{% for article in craft.entries({
    relatedTo: {
      sourceElement: entry,
      field: 'relatedArticles'
    },
    with: [
        ['bannerImage', {
            withTransforms: ['cardImage']
        }]
    ]
}) %}
    ...
    {% set bannerImage = article.bannerImage[0] ?? null %}
    {% if bannerImage %}
        &lt;img src="{{ bannerImage.getUrl('cardImage') }}" /&gt;
    {% endif %}
    ...
{% endfor %}
</code></pre>

<p>With the above, assuming there's a fair amount of entries involved you'll probably see a decrease in the number of queries executed.</p>

<p>If you want to learn more about eager loading, I recommend taking a look at <a href="https://craftcms.com/docs/templating/eager-loading-elements" rel="nofollow noreferrer">the official docs on the subject</a>.</p>

CC BY-SA 3.0
2016-11-09T15:48:41.110Z
Thanks for this Mats. Is there a general guide as to when you should really use Eager loading? I am not seeing much improvement. Perhaps my implementation isn't 100%. I currently have 77 queries for the whole page. This includes a matrix block, 4 related product, 3 related articles (cards), and three related articles (titles and dates).
Terry Upton
CC BY-SA 3.0
2016-11-09T19:19:18.317Z
The general rule is "whenever you need to avoid the [N+1 query problem](https://laracasts.com/discuss/channels/general-discussion/what-is-the-meaning-of-the-n-1-problem)". 77 queries isn't actually a huge number and eager loading isn't a silver bullet, but it can be very effective. Without seeing your complete template its impossible to say if eager loading will make a big difference in your particular case, but if the number of queries doesn't go down at all its likely that your implementation is still off.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-11-09T19:21:46.150Z
For more info, see [the official docs](https://craftcms.com/docs/templating/eager-loading-elements) or [Straight Up Craft](https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php). There's probably more resources out there, and you could also tune into [the official Slack channel](https://craftcms.com/community?utm_campaign=Craft%2BLink%2BList&amp;utm_medium=web&amp;utm_source=Craft_Link_List_5) to discuss the subject further and/or get more help.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-11-09T22:18:21.867Z
Thanks. I will have another look through my code as to why this wasn't working correctly. I tried on Slack but didn't get much input. The first suggestion in your answer I was getting errors, the second more comprehensive approach, worked (no errors) but I can't recall how effective it was. I am only calling three related cards. So might not impact really.
I will take another look. Thanks.
Terry Upton
CC BY-SA 3.0
2016-11-09T22:50:25.803Z
Let's say you have a template with 4 separate queries (e.g. `craft.entries` or `craft.categories` etc), where each query returns only a small number of elements (e.g. 5 entries, 3 categories) with relational data; you're not going to see a huge improvement with eager loading. Eager loading is really only very effective when a single query results in large number of additional queries (e.g. a query that returns a set of 100 entries, each with 3 different relational fields – that would amount to _301 queries_ in total using lazy loading, but could be reduced to 1 query with eager loading).
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-11-09T22:53:23.433Z
Also, the first example in my answer was basically lifted straight from the [docs](https://craftcms.com/docs/templating/eager-loading-elements#eager-loading-image-transform-indexes) – what was the error?
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-11-10T15:27:00.590Z
The error is Craft\EntryModel and its behaviors do not have a method or closure named "bannerImage".
Terry Upton
CC BY-SA 3.0
2016-11-10T16:20:50.677Z
Let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/48283/discussion-between-terry-upton-and-mats-mikkel-rummelhoff).
Terry Upton
CC BY-SA 3.0
2016-11-10T20:05:11.410Z
Regarding the error, there was a typo in the docs where I lifted the example from. Updated my answer.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-11-08T21:58:14.767Z
2016-11-10T20:12:59.793Z
2016-11-10T20:12:59.793Z
Mats Mikkel Rummelhoff
<blockquote>
  <p>Thanks for this Mats. Is there a general guide as to when you should really use Eager loading? I am not seeing much improvement</p>
</blockquote>

<p>The article <a href="https://nystudio107.com/blog/speed-up-your-craft-cms-templates-with-eager-loading" rel="nofollow noreferrer">Speed up your Craft CMS Templates with Eager Loading</a> I wrote hopefully gives you the "general guide" you asked for.</p>

CC BY-SA 3.0
2017-10-02T04:39:03.667Z
2017-10-02T04:39:03.667Z
andrew.welch
<p>I am trying to get to grips with Eager Loading. I have the following code:</p>

<pre><code>{% for article in entry.relatedArticles %}
&lt;div class="c-card // l-card--third"&gt;
    &lt;a href="{{ article.url }}"&gt;
        &lt;img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img"&gt;
        &lt;div class="c-card__bar // js_fitcontent"&gt;
            {% set array = article.title|split(' ', 2) %}
            &lt;p class="c-card__title"&gt;&lt;strong&gt;{{ attribute(array, 0) }}&lt;/strong&gt; {{ attribute(array, 1) }}&lt;/p&gt;
            &lt;p class="c-card__msg // js-fittext"&gt;Posted on {{ helpers.date_formatted(entry.postDate) }}&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="c-card__over"&gt;
            &lt;div class="c-card__over-content"&gt;
                &lt;div class="animate"&gt;
                    &lt;p class="c-card__title"&gt;&lt;strong&gt;Related&lt;/strong&gt; Article&lt;/p&gt;
                    &lt;p class="c-card__msg  // half-margin-bottom"&gt;
                        &lt;strong&gt;{{ article.title }}&lt;/strong&gt;&lt;br /&gt;
                        &lt;time datetime="{{ entry.postDate|date('Y-m-d H:i:s') }}" class="date"&gt;
                            &lt;svg role="img" class="icon // icon-date" title="Date Icon"&gt;
                                &lt;use xlink:href="/assets/img/icons.svg#icon-date"&gt;&lt;/use&gt;
                            &lt;/svg&gt;{{ helpers.date_formatted(entry.postDate) }}
                        &lt;/time&gt;
                    &lt;/p&gt;
                    &lt;p class="btn // btn--sub"&gt;Read Article&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/a&gt;
&lt;/div&gt;
{% endfor %}
</code></pre>

<p>Looking on the console this combined with the other page requests totals 76 requests. I thought I perhaps should add some eager loading 9at least tot he image transform) So I tried the following:</p>

<pre><code>{% for article in entry.relatedArticles.withTransforms('cardImage') %}
&lt;div class="c-card // l-card--third"&gt;
    &lt;a href="{{ article.url }}"&gt;
        &lt;img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img"&gt;
        &lt;div class="c-card__bar // js_fitcontent"&gt;
            {% set array = article.title|split(' ', 2) %}
            &lt;p class="c-card__title"&gt;&lt;strong&gt;{{ attribute(array, 0) }}&lt;/strong&gt; {{ attribute(array, 1) }}&lt;/p&gt;
            &lt;p class="c-card__msg // js-fittext"&gt;Posted on {{ helpers.date_formatted(entry.postDate) }}&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="c-card__over"&gt;
            &lt;div class="c-card__over-content"&gt;
                &lt;div class="animate"&gt;
                    &lt;p class="c-card__title"&gt;&lt;strong&gt;Related&lt;/strong&gt; Article&lt;/p&gt;
                    &lt;p class="c-card__msg  // half-margin-bottom"&gt;
                        &lt;strong&gt;{{ article.title }}&lt;/strong&gt;&lt;br /&gt;
                        &lt;time datetime="{{ entry.postDate|date('Y-m-d H:i:s') }}" class="date"&gt;
                            &lt;svg role="img" class="icon // icon-date" title="Date Icon"&gt;
                                &lt;use xlink:href="/assets/img/icons.svg#icon-date"&gt;&lt;/use&gt;
                            &lt;/svg&gt;{{ helpers.date_formatted(entry.postDate) }}
                        &lt;/time&gt;
                    &lt;/p&gt;
                    &lt;p class="btn // btn--sub"&gt;Read Article&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/a&gt;
&lt;/div&gt;
{% endfor %}
</code></pre>

<p>However, this also still results in 76 requests. </p>

<p>So my question is this; Have I misunderstood when I need to use Eager Loading? or is my code incorrect and thus eager loading isn't actually taking place?</p>

<p>Thanks.</p>

<performance><eager-loading>
Understanding Eager Loading
# Understanding Eager Loading

(Asked by: username_0 on 2016-11-08)

I am trying to get to grips with Eager Loading. I have the following code:
{% for article in entry.relatedArticles %}

    
        
        
            {% set array = article.title|split(' ', 2) %}
            {{ attribute(array, 0) }} {{ attribute(array, 1) }}
            Posted on {{ helpers.date_formatted(entry.postDate) }}
        

        
            
                
                    Related Article
                    
                        {{ article.title }}
                        
                            
                                
                            {{ helpers.date_formatted(entry.postDate) }}
                        
                    
                    Read Article
                
            
        
    

{% endfor %}

Looking on the console this combined with the other page requests totals 76 requests. I thought I perhaps should add some eager loading 9at least tot he image transform) So I tried the following:
{% for article in entry.relatedArticles.withTransforms('cardImage') %}

    
        
        
            {% set array = article.title|split(' ', 2) %}
            {{ attribute(array, 0) }} {{ attribute(array, 1) }}
            Posted on {{ helpers.date_formatted(entry.postDate) }}
        

        
            
                
                    Related Article
                    
                        {{ article.title }}
                        
                            
                                
                            {{ helpers.date_formatted(entry.postDate) }}
                        
                    
                    Read Article
                
            
        
    

{% endfor %}

However, this also still results in 76 requests. 
So my question is this; Have I misunderstood when I need to use Eager Loading? or is my code incorrect and thus eager loading isn't actually taking place?
Thanks.

**Tags:** performance, eager-loading


---

## 2 answers

### Answer by username_1 on 2016-11-08. Score: 4

Your syntax is a bit off.
The withTransforms parameter is an Asset criteria, meaning it is only relevant when you're pulling Assets. Appending it to entry.relatedArticles (an Entries field, returning an ElementCriteriaModel) like you're currently attempting does nothing, but this does:
{% set assets = entry.someAssetsField.find({
    withTransforms: ['someTransform', 'someOtherTransform']
}) %}

This means your current code should probably be refactored to look something like this (simplified):
{% for article in entry.relatedArticles %}
    ...
    {% set bannerImage = article.bannerImage.find({
        withTransforms: ['cardImage']
    })[0] ?? null %}
    {% if bannerImage %}
        
    {% endif %}
    ...
{% endfor %}

Assuming there's not a ton of relatedArticles entries, and considering the fact that there's only one image per entry, the above might not make a huge impact on your performance. To take things a step further, you might consider eager loading the actual Asset field(s) as well as their transforms. There's a couple of ways to do this – you could use the same approach as above, adding the eager loading criteria to the Entries field relatedArticles:
{% set relatedArticles = entry.relatedArticles.find({
  with: [
      ['bannerImage', {
          withTransforms: ['cardImage']
      }]
  ]
}) %}
{% for article in relatedArticles %}
    ...
    {% set bannerImage = article.bannerImage[0] ?? null %}
    {% if bannerImage %}
        
    {% endif %}
{% endfor %}

...or you could use a more "traditional" eager loading approach, using craft.entries and the relatedTo parameter:
{% for article in craft.entries({
    relatedTo: {
      sourceElement: entry,
      field: 'relatedArticles'
    },
    with: [
        ['bannerImage', {
            withTransforms: ['cardImage']
        }]
    ]
}) %}
    ...
    {% set bannerImage = article.bannerImage[0] ?? null %}
    {% if bannerImage %}
        
    {% endif %}
    ...
{% endfor %}

With the above, assuming there's a fair amount of entries involved you'll probably see a decrease in the number of queries executed.
If you want to learn more about eager loading, I recommend taking a look at the official docs on the subject.

> **Comments:**
> **username_0**: Thanks for this Mats. Is there a general guide as to when you should really use Eager loading? I am not seeing much improvement. Perhaps my implementation isn't 100%. I currently have 77 queries for the whole page. This includes a matrix block, 4 related product, 3 related articles (cards), and three related articles (titles and dates).  
> **username_1**: The general rule is "whenever you need to avoid the [N+1 query problem](https://laracasts.com/discuss/channels/general-discussion/what-is-the-meaning-of-the-n-1-problem)". 77 queries isn't actually a huge number and eager loading isn't a silver bullet, but it can be very effective. Without seeing your complete template its impossible to say if eager loading will make a big difference in your particular case, but if the number of queries doesn't go down at all its likely that your implementation is still off.  
> **username_1**: For more info, see [the official docs](https://craftcms.com/docs/templating/eager-loading-elements) or [Straight Up Craft](https://straightupcraft.com/articles/examples-of-eager-loading-elements-in-twig-and-php). There's probably more resources out there, and you could also tune into [the official Slack channel](https://craftcms.com/community?utm_campaign=Craft%2BLink%2BList&amp;utm_medium=web&amp;utm_source=Craft_Link_List_5) to discuss the subject further and/or get more help.  
> **username_0**: Thanks. I will have another look through my code as to why this wasn't working correctly. I tried on Slack but didn't get much input. The first suggestion in your answer I was getting errors, the second more comprehensive approach, worked (no errors) but I can't recall how effective it was. I am only calling three related cards. So might not impact really. I will take another look. Thanks.  
> **username_1**: Let's say you have a template with 4 separate queries (e.g. `craft.entries` or `craft.categories` etc), where each query returns only a small number of elements (e.g. 5 entries, 3 categories) with relational data; you're not going to see a huge improvement with eager loading. Eager loading is really only very effective when a single query results in large number of additional queries (e.g. a query that returns a set of 100 entries, each with 3 different relational fields – that would amount to _301 queries_ in total using lazy loading, but could be reduced to 1 query with eager loading).  
> **username_1**: Also, the first example in my answer was basically lifted straight from the [docs](https://craftcms.com/docs/templating/eager-loading-elements#eager-loading-image-transform-indexes) – what was the error?  
> **username_0**: The error is Craft\EntryModel and its behaviors do not have a method or closure named "bannerImage".  
> **username_0**: Let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/48283/discussion-between-terry-upton-and-mats-mikkel-rummelhoff).  
> **username_1**: Regarding the error, there was a typo in the docs where I lifted the example from. Updated my answer.  

---

### Answer by username_2 on 2017-10-02. Score: 3

> Thanks for this Mats. Is there a general guide as to when you should really use Eager loading? I am not seeing much improvement

The article [Speed up your Craft CMS Templates with Eager Loading](https://nystudio107.com/blog/speed-up-your-craft-cms-templates-with-eager-loading) I wrote hopefully gives you the "general guide" you asked for.


---

