Inicio Informática Mueve todo el JavaScript de tu web al footer

Mueve todo el JavaScript de tu web al footer

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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 :

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

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.