Bronbestanden optimaliseren
Voor een meer responsieve Commerce-site optimaliseert u CSS- en JavaScript-bronbestanden (JS) en elimineert u bronnen voor het blokkeren van renderbestanden.
- optimaliseer CSS en JS dossiers - verklein de tijd die wordt vereist om CSS en de dossiers van JavaScript (JS) te laden door Adobe Commerce te vormen om dossiers te miniaturen en te bundelen.
- elimineer renderen-blokkerende middelen - overweeg het leveren van kritieke eigenschappen JS en CSS inline en het uitstellen van alle niet-kritieke stijlen JS/CSS. Voor begeleiding, zie teruggeven-blokkerende middelen elimineren.
Betrokken producten en versies
Alle gesteunde versies, 2.3 en later 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.
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
Ga naar Admin > Stores > Settings > Configuration > Advanced > Developer > CSS Settings om samenvoegen of miniaturen van CSS in te schakelen.
De opdrachtregel gebruiken
CSS samenvoegen in Adobe Commerce inschakelen op cloudinfrastructuur:
-
Deze opdracht lokaal uitvoeren:
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
Wijzigingen vastleggen in het
app/etc/config.php-bestand en opnieuw implementeren.
CSS-minificatie inschakelen in Adobe Commerce op cloudinfrastructuur:
-
Deze opdracht lokaal uitvoeren:
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
Wijzigingen vastleggen in het
app/etc/config.php-bestand en opnieuw implementeren.
JS-bestanden miniaturen
Admin gebruiken
Ga op de zijbalk van Admin naar Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings .
De opdrachtregel gebruiken
JS-minificatie in Adobe Commerce inschakelen op cloudinfrastructuur:
-
Deze opdracht lokaal uitvoeren:
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
Wijzigingen vastleggen in het
app/etc/config.php-bestand en opnieuw implementeren.
JS-bestanden bundelen
U kunt bundeling inschakelen in de Commerce Admin : Stores > * Settings > Configuration > Advanced > Developer > JavaScript Settings .
U kunt ook ingebouwde Adobe Commerce-bundeling (basisbundeling) inschakelen via de opdrachtregel:
php -f bin/magento config:set dev/js/enable_js_bundling 1
JS-bestanden samenvoegen (niet aanbevolen) merge-js-files
Aanvullende informatie
- Optimalisatie-instellingen aan de clientzijde
- het Bundelen uiteinden in beste praktijken van de Configuratie - derde het bundelen hulpmiddelen, HTTP/2, en begeleiding op afgekeurde JS en CSS samenvoegen
- Gids van de Gebruiker: Het optimaliseren van middeldossiers
- Voorste Gids van de Ontwikkelaar: CSS het samenvoegen, minificatie, en plaatsprestaties
- Geavanceerde JavaScript-pakketten