it-swarm.com.de

Wie kann ich das Parsen von Javascript auf meiner Drupal 7-Site) verschieben?

Ich arbeite an einigen Leistungsproblemen für eine Site, die ich kürzlich gestartet habe. Wenn ich mir die PageSpeed-Erkenntnisse von Google ansehe, sehe ich, dass die verzögerte Analyse von Javascript eine hohe Priorität auf der Liste hat. Hier ist ein Link:

https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fwww.gastonia.com_2F&mobile=false&rule=DeferParsingJavaScript

Wow, über 1 MB Javascript zum Parsen !! Beachten Sie, dass die meisten davon aus der Facebook-App stammen (möglicherweise besteht die Antwort darin, die fb-App zu entfernen, ha!).

Hat jemand dies in Drupal erfolgreich verschoben? Ich habe versucht, script defer = "defer" zu verwenden, und Google gibt Vorschläge wie "Skript-Tags in Kommentaren hinzufügen und dann eval ()", aber sie geben keine Beispiele und ich habe Probleme, ein gutes Tutorial zu finden. Alle Ressourcen oder Anweisungen werden geschätzt !

Nebenbei bemerkt, wenn Sie in dieser Liste noch etwas sehen, das von Drupal leicht überwunden werden kann, fügen Sie bitte einen Kommentar hinzu. Die fragliche Site ist http://www.gastonia.com für den Fall, dass Sie sich den Quellcode ansehen möchten.

5
blue928

Kasse dieser 2 Projekte:

  • LABjs

    Dieses Projekt zielt auf die Unterstützung von LABjs in Drupal ab. LABjs ist ein JavaScript-Loader, der von Twitter, Vimeo, examiner.com… verwendet wird und alle Skripte parallel lädt (und ausführt), so schnell es der Browser zulässt.

    Eigenschaften

    Nach der Installation sucht dieses Modul automatisch nach all Ihrem JavaScript und LABjsify. Dadurch wird das gesamte JavaScript maximal so parallel parallel geladen, wie es der Browser unterstützt. Der andere Vorteil ist, dass das Laden von Skripten das Rendern von Seiten nicht blockiert.

  • HeadJS

    Das Headjs-Modul verwendet die großartige head.js-Bibliothek desselben Autors von jQuery Tools, um die Ladezeiten für Javascript erheblich zu verbessern, indem nur ein Skript zum Kopf des Dokuments hinzugefügt und anschließend alle anderen Skriptdateien parallel heruntergeladen werden.

    Da das gleichzeitige Herunterladen vieler kleiner Dateien schneller ist als das Herunterladen einer großen Datei, sorgt head.js dafür, dass Seiten blitzschnell geladen werden, und ist besonders für mobile Browser von Vorteil, die die Größe einzeln zwischengespeicherter Javascript-Dateien begrenzen.

3
mikeytown2

Angesichts der Tatsache, dass fast alles in Javascript für Drupal durch eine $(document).ready() in jQuery ausgelöst wird, sehe ich keinen wirklichen Vorteil bei der Verwendung von defer Ich hatte vor kurzem echte Kopfschmerzen1 von einem Code, den ich geerbt habe, der die beiden vermischte.

Eine Empfehlung (ich denke, YSlow schlägt dies vor), die Sie tun können, besteht darin, Skripte kurz vor dem Schließen </body> An das Ende zu verschieben. Dies würde bedeuten, dass Sie <?php print $scripts; ?> In Ihre html.tpl.php verschieben. Obwohl das Parsen nicht verschoben wird, verzögert es das Laden, sodass Ihre Seite schneller gerendert wird, und ich hatte nie Probleme damit, Drupal dies zu tun).

Wenn Sie den Aufschub hinzufügen möchten, müssen Sie hook_js_alter implementieren:

function mymodule_js_alter (&$javascript)
{
  $javascript['misc/drupal.js']['defer'] = TRUE;
}

Wenn Sie alles verschieben möchten , können Sie es versuchen

function mymodule_js_alter (&$javascript)
{
  foreach ($javascript as $key => $value) {
    $javascript[$key]['defer'] = TRUE;
  }
}

Andernfalls haben die meisten normalen Pagespeed-Korrekturen nicht viel mit Drupal selbst) zu tun. Solange Sie mit aktivierter JS- und CSS-Aggregation bereitstellen, sollten Sie gut sein. Konfigurieren Sie Apache so, dass komprimierte Antworten verwendet werden und anständige Cache-Lebensdauern und ich glaube nicht, dass PageSpeed ​​sich über viel beschweren und Ihnen alle A und B geben wird.

4
mpdonadio

Beachten Sie, dass die meisten dieser Drittanbieter, wenn nicht alle, CDNs verwenden und häufig weit entfernte Ablaufheader haben. Wenn Sie sich Firebug ansehen und sicherstellen, dass Browser-Cache deaktivieren in NET deaktiviert ist, werden Sie sehen, wie die meisten Anforderungen aussehen. Ich habe mir meine Website angesehen und es gibt nur ungefähr 4 Anfragen, selbst mit Facebook- und Google-Widgets auf der Seite. Die gute Nachricht ist, dass alle das Gleiche tun. Wenn Sie sich einige Websites ansehen, sind sie weit mehr als 1 MB groß.

Es wird empfohlen, die Anzahl der Anforderungen auf jeder Seite zu reduzieren. Wenn Sie jedoch bestimmte Funktionen an die Anforderungen anpassen müssen, ist es hilfreich, zukünftige Abläufe zu verwenden und Anforderungen auf parallele Server zu verteilen.

1
Michael E

Um @mpdonadio zu erweitern, würde dies alles unter Drupal 8) verschieben

/**
 * @file
 * Overrides insert.js in Insert module using hook_js_alter
 */
use Drupal\Core\Asset\AttachedAssetsInterface;

/**
 * Implements hook_js_alter().
 */
function override_insert_js_js_alter(&$javascript, \Drupal\Core\Asset\AttachedAssetsInterface $assets)
{
    foreach ($javascript as $key => $value) {
      $javascript[$key]['attributes']['defer'] = TRUE;
    }
}
0
Ray Foss