Optimizacion

Mover los archivos de Javascript automáticamente al footer

1 hay 1 solo Like :)

Para mejorar el tiempo de carga de tu blog desarrollado con WordPress, se recomienda mover ciertos archivos de Javascript al final de tus documentos HTML. Desafortunadamente, no siempre es tan fácil como parece, especialmente cuando utilizamos algunos plugins que insertan código en el header. Aquí tienes una solución simple para mover automáticamente todos los archivos Javascript al footer.

Primero, abre tu fichero functions.php y pega el siguiente código en él:

/**
 * 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 .= '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22'.%24key.'%22%3E'%3B%0A%0A%20%20%20%20%20%20%20%20foreach%20(%20%24value%20as%20%24keyC%20%3D%3E%20%24valueC%20)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24out%20.%3D%20%22n%22.%24valueC%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%24out%20.%3D%20'%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />';
    }

    //external script
    foreach ( $scripts_src as $value ) {
        $out .= '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22'.%24value.'%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />';
    }

    return $out;
}

Una vez hecho, edita el fichero header.php. Reemplaza el tag wp_head() por esto:

<?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 );
?>

Y finalmente, pega el siguiente código dentro del footer.php, justo antes del cierre del tag body.

<?php theme_insert_js( HEAD_CONTENT ); ?>