Transform Your Craft CMS Site: The Power of Custom Template Development
Standard Craft CMS templates often suffer from N+1 queries, incomplete Matrix block support, and sluggish load times, leading to LCP > 4 s. Our custom Twig templates eliminate these issues: first results in 4 days, and typical savings on maintenance of $3,000–$8,000 per year. We have solved this for numerous projects, from corporate websites to media portals with thousands of entries. Below, we break down the technical challenges custom Twig templates solve and how their development pays off.
Why Custom Twig Templates Outperform Standard Ones: 3x Faster Load
Custom templates give you full control over HTML generation. Standard templates often suffer from N+1 queries — loops that make individual calls to related elements. As noted in the Craft CMS documentation: Eager-loading drastically reduces query count. We use eager-loading via with(), cutting SQL queries by a factor of 5–8 times compared to standard templates. We also apply {% cache %} caching and optimize images using Image Transforms with WebP and srcset. As a result, TTFB drops to 200–400 ms, and LCP stays below 2.5 s. In one project, load time improved from 6 s to 2 s — a 3x speedup.
Problems We Solve
How Custom Twig Templates Eliminate N+1 Queries
Standard templates often call post.categories.all() inside a loop — each call triggers a separate SQL query. We use with() and eager-loading directly in controllers or entry types. This reduces SQL queries by 5–8 times, leading to 3 times faster page loads. Result: TTFB drops to 200–400 ms, with overall performance improvement. For a media portal, we cut queries from 78 to 12, and LCP decreased from 6 s to 1.8 s.
Incomplete Matrix Block Rendering
If the admin panel defines 10 block types but the template only handles 3, content managers won't be able to use the rest. We implement a full switch for each block.type, with dedicated partial components and styles. This ensures all 8 block types are fully supported without further modifications.
Errors in SEO Meta Tags
Missing Open Graph, incorrect image alt text, duplicate titles — common issues. In custom templates, we define {% block meta %} for each page, dynamically building descriptions and images. For example, we set alt="custom Twig template Craft CMS" to improve semantics.
How We Do It: A Case Study From Our Practice
From our practice: a media portal with 5,000+ entries. We replaced standard templates with custom ones. Initially, a category page executed 78 SQL queries and loaded in 6 seconds. After refactoring with eager-loading and caching, queries dropped to 12, and LCP decreased to 1.8 s. This is a 6.5x reduction in queries and 3.3x faster load. We also configured Image Transforms for WebP and added lazy-load for images. Content managers can now use all 8 Matrix block types without further modifications. The client saved $8,000 annually on server costs due to reduced load.
Step-by-Step Guide to Setting Up a Custom Template
- Analyze content structure: study entry types, Matrix fields, and relationship types.
-
Design layouts: create
_layouts/(base, default, fullwidth) and_components/(header, footer). -
Implement with eager-loading: use
with()in controllers and templates to preload related elements. -
Configure Matrix blocks: write a
switchfor each block type with a dedicated partial component. - Add caching: apply
{% cache %}for frequently requested blocks (navigation, sidebars). - Test Live Preview: check all entry types and mobile layouts.
- Optimize images by default: set up WebP and srcset via Image Transforms.
Results Comparison: Standard vs Custom Template
| Criteria | Standard Template | Custom Template | Improvement |
|---|---|---|---|
| Load Speed | TTFB > 1 s | TTFB < 400 ms | 2.5x faster |
| SQL Queries | 50–80 | 10–15 | 5x fewer |
| Matrix Field Support | Partial | Full | — |
| SEO Meta Tags | Basic | Open Graph, Schema, Microdata | — |
| Image Responsiveness | Missing | WebP + srcset | — |
| Annual Maintenance Cost | ~$5,000 | ~$2,000 | Save $3,000 |
What's Included in the Work
- Source code of all templates (Twig).
- Configured Image Transforms (if needed).
- Documentation for macros and partial components.
- Deployment guide.
- 14 days of warranty support after deployment.
- Training for content managers on Matrix fields (optional).
Work Process
| Stage | Duration | What We Do |
|---|---|---|
| Analytics | 1 day | Study content structure: entry types, Matrix fields, relationship types. Create URI map and template mapping. |
| Design | 1-2 days | Create _layouts/ (base, default, fullwidth) and _components/ (header, footer, post-card). Define macros for repeated elements. |
| Implementation | 2-4 days | Write each template using eager-loading and {% cache %}. Configure Live Preview for all entry types. |
| Testing | 1 day | Check all URIs, mobile layout, meta tags, images. Fix Dev Mode errors. |
| Deployment & Support | 14 days | Deliver code in Git, set up CI/CD. Fix issues for free. |
How We Configure Live Preview for All Entry Types
We create a separate _entry.twig template for each entry type in its respective folder. It inherits the base layout and overrides content and meta blocks. Live Preview automatically picks the correct template if the folder structure matches the entry type handle. We also ensure craft.app.request.getSegment doesn't cause errors during preview.
Why Order Custom Templates From Us?
Our team has deep experience with Craft CMS — we know how pagination, Image Transforms, globals, and relations work. Each project is guaranteed to be compatible with the latest stable version of Craft CMS and PHP 8.1+. Core Web Vitals optimization: LCP < 2.5 s using fetchpriority and lazy-load (Intersection Observer). By simplifying template structures, clients typically save 30-40% on ongoing maintenance (equating to $3,000–$8,000 per year). Full documentation for every macro and partial component. For more details on eager-loading, see the Craft CMS documentation. With over 5 years of experience and 50+ completed Craft CMS projects, we deliver reliable templates. Contact us to get a project assessment – get a free consultation.
Code Examples
Basic template structure:
templates/
├── _layouts/
│ ├── base.twig
│ ├── default.twig
│ └── fullwidth.twig
├── _components/
│ ├── header.twig
│ ├── footer.twig
│ ├── post-card.twig
│ └── breadcrumbs.twig
├── _macros/
│ └── helpers.twig
├── index.twig
├── 404.twig
├── blog/
│ ├── index.twig
│ └── _entry.twig
└── services/
├── index.twig
└── _entry.twig
Base layout (base.twig):
<!DOCTYPE html>
<html lang="{{ craft.app.language }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{{ siteName }}{% endblock %}</title>
{% block meta %}{% endblock %}
{{ craft.vite.stylesheet('src/css/app.pcss') }}
</head>
<body class="{% block bodyClass %}{% endblock %}">
{% include '_components/header' %}
<main id="main" tabindex="-1">
{% block content %}{% endblock %}
</main>
{% include '_components/footer' %}
{{ craft.vite.script('src/js/app.ts') }}
{% block scripts %}{% endblock %}
</body>
</html>
Matrix block handling:
<div class="post-body">
{% for block in entry.pageContent.all() %}
{% switch block.type %}
{% case 'richText' %}
<div class="prose">{{ block.body }}</div>
{% case 'pullQuote' %}
<blockquote>
<p>{{ block.quote }}</p>
{% if block.attribution %}<cite>{{ block.attribution }}</cite>{% endif %}
</blockquote>
{% case 'imageBlock' %}
{% set img = block.image.one() %}
{% if img %}
<figure>
<img src="{{ img.getUrl({ width: 1200 }) }}" alt="{{ img.alt }}">
{% if block.caption %}<figcaption>{{ block.caption }}</figcaption>{% endif %}
</figure>
{% endif %}
{% case 'codeSnippet' %}
<pre><code class="language-{{ block.language }}">{{ block.code | escape }}</code></pre>
{% endswitch %}
{% endfor %}
</div>
Macros and Image Transforms:
// config/image-transforms.php
return [
'thumbnail' => ['width' => 400, 'height' => 300, 'mode' => 'crop'],
'large' => ['width' => 1200, 'height' => 630, 'mode' => 'crop'],
'avatar' => ['width' => 100, 'height' => 100, 'mode' => 'crop', 'position' => 'center-center'],
'ogImage' => ['width' => 1200, 'height' => 630, 'mode' => 'crop', 'format' => 'jpg'],
];
{# templates/_macros/helpers.twig #}
{% macro truncate(text, length = 150) %}
{% if text | length > length %}
{{ text | slice(0, length) }}…
{% else %}
{{ text }}
{% endif %}
{% endmacro %}
{% macro breadcrumbs(entry) %}
<nav aria-label="Breadcrumbs">
<a href="/">Home</a>
{% for ancestor in entry.getAncestors() %}
<a href="{{ ancestor.url }}">{{ ancestor.title }}</a>
{% endfor %}
<span aria-current="page">{{ entry.title }}</span>
</nav>
{% endmacro %}
All templates undergo code review and are optimized for Core Web Vitals. If your business logic is non-standard, we'll add support for custom fields, relations, and events. Our Craft CMS Twig templates are meticulously crafted to eliminate N+1 queries and optimize Core Web Vitals. Order custom templates and see the difference.