it-swarm.com.de

Wie richte ich externes CSS und JS ein, um ein Blockieren des Renderns durch Google PageSpeed ​​zu verhindern?

Wir verwenden Googles PageSpeed , um die Website zu optimieren. Einige ständige Probleme sind das Rendern von CSS und JS. Wir haben Folgendes in unserer Datei library.xml versucht, können jedoch in D8 keinen geeigneten Weg finden, dies zu tun.

Wir haben festgestellt, dass dies ein Problem mit unseren lokalen aggregierten CSS-Dateien ist, die aus unserem Thema stammen, sowie mit externem CSS und JS

Wir haben es versucht:

  1. AddAgg Modul, aber das löst das Problem immer noch nicht, da wir immer noch das Rendern von CSS und JS erhalten
  2. der folgende Code ist das, was wir mit und ohne Vorprozess = false versucht haben. Wenn Sie die Attribute auf async: true setzen, wird die Seite nicht richtig geladen, daher verwenden wir defer: true
  3. Wir haben auch versucht, den CSS-Platzhalter und den JS-Platzhalter aus unserer Datei html.html.twig an den unteren Rand der Seite zu verschieben, aber das hat Nebenwirkungen.

mytheme.libraries.yml

fonts:
  css:
    theme:
      //fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i: { type: external, preprocess: false, minified: true }
      //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css: { type: external, preprocess: false, minified: true }

slick_carousel:
  css:
    theme:
      //cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css: {type: external,preprocess: false, minified: true}
  js:
    //cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js: { type: external, preprocess: false, minified: true, attributes: { defer: true }}

Was ist der richtige Weg, um externes und lokales CSS und JS hinzuzufügen, ohne das Rendern zu blockieren?

2
usernameabc

JavaScript verschieben ist, wie man js macht. CSS ist viel schwieriger. Sie müssen kritisches CSS generieren und inline erstellen und dann das CSS weiterhin auf verzögerte Weise laden. Dies erklärt, wie dies mit der 7.x-Version von AdvAgg gemacht wird. Die 8.x-Version sollte nicht so weit weg sein.

https://groups.drupal.org/node/517292

Schriftarten sind ihre eigene Besonderheit. Das Advagg Relocate-Submodul übernimmt den Browser-Cache-Teil. Das Advagg-Schriftmodul macht das Laden von Schriftarten asynchron.

Dies ist die am einfachsten zu verwendende Website zum Generieren kritischer CSS https://www.sitelocity.com/critical-path-css-generator , liefert jedoch möglicherweise nicht die besten Ergebnisse.

2
mikeytown2