Consejos adicionales para incrementar la velocidad de tu página web

Muchos de los que ya disfrutastéis del anterior artículo en el que os hablaba sobre la optimización de la velocidad en los sitios web, ya nos habéis comunicado los verdaderos beneficios de ponerlos en práctica. Sin embargo, no todo es tan sencillo. Mejorar la velocidad de un sitio web es algo complejo, es por eso que me he decidido a escribir un segundo artículo con consejos adicionales a los que dimos ya en un inicio.

Haz uso de los data uris

Los data uris pueden ser muy útiles para embeber imágenes en el HTML/CSS/JS y así ahorrar en peticiones HTTP y por consecuencia, mejorar el tiempo de carga de tu sitio web. La siguiente función creará data uris basado en $file para un mejor embebido.

function data_uri($file, $mime) {
  $contents=file_get_contents($file);
  $base64=base64_encode($contents);
  echo "data:$mime;base64,$base64";
}

Mover manualmente scripts y archivos css al footer

Este ejemplo enseño cómo hacer esto en un blog de WordPress, pero cualquier desarrollador con un poco de experiencia puede modificar el código para hacer que funcione en cualquier tipo de web.

Primero, abre tu archivo 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 .= '<script type="'.$key.'">';

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

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

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

    return $out;
}

Una vez hecho, edita el archivo header.php. Reemplaza el tag el 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, coloca el siguiente código en tu footer.php, justo después de cerrar el tag body.

<?php theme_insert_js( HEAD_CONTENT ); ?>

Combina manualmente archivos Javascript

Si eres administrador de WordPress, definitivamente debes utilizar el plugin W3 Total Cache que combina, y minimiza archivos Javascript y CSS. Si no es tu caso, y cuentas con una web personalizada, puedes sacar partido de esta técnica super simple para combinar múltiples js en uno solo y así, ahorrar peticiones HTTP.

Lo primero que tienes que hacer es abrir el archivo .htaccess de tu sitio y pegar el siguiente código en él:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*.js) /combine.php?type=javascript&files=$1

Una vez hecho, descarga el script combine.php y súbelo a tu servidor. Por defecto, este script busca en los directorios de Javascript y CSS que estén en el directorio raíz de tu sitio web, pero si estás usando una estructura distinta puedes cambiar manualmente estos valores en la parte superior del propio script.

Lo último que queda por hacer es crear un directorio llamado caché con permisos de escritura, para que podamos albergar los ficheros temporales. Si ya lo has realizado todo, estaría listo.

Fuente: catswhocode.com