DokumentationHandelImplementera spelningsbok

Optimera resursfiler

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Erfaren
  • Utvecklare

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

  • Optimera CSS- och JS-filer - Minska den tid som krävs för att läsa in CSS- och JavaScript-filer (JS) genom att konfigurera Adobe Commerce så att separata filer sammanfogas, minimeras och paketeras i en enda fil.
  • Eliminera resurser för återgivningsblockering - Överväg att leverera viktiga JS- och CSS-funktioner som är infogade och skjuta upp alla icke-kritiska JS/CSS-format. Mer information finns i Ta bort resurser för återgivningsblockering.

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 Admin > Lager > Inställningar > 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 filen app/etc/config.php och omdistribuera den.

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 filen app/etc/config.php och omdistribuera den.

Minimera JS-filer

Använda Admin

Gå till Store > Settings > Configuration > Advanced > Developer > JavaScript Settings på sidofältet Admin.

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 filen app/etc/config.php och omdistribuera den.

Sammanfoga och bunta JS-filer

Du kan aktivera sammanslagning eller paketering i Commerce Admin (sammanslagning och paketering kan inte aktiveras samtidigt): Lagrar > 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