Images

Below the fold

Images from WaWi

{responsiveImage
    src="{$image->cURLNormal}"
    srcset="{$image->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w,
        {$image->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w,
        {$image->cURLGross} {$Einstellungen.bilder.bilder_artikel_gross_breite}w"
    sizes="auto"
    alt="Product image"
    class="img-responsive"
    progressiveLoading="{$image->cURLMini}"
    lazy=true
    webp=true
}

In this example we try to render an image from the WaWi. Notice the lazy attribute and the "image-responsive" class. You can also set the progressiveLoading attribute, which will use the smallest image as placeholder till the original image has been fully loaded. Use the webp attribute for rendering WebP images.

Images from OPC

{responsiveImage
    src="media/image/storage/opc/coolImage.jpeg"
    sizes="auto"
    alt="Nice OPC image"
    class="img-responsive"
    opc=true
    progressiveLoading="{$image->cURLMini}"
    lazy=true
    webp=true}

Use the opc attribute for Images from Elfinder/OPC. Use a relative path of the image (You can also use the global variable STORAGE_OPC, src-path would look like this -> "{STORAGE_OPC|cat:"coolImage.jpeg}). With opc set to true you don't need to add an srcset, srcSets will be handled in the background.

Above the fold

For images above the fold you don't need to add the lazy attribute. Use the progressivePlaceholder attribute (not progressiveLoading) with the biggest srcSet-image like so:

• progressivePlaceholder={$image->cURLGross}

For images above the fold it's useful to preload them for better PageSpeed-score.

Iframes

Iframes can be lazyloaded natively with the lazy attribute. For youtube videos you can always use the youtube-nocookie host.

<iframe
    src="https://www.youtube-nocookie.com/embed/sOwtIkAO3ZI
    loading="lazy"
    width="600"
    height="400">
</iframe>

Fonts

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff2'),
       url(/path/to/fonts/examplefont.woff) format('woff')
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Always try to use woff2/woff format and set font-display to swap

Preloading assets

Preloading is always useful for important assets like fonts or images above the fold.

Preloading images with srcSets

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

To get the srcSet-string you can:

{$srcSets = getOPCImageSrcSet("wolf.jpg")}                          // use relative path
{$srcSetStringWebP = getOPCImageSrcSetString($srcSets->webp)}       // get webp srcSet
{$srcSetStringDefault = getOPCImageSrcSetString($srcSets->default)} // get default (jpg, png) srcset

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="{$srcSetStringWebP}" imagesizes="50vw">

Preloading fonts

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>

The crossorigin attribute indicates whether the resource should be fetched with a CORS request as the font may come from a different domain - use it!