Code Optimization for Miva

This webinar is being recorded and may be shared publicly. By continuing to participate, including using audio, video, or chat features, you acknowledge and consent to being recorded. If you do not wish to be recorded, please turn off your camera, mute your microphone, refrain from speaking, or exit the webinar at this time. Thank you for your cooperation and participation!

Agenda

Frontend Optimization

  • Important Metrics
  • How to measure
  • How to resolve


Backend Optimization

  • Useful tools
  • Focusing on TTFB
  • Optimizing MVT

Page Speed

  • FCP
  • LCP
  • TBT
  • CLS
  • SI
  • TTFB

We typically rely on scores from https://pagespeed.web.dev/ tests vs running lighthouse scores in web developer tools

First Contentful Paint (FCP)

  • Measures loading performance: time to render first DOM content (text, image, etc.)
  • Ideal FCP: 1.8 seconds or faster
  • Critical for user perception of speed
  • Optimization techniques:
    • Reduce server response time
    • Use a fast, reliable CDN
    • Minify CSS and JavaScript
    • Remove unnecessary third-party scripts
  • Monitor FCP using Lighthouse, WebPageTest, and field tools

Largest Contentful Paint (LCP)

  • Measures loading performance: time to render largest visible content
  • Ideal LCP: 2.5 seconds or faster
  • Common LCP elements: hero images, large text blocks, videos
  • Optimization techniques:
    • Optimize server response times
    • Use efficient image formats and compression
    • Preload critical assets (fonts, images)
    • Minimize render-blocking JavaScript and CSS
  • Monitor LCP with Lighthouse and field tools like Chrome User Experience Report

Total Blocking Time (TBT)

  • Measures interactivity: total time main thread is blocked after FCP
  • Ideal TBT: under 200 milliseconds
  • High TBT leads to poor user experience and input lag
  • Optimization techniques:
    • Break up long JavaScript tasks
    • Use code-splitting to load only what's needed
    • Defer or lazy-load non-critical JS
  • Measure TBT in Lighthouse and Chrome DevTools

Content Layout Shift (CLS)

  • Measures visual stability: how much content unexpectedly shifts during load
  • Ideal CLS: 0.1 or lower
  • Common causes: images without dimensions, late-loaded fonts, injected ads
  • Optimization techniques:
    • Set size attributes or CSS aspect ratios for images/videos
    • Preload web fonts to avoid FOIT/FOUT
    • Avoid inserting content above existing content unless triggered by user
  • Monitor CLS with Lighthouse, Chrome UX Report, and Web Vitals extension

Speed Index (SI)

  • Measures how quickly content is visually displayed during page load
  • Lower Speed Index = faster visual load
  • Calculated from frame-by-frame visual progress
  • Optimization techniques:
    • Minimize critical requests and bytes
    • Prioritize visible content in HTML and CSS
    • Lazy-load offscreen assets
    • Use efficient font and image delivery
  • Measure Speed Index in Lighthouse and WebPageTest

Time to First Byte (TTFB)

  • Measures server responsiveness: time from request to first byte received
  • Ideal TTFB: under 300 milliseconds
  • Affects all other load metrics—slow TTFB delays everything
  • Optimization techniques:
    • Implement Cloudflare
    • Implement server-side caching (Redis)
    • Keep backend logic efficient
  • Measure TTFB with Chrome DevTools, WebPageTest, or server logs

JavaScript and Tracking

  • Group all tracking scripts in one place to keep layout predictable and maintainable
  • Load tracking scripts conditionally to allow testing without scripts being loaded
    <mvt:if expr="g.NoTagManager NE 1">
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    </mvt:if>
  • Be aware: tracking scripts can significantly delay interactivity and increase Total Blocking Time (TBT)
  • Use async and defer attributes:
    • async: downloads script in parallel and executes as soon as it's ready — can block rendering if it runs too early
    • defer: downloads in parallel but waits to execute until HTML parsing is complete — better for render-critical paths
  • Audit third-party scripts regularly — remove unused or redundant tracking tags
  • Test performance impact of tracking scripts using Lighthouse, WebPageTest, or manual profiling

