Appearance

Preload Configuration ​

Declare global resource preload hints that are injected into the <head> of every storefront page. Preloading a critical asset (for example the hero image or a web font) tells the browser to fetch it early, which can improve Largest Contentful Paint and reduce layout shift.

Overview ​

The Preload section lets you add <link rel="preload"> tags without editing theme templates. Each row you add becomes one preload link, built from a resource reference and a free-form attribute string.

Configuration ​

Configuration Path: Stores > Configuration > Magebit > Preload > General Settings

#FieldDefaultWhat it does
1Global Pre-Loads EnabledNoMaster switch, Yes / No. When off, no global preloads are emitted.
2Global Pre-LoadsEmptyThe table of preload links to inject. Each row has an Href and an Attributes value.

Config paths:

  1. preload/general/global_preloads_status
  2. preload/general/global_preloads

The Global Pre-Loads table has two columns, both required:

  • Href - the resource to preload. This can be a full URL, or a Magento view-file path such as Magento_Theme::images/hero.webp. A view-file path is resolved to its static URL automatically.
  • Attributes - a raw attribute string appended to the link tag, for example as=image fetchpriority=high media=(min-width:768px).

Usage ​

  1. Go to Stores > Configuration > Magebit > Preload > General Settings.
  2. Set Global Pre-Loads Enabled to Yes.
  3. Under Global Pre-Loads, click Add New Preload and fill a row, for example:
    • Href: Magento_Theme::images/hero.webp
    • Attributes: as=image fetchpriority=high media=(min-width:768px)
  4. Save the configuration.

The row above renders into the page head as:

html
<link rel="preload" href="/static/.../Magento_Theme/images/hero.webp" as=image fetchpriority=high media=(min-width:768px)>

Notes ​

  • All settings are scopable per Default, Website and Store view, so you can preload different assets per store.
  • The attribute string is written verbatim after the href, so keep it to valid <link> attributes. Only add attributes you need, since preloading assets that are not used early wastes bandwidth.
  • Global preloads apply to every page. For a preload that is only relevant to one page or template, register it from that template instead.