Problem/Motivation

Currently, the klaro-no-css.js is defined in the library as following:

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

This triggers a warning on Google Pagespeed:

Eliminate render-blocking resources Potential savings of 300 ms
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. 

…dist/klaro-no-css.js?sofled 69.4 KiB 300 ms

Can we consider adding async or defer to the library?

Steps to reproduce

Tested on Drupal CMS rc1 with Google Pagespeed.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork klaro-3493822

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

poker10 created an issue. See original summary.

jan kellermann’s picture

jan kellermann commented
Priority: Normal » Major

In original documentation of klaro-js the loading with "defer" is recommended.
We run in some race-conditions with our own drupal integration and removed the defer-flag.

We will check this again - unfortunately, the impact assessment is not trivial.

jan kellermann opened merge request !58

jan kellermann’s picture

jan kellermann commented
Status: Active » Needs review

Created MR.

Please review.

jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented
Version: 3.0.0-rc14 » 3.x-dev
Status: Needs review » Needs work

When removing klaro as a function argument in line 1, this causes follow-up issues, e.g. in line 15, line 39 and below, where the klaro object is being referenced. I'm not sure how that can be resolved. Tha browser console prints error messages "klaro is not defined".

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

FYI: I think defer would be the right choice logically and based on our experiences with COOKiES. Still if claro is loaded at the end of the page, the effect should be minimal.
See similar comments here: #3493214: COOKiES increases LCP (Google pagespeed)

catch’s picture

catch
he/him
Primary language English
commented

Does the Klaro Drupal js need to be set to preprocess: false and also set to defer to match? Then the browser should still load the klaro library first, which would mean all the js ought to continue to work then.

jan kellermann’s picture

jan kellermann commented

Yes, I suppose. This is on our list of measures. However, this also delays the rendering of the contextual content dialogs - which probably leads to a worsening of the LCP e.g. for a YouTube video on the start page.

catch’s picture

catch
he/him
Primary language English
commented

I personally would not be too worried about making LCP of a youtube video worse, because it's already bad, and using something like https://www.drupal.org/project/lite_youtube_embed would make it much better, and mean that third party js would only be loaded when it's interacted with, not when the page is loaded.

No idea how that module interacts with Klaro though, if it blocks the lite youtube render too, then that'd be trickier.

Also all the pages without a youtube embed would be faster anyway.

jurgenhaas’s picture

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

This works like a charm. RTBC !!!

jan kellermann’s picture

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

Thank you for feedback and testing.

I merged the code.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

Great work @jan kellermann thank you!!

Status: Fixed » Closed (fixed)

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

antonio.bertolini’s picture

antonio.bertolini commented

Hi all,
at line 47 of klaro.drupal.js

      // Store reference to manager once.
      if (!Drupal.behaviors.klaro.manager) {
        Drupal.behaviors.klaro.manager = klaro.getManager(Drupal.behaviors.klaro.config); //<--- HERE
      }

I've Uncaught ReferenceError: klaro is not defined.

Any ideas?

antonio.bertolini’s picture

antonio.bertolini commented

My bad.... incomplete library install...
Sorry!!!!!!
The patch works correctly!

Antonio