Post navigation

Das komplette JavaScript automatisch im Footer Deines Themes laden

Für die Ladegeschwindigkeit einer Website ist es immer besser, JavaScript-Dateien in den Footer zu laden. Die Website baut sich so wesentlich schneller auf. Dieser Code verschiebt automatisch wirklich alles JavaScript inklusive den Inline-Scripten in den Footer.

Verschiebe alles JavaScript in den Footer

  • WordPress Version: inkl. 4.5.3
  • PHP-Version: inkl. PHP 7

Der Code:

Bitte beachte: Ich empfehle Dir dringend, für die folgenden Änderungen ein Child-Theme zu erstellen, damit Dein Theme updatefähig bleibt.

Den folgenden Code kopierst Du in die functions.php deines WordPress-Themes hinein.

<?php

/**
 * Filter HTML code and leave allowed/disallowed tags only
 *
 * @param string 	$text 	Input HTML code.
 * @param string 	$tags 	Filtered tags.
 * @param bool 		$invert Define whether should leave or remove tags.
 * @return string Filtered tags
 */
function theme_strip_tags_content($text, $tags = '', $invert = false) {

    preg_match_all( '/<(.+?)[\s]*\/?[\s]*>/si', trim( $tags ), $tags );
    $tags = array_unique( $tags[1] );

    if ( is_array( $tags ) AND count( $tags ) > 0 ) {
        if ( false == $invert ) {
            return preg_replace( '@<(?!(?:'. implode( '|', $tags ) .')\b)(\w+)\b.*?>.*?</\1>@si', '', $text );
        }
        else {
            return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text );
        }
    }
    elseif ( false == $invert ) {
        return preg_replace( '@<(\w+)\b.*?>.*?</\1>@si', '', $text );
    }

    return $text;
}

/**
 * Generate script tags from given source code
 *
 * @param string $source HTML code.
 * @return string Filtered HTML code with script tags only
 */
function theme_insert_js($source) {

    $out = '';

    $fragment = new DOMDocument();
    $fragment->loadHTML( $source );

    $xp = new DOMXPath( $fragment );
    $result = $xp->query( '//script' );

    $scripts = array();
    $scripts_src = array();
    foreach ( $result as $key => $el ) {
        $src = $result->item( $key )->attributes->getNamedItem( 'src' )->value;
        if ( ! empty( $src ) ) {
            $scripts_src[] = $src;
        } else {
            $type = $result->item( $key )->attributes->getNamedItem( 'type' )->value;
            if ( empty( $type ) ) {
                $type = 'text/javascript';
            }

            $scripts[$type][] = $el->nodeValue;
        }
    }

    //used by inline code and rich snippets type like application/ld+json
    foreach ( $scripts as $key => $value ) {
        $out .= '<script type="'.$key.'">';

        foreach ( $value as $keyC => $valueC ) {
            $out .= "\n".$valueC;
        }

        $out .= '</script>';
    }

    //external script
    foreach ( $scripts_src as $value ) {
        $out .= '<script src="'.$value.'"></script>';
    }

    return $out;
}

Wenn du das erledigt hast, öffnest du deine header.php und ersetzt den wp_head() Tag durch den folgenden Code:

<?php
ob_start();
wp_head();
$themeHead = ob_get_contents();
ob_end_clean();
define( 'HEAD_CONTENT', $themeHead );

$allowedTags = '<style><link><meta><title>';
print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );
?>

Im Anschluss öffnest du deine footer.php Datei und kopierst den folgenden Tag direkt über den schließenden </body> Tag.

<?php theme_insert_js( HEAD_CONTENT ); ?>

Jede einzelne JavaScript-Datei inklusive den Inline-Scripten wird nun automatisch im Footer deiner Website geladen.

Quelle:

WPRECIPES

ist WordPress-Entwickler und bietet dir WordPress Sicherheit Service und WordPress Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.