Mueve todo el JavaScript de tu web al footer

Este post lo voy a publicar por que me ha preguntado acerca de como mover al footer de Wordpress el JavaScript. Por todos los que hacemos webs es conocido que todos los códigos JavaScript que se cargan en tu web pueden hacer que tu sitio se ralentice. Esto resulta especialmente preocupante cuando provocan que el contenido de tu web tarde en cargarse. Esto hará que muchos usuarios pueden abandonarla antes de que termine de cargar (internet y sus usuarios se mueven rápido).

Puedes minimizar el efecto JavaScript mediante plugins de caché. Otra opción sería aplazar su carga, pero si se cargan desde la cabecera de tu tema, como suelen tener la mala costumbre de hacer, primero se cargarán los scripts, por minimizados que estén, y luego el contenido ¿se va viendo el problema?. El contenido tardará demasiado en cargar.

Por eso, si no puedes prescindir de los scripts (se hacen cosas maravillosas con ellos), una solución a aplicar es mover al footer automáticamente todos los JavaScripts . Moviéndolos para que pasen de cargarse del archivo header.php y pasen a hacerlo en el archivo footer.php.

Hay plugins como W3 Total Cache que ofrecen soluciones para esto. Hay que aclarar que no siempre funciona. Por esto podemos optar a hacerlo manualmente, sin necesidad de plugins.

Esto lo conseguiremos con tan solo tres pasos.

Mover al footer el JavaScript de tu Wordpress en tres sencillos pasos

El primero de estos pasos es añadir el siguiente código al archivo functions.php. Aun que yo recomiendo utilizar un plugin de funciones (para no sobrecargar el archivo del sistema):

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;
}

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;
        }
    }

    foreach ( $scripts as $key => $value ) {
        $out .= '<script type="'.$key.'">';

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

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

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

    return $out;
}

El segundo paso a realizar sería abrir el archivo header.php del tema y sustituir wp_head(); por esto otro:

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

Para finalizar, en el archivo footer.php debemos incluir el siguiente código antes de </body>:

<?php theme_insert_js( HEAD_CONTENT ); ?>

Una breve explicación sobre como mover el javascript al footer

En el primer paso tenemos una función que elimina todas las tags que no queremos, contenido incluido, y otras dos funciones que generan las tags <script>.

En el segundo paso, en el código que añadimos a header.php se elimina todo lo que no sea un estilo, enlace o meta tag. Es importante en este punto que revises la variable $allowedTags para que incluyas las necesarias para tu tema, no te vayas a dejar algo.

Para finalizar, simplemente llevamos todos los scripts eliminados del header.php al footer.php.

Para terminar diré que esto no va a funcionar en todos los temas de Wordpress. En el caso de entreunosyceros.net diré que si lo aplico la valoración de google sube hasta 94. Pero no funciona el ancla para subir arribar que tengo hecha con Javascritp. Por lo que si después de aplicar este método algún script no funciona y es imprescindible para vuestra web, la decisión será solo vuestra.

Fuente