Skip to main content
Version: 1.0.0

Advanced Optimization

This guide focuses on production-grade optimization decisions for YuiCraftPlugin storefronts. The goal is stable performance under load while keeping templates maintainable.

Optimization Priorities​

Apply in this order:

  1. Query and rendering efficiency
  2. Correct cache boundaries
  3. Asset delivery strategy
  4. Script execution timing
  5. Regression checks on checkout/account flows

Critical CSS and Asset Bundles​

Inline only truly critical CSS and keep the rest in asset bundles.

{% block head %}
    <style>
        {{ craft.getCssStyleContent('assets/css/critical/catalog')|raw }}
    </style>
    {% do view.registerAssetBundle('yui\\craft\\web\\assets\\frontend\\CatalogAsset') %}
{% endblock %}

Guideline:

  • critical CSS: above-the-fold essentials only
  • bundle CSS: component/page styles that can load after first paint

Script Loading Strategy​

Prefer deferred or event-driven execution for non-essential scripts.

  • keep blocking scripts out of the critical head path
  • use plugin/global script components where available
  • register route-specific scripts from route-specific layouts/pages

Twig Rendering Discipline​

Avoid expensive logic in templates:

  • move business rules to controllers/services
  • keep page templates as composition layers
  • use components/blocks for reuse and readability

If a Twig file grows too large, split by concern:

  • page orchestration in pages
  • feature sections in components
  • tiny shared fragments in blocks

Frontend Theme/Variant Performance​

When switching between cart/checkout layout variants:

  • reuse the same component contracts
  • avoid duplicating totals rendering logic
  • keep selectors and JS bindings consistent

This allows style/theme changes without introducing inconsistent behavior.

Practical Production Checklist​

Before release:

  1. verify query count on listing/detail/cart/checkout
  2. verify critical CSS is minimal and effective
  3. verify bundle loading order
  4. verify cache behavior for dynamic pages
  5. verify no regressions in add-to-cart and checkout actions

Performance work is complete only when these checks pass.