Frontend Performance Code Audit Checklist for Magento 2

A code audit can help to prevent more serious issues in the future. It ensures improved quality, maturity, and maintainability and overall performance for the site. 

In this Frontend Performance Code Audit Checklist for Magento 2 (now Adobe Commerce), I’ll explain what aspects need to be checked in PHTML and LESS/CSS files, as well as how to correct them.

Rules, and key DOs and DON’Ts:

1. Remove/Avoid Inline And Internal CSS

• Adding the code to the PHTML document can increase the page’s size and loading time. 
• One of the disadvantages of inline CSS is that the files are not cached. This means each visit to the browser is treated as a new one and acted upon when a visitor goes to another page. Caching is the better choice especially when the project is complex.

2. Remove/Avoid Internal Script

• All scripts should be external, for both for maintenance and performance. (Why performance, you ask? Because if the code is separate, it is easily cached by browsers).
• JavaScript doesn’t belong in the HTML code. Furthermore, if the code contains special characters (such as <, >) it even creates problems.
• The scalability of the web has evolved. Due to the delay caused by making several HTTP requests, reducing the number of queries has become a key factor to bear in mind. This complicates the answer: in most circumstances, having JavaScript externalyl is still desirable. However, in some cases—particularly for extremely few lines of code—inlining them into the site’s HTML makes more sense.

Recommended Reads: Front End Optimization To Improve Your Magento Store Performance

3. Avoid Using The !Important Keyword In LESS/CSS

• When an !important rule is applied to a style declaration, it takes priority over any other declaration. Although !important technically has nothing to do with specificity, it interacts with it directly. However, using !important is bad practise and should be avoided because it complicates debugging by interrupting natural cascading in your stylesheets.

Some rules of thumb:

• Always look for a way to use specificity before even considering !important
• Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
• Never use !important when you’re writing a plugin.
• Never use !important on site-wide CSS.

Instead of using !important, consider:

1. Make better use of the CSS cascade
2. Use more specific rules. By indicating one or more elements before the element you’re selecting, the rule becomes more specific and gets higher priority:

<div id=”wrap”>

  <h1>Testing</h1>

</div>

div#wrap h1{ color: #FF0000; }

div h1{ color: #0000FF; }

h1{ color: #000000; }

No matter the order, the Testing will be #FF0000 because that rule is most specific. (Also, the rule for #000000 overwrites the rule for #0000FF)

4. Check For Any Duplicate Code In LESS/CSS

1. Duplication decreases your code quality.
2. It also increases security risks.
3. Duplicate code will make your program lengthy and bulky.

div{

  margin: 2rem 3rem;

  margin-right: 3rem;

}

The above example has the same right margin, so there is no use for that second line of margin-right. It also adds an extra line and increases the file size.

5. Lastly, Ensure That The Code Has The Necessary Attributes, Structure, And Tags Used In Accordance With The Priorities. 

For example, if we are using <strong> tag we can use <b> tag because the b tag is the first priority in HTML code structure. It will improve optimal loading and Core Web Vitals

I hope this checklist is helpful to you. Wishing you continued success while creating great Magento 2/Adobe Commerce experiences.