Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-09T15:48:41.110Z
Answers.Text: 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).
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-09T19:19:18.317Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-09T19:21:46.150Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-09T22:18:21.867Z
Answers.Text: 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.
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-09T22:50:25.803Z
Answers.Text: 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).
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-09T22:53:23.433Z
Answers.Text: 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?
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-10T15:27:00.590Z
Answers.Text: The error is Craft\EntryModel and its behaviors do not have a method or closure named "bannerImage".
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-10T16:20:50.677Z
Answers.Text: Let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/48283/discussion-between-terry-upton-and-mats-mikkel-rummelhoff).
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-10T20:05:11.410Z
Answers.Text: Regarding the error, there was a typo in the docs where I lifted the example from. Updated my answer.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-08T21:58:14.767Z
Answers.LastActivityDate: 2016-11-10T20:12:59.793Z
Answers.LastEditDate: 2016-11-10T20:12:59.793Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-02T04:39:03.667Z
Answers.LastActivityDate: 2017-10-02T04:39:03.667Z
Answers.UserDisplayName: andrew.welch
Body: <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>
  
Tags: <performance><eager-loading>
Title: Understanding Eager Loading
ThreadText: # 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 %}
  <div class="c-card // l-card--third">
      <a href="{{ article.url }}">
          <img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img">
          <div class="c-card__bar // js_fitcontent">
              {% set array = article.title|split(' ', 2) %}
              <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
              <p class="c-card__msg // js-fittext">Posted on {{ helpers.date_formatted(entry.postDate) }}</p>
          </div>
  
          <div class="c-card__over">
              <div class="c-card__over-content">
                  <div class="animate">
                      <p class="c-card__title"><strong>Related</strong> Article</p>
                      <p class="c-card__msg  // half-margin-bottom">
                          <strong>{{ article.title }}</strong><br />
                          <time datetime="{{ entry.postDate|date('Y-m-d H:i:s') }}" class="date">
                              <svg role="img" class="icon // icon-date" title="Date Icon">
                                  <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                              </svg>{{ helpers.date_formatted(entry.postDate) }}
                          </time>
                      </p>
                      <p class="btn // btn--sub">Read Article</p>
                  </div>
              </div>
          </div>
      </a>
  </div>
  {% 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') %}
  <div class="c-card // l-card--third">
      <a href="{{ article.url }}">
          <img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img">
          <div class="c-card__bar // js_fitcontent">
              {% set array = article.title|split(' ', 2) %}
              <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
              <p class="c-card__msg // js-fittext">Posted on {{ helpers.date_formatted(entry.postDate) }}</p>
          </div>
  
          <div class="c-card__over">
              <div class="c-card__over-content">
                  <div class="animate">
                      <p class="c-card__title"><strong>Related</strong> Article</p>
                      <p class="c-card__msg  // half-margin-bottom">
                          <strong>{{ article.title }}</strong><br />
                          <time datetime="{{ entry.postDate|date('Y-m-d H:i:s') }}" class="date">
                              <svg role="img" class="icon // icon-date" title="Date Icon">
                                  <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                              </svg>{{ helpers.date_formatted(entry.postDate) }}
                          </time>
                      </p>
                      <p class="btn // btn--sub">Read Article</p>
                  </div>
              </div>
          </div>
      </a>
  </div>
  {% 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 %}
          <img src="{{ bannerImage.getUrl('cardImage') }}" />
      {% 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 %}
          <img src="{{ bannerImage.getUrl('cardImage') }}" />
      {% endif %}
  {% endfor %}
  
  ```
  
  ...or you could use a more "traditional" eager loading approach, using `craft.entries` and [the `relatedTo` parameter](https://craftcms.com/docs/relations#the-relatedTo-param):
  
  ```
  {% for article in craft.entries({
      relatedTo: {
        sourceElement: entry,
        field: 'relatedArticles'
      },
      with: [
          ['bannerImage', {
              withTransforms: ['cardImage']
          }]
      ]
  }) %}
      ...
      {% set bannerImage = article.bannerImage[0] ?? null %}
      {% if bannerImage %}
          <img src="{{ bannerImage.getUrl('cardImage') }}" />
      {% 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](https://craftcms.com/docs/templating/eager-loading-elements).
  
  > **Comments:**
  > **username_0**: Thanks for this username_1. 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-username_0-username_0-and-username_1-mikkel-username_1).  
  > **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 username_1. 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.
  
  
  ---
  
  