DokumentationCommerceImplementera spelningsbok

[Endast PaaS]{class="badge informative" title="Gäller endast Adobe Commerce i molnprojekt (Adobe-hanterad PaaS-infrastruktur) och lokala projekt."}

Optimera resursfiler

Last update: Wed Apr 01 2026 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 för att minimera och paketera filer.
  • 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 > Stores > Settings > Configuration > Advanced > Developer > CSS Settings.

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änder Admin

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

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.

Paketera JS-filer

Du kan aktivera paketering i Commerce Admin: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.

NOTE
Sammanfogning och paketering kan inte aktiveras samtidigt.

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

Sammanfoga JS-filer (rekommenderas inte) merge-js-files

WARNING
Vi rekommenderar inte att du aktiverar Merge JavaScript Files. Den här inställningen har endast utformats för synkront inläst JavaScript i avsnittet HEAD på sidan och kan göra att paketering och RequireJS-logik inte fungerar som de ska. Den behålls endast för bakåtkompatibilitet och ger inga prestandafördelar när HTTP/2 är aktiverat.
Om du har Merge JavaScript Files aktiverat och stöter på problem kan du inaktivera det innan du använder några korrigeringar. Se ACSD-67908 om du inte kan inaktivera sammanslagning.

Ytterligare information

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