Bronbestanden optimaliseren

Voor een meer responsieve Commerce-site optimaliseert u CSS- en JavaScript-bronbestanden (JS) en elimineert u bronnen voor het blokkeren van renderingen.

  • CSS- en JS-bestanden optimaliseren—Verminder de tijd die nodig is om CSS- en JavaScript-bestanden (JS) te laden door Adobe Commerce te configureren voor het samenvoegen, miniaturen en bundelen van afzonderlijke bestanden in één bestand.
  • Renderblokkeringsbronnen elimineren—Overweeg inline kritieke JS- en CSS-functies te leveren en alle niet-kritieke JS/CSS-stijlen uit te stellen. Voor richtsnoeren, zie Renderblokkeringsbronnen elimineren.

Betrokken producten en versies

Alle ondersteunde versies, 2.3 en hoger van:

  • Adobe Commerce over cloudinfrastructuur
  • Adobe Commerce ter plaatse

CSS-bestanden samenvoegen of beperken

De tijd die nodig is om CSS- en JavaScript-bestanden (JS) te laden, kan worden verkort door afzonderlijke bestanden samen te voegen, te miniaturen en te bundelen in één bestand.

IMPORTANT
Adobe Commerce op wolkeninfrastructuur loopt altijd op de wijze van de Productie en het is niet mogelijk om het anders te plaatsen, daarom moet u de bevel-lijn methode gebruiken om het samenvoegen, het minimaliseren, en het bundelen toe te laten.

Voeg of bundel geen dossiers samen als uw plaatsing HTTP/2 gebruikt. HTTP/2 downloadt statische bestanden asynchroon. Browsers moeten een volledig samengevoegd bestand downloaden voordat de bestandsinhoud kan worden verwerkt.

Admin gebruiken

Als u CSS samenvoegen of miniaturen wilt inschakelen, gaat u naar de Beheerder > Winkels > Instelling > Configuratie > Geavanceerd > Ontwikkelaar > CSS-instellingen.

De opdrachtregel gebruiken

CSS samenvoegen in Adobe Commerce inschakelen op cloudinfrastructuur:

  1. Deze opdracht lokaal uitvoeren:

    code language-bash
    bin/magento config:set --lock-config dev/css/merge_css_files 1
    
  2. Wijzigingen vastleggen in de app/etc/config.php bestand en opnieuw implementeren.

CSS-minificatie inschakelen in Adobe Commerce op cloudinfrastructuur:

  1. Deze opdracht lokaal uitvoeren:

    code language-bash
    bin/magento config:set --lock-config dev/css/minify_files 1
    
  2. Wijzigingen vastleggen in de app/etc/config.php bestand en opnieuw implementeren.

JS-bestanden miniaturen

Admin gebruiken

Op de Beheerder zijbalk, ga naar Winkels > Instellingen > Configuratie > Geavanceerd > Ontwikkelaar > JavaScript-instellingen.

De opdrachtregel gebruiken

JS-minificatie in Adobe Commerce inschakelen op cloudinfrastructuur:

  1. Deze opdracht lokaal uitvoeren:

    code language-bash
    bin/magento config:set --lock-config dev/js/minify_files 1
    
  2. Wijzigingen vastleggen in de app/etc/config.php bestand en opnieuw implementeren.

JS-bestanden samenvoegen en bundelen

U kunt samenvoeging of bundeling inschakelen in Commerce Admin (samenvoeging en bundeling kunnen niet tegelijkertijd worden ingeschakeld): Winkels > Instellingen > Configuratie > Geavanceerd > Ontwikkelaar > JavaScript-instellingen.

U kunt ook ingebouwde Adobe Commerce-bundeling (basisbundeling) inschakelen via de opdrachtregel:

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

Aanvullende informatie

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