Slow Category Loading

Question

I have the following category https://www.ticketstoday.co.uk/theatre which has around 600/700 Entries, this is paginated at 30x Entries a page. Unfortunately, it's loading rather slowly. It's not a huge entry count so I'm unsure what's happening.

  {% set entries = craft.entries ({
          section: 'events',
          limit: '30',
          order: 'postDate desc',
          with: ['eventMediaTile'],
          relatedTo: category
      }) %}

  {% paginate entries as pageInfo, pageEntries %}
  {% do seomatic.helper.paginate(pageInfo) %}

  {% for entry in pageEntries %}
    {% include '_card' %}
  {% endfor %}

Is there anything at all I can do to speed up the query, or, is it a limitation of Craft?

Added Card Template below

<a href="{{ entry.url }}" title="{{ entry.title }} Tickets" class="card card-md waves-effect waves-light" aria-label="{{ entry.title }} Tickets">
{% if entry.eventPercentageSaving > 0 %}
  <div class="corner-ribbon top-right">{{ entry.eventPercentageSaving }}% Off</div>
{% endif %}
{% for asset in entry.eventMediaTile %}
  <div class="card-image">
    <img src="{{ asset.geturl }}" alt="{{ entry.title }} Preview Image">
  </div>
{% endfor %}

<div class="card-content">
  <h3 class="card-title">{{ entry.title }}</h3>
  <p>{{ entry.eventVenueName.one().title ?? 'N/A' }}, {{ entry.eventCity.one().title ?? 'N/A' }}</p>
  <div class="btn">From £{{ entry.eventMinimumPrice }}</div>
</div>

</a>

Answer 1

You could eager load a little more to speed things up. Especially your eventVenueName and eventCity

For your query, try:

{% set entries = craft.entries ({
        section: 'events',
        limit: '30',
        order: 'postDate desc',
        with: [
            'eventMediaTile',
            'eventVenueName',
            'eventCity'
        ],
        relatedTo: category }) %}

Then in your _card do:

<a href="{{ entry.url }}" title="{{ entry.title }} Tickets" class="card card-md waves-effect waves-light" aria-label="{{ entry.title }} Tickets">
    {% if entry.eventPercentageSaving > 0 %}
        <div class="corner-ribbon top-right">{{ entry.eventPercentageSaving }}% Off</div>
    {% endif %}

    {% set cardImage = entry.eventMediaTile[0] ?? null %}
    {% if cardImage %}
        <div class="card-image">
            <img src="{{ cardImage.geturl }}" alt="{{ entry.title }} Preview Image">
        </div>
    {% endif %}

    <div class="card-content">
        <h3 class="card-title">{{ entry.title }}</h3>
        <p>{{ entry.eventVenueName[0].title ?? 'N/A' }}, {{ entry.eventCity[0].title ?? 'N/A' }}</p>
        <div class="btn">From £{{ entry.eventMinimumPrice }}</div>
    </div>
</a>

If you turn the debug toolbar on your front-end (under your user's preferences) before implementing, and look at the query count, you should see a significant drop.

If this isn't enough, you could start caching. Andrew has a great article on this.