Optimisation

Caching

What should be cached?

• Queries (Rule of thumb: Everything within a {% for %} loop)
• Static files

How do you cache it?

• Queries via Redis (multi server setup) or in a database (single server)
• Static files via local caching rules

Query caching

1. Query data is saved after the first pageload and served on next pageloads.
2. The cache is cleared when the data between the cache tags changes in Craft

{% cache %}
{% if entry.logos|length %}
<div class="row mt-8 pb-5">
    {% set images = entry.logos.all() %}
    {% for image in images %}
        <div class="col-6 col-sm-4 col-md-3">
            <div class="logo__img d-flex justify-content-center">
                <img class="img-fluid" srcset="{{ image.getUrl('logo') }}" alt="{{ image.title }}">
            </div>
        </div>
    {% endfor %}
</div>
{% endif %}
{% endcache %}

Local file caching

By adding Expire headers to your htaccess file you can speed up the site significantly.

1. Reduces load on our server
2. Pages load faster on next visit or nex pages that use the same files (like the CSS and JS files in the header for example).

# BEGIN Expire headers
<IfModule mod_expires.c>
  # Turn on the module.
  ExpiresActive on
  # Set the default expiry times.
  ExpiresDefault "access plus 2 days"
  ExpiresByType image/jpg "access plus 1 month"
  ExpiresByType image/svg+xml "access 1 month"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/webp "access plus 1 month"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType image/ico "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 month"
  ExpiresByType text/html "access plus 600 seconds"
</IfModule>
# END Expire headers

Image formatting

A combination of the best size and modern formats will make your site load faster.

• The right format: Webp with fallbacks
• The right size: Responsive images, The right size for every screen
• Lazy loading, why load an image when you dont see it yet?

<picture>
    <source type="image/webp" media="(min-width: 1200px)" srcset="{{ entry.img.one().getUrl({ transform: 'sliderImageLarge', format: 'webp' }) }}, {{ entry.img.one().getUrl({ transform: 'sliderImageLargeRetina', format: 'webp' }) }} 2x ">
    <source type="image/webp" media="(max-width: 1199px)" srcset="{{ entry.img.one().getUrl({ transform: 'sliderImage', format: 'webp' }) }}">
    <source type="image/webp" media="(max-width: 380px)" srcset="{{ entry.img.one().getUrl({ transform: 'sliderImageMobile', format: 'webp' }) }}">
    <source type="{{ entry.img.one().mimeType }}" media="(min-width: 1200px)" srcset="{{ entry.img.one().getUrl('sliderImageLarge') }}">
    <source type="{{ entry.img.one().mimeType }}" media="(max-width: 1199px)" srcset="{{ entry.img.one().getUrl('sliderImage') }}">
    <source type="{{ entry.img.one().mimeType }}" media="(max-width: 380px)" srcset="{{ entry.img.one().getUrl('sliderImageMobile') }}">
    <img src="{{ entry.img.one().getUrl('sliderImageMobile') }}" alt="{{ entry.img.one().title }}" class="img-fluid" loading="lazy">
</picture>