Optimera resursfiler

För en mer responsiv Commerce-webbplats optimerar du CSS- och JavaScript-resursfiler (JS) och eliminerar resurser för renderingsblockering.

  • Optimera CSS- och JS-filer- Minska tiden som krävs för att läsa in CSS- och JavaScript-filer (JS) genom att konfigurera Adobe Commerce för att sammanfoga, minimera och paketera separata filer i en enda fil.
  • Eliminera resurser som blockerar återgivningen- Överväg att leverera viktiga JS- och CSS-funktioner som infogas och skjuta upp alla icke-kritiska JS/CSS-format. Mer information finns i Eliminera resurser som blockerar återgivningen.

Berörda produkter och versioner

Alla versioner som stöds, 2.3 och senare av:

  • Adobe Commerce i molninfrastruktur
  • Adobe Commerce lokalt

Sammanfoga eller miniatyrbilder för CSS-filer

Den tid det tar att läsa in CSS- och JavaScript-filer (JS) kan minskas genom att separata filer sammanfogas, minimeras och paketeras i en enda fil.

IMPORTANT
Adobe Commerce i molninfrastruktur körs alltid i produktionsläget och det går inte att ställa in det på något annat sätt. Därför måste du använda kommandoradsmetoden för att aktivera sammanfogning, miniatyr och paketering.

Sammanfoga inte eller paketera filer om HTTP/2 används i distributionen. HTTP/2 hämtar statiska filer asynkront. Webbläsare måste hämta en hel sammanfogad fil innan filinnehållet kan bearbetas.

Använda Admin

Om du vill aktivera CSS-sammanslagning eller -miniatyr går du till Administratör > Lager > Inställning > Konfiguration > Avancerat > Utvecklare > CSS-inställningar.

Använda kommandoraden

Så här aktiverar du CSS-sammanslagning i Adobe Commerce i molninfrastruktur:

  1. Kör det här kommandot lokalt:

    code language-bash
    bin/magento config:set --lock-config dev/css/merge_css_files 1
    
  2. Genomför ändringar i app/etc/config.php och distribuera om.

Så här aktiverar du CSS-miniatyr i Adobe Commerce i molninfrastruktur:

  1. Kör det här kommandot lokalt:

    code language-bash
    bin/magento config:set --lock-config dev/css/minify_files 1
    
  2. Genomför ändringar i app/etc/config.php och distribuera om.

Minimera JS-filer

Använda Admin

Administratör sidebar, gå till Lager > Inställningar > Konfiguration > Avancerat > Utvecklare > JavaScript-inställningar.

Använda kommandoraden

Så här aktiverar du JS-miniatyr i Adobe Commerce i molninfrastruktur:

  1. Kör det här kommandot lokalt:

    code language-bash
    bin/magento config:set --lock-config dev/js/minify_files 1
    
  2. Genomför ändringar i app/etc/config.php och distribuera om.

Sammanfoga och bunta JS-filer

Du kan aktivera sammanslagning eller paketering i Commerce Admin (sammanslagning och paketering kan inte aktiveras samtidigt): Lager > Inställningar > Konfiguration > Avancerat > Utvecklare > JavaScript-inställningar.

Du kan även aktivera Adobe Commerce inbyggda paketering (grundläggande paketering) via kommandoraden:

php -f bin/magento config:set dev/js/enable_js_bundling 1

Ytterligare information

recommendation-more-help
754cbbf3-3a3c-4af3-b6ce-9d34390f3a60