google pagespeed insights

Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS

Segunda entrada sobre cómo mejorar la puntuación en PageSpeed Insights de nuestro WordPress. En esta ocasión hablaremos sobre cómo minificar los recursos de CSS y JS.

Minificar es compactar un archivo eliminando todos los caracteres innecesarios sin perder la funcionalidad. Se eliminan todos los espacios, saltos de línea, comentarios, etc… consiguiendo una reducción importante de tamaño de archivo o peso.

Es simple, cuanto menos pese un archivo, menos tardará en cargarse, por lo tanto más rápido se visualizará nuestra web.

Por poner un ejemplo, en un CSS normal encontraríamos algo tipo:

/* *************** THEME STARTS HERE *************** */
html {
    width: 100%; 
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #53534d;
    overflow-y: scroll;
}

Y en un CSS minificado:

html{width:100%;height:100%;font-family:'Open Sans', sans-serif;font-weight:400;color:#53534d;overflow-y:scroll;}

Como puede observarse desaparecerían los comentarios, los espacios, las tabulaciones, y por lo tanto nuestro archivo físicamente pesará menos, ocupará menos espacio en disco y tardará menos tiempo en cargarse.

En el ejemplo que estamos utilizando en esta serie de posts recordar que estamos cargando 3 hojas de estilos y 2 archivos JS sin minificar. A continuación expongo el peso del archivo original sin minificar y el peso del mismo archivo minificado:

  • font-awesome.css => 39KB | font-awesome.min.css => 31KB
  • bootstrap.css => 116KB | bootstrap.min.css => 92KB
  • styles.css => 25KB | styles.min.css => 17KB
  • jquery-3.1.1.js => 261KB | jquery-3.1.1.min.css => 85KB
  • bootstrap.js => 64KB | bootstrap.min.js => 33KB

Si sumamos todas las ganancias obtenemos una reducción de 247KB de peso, lo que mejorará notablemente el tiempo de carga de nuestra web.

Cuando descargas una librería (ya sea CSS o JS) normalmente viene con la versión normal (de desarrollo) y la minificada. Es esta última la que deberemos usar en producción para acelerar nuestro sitio.

Además, si estamos desarrollando un tema o plugin en WordPress y tenemos archivos CSS o JS propios, es aconsejable trabajar con Grunt o Gulp para ejecutar las tareas de minificación automática de estos archivos.

Minificar CSS
Compactar el código CSS puede ahorrar una gran cantidad de bytes de datos y acelerar los tiempos de descarga y análisis.
Reducir CSS de estos recursos para reducir su tamaño en 634 B (reducción del 14 %).
• Si se reduce https://midominio.com/css/styles.css, supondría un ahorro de 634 B (reducción del 14 %) después de la compresión.
Ocultar detalles

Google PageSpeed Insights

Minificar JavaScript
Compactar el código JavaScript puede ahorrar una gran cantidad de bytes de datos y acelerar los tiempos de descarga, análisis y ejecución.
Reducir JavaScript de estos recursos para reducir su tamaño en 42,4 KB (reducción del 48 %).
• Si se reduce https://midominio.com/js/jquery-3.1.1.js, supondría un ahorro de 39,2 KB (reducción del 50 %) después de la compresión.
• Si se reduce https://midominio.com/js/bootstrap.js, supondría un ahorro de 3,3 KB (reducción del 26 %) después de la compresión.

Google PageSpeed Insights

También se suele utilizar la concatenación de archivos para cargar todos los CSS en un único archivo CSS y todos los JS en un único archivo JS. De esta manera reducimos las peticiones http. Si tu servidor soporta HTTP/2, éste punto no es crítico, incluso podría ser más rápido cargar varios archivos a la vez que uno sólo con toda la información.

Un ejemplo en Gulp podría ser el siguiente:

//Dependencias
var gulp = require('gulp'),
    concat = require('gulp-concat'),
    minifyCss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    watch = require('gulp-watch');

//Configuración de la tarea CSS
gulp.task('css', function () {
    gulp.src(['css/bootstrap.min.css','css/font-awesome.min.css','css/styles.css'])
    .pipe(concat('styles-concat.css'))
    .pipe(minifyCss())
    .pipe(rename('styles.min.css'))
    .pipe(gulp.dest('css'));
});

//Configuración de la tarea JS
gulp.task('js', function () {
    gulp.src(['js/bootstrap.min.js','js/cookieconsent.js','js/main.js'])
    .pipe(concat('scripts-concat.js'))
    .pipe(uglify())
    .pipe(rename('scripts.min.js'))
    .pipe(gulp.dest('js'));   
});

gulp.task('prod', ['css', 'js'], function(){
    gulp.watch('css/styles.css', ['css']);
    gulp.watch('js/main.js', ['js']);
});

Crearíamos una tarea llamada css, otra llamada js y una que ejecutaría a las dos anteriores llamada pro. Si ejecutamos en nuestra consola el comando gulp prod, dejaríamos trabajar en segundo plano a Gulp. Estaría observando (watch) los ficheros que indiquemos, y en caso de detectar algún cambio ejecutaría la tarea correspondiente.

Por ejemplo en la tarea css, cogería los archivos css/bootstrap.min.css, css/font-awesome.min.css y css/styles.css, y los concatenaría en uno sólo: styles-concat.css. A continuación se minificaría y el resultado se renombra a styles.min.css. Éste sería el archivo que cargaríamos desde nuestro plugin o tema mediante wp_enqueue_style().

Con Gulp podemos crear tantas tareas como queramos, por ejemplo compilar SASS, comprobar la accesibilidad, recargar el navegador, etc. Os comparto un par de enlaces para iniciarse con Gulp:

¿Te ha resultado útil esta información? 🍺

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.

Comentarios

3 comentarios en Mejora la puntuación de Google PageSpeed Insights: Minificar CSS y JS

  1. // MINIFY YOUR HTML, JAVASCRIPT AND CSS
    if ( ! is_admin() ) {
    class WP_HTML_Compression
    {
    // Settings
    protected $compress_css = true;
    protected $compress_js = false;
    protected $info_comment = true;
    protected $remove_comments = true;

    // Variables
    protected $html;

    public function __construct($html)
    {
    if (!empty($html))
    {
    $this->parseHTML($html);
    }
    }

    public function __toString()
    {
    return $this->html;
    }

    protected function minifyHTML($html)
    {
    $pattern = ‘/<(?script).*?|<(?style).*?|<!(?–).*?–>|<(?[/w.:-]*)(?:».*?»|’.*?’|[^'»>]+)*>|(?((<[^!/w.:-])?[^compress_js;

    } else if ( !empty($token[‘style’] ) ) {

    $strip = $this->compress_css;

    } else if ( $content == ‘‘ ) {

    $overriding = !$overriding;
    // Don’t print the comment
    continue;

    } else if ( $this->remove_comments ) {

    if ( !$overriding && $raw_tag != ‘textarea’ ) {

    // Remove any HTML comments, except MSIE conditional comments
    $content = preg_replace(‘/<!–(?!s*(?:[if [^]]+]|))(?:(?!–>).)*–>/s’, », $content);
    }
    }

    } else {

    if ( $tag == ‘pre’ || $tag == ‘textarea’ || $tag == ‘script’ ) {

    $raw_tag = $tag;

    } else if ( $tag == ‘/pre’ || $tag == ‘/textarea’ || $tag == ‘/script’ ) {

    $raw_tag = false;

    } else {

    if ($raw_tag || $overriding) {

    $strip = false;

    } else {

    $strip = true;

    // Remove any empty attributes, except:
    // action, alt, content, src
    $content = preg_replace(‘/(s+)(w++(?’, ‘/>’, $content);
    }

    }

    }

    if ( $strip ) {

    $content = $this->removeWhiteSpace($content);
    }

    $html .= $content;
    }

    return $html;
    }

    public function parseHTML($html)
    {
    $this->html = $this->minifyHTML($html);
    }

    protected function removeWhiteSpace($str)
    {
    $str = str_replace( «t», ‘ ‘, $str );
    $str = str_replace( «n», », $str );
    $str = str_replace( «r», », $str );

    while ( stristr($str, ‘ ‘ ) ) {

    $str = str_replace(‘ ‘, ‘ ‘, $str);
    }

    return $str;
    }
    }

    function wp_html_compression_finish($html) {

    return new WP_HTML_Compression($html);
    }

    function wp_html_compression_start() {

    ob_start( ‘wp_html_compression_finish’ );
    }

    // add_action( ‘get_header’, ‘wp_html_compression_start’ );
    add_action( ‘wp_loaded’, ‘wp_html_compression_start’ ); // for working with SEO by Yoast
    }

  2. Hola, muchas gracias por tu post, me ha aclarado como funcionan unas cuantas cosas que desconocía totalmente. Desafortunadamente soy novata y autodidacta en esto de montar mi web y no entiendo como realizar las correcciones para mejorar la velocidad de mi blog Espero que me puedas dar alguna indicación más para poder corregir los CSS y JS.
    graxias

Deja un comentario

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

  • El fin del tratamiento es únicamente la moderación de comentarios para evitar spam
  • La legitimación es tu consentimiento al comentar
  • No se comunicará ningún dato a terceros salvo por obligación legal
  • Tienes derecho al acceso, rectificación y eliminación de los comentarios