Durch die Beschränkung auf die Kontaktseite hast Du ja schon enorm viel gelöst.
Für die Kontaktseite selbst, stellt sich die Frage, ob das Skript klein genug ist (Nein, in diesem Fall) oder asynchron geladen werden kann:
https://developers.google.com/speed/docs/insights/BlockingJS?hl=de
Gruß, Torsten
Hallo Torsten
Danke für deine Antwort. Ich probiers mal mit async.
Aber wo ist in diesem Plugin die Funktion wpcf7_enqueue_styles?
Ich hab in wp-contact-form-7.php und allen anderen php Dateien dieses Plugins nachgeschaut und diese Funktion nicht gefunden.
Weisst du wo diese Funktion beheimatet ist?
viele Grüsse
theo
Das wird nicht einfach, da wp_enqueue_scripts kein Setzen von Attributen wie async oder defer erlaubt:
https://core.trac.wordpress.org/ticket/12009
Ein Workaround von Toscho auf Stackexchange wird verlinkt, aber du willst nicht wirklich das Plugin selbst ändern, oder? Was tun beim nächsten Update?
Gruß, Torsten
Danke für die Antwort und den Link.
Nein, das Plugin will ich nicht verändern. Einfach die wpc7-Scripts in meinen js Ordner kopieren und dann selbst enqueuen. Das sollt doch gehen.
viele Grüsse
theo
Klar, bleibt die Frage nach dem Wie. Noch gibt es da keinen sauberen Weg …
Gruß, Torsten
Hi Tosten
Auf localhost hat’s geklappt.
Zunächst habe ich es mit async probiert. Aber das hat nicht geklappt.
Die im Framework definierten Funktionen wurden vom Script nicht gefunden. Dann hab ich es mit defer probiert.
Unter dem link:
http://wordpress.stackexchange.com/questions/139325/defer-all-js-except-certain-ones-in-functions-php-file
hab ich eine Funktion für defer gefunden.
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
return "$url' defer='defer";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Diese hab ich in die function.php kopiert.
Alle cf7-Scripts und styles hab ich entkoppelt und dann in der functions.php enqueued:
/*contact Form 7 scripts laden*/
function add_cf7_scripts() {
if( is_page(array('31','48'))) {
wp_register_script( 'jquery.form.min', get_stylesheet_directory_uri() . '/js/jquery.form.min.js','','', true);
wp_enqueue_script('jquery.form.min', array('jquery'));// End
wp_register_script( 'cf7-scripts', get_stylesheet_directory_uri() . '/js/cf7-scripts.js','','', true);
wp_enqueue_script('cf7-scripts', array('jquery'));// End
}
}
add_action('wp_enqueue_scripts', 'add_cf7_scripts');
Das Dom zeigt mir nun für die scipts das Attribut defer an.
Also gehe ich davon aus, dass diese Scripts nicht mehr above the fold sind.
Jetzt teste ich die Sache live.
viele Grüsse
theo
Ja, das ist die gleiche Lösung, die auch im Trac-Ticket verlinkten Stackexchange-Eintrag von Toscho benutzt wird, die ich weiter oben meinte:
http://wordpress.stackexchange.com/questions/38319/how-to-add-defer-defer-tag-in-plugin-javascripts/38335#38335
Der Umweg über den clean_url-Filter.
Wäre toll, wenn Du weiter hier berichtest, ob es geklappt hat.
Beste Grüße
Torsten
Hallo Tosten
Die Defer Funktion hat was gebracht.
Ich hab das Attribut gleich allen .js zugewiesen.
Die Analyse auf google pageSpeed Insights hat eine Steigerung von 85 auf 94 Punkte ergeben. Für die schwere Formularseite mit der Google-Map habe ich ebenfalls eine markante Steigerung erreicht. Keine Scripts mehr above the fold.
Scheint also zu klappen.
Beste Grüsse aus Basel
theo
Noch eine Anmerkung.
Ich habe das Abkoppeln der cf7 scripts rückgängig gemacht.
Die Scripts greifen auf Bilder, die in der Plugin Hierarchie festgelegt sind, zurück. Man müsste jetzt das Script umschreiben. Deshalb ist es einfacher die Original-Scripts auf der entsprechenden Seite zu laden:
<?php /*contact form 7 laden*/
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
?>
<?php get_header(); ?>
Die defer-funktion greift auch bei dieser Version.
viele Grüsse
theo
Hallo
Hier noch ein Dämpfer.
Ie8 kann mit defer nichts anfangen. Async hingegen geht.
In Ie9 hat defer gut funktioniert.
(getestet auf browserstack)
viele Grüsse
theo
Hallo Torsten
Danke für den Tipp.
Seltsame Sache, Async wird nicht unterstützt von ie8 und 9, trotzdem ladet die Seite ohne Fehler. Bei Defer sollte die Unterstützung gemäss caniuse besser sein, aber ie8 ladet überhaupt nicht und ie9 ist tadellos.
viele Grüsse
Jetzt klappt defer auch in ie8 besser. Das Hauptproblem: Modernizr. Den braucht ie8 im Header.
viele Grüsse
theo
Spannend! Danke fürs Update.
Gruß, Torsten
Hallo Torsten
Gern geschehen. Die Auseinandersetzung mit Defer und Async hat einiges gebracht. Nun weiss ich mehr über optimierende Einbindung von Scripts.
Es is jedoch in jedem Fall abhängig von der «Scriptarchitektur». Somit gibt es keinen absoluten Lösungsweg. Je nach Theme wird sich die Einbindung unterschiedlich gestalten. Zudem ist die Unterstützung von defer in ie8 und 9 nicht vollständig. Es kommt darauf an was in den Scipts verwendet wurde. Zum Beispiel «innerHtml» geht nicht.
Alles Gute
theo