Tag Manager

  • Google Tag Manager (GTM) is a tag management system that lets you manage and deploy marketing and analytics tags from a central interface
  • Benefits of using a tag manager:
    • Centralizes tag control — no need to modify codebase for every new tag
    • Improves deployment speed — marketing teams can add/edit tracking without developer intervention
    • Reduces clutter in your main codebase and improves maintainability
    • Built-in triggers and variables make complex tracking easier to configure
    • Version control and rollback features provide safer testing and publishing
  • Be cautious: misconfigured or excessive tags in GTM can hurt performance
  • Use GTM's preview and debug mode to test before publishing changes
  • Defer non-critical tags and use triggers to delay load until after user interaction where possible
  • GTM is required for the default Shadows Google Analytics tracking
  • Audit regularly to remove outdated or redundant tags and scripts

Choosing the Right Function - Backend Optimization

  • Understand and navigate the LSK (Limited Source Kit):
    • The LSK provides built-in utility functions for common tasks
  • The anatomy of an <mvt:do>:
    • <mvt:do name="g.result" file="g.module" value="function_name( parameters )" />
    • name: where the result is stored
    • file: the module or library the function comes from
    • value: the actual function call
    • Write clean and intentional <mvt:do> calls to avoid hard-to-debug performance issues
  • Cached vs non-cached functions:
    • Use cached functions (e.g. Product_Load_Code_Cached) whenever available to avoid unnecessary DB hits
    • Non-cached functions can degrade performance quickly, especially in loops or high-traffic pages
    • Measure the performance cost of each function — not all Load or Find functions are created equal
    • Leverage global variables and memory caching for repeated values during the same render cycle

Page Profiling Tools - Backend Optimization

  • Profile logging with mvprof:
    • mvprof is Miva's profiling tool to log execution time of templates, functions, and includes
    • Logging is enabled by modifying the mvconf file with the correct logging parameters.
    • Analyze output to identify slow-running <mvt:do> calls, inefficient loops, or expensive conditionals
  • Network call logging with diagtool:
    • diagtool can capture HTTP requests made from the Miva engine (e.g., API calls, external services)
    • Helps identify bottlenecks in remote service dependencies (payment gateways, shipping APIs, etc.)
    • Useful for debugging timeouts, high response times, or failures in third-party integrations
    • Combine with mvprof to get a full view of both backend and external delays
  • Don't leave profiling enabled in production for long periods — it can impact performance and expose sensitive data
  • Use these tools regularly during development, deployment, and performance audits

Redis - Backend Optimization

  • Redis is an in-memory key-value store used by Miva for high-performance page and data caching
  • Key benefits of Redis caching:
    • Dramatically reduces database and template execution load by serving cached versions of pages
    • Improves TTFB and overall load time, especially for high-traffic or content-heavy pages
    • Decreases backend resource usage, allowing the server to handle more concurrent users
  • Page-level caching:
    • Static or semi-static pages (like category, product, or content pages) can be cached fully in Redis
    • Use Miva's built-in cache rules and expiration controls to manage freshness
    • Invalidate or bypass cache for personalized content (e.g., logged-in user pricing, cart data)
  • Always monitor cache hit/miss rates and adjust caching strategy as your site grows
  • Redis is critical for performance scaling — if you're not caching yet, you're wasting CPU cycles

Key Takeaways

  • Performance isn't a one-off task — it's an ongoing process of auditing, optimizing, and maintaining
  • Prioritize Core Web Vitals (FCP, LCP, TBT, CLS) to deliver a fast, stable user experience
  • Use tools like Lighthouse, mvprof, diagtool, and WebPageTest to pinpoint backend and frontend issues
  • Be intentional with JavaScript and tracking — load only what's necessary, and load it smart
  • Leverage Google Tag Manager for flexibility, but audit it regularly to avoid bloating the site
  • Choose efficient Miva functions, favor cached versions, and understand how <mvt:do> really works
  • Use Redis aggressively for caching — both page-level and data-level — to reduce server load and improve speed
  • Backend optimization has just as much impact as frontend — don't ignore it

Thank You

If you have any questions about what we covered today feel free to email developer_support@miva.com for further assistance!