Acelera tu web moviendo todo el JavaScript al final

Publicado por JL Sistemas el 9 Abr, 2016

Todos los códigos JavaScript que se cargan en tu web pueden hacer que tu sitio se ralentice, y es especialmente preocupante cuando provocan que el contenido de tu web tarde en cargarse, con lo que muchos usuarios pueden abandonarla antes de que termine de cargar.

Puedes minimizar el JavaScript mediante plugins de caché, o 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 ¿lo vas pillando?

Por eso, si no puedes prescindir de los scripts, y en una tienda online por ejemplo no puedes salvo excepciones, una estrategia a aplicar es mover automáticamente todos los JavaScripts al fondo, al pié de tu tema, para que carguen en el archivo footer.php en vez de en header.php.

Hay plugins como W3 Total Cache que ofrecen soluciones para esto, pero no siempre funciona, así que podemos hacerlo manualmente, sin necesidad de plugins, para que funcione sí o sí.

Y son solo tres pasos. El primero es añadir el siguiente código al archivo functions.php del tema:

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

A continuación debemos abrir el archivo header.php del tema y sustituir <?php wp_head(); ?> por esto otro:

<?php

02	ob_start();

03	wp_head();

04	$themeHead = ob_get_contents();

05	ob_end_clean();

06	define( 'HEAD_CONTENT', $themeHead );

07	$allowedTags = '

08	<style><link><meta><title>';

09	print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );

10

?>

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

1	<?php theme_insert_js( HEAD_CONTENT ); ?>

¿Qué hemos hecho?

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

A continuación, en el código que añadimos a header.php se elimina todo lo que no sea un estilo, enlace o meta tag. Y 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 de la cabecera al fondo, a footer.php.

Una última recomendación: revisa que todo funciona tras aplicar los códigos, pues hay temas que no se dejarán o no funcionarán bien con los scripts cargados al final.