Lesti::Merge

Fork me on GitHub

Lesti::Merge merges Javascript and Css smarter than normal magento.logo-450x450 Js and Css will be merged in disjoint packages.

What is the problem with Merging in Magento?

The reason behind merging js and css is to reduce the number of requests. So magento merges all Javascript files into one big. The same for Css. The merged filename is a md5-hash of all filenames. A very cool solution I would say. But here comes the problem. On the homepage you have 13 js-files that will be merged to 40a5be18a810655402dcb6fd2e75b5a9.js. All this files will be added by default-handle. The file 40a5be18a810655402dcb6fd2e75b5a9.js is now in the cache of the browser. These 13 files are also on productpage. Plus 4 js-files special for productpage. What happens? Magento builds a new merged file. The new file is 86880af48b4f45c8333c5537e2100e71.js. The browser didn’t know this file and sends a request to the server. But 80% of this file are also the content of the first merged file and are already in the browsercache. The same mistake on checkout and so on. If only one file is added to the merge, the browser has to reload the content of all 13 js-files that already in cache again.

Here is a little graph that visualize the problem. I visited the homepgae, the productpage and the cart. The orange nodes are the merges and the grey nodes are the skin-files. The browser only loads the roange nodes. But you can see, every of the 13 js-files added by default-handle is in every of the 3 big merges. The graph is very big. A solution would be more disjoint graphs.

default-merge

What is the solution for this problem?

First, the solution wasn’t my idea. Here is the post from Fishpig that explains the problem and a solution. This post inspired me to write this Extension.

We only have to build disjointed packages. And the reference for every package is the handle were a javascript-file is added. In the end you have a default-merge with the 13 javascript files from the beginning and a product-merge with the 4 javascript files only for product. And so on. After that we have the same number of requests, but no javascript content is load double.

Here is a graph that shows every loaded skin-files after visiting homepage, productpage and cart with enabled Lesti::Merge. You see, all loaded files are disjoint.

lesti-merge

Were are the configurations?

You can enable the extension under System => Configuration => Developer => Javascript/CSS Settings.

Magento Version?

Lesti_Merge is compatible with Magento CE 1.5, 1.6, 1.6.1, 1.6.2.0, 1.7, 1.8

Possible conflicts?

Lesti::Merge rewrites the model core/layout_update.

33 thoughts on “Lesti::Merge”

  1. Wow! I really loved this plugin, it’s a dream coming true! Installed easily and works really well, but I encountered some problems of the merging breaking down my banner slider Jquery in the homepage and in the products the jquery also broke. Is there a place where I can add these to be compiled also?

    Cheers!

      1. The default merging from magento also didn’t work, the jquery is being added through page.xml:

        default translate=”label” module=”page”>
        All Pages

        prototype/prototype.js
        lib/ccard.js
        prototype/validation.js
        scriptaculous/builder.js
        scriptaculous/effects.js
        scriptaculous/dragdrop.js
        scriptaculous/controls.js
        scriptaculous/slider.js
        varien/js.js
        varien/form.js
        varien/menu.js
        mage/translate.js
        mage/cookies.js

        skin_jscarousel/js/jquery.ui.widget.js
        skin_jscarousel/js/jquery.touchify.js
        skin_jscarousel/js/jquery.ui.carousel.js
        skin_jscarousel/js/jquery-ui-1.8.11.custom.min.js
        skin_jscarousel/js/jquery-ui-touchCarousel.js
        skin_csscarousel/css/carousel.css

        css/styles.css

        skin_csscss/styles-ie.csslt IE 8
        css/widgets.css
        css/print.cssmedia=”print”

        jslib/ds-sleight.jslt IE 7
        skin_jsjs/ie6.jslt IE 7

        skin_jsmobilemenu/jquery.min.js
        skin_jsmobilemenu/jquery-mobilemenu.js

        skin_jsbanner/js/jquery.mobile.customized.min.js
        skin_jsbanner/js/jquery.easing.1.3.js
        skin_jsbanner/js/camera.min.js
        banner/css/banner.css

        css/mobile.css

        Thanks for helping out!

        1. Mostly that’s a problem of the ordering skin-files. If all JS is in one file you have to be sure that jquery is before every depending js-file in the merged file. I can help you if it isn’t working.

          Best Regards
          Gordon

  2. Good evening Gordon,

    We use your module on several magento website and we noticed that the problem was due to the string in the second params addChild :

    if the string is equal to :
    ‘handle=”‘ . $handle . ‘”‘
    everything is fine.

    ‘title=”‘ . $handle . ‘”‘
    the css is not interpretated correctly

    Like you said before, it appear to coming from ordering files.

    I will take some time to investigate.

    By the way, your extensions are brilliant !

    Sincerly,

    Ilan

    1. Hello Ilan,
      thank you for this information. I didn’t know, why it breaks. My problem is; I need a attribute that has no effect and is supported by w3c. And title was the only one that comes into my mind. Did you have an other idea? Maybe I shouldn’t add an attribute and seperate the xml-tags in layout on an other way.

      Best Regards
      Gordon

  3. I am trying to use your extension in my store. I am using fancybox on product view page and although I can see both the js and css in the loaded files, my fancybox will not work with your extension activated.

      1. Hi Gordon,

        We are having a similar problem to nikl. With the default css merge, the product image css file is being merged with the default css (so image’s work correctly as it’s merged at the end of the css file), however with Lesti:Merge it is including it in the catalog_product_view css merged file.

        The issue occurs because the catalog_product_view css is above the default css merged file so the css elements aren’t being loaded in the original order and causes overrides of the css.

        Any way to change the order so the default css merged file is at the start and the rest follow after?

        Thanks
        Jonathan

  4. Hello,

    so I really I want to use this plugin as it makes my page about 10% smaller. I want to combine it with an extension called UI Optimazation to compress the css and js files using google minify/js tidy. If I just merge the files using your plugin, everything works fine. However, if I use merge by handle, the css breaks and the rules don’t get applied although the css-files are loaded and correctly displayed if i open them viewing the source code. I really don’t know what the problem is. I deleted the cache and everything but still no success. I have to add, the plugin actually works if I do everything in a very special order of which I am still not 100% sure of. It is similar to turn everything off (UI optimization and your plugin), delete cache, turn on UI, then turn on your plugin. But even that doesn’t work every time.

    Thanks!

    1. Hello Kilsen,
      I’m sorry, I would like to help you, but I haven’t enough time. If you can’t be 100% sure that my extension works fine with your minification, your css and js, I wouldn’t recommend to use my extension. This extension is just grown out of an very cool idea (fishpig.co.uk) that works in the most cases, but sadly not in every case. I’m very sorry, better don’t use.

      Best Regards
      Gordon

  5. Hello Gordon

    We have installed both this extension and your FPC extension in a Magento build – the FPC is working superbly, but we’re having some difficulty with this extension.

    Using the standard Magento merge options works fine, but for some reason when we enable merge by handle, it does not load jQuery – which a number of our scripts rely upon. I’m not sure why it doesn’t – the call to action the load is within our page.xml and the calls above and below this are loaded.

    Any ideas of things to troubleshoot?

    Thanks,

    Bryn

      1. Hello Gordon

        I logged the output from this class as suggested – and I can see that the jquery.min.js is indeed one of the addJS items.

        On further investigation, it appears as though there are 2 JS files generated – one has a title of “default” and the other has no title. The second, title-less file, contains the jQuery library – and this is naturally triggering errors due to the calls in the default JS file.

        Any ideas why I am getting 2 files generated (both of which are effectively default – as I have jQuery running some generic functions on each page)?

        Thanks for your help.

        Best Regards,

        Bryn

        1. The file without title isn’t normal. I did saw that just one time. Can it be, that you add the .js also over layout-xml in cms-page model or so? If it doesn’t work, better remove this extension.

  6. I have been able to isolate the cause of the issue but not come up with a perfect fix.

    It’s related to the ManaDev layered navigation extension we have – there is a config option, which is default, to load the minified jQuery library, which when enabled causes this issue. However, disabling the loading within the extension and leaving it present in the addJs method within page.xml does not consistently load it – some pages work, and some do not attempt to load jQuery at all (the category page, for instance).

    I have no idea which there is such inconsistency, but not too much time to devote to troubleshooting it. I think I will have to leave your extension disabled, unless you have any further suggestions?

    Thanks,

    Bryn

  7. Hi,

    first of all I wish you all the best in 2014…

    I just installed your extension and got this error on frond and back end:
    Fatal error: Call to a member function addHandle() on a non-object in /home/XXXXXXX/public_html/includes/src/__default.php on line 13707

    Any idea what can be wrong?

    Thanks

      1. Hi,

        the problem is I can’t get to the compiler, because this error is happen on backend as well.
        I use Magento 1.8

        Thanks for any suggestion

        1. Then disable module via etc/modules/Lesti_Merge.xml and flush your caches (in normal case just remove content of var/cache).

    1. Yes, I would disable module, flush cache and disable compiler. After that you can give the module a next try if you want to.

  8. Dear Lesti,

    I have a major problem the files are created but they ain’t used by magento?

    How is this possible i am using the blank theme?

    Kind regards,
    Lars

    1. Hello Lars,
      I’m not sure. But I guess this can happen if you add the same js/css file via layout.xml and in layout-area of cms-page for example. i did solve such problem by logging in Lesti_Merge_Core_Model_Layout_Update.

      Best Regards
      Gordon

  9. Hi Gordon,

    thank you very much for this module! I think I found a problem or I am missing something important.

    When you add a “title” attribute to a CSS link element, the stylesheet will no longer be persistent but will instead become sort of optional:

    Therefore, any link to a stylesheet that includes a title attribute cannot be persistent, and is likely to be ignored by the Web browser. Any link element referring to a stylesheet with a title attribute must be either preferred or alternate, depending on the value of the rel attribute.

    Source: Correctly Using Titles With External Stylesheets

    We run a site with many different areas and multiple different stylesheet. I was wondering why the stylesheets and the rules were there but weren’t applied in Firefox. This seems to be the reason.

    When I changed the attribute from “title” to “data-lesti” it worked.

    Maybe you wish to consider this or tell me that I’m wrong and why ;)

    Thanks, Patrick

  10. Looks like this one doesn’t work with Magento 1.8.1. A shame, was trying to put it on my site.. Do you have any other suggestions that would do the same thing as your extension but work with 1.8.1?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>