I85PREP
⌘ K
Adobe Commerce Front-End Dev Expert study materials
Adobe Commerce Front-End Dev Expert study resources

Adobe Commerce Front-End Dev Expert: Front-End Performance and Caching

Adobe Commerce Front-End Dev Expert · Work through your exam, one topic at a time.

All guide sections

Front-End Performance and Caching

Cache types and full-page cache

Magento caches blocks, collections, config, layout, and full pages. Full-page cache (FPC) stores rendered HTML keyed by URL, store, currency, and customer group. Magento\PageCache handles this; Varnish can replace the built-in cache. Blocks that must vary per customer use private content (customer-data via sections.xml and customerData.get()).

Cache identity and invalidation

Blocks declare cache tags and lifetimes. getCacheKeyInfo() and getIdentities() control variation. Traps: caching a block that shows customer-specific data without identities, or assuming FPC caches POST/cart pages (it does not by default). Hole-punching via AJAX/private content is the correct pattern for dynamic fragments.

Performance levers

  • Merge/minify JS and CSS via dev/js/merge_files and dev/css/minify_files (or bin/magento config:set).
  • Enable production mode and static content deploy.
  • Reduce blocking JS; defer non-critical scripts.
  • Use image optimization and proper view.xml sizes.

Traps to expect

  • Thinking cache:flush and cache:clean are identical (flush clears the cache storage; clean invalidates by type).
  • Expecting customer-specific content in FPC without private content.
  • Forgetting cacheable="false" on blocks that must not be cached.

Rule of thumb

If content differs per customer, it must be private content or a non-cacheable block; everything else should be cacheable with correct identities.

Worked example

A greeting block: set cacheable="false" in layout or render via customerData section so FPC can still cache the page shell while the greeting loads per customer.