Klaro library seems way too large?

Created on 4 December 2024, 14 days ago

Problem/Motivation

Looking at the source code and SEO / performance analysis, I saw that klaro/dist/klaro-no-css.js is way too large:

  • /libraries/klaro/dist/klaro-no-css.js (863,27 kB)
  • /modules/contrib/klaro/js/klaro.drupal.js (25,34 kB)

But the Klaro GitHub page points out:

Small footprint: The minified+gzipped JS is only 37 kB and contains everything that is required, including style sheets and translations.

So seems something is wrong here?

Or maybe I'm missing something or doing something wrong?

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

🇩🇪Germany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Anybody
  • 🇩🇪Germany Anybody Porta Westfalica

    Any ideas? I think this is a really major issue and a blocker. Did I make a mistake checking the file size?

    BTW shouldn't Drupal use klaro-no-translations-no-css.js as all translations come from Drupal?! That's at least "only" 207 KB which is also way too much, but > 600 kb better ;)

  • 🇩🇪Germany Anybody Porta Westfalica

    Another interesting thing is, that klaro.js has 230 KB at GitHub. So I think we need to understand the differences and why the project page says 30kb vs. x10 in real size. Or does gzip compress it that much?

  • 🇩🇪Germany jan kellermann

    In my installation klaro-no-css.js has 208K and klaro-no-translations-no-css.js 208K also. I therefore see no urgent need for action here.

    In the case that a fork is used at a later date, we can think again about minimization and the like. Slimmer would indeed be nicer.

  • 🇩🇪Germany Anybody Porta Westfalica

    Thanks for the check and feedback @jan kellermann! Well I think 208K is still way too much! Entire jQuery lib only has 80K and that's large already.
    37K as written on the module page would be acceptable, I think.

    Have a look at Drupal core's "misc" folder. The js scripts there are all much smaller! So I'd vote to keep this major?
    I'll open a bug report at the repo.

    We should consider switching to klaro-no-translations-no-css.js by name, right? Also makes no sense to me that they have the same size...

  • 🇬🇧United Kingdom catch
  • 🇩🇪Germany Anybody Porta Westfalica

    @jan kellermann are you in contact with the Klaro (Lib) maintainers? Maybe they should be informed about the Drupal use in general and asked to cooperate, I think it's a maximum Marketing win for them, even if the Open Source lib is used. Still they don't seem very active in git GitHub repo?

  • 🇩🇪Germany Anybody Porta Westfalica
  • 🇬🇧United Kingdom catch

    Just (re-)discovered this doing performance testing of Drupal CMS, the Klaro library is responsible for over 90% of the JavaScript (whether measuring compressed or uncompressed) served to anonymous users.

    One additional thing I noticed on Drupal CMS - the configuration it uses has just a link in the footer, which then opens the cookie consent modal.

    It ought to be possible to put all of the code supporting the modal in a separate library that is only loaded when that link is clicked - this would significantly reduce the impact.

  • 🇩🇪Germany jurgenhaas Gottmadingen

    @catch that's what I had in mind too. And we're about to check with the maintainers of that library, if anything with the build process went wrong. Thinking that as e.g. the no-translations files still contain translations, and the sizes of them, as well as the no-css files, don't significantly differ from the full library.

  • 🇩🇪Germany jan kellermann

    I fixed this bug in klaro-js and opened a pull request.

    New file size would be 164K. I look if we can compress more with webpack.

  • 🇩🇪Germany jan kellermann

    Klaro! is build with compatibility for older browsers. According to Drupal's browser requirements I adapted the build script for browserslist to defaults.

    File Size is now 64K.

  • 🇩🇪Germany jan kellermann

    Opened Merge Request.

    Plese use these files for Testing:
    https://github.com/werk21/klaro-js/tree/master/dist

    Please review.

Production build 0.71.5 2024