hidro/core-web-vitals

Improve Core Web Vital score for Magento 2 website, Magento 2.4

Installs: 2 303

Dependents: 0

Suggesters: 0

Security: 0

Stars: 15

Watchers: 2

Forks: 2

Open Issues: 0

Type:magento2-module

2.4.4 2024-03-07 04:41 UTC

This package is auto-updated.

Last update: 2024-07-17 09:42:55 UTC


README

  • Version pattern: [Magento Version].x.x
    • Ex: Version format 2.4.x.x (This pattern for Magento 2.4).

This modules allows you modify the HTML, Javascript, CSS, update the position, optimize CWV (Core Web Vitals) scores.

By: Hidro Le. Website: https://www.solutiontutorials.com

By me a coffee:

#More packages:

- Main Functionalities

  • Minify HTML code.
  • Adding https/2 push.
  • Preload fonts
  • Lazy loading Iframe, Images. (You can choose the behavior: Origin browser or Javascript)
  • Move javascript to footer.
  • Defer javascript codes.
  • Defer/preload CSS files by using javascript/browser preload.
  • Minify inline CSS, Javascript.
  • Active the first item of Owl Carousel first.

- Specifications

  • You have to disable merge css if you want to use CSS modifier functions.

Installation

Type 1: Zip file

  • Unzip the zip file in app/code/Hidro
  • Enable the module by running php bin/magento module:enable Hidro_CoreWebVitals
  • Apply database updates by running php bin/magento setup:upgrade*
  • Flush the cache by running php bin/magento cache:flush

Type 2: Composer

  • https://packagist.org/packages/hidro/core-web-vitals
  • Make the module available in a composer repository for example:
    • public repository packagist.org
    • public github repository as vcs
  • Install the module composer by running composer require hidro/core-web-vitals
  • enable the module by running php bin/magento module:enable Hidro_CoreWebVitals
  • apply database updates by running php bin/magento setup:upgrade
  • Flush the cache by running php bin/magento cache:flush

After install the module:

  • bin/magento config:set dev/js/minify_files 1 -l;
  • bin/magento config:set dev/js/enable_js_bundling 1 -l;
  • bin/magento config:set dev/css/minify_files 1 -l;
  • bin/magento config:set dev/css/merge_css_files 0 -l;
  • bin/magento config:set dev/template/minify_html 1 -l;
  • bin/magento deploy:mode:set production;

DEVELOP

  • app/code/Hidro/CoreWebVitals/Model/Asset/CriticalCss.php:109
    • Adding a custom critical css for special body class
  • Override default.css for updating entire default critical css
  • Override the core_vital.css for adding special custom css
  • Override fonts.css for updating webfont.