Acelera tu web moviendo todo el JavaScript al final

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

¿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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(14 votos, promedio: 4.6)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

11 comentarios en “Acelera tu web moviendo todo el JavaScript al final”

  1. Domingo Alonso

    Hola Fernando, gracias por el post, funciona a la perfección. He probado en uno de mis blogs y va muy bien, pero tengo un problema, al bajar todos los javascript al footer, hay uno de ellos, mas concretamente el del revolution slider, que hace que deje de funcionar bien el plugin y los sliders no se muestren. Seria posible el poder evitar que ese javascript en concreto no bajara a la parte inferior, para evitar el error.
    Muchas gracias y un saludo.

  2. Precisamente andaba buscando algo asi hoy y mira tu.

    Otra cosa que me gustaria saber es como quitar en la home los CSS de ciertos plugins que solo se usan en secciones.

  3. Muchas gracias Fernando.

    En mi caso también me hacía cosas raras el blog al bajarlo abajo.

    Lo que he hecho es aplicar este código solo en los post con un if single(). Aunque no me mejore la velocidad en la main o las categorías, si han mejorado la puntuación de los post (que es realmente lo que interesa y los más pesado)

    Un saludo!

    1. Hola Gaizka N. … Me puedes indicar exactamente donde pones el «if single()»… Supongo que es en el functions.php pero en que lugar. Soy bastante torpe en el tema, pero la propuesta que presentas me parece una muy buena idea utilizándolo únicamente para los artículos. Gracias por todo

      1. WordPress tiene muchas funciones propias que puedes usar facilmente en su codigo… Si tu en una pagina del codigo pones por ejemplo:

        if (is_single())
        {
        Lo que quieras que pase…
        }

        Ese is_single quiere decir que detectara si se encuentra dentro de un post (no la home, etc… ), sino un post como en este que estamos comentando ahora mismo. No sé si me he explicado muy bien.

      2. Eso es, Estoy seguro de que alguno de los cracks que hay por aquí lo hará de una forma más eficiente. La función no la he tocado para nada. Pero en la cabecera y en el footer en vez de borrar y sustituir he utilizado como dice @alfbueno:disqus

        if (is_single())
        { SI es post
        }
        else{
        si no es post
        }

  4. Tengo una duda… al mover todos los script, por default también mueve el jquery y por ende dejan de funcionar todos los script’s. Pregunta: ¿Hay forma de mover todos los scripts menos el jquery?.

    Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido