Skip to main content

CSS or JS Present on All Pages

Sometimes, to ensure proper functionality, modules load CSS or JS files on all pages of the site. This can be problematic if the file is large or unnecessary on all pages.

For example, if our module works on the checkout in the front office, there's no need to load the assets on every page. Static resources should only be present on the pages where they are used.

Module Resource Analysis​

Starting from the module's functionality, let's see which resources it adds and where. If our module works on the product page, we can add a condition when adding the asset to ensure it is only added in that Controller.

Optimization Example​

Suppose the module loads a product.js and product.css file. To optimize, we can modify the module's code to load these files only on the product pages.

public function hookDisplayHeader($params)
{
    // Check if the current controller is the ProductController
    if ($this->context->controller instanceof ProductController) {
        // Add specific JS and CSS files for the product
        $this->context->controller->addJS($this->_path . 'views/js/product.js');
        $this->context->controller->addCSS($this->_path . 'views/css/product.css');
    }
}

Optimization Strategy​

  1. Identify Resources:

    • Analyze which CSS and JS resources are loaded by the module and on which pages they are actually needed.

  2. Conditional Loading:

    • Use conditions to load resources only on relevant pages, thus reducing unnecessary load on other pages.

  3. Verify Changes:

    • After implementing the changes, verify that the resources are correctly loaded only on the intended pages and that the module functions as desired.

Conclusion​

Optimizing the loading of static resources like CSS and JS is essential for improving site performance. Ensure that resources are only loaded when necessary, avoiding unnecessarily burdening unrelated pages. This practice will not only improve loading times but also the overall user experience.