Performance

I recently worked on a custom module where one of the requirements was to use Font Awesome for custom forms and notifications / alerts.

Most of the people in the Magento community suggest to load Font Awesome via CDN, but this can cause ” blank squares ” and eventually slow down the front-end on slower connections.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="https://use.fontawesome.com/releases/v5.2.0/css/all.css" src_type="url"/>
    </head>
</page>

<?xml version="1.0"?>

<head>

</head>

</page>

So instead using a CDN I decided to add those libraries in Magento which will be merged with the static view files. Here is how it works.

1. Copy files

Go to Host Font Awesome Yourself and download the entire library. The zip file should contain css, js and less files as well as webfonts.

Copy all less files to the following folder.

[Namespace]/[YourModule]/view/frontend/web/css/fontawesome/

1	[Namespace]/[YourModule]/view/frontend/web/css/fontawesome/

Next, copy all files from the webfonts folder to the below path.

[Namespace]/[YourModule]/view/frontend/web/css/webfonts/

1	[Namespace]/[YourModule]/view/frontend/web/css/webfonts/

Make sure you only copy the less files ( no CSS files ).

2. Update Layout XML

Don’t load the library globally if you only need it at one place. In my case, I added those library to my custom controller only. For example:

[Namespace]/[YourModule]/view/frontend/layout/namespace_yourmodule_controller_action.xml

1	[Namespace]/[YourModule]/view/frontend/layout/namespace_yourmodule_controller_action.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Namespace_YourModule::css/fontawesome/fontawesome.css"/>
        <css src="Namespace_YourModule::css/fontawesome/regular.css"/>
        <css src="Namespace_YourModule::css/fontawesome/solid.css"/>
        <css src="Namespace_YourModule::css/style.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            ...
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<head>

</head>

<body>

...

</referenceContainer>

</body>

</page>

3. Template

Once you have re-compiled your code, you should be able to use Front Awesome in your template. For example:

[Namespace]/[YourModule]/view/frontend/templates/form.phtml

1	[Namespace]/[YourModule]/view/frontend/templates/form.phtml

<button class="action-quicklogin">
    <i class="fas fa-sign-in-alt"></i>
</button>

</button>

Btw. the same works for the adminhtml area in ./view/adminhtml/.

If your hosting environment has no database monitoring, you should be able to monitor it manually once in a while or with your own shell script to prevent rapidly growing MySQL tables, because the result of large MySQL tables ( I am talking about 2 – 10 GB with millions of rows ) are often random performance issues, especially if you are using community modules with not well written MySQL queries.

SELECT TABLE_NAME, table_rows, data_length, index_length,
round(((data_length + index_length) / 1024 / 1024),2) "Size in MB"
FROM information_schema.TABLES WHERE table_schema = "{{{YOUR_DATABASE}}}"
ORDER BY (data_length + index_length) DESC;

SELECT TABLE_NAME, table_rows, data_length, index_length,

round(((data_length + index_length) / 1024 / 1024),2) "Size in MB"

FROM information_schema.TABLES WHERE table_schema = "{{{YOUR_DATABASE}}}"

ORDER BY (data_length + index_length) DESC;

This is the output of the query.

| enterprise_logging_event                      |     122389 |    15939572 |      3270656 |      18.32 |
| catalog_product_index_eav                     |     324014 |     4212182 |     18053120 |      21.23 |
| log_visitor_info                              |     182838 |    19706548 |      3599360 |      22.23 |
| catalog_product_index_eav_idx                 |     324014 |     4522245 |     21139456 |      24.47 |
| catalog_product_entity_varchar                |     255303 |    10852180 |     15244288 |      24.89 |
| log_url                                       |     228886 |    10966704 |     15636480 |      25.37 |
| log_url_info                                  |     228886 |    80258352 |      7542784 |      83.73 |
| enterprise_logging_event_changes              |      69184 |   160619752 |      1499136 |     154.61 |
+-----------------------------------------------+------------+-------------+--------------+------------+
586 rows in set (0.05 sec)

| enterprise_logging_event | 122389 | 15939572 | 3270656 | 18.32 |

| catalog_product_index_eav | 324014 | 4212182 | 18053120 | 21.23 |

| log_visitor_info | 182838 | 19706548 | 3599360 | 22.23 |

| catalog_product_index_eav_idx | 324014 | 4522245 | 21139456 | 24.47 |

| catalog_product_entity_varchar | 255303 | 10852180 | 15244288 | 24.89 |

| log_url | 228886 | 10966704 | 15636480 | 25.37 |

| log_url_info | 228886 | 80258352 | 7542784 | 83.73 |

| enterprise_logging_event_changes | 69184 | 160619752 | 1499136 | 154.61 |

+-----------------------------------------------+------------+-------------+--------------+------------+

586 rows in set (0.05 sec)

Tag: Performance

Font Awesome Icons without CDN in Magento2

1. Copy files

2. Update Layout XML

3. Template

Query to get size of database tables in MB