¿Por qué esta web va tan rápida?

Descubre alguno de los secretos de por qué esta web va tan rápida. Repasamos algunas de las características que más mimo le he puesto a la hora de diseñar y escribir la web, así como el lugar donde la hospedo. ¿Qué haces tú para que tu web vaya lo más rápida posible?

Uno: Uso Siteground

Que sí, que ya lo sé, si estás metido o metida en este mundillo, tooooodo el mundo usa Siteground, pero es que es así. Antes tenía un buen proveedor de hosting por su rapidez y buena tasa de transferencia (OVH) pero pésimo servicio técnico (inexistente más bien diría yo). Además Siteground ofrece una serie de herramientas que aceleran aún más la web. Incluso añade soporte php7, http/2 y tiene disponible Let’s encrypt, una certificación que añade https (página segura) sin coste adicional alguno. Por su precio, soporte (increíble, nunca vi cosa igual) y rapidez, me quedo con Siteground como sitio donde contratar mis webs.

Dos: No uso casi ningún script

Me encanta jquery, soy una apasionada de javascript y su más conocida librería. Pero es que hay algunas que pillas por ahí que sí, te hacen la página hiper super mega bonita, sacrificando rendimiento. Así que he sido radical, se pueden hacer webs bonitas sin usar scripts, y aquí la tienes. El único script que tengo es uno para hacer que el menú en la versión móvil aparezca cuando se clickea encima y uno que sustituye las imágenes img con formato svg en svg completos embebidos en el código. Ya está, no hay más. Bueno sí, dos más pero son de dos plugins que instalé: uno que me añade enlaces propios externos a las imágenes de una galería (WP Gallery Custom Links) y uno de visualización de imágenes (WP Feather Light).

( function( window, $, undefined ) {
    'use strict';

    $( 'nav' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
    $( 'nav .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus

    // Show/hide the navigation
    $( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
        var $this = $( this );
        $this.attr( 'aria-pressed', function( index, value ) {
            return 'false' === value ? 'true' : 'false';
        });

        $this.toggleClass( 'activated' );
        $this.next( 'nav, .sub-menu' ).slideToggle( 'fast' );

    });

})( this, jQuery );

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

});

Tres: Voy al grano

No cargo cada página con mil cosas como pop ups, ni banners que distraigan, ni enlaces embebidos a mi twitter que hacen otra llamada al servidor y por tanto recarga la web más. Ni tengo enlaces para compartir en redes sociales, ni nada. No tengo pase de diapositivas en mi home que le den «dinamismo» a la web… Mi objetivo es la rapidez, la funcionalidad y la limpieza. Y así lo aplico en las webs que hago.

Cuatro: Yo controlo mi código

La web está hecha desde cero. Es un child theme de Genesis framework que lo he hecho así para aprender a manejar aún más esta maravillosa herramienta. Y todo el CSS está realizado desde cero con el mínimo código posible (aunque aún lo puedo aligerar más). Al controlar el código, puedes pasar test como los de Google PageSpeed y poder afinar la rapidez de la web o tu puntuación en esta herramienta. Además comprimo todo el código css y js que genera mi página gracias a una estupenda herramienta que espero hablar algún día como es CodeKit.

Cinco: Optimizo las imágenes lo más que puedo…

Y uso las mínimas necesarias. Las imágenes son importantes, pero una saturación excesiva con ellas tampoco es conveniente. Son los elementos que más «pesan» (más tamaño ocupan) de una web y por tanto cuantas menos imágenes «superfluas» mejor. Debemos controlar su tamaño y para ello hay diferentes formas como recomiendo en el post de la semana pasada sobre optimización de imágenes. El «añadir por añadir» se va a acabar. Siempre debemos preguntarnos para qué sirve cualquier elemento que coloquemos en nuestra web.

Seis: Uso svg para los iconos

SVG (Scalable Vector Graphics) es un formato de archivo XML que contiene datos de dibujos en vector. Es un formato de datos estructurados y vectorizados por tanto se verá con una resolución estupenda en cualquier tamaño de pantalla y a cualquier tamaño, no se pixela. Esto está genial porque además la información que contiene un vector, si además es sencillo como los que uso en esta web, es mucho menor que la información que contiene una imagen. Por tanto un vector SVG sencillo pesa mucho menos que una imagen png normal y además mantiene transparencia y no se pixela al aumentar de tamaño. Antes era más reacia a usarlos porque no se había implementado en todos los navegadores, pero ahora que ya internet explorer 7 está en las mínimas, no hay problemas en dominar la web con SVG.

Siete: Tengo habilitada la compresión GZIP

En el archivo .htaccess de la web puedes configurar un montón de cosas. Entre ellas una recomendación que siempre hace Google PageSpeed que es habilitar la compresió  GZIP. Se hace colocando las siguientes líneas en el archivo .htaccess que suele estar en la raíz de la carpeta contenedora de tu web:

# Compresión del sitio
<FilesMatch "\.(css|js|icon|pdf|jpg|jpeg|png|gif|php|woff)$" >
    SetOutputFilter DEFLATE
</FilesMatch>
# Compresión de los svgs
<IfModule mod_deflate.c>
    AddOutputFilter DEFLATE eot ttf svg
    <IfModule mod_headers.c>
        Header set Vary Accept-Encoding env=!dont-vary
    </IfModule>
</IfModule>

Ocho: si uso un maquetador visual, es Page Builder

He sufrido en un par de proyectos el adorado Visual Composer. Sí, democratiza la maquetación de contenidos para los clientes. Pero ¿a qué precio? Al final aunque cualquier persona pueda maquetar su contenido, el tiempo que va a tardar por lo lentísimo que va, lo lenta que va la web al mostrarla y lo gocho que queda la base de datos con la cantidad de shortcodes que usa, para mí es un precio demasiado caro a pagar. Prefiero usar plugins más livianos como Page Builder (que además es gratuito), que no usa shortcodes (por tanto no es hace locking) y que aunque no tenga tantas animaciones e historias, luego con un poco de maña con el CSS, sí que lo puedes personalizar muchísimo. Esta web usa en dos de sus páginas Page Builder. Queda totalmente integrado en la web y no me añade una pizca de lentitud adicional. Es lo que pido.

Nueve y último (por ahora): utilizo el sentido común

No instalo plugins de desarrolladores desconocidos o con pocas valoraciones. Busco y me informo desde personas en las que confío del mundillo antes de implementar nada. Optimizo la base de datos cada semana con el plugin WP-Optimize. Y no sé cuántas cositas más que ahora mismo no caigo pero que si son importantes no te preocupes que las pondré en futuros post. Espero que te hayan gustado esta explicación de por qué mi web va tan rápida y si quieres que la tuya también vaya así de rápida, no dudes en ponerte en contacto conmigo. ¡Adelante con ese jueves que ya termina la semana!