prestashop: disable jquery css files to make your site faster

if you don't really care or use jquery on your site, it doesn't make sense for it to load on the <head> every page on your site.

To disable its load its kind of complicated, I just did it the "non elegant" way.

This is the regular code which usually loads on every single page.

<link rel="stylesheet" href="https://www.YOURSITE.COM/themes/classic/assets/css/theme.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.YOURSITE.COM/modules/blockreassurance/views/dist/front.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.YOURSITE.COM/modules/ps_searchbar/ps_searchbar.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.YOURSITE.COM/js/jquery/ui/themes/base/minified/jquery-ui.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.YOURSITE.COM/js/jquery/ui/themes/base/minified/jquery.ui.theme.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.YOURSITE.COM/themes/classic/assets/css/custom.css" type="text/css" media="all">

I want eliminate the loading of these particular two lines:

<link rel="stylesheet" href="https://www.YOURSITE.COM/js/jquery/ui/themes/base/minified/jquery-ui.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://www.YOURSITE.COM/js/jquery/ui/themes/base/minified/jquery.ui.theme.min.css" type="text/css" media="all">

The load of these stylesheets comes from the file

../themes/classic/templates/_partials/stylesheets.tpl

specifically from this part of the code:

{foreach $stylesheets.external as $stylesheet}
<link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
{/foreach}

which in part calls a variable $stylesheets.external that is constructed from several places, I will just "comment/cancel" the portion of the code that adds these particular jquery css files to the <head> of all my pages.

the function that adds these stylesheets to the variable is in:

../classes/controller/FrontController.php

the function is called addJqueryUI:

public function addJqueryUI($component, $theme = 'base', $check_dependencies = true)
{
$css_theme_path = '/js/jquery/ui/themes/' . $theme . '/minified/jquery.ui.theme.min.css';
$css_path = '/js/jquery/ui/themes/' . $theme . '/minified/jquery-ui.min.css';
$js_path = '/js/jquery/ui/jquery-ui.min.js';

$this->registerStylesheet('jquery-ui-theme', $css_theme_path, ['media' => 'all', 'priority' => 95]);
$this->registerStylesheet('jquery-ui', $css_path, ['media' => 'all', 'priority' => 90]);
$this->registerJavascript('jquery-ui', $js_path, ['position' => 'bottom', 'priority' => 90]);
}

comment the last 3 lines:

public function addJqueryUI($component, $theme = 'base', $check_dependencies = true)
{
$css_theme_path = '/js/jquery/ui/themes/' . $theme . '/minified/jquery.ui.theme.min.css';
$css_path = '/js/jquery/ui/themes/' . $theme . '/minified/jquery-ui.min.css';
$js_path = '/js/jquery/ui/jquery-ui.min.js';

// $this->registerStylesheet('jquery-ui-theme', $css_theme_path, ['media' => 'all', 'priority' => 95]);
// $this->registerStylesheet('jquery-ui', $css_path, ['media' => 'all', 'priority' => 90]);
// $this->registerJavascript('jquery-ui', $js_path, ['position' => 'bottom', 'priority' => 90]);
}

Problem solved, welcome to the butcher(iesk) way to solve problems!.

Leave a Reply Cancel reply