Уявіть: ваш медіаблог на Ghost CMS гальмує при 5000 постах, сторінки завантажуються по 4 секунди, а Google вважає LCP 4.2с. Типова картина для тем, де Handlebars-шаблони використовують вкладені {{#get}} запити без кешування та не оптимізовані зображення. Ми вирішуємо цю проблему переписуванням теми під Ghost 5 з кастомними налаштуваннями та правильним кешуванням.
На відміну від WordPress, Handlebars у Ghost не виконує довільний код, а лише викликає вбудовані хелпери. Це плюс для безпеки, але мінус для продуктивності, якщо не знати тонкощів. Наша команда з багаторічним досвідом розробки на Ghost (30+ проєктів) створює теми, які проходять gscan без попереджень і набирають 90+ у Lighthouse. Ми маємо 7+ років досвіду на ринку. Розкажемо, як це працює.
Проблеми, які вирішуємо
N+1 запити через {{#get}}. Часта помилка — отримувати дані для кожного посту окремим запитом. Рішення — використовувати eager loading через параметр include в головному запиті, або виносити дані в partials з мемоізацією.
Відсутність адаптивних зображень. Без img_url з size та srcset тема завантажує повні оригінали: 3000px на мобільному. Це різко збільшує LCP та CLS. Правильний підхід — задати image_sizes у package.json і будувати srcset для кожного зображення.
Нехтування кастомними налаштуваннями. Багато розробників жорстко кодують стилі та функціонал, які редактор міг би змінювати через Admin. Використовуємо @custom у конфігу — це дає контроль редактору без деплою.
Як Handlebars впливає на продуктивність Ghost?
Handlebars дозволяє створювати безпечні шаблони без ризику RCE, властивого PHP-двигунам. Ghost у версії 5.0+ стабільно підтримує всі хелпери для побудови складних інтерфейсів: від пейджингу до Members. У порівнянні з Nunjucks, Handlebars — рідна мова, що дає максимум контролю при мінімумі можливостей для помилки. Він у 2 рази швидший, ніж PHP-шаблонізатори у WordPress, при рівному навантаженні, завдяки відсутності накладних витрат на виконання коду. Крім того, адаптивна верстка на Ghost дозволяє робити тему легкою в 3 рази легшою за аналогічний WordPress-сайт.
Як ми це робимо: кейс оптимізації медіаблогу
Наш клієнт — медіа з 5000+ постів, тема на старому Bootstrap, LCP 4.2с, INP — 300ms. Завдання: зберегти дизайн, покращити Core Web Vitals, додати Members для преміум-контенту.
Стек: Ghost 5.5, Handlebars, Node.js 18, Nginx, Cloudflare. Повністю переписали структуру шаблонів:
- Замінили вкладені
{{#get}}на один запит зinclude=tags,authors. - Налаштували
image_sizesз чотирма варіантами та додалиsizesатрибут. - Впровадили lazy loading для зображень нижче фолду.
- Використали
@customдля вибору кольорової схеми та типу шапки.
Результат: LCP — 1.8с, CLS — 0.05, INP — 100ms. Сайт пройшов gscan без зауважень.
Чому варто замовити кастомну тему Ghost?
Готова тема не враховує специфіку контенту та аудиторії. Тільки кастомна розробка дозволяє повністю контролювати верстку, налаштування Members та продуктивність. Ми гарантуємо gscan-валідацію та 30 днів підтримки після здачі.
Процес роботи
- Аналітика: аудит поточної теми, замір метрик, виявлення вузьких місць.
- Проєктування: створення макету структури partials, схеми кастомних налаштувань, прототипування Members-потоків.
- Реалізація: написання всіх hbs-шаблонів, стилізація, конфігурація
package.json, інтеграція з Ghost API. - Тестування: валідація gscan, перевірка на всіх пристроях, профілювання Lighthouse.
- Деплой: завантаження через Admin або CI/CD, налаштування кешування на Nginx та Cloudflare, моніторинг метрик.
Строки орієнтовно
| Тип теми | Час |
|---|---|
| Мінімальна робоча тема | 2–3 дні |
| Повноцінна (index, post, tag, author) | 5–8 днів |
| З Members та кастомними налаштуваннями | 8–12 днів |
| З Newsletter-шаблонами | +1–2 дні |
Вартість розраховується індивідуально, орієнтовний діапазон: від $500 до $5000 залежно від складності. Оцінимо проєкт за 1 день.
Типові помилки в темах Ghost
Найпоширеніші помилки
| Помилка | Рішення |
|---|---|
Відсутність error.hbs |
Створити обов’язковий файл |
Використання {{#each}} без post_class |
Завжди застосовувати {{post_class}} |
Ігнорування card_assets |
Включити в package.json |
| Жорстка розмітка замість адаптивної | Використовувати img_url з srcset |
Забуті @custom налаштування |
Винести всі параметри в package.json |
Що входить в роботу
- Вихідний код теми з коментарями
- Документація по кастомним налаштуванням
- Налаштування Members та Newsletter
- Валідація gscan з нульовими попередженнями
- Безкоштовна підтримка протягом 30 днів після здачі
Як реалізувати Members-обмеження в кастомній темі?
Додайте в post.hbs блок перевірки доступу. Ghost надає контекст {{#if access}} для платного контенту та {{#unless @member}} для гостей. Приклад:
{{#post}} {{#if access}} <div class="premium-content">{{content}}</div> {{else}} <div class="paywall"> <h3>Ця стаття для підписників</h3> {{#unless @member}} <a href="#/portal/signup">Підписатися</a> {{/unless}} </div> {{/if}} {{/post}} Для відображення планів використовуйте {{#get "tiers"}} та виводьте назву і ціну.
Приклади шаблонів
Основні хелпери на прикладі index.hbs
{{! index.hbs — список постів}} {{#foreach posts}} <article class="post-card {{post_class}}"> {{#if feature_image}} <figure> <img srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w" sizes="(max-width: 768px) 100vw, 50vw" src="{{img_url feature_image size="m"}}" alt="{{title}} — кастомна тема Ghost"> </figure> {{/if}} <div class="post-card-content"> <header> {{#primary_tag}} <a href="{{url}}" class="post-tag">{{name}}</a> {{/primary_tag}} <h2><a href="{{url}}">{{title}}</a></h2> </header> {{#if excerpt}} <p>{{excerpt words="30"}}</p> {{/if}} <footer> {{#primary_author}} <img src="{{img_url profile_image size="xs"}}" alt="{{name}}"> <a href="{{url}}">{{name}}</a> {{/primary_author}} <time datetime="{{date format="YYYY-MM-DD"}}"> {{date format="DD MMM YYYY"}} </time> {{#if @custom.show_reading_time}} <span>{{reading_time}}</span> {{/if}} </footer> </div> </article> {{/foreach}} {{pagination}} Динамічні дані через {{#get}}
{{! Останні пости за тегом}} {{#get "posts" limit="5" filter="tag:javascript" order="published_at desc"}} {{#foreach posts}} <a href="{{url}}">{{title}}</a> {{/foreach}} {{/get}} Обов’язкові файли теми
my-theme/ ├── package.json ├── index.hbs ├── post.hbs ├── page.hbs ├── error.hbs ├── tag.hbs (опціонально) ├── author.hbs (опціонально) ├── partials/ │ ├── header.hbs │ ├── footer.hbs │ └── post-card.hbs └── assets/ ├── css/screen.css └── js/main.js { "name": "my-theme", "description": "Custom Ghost theme", "version": "1.0.0", "engines": { "ghost": ">=5.0.0", "ghost-api": "v5" }, "license": "MIT", "config": { "posts_per_page": 12, "image_sizes": { "xs": { "width": 300 }, "s": { "width": 600 }, "m": { "width": 1200 }, "l": { "width": 2000 } }, "card_assets": true, "custom": { "header_style": { "type": "select", "options": ["Center", "Left", "Right"], "default": "Center" }, "show_reading_time": { "type": "boolean", "default": true } } } } Зв'яжіться з нами для оцінки проєкту. Замовте розробку кастомної теми Ghost — гарантуємо якісний код, що проходить gscan без помилок. Отримайте консультацію по вашому проєкту — ми оцінимо складність і строки за 1 день.