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?

Repo issue: https://github.com/klaro-org/klaro-js/issues/527

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork klaro-3491681

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

anybody created an issue. See original summary.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

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 ;)

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

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?

jan kellermann’s picture

jan kellermann commented

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.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

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...

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue summary: View changes

Here we go: https://github.com/klaro-org/klaro-js/issues/527

catch’s picture

catch
he/him
Primary language English
commented
Related issues: +#3493438: Klaro significantly adds to anonymous visitor page weight
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

@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?

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Title: Klaro library seems way too large? » Klaro library is way too large
catch’s picture

catch
he/him
Primary language English
commented

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.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

@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.

jan kellermann’s picture

jan kellermann commented

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.

jan kellermann’s picture

jan kellermann commented

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.

jan kellermann opened merge request !57

jan kellermann’s picture

jan kellermann commented
Status: Active » Needs review

Opened Merge Request.

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

Please review.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Status: Needs review » Reviewed & tested by the community

I've tested with the JS lib which is just about 25% of the original size, and everything is still working as before. Great work @jan kellermann, let's get this in as discussed.

Just an additional note: when I add the defer attribute like this:

  js:
    /libraries/klaro/dist/klaro-no-translations-no-css.js:
      minified: true
      preprocess: false
      attributes:
        defer: true

it does NOT work any longer. The browser console shows an error that klaro is undefined. So, we probably need to go without that extra step.

jan kellermann’s picture

jan kellermann commented

Yes, for defer is this issue: https://www.drupal.org/project/klaro/issues/3493822
We had to adapt the JS as you mentioned: https://git.drupalcode.org/project/klaro/-/merge_requests/58.diff

jan kellermann’s picture

jan kellermann commented
Status: Reviewed & tested by the community » Fixed

Thank you all for reporting, proposals, testing an review.

I merged the code.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.