3.020 Razones para elegir Webempresa     Conocerlas »

Jueves, 13 Marzo 2014 19:49

Cómo conseguir que tu Wordpress sea ultrarrápido

Escrito por 
CMS:  WordPress |  Versión:  Todas |  Nivel de dificultad:  Medio |  Tiempo estimado de lectura:  10 minutos


Hola, en este post te voy a explicar cómo optimizar tu Wordpress para que cargue ultrarrápido. La velocidad de carga de tu web es muy importante, e influye directamente en las visitas y en las conversiones de tu web.

Una navegación agradable y rápida evita que el usuario se vaya de tu web antes de tiempo, y aumenta las probabilidades de que el usuario lleve a cabo lo que todos queremos: que compre.

Así que te recomiendo que prestes atención si tienes una web con Wordpress. Si sigues las instrucciones que te indico a continuación puedes llegar a mejorar la velocidad de descarga de vuestro blog o vuestra web aproximadamente un 20-30%. Vamos allá.

Consideraciones previas

Antes de todo, tienes que revisar algunas cosas para conseguir un buen resultado en la optimización:

  • Asegúrate que tu hosting es rápido. Aquí en webempresa puedes informarte para conseguir hosting rápido si no eres cliente ya
  • Si tienes plugins instalados en tu Wordpress que no usas, deshabilítalos y desinstálalos. Pueden estar suponiendo un retraso innecesario en la velocidad de descarga de tu web
  • Si estás recibiendo mucho spam, elimínalo y pon medidas para evitar seguir recibiéndolo. Este spam provoca que se generen tablas grandes con información que no es útil para tu web, y que provocan que la generación de las páginas de tu web sean algo más lentas.
  • Si es posible, contrata un hosting del país de donde sea tu audiencia, o cercano. Disponer de un hosting alojado cerca de donde está la mayor parte de tu audiencia es importante ya que el tiempo de respuesta será mucho mejor, y los problemas relacionados con la conectividad de la red serán mucho menores.
  • Sistema Operativo especializado en hosting compartido. Uno de los problemas habituales del hosting compartido es que cuando uno de los usuarios de tu servidor tiene un pico de visitas, o simplemente tiene problemas de programación que generan un consumo de recursos sin límite. Esto puede hacer que el resto de usuarios del servidor noten que el servicio se responde con lentitud. Para evitar esto es importante usar sistemas que aislen los recursos de cada cuenta, de forma que se pueda garantizar un mínimo de recursos disponibles para cada usuario y no haya usuarios que acaparen los recuros del servidor. En Webempresa usamos el sistema operativo CloudLinux, que permite generar departamentos estancos para cada cliente para poder garantizar un mínimo de recursos a cada cuenta.
  • Discos SSD en el servidor. Los discos SSD ya han alzanzado una fiabilidad suficiente como para ser usados en servidores de producción, y la diferencia de rendimiento comparado con los antiguos discos ríjidos es muy elevada. MySQL vuela en servidores con discos SSD, y esto es importante sobre todo cuando se trabaja con CMS que hacen uso extensivo de MySQL. Los discos SSD son más caros y ofrecen menos espacio, pero la mejora de rendimiento y velocidad es muy notable y merece la pena. En Webempresa empleamos discos SSD en todos nuestros servidores.
  • Proxy reverso Nginx para agilizar la descarga de contenidos estáticos. Apache es un servidor web muy fiable y con muchísimas posiblidades, es un estándar. Sin embargo existen servidores como Nginx que son mucho más ligeros y responden con una mayor velocidad. Una buena idea es disponer de Nginx como proxy inverso que de forma transparente se encargue de servir el contenido estático (CSS, imágenes, Javascript, texto, etc..). La respuesta de Nginx es más rápida que la de Apache, y el rendimiento del servidor es mejor cuando se usa Nginx. En Webempresa empleamos Ngninx en todos nuestros servidores.
  • Optimización de las imágenes. Es muy importante que todas las imágenes que se suben a la web estén optimizadas para la web. Si subes las imágenes tal como la obtienes de tu cámara fotográfica o tal como te la han pasado, seguramente estarán ocupando el doble (o más) del espacio que deberían. En la web las imágenes han de estar optimizadas al máximo para que la descarga sea rápida. Este proceso suele ser bastante tedioso, además con el tiempo, conforme se suben nuevos contenidos, es difícil controlar que todo el mundo suba las imágenes bien optimizadas. En webempresa hemos desarrollado un servicio gratuito de modo que nuestros clientes pueden optimizar las imágenes de su cuenta con un solo clic.
  • Hosting seguro con firewall web, aunque parezcan cosas distintas están bastantes realcionadas. Teener un hosting seguro capaz de descartar tráfico de SPAM, o tráfico de ataques de denegación de servicios permite que tu cuenta funcione de forma más fuida. Si eres víctima de un ataque DDoS sobre la administración de tu Wordpress o Joomla y no tienes protección, seguramente tu web, al no poder procesar tantos intentos de login acabará cargando lenta. En Webempresa disponemos de firewall web para todos nuestros servidores, con reglas especialmente diseñadas para rechazar SPAM o DDoS.
  • Después de tener en cuenta estas consideraciones previas, puedes medir el tiempo que tarda en cargar tu web antes de llevar a cabo ninguna optimización. Puedes hacerlo a través de la siguiente herramienta.

    Después de un test con 60 cargas en mi caso, obtengo los siguientes resultados:

    Ahora vamos a seguir una serie de sencillos pasos a través de los cuales iremos optimizando diferentes aspectos de la web .

    Instala y configura WP Super Cache

    WP Super cache es un plugin de Wordpress que se utiliza para hacer caché basada en ficheros. Esto significa que no se usan almacenes de memoria como Memcache ni similar, sino que se genera una copia de la página completa en un fichero html estático, y el plugin se encarga de servir la web desde esta copia en lugar de regenerar la página en cada visita con lo que esto conlleva en cuanto a consumo de recursos en el servidor y por tanto lentitud de carga. En los servidores de Webempresa disponemos de discos SSD que son más rápidos que los discos normales, aunque más caros, lo que en combinación con la caché de WP Super Cache hará que tu blog vaya más rápido.

    Lo primero será Instalarlo, para esto vamos a Plugins - Añadir nuevo, y en el buscador ponemos Super Cache, y pulsamos en Instalar ahora, al finalizar la instalación pulsamos enActivar.

    Te saldrá una ventana roja recordando que la caché está deshabilitada y que debes de habilitarla desde la administración del plugín, pulsa en el link, y en la página de administración pulsa en Update status para activar la cache.

    Accede a Settings - WP Super Cache [Easy (Fácil) ] , y pulsa en Test Cache para comprobar que todo está OK.

    Habilita el check-box que dice: Cache hits to this website for quick access.

    Debajo de esto verás 3 opciones: Lo correcto es habilitar Usar mod_rewrite para servir ficheros de cache.

    Actualiza las opciones de nuevo, haz scroll hacia abajo y pulsa en Update Status

    Verás que te aparece una notificación indicando que se deben actualizar las reglas de mod_rewrite " mod_rewrite rules must be updated", Haz scroll hacia abajo y verás que hay un cartel amarillo con las reglas de mod_rewrite y el botón indica "Update mod_rewrite rules", pulsa en botón para que se actualicen las reglas de mod_rewrite en tu fichero .htaccess.

    Faltaría establecer la recolección de basura con un intervalo de 1800 segundos (30 min) o 3600 segundos (1 hora), para esto accede a la sección "Expiry Time & Garbage Collection" y establece el valor "Cache Timeout" en 3600 segundos.

    Accede a Settings - WP Super Cache [Advanced (Avanzado) ] , habilita la opción: Enable Compression in WP Super Cache, de este modo se habilita la compresión GZip de forma que el cotenido va comprimido y la página carga antes, además de ahorrar ancho de banda.

    Creación de un subdominio para contenidos estáticos

    Ya tenemos hechas bastantes mejoras en la optimización de nuestro Wordpress, y podrás comprobarlo si vas haciendo mediciones del tiempo de carga de tu web. El paso que te indico ahora consiste en la creación de un subdominio de nuestro dominio principal, que emplearemos para servir los contenidos estáticos (ficheros javascript, ficheros css, e imágenes) de nuestra web.

    La ventaja reside en que este subdominio va a permitir descargar este tipo de contenido con conexiones en paralelo, lo cual hace que se descarguen más rápido.

    Tendremos que crear un subdominio en nuestro panel del hosting, y apuntarlo a la web que estamos optimizando. En el caso de cpanel, tendremos que hacerlo desde la sección Dominios > Subdominios.

    ATENCION: Es muy importante que el Document Root (Documento Principal) del subdominio estaticos apunte a /public_html y NO a /public_html/estaticos, de lo contrario no cargará ningún contenido estático y la página no se visualizará correctamente.
    Si estás usando W3 Total Cache vete al panel administrativo de WordPress, y accede a Performance, General Settings. En la sección “CDN”, habilita la función CDN, del tipo “Generic Mirrror”. Después accede a Performance, CDN, habilita todas las opciones de la sección “General”, e indica el subdominio que has configurado en la sección “Configuration”.
    ATENCION: Solo aplique estos cambios si está completamente seguro de que el subdominio "estaticos.dominio.com" funciona correctamente y apunta a la raíz de su web, si no dejarán de funcionar los ficheros CSS/Javascript e imágenes en su web. No aplique estos cambios por primera vez en una web en producción, haga primero las pruebas en una web de pruebas.

    Accede a Settings - WP Super Cache [CDN] , habilita la opción: Enable CDN Support, después, en el campo Offsite URL pon el subdominio que acabas de crear, en este caso "http://estaticos.nosolocodigo.com" , importante, SIN la barra ( / ) del final. En "additional CNAMEs" puedes poner simplemente el mismo valor. Por último marca la opción que dice "Skip https URLs to avoid mixed content errors" y guarda los cambios.

    De esta manera, a partir de este momento, los ficheros estáticos se servirán a través del subdominio que hemos configurado, con la mejora que esto supone en relación a la velocidad de nuestra web.

    Carga las imágenes de tu web únicamente si aparecen en pantalla: Lazy loading

    La última optimización consiste en instalar un plugin que hace que las imágenes se vayan descargando conforme van apareciendo en pantalla. Esto supone evitar descargar imágenes que el usuario no ve, y por lo tanto no es necesario descargarlas. Es decir, estamos evitando la descarga de las imágenes que el usuario no visualiza en la pantalla en ese momento, y las imágenes irán descargándose conforme el usuario vaya haciendo scroll en nuestra web.

    El plugin lo podeis descargar desde aquí. Una vez instalado y habilitado, no tendrás que hacer nada, funciona automáticamente.

    Con este último paso hemos terminado el procedimiento de optimización. Vamos a ver algunas conclusiones.

    Después de optimizar..

    Volvemos a hacer el test de 60 cargas de la web que hemos optimizado. Comprobamos que la mejora es la prometida al inicio del post: en torno al 28% en este caso.

     

    Existen otras mejoras adicionales que podríamos aplicar en nuestro WordPress para mejorar algo más los tiempos de carga. Serían las siguientes:

    Optimizar las imágenes de nuestra web

    Es bastante común que en nuestra web tengamos imágenes que no están convenientemente optimizadas, de forma que ocupan un espacio mayor en disco del necesario. Esto provoca un aumento en los tiempos de carga, además de consumir espacio en la cuenta de hosting de forma innecesaria. Existen diversos plugins que sirven para optimizar de forma automática el tamaño en disco de las imágenes, sin necesidad de tener que realizar acción ninguna por nuestra parte. Una opción sería el plugin EWWW Image Optimizer.

    Una vez que hayamos instalado y activado este plugin EWWW Image Optimizer las nuevas imágenes que vayamos añadiendo a nuestro WordPress se optimizarán de forma automática. Esto quiere decir que se reducirá el espacio en disco que ocupa la imagen, sin que pierda calidad alguna. Si queremos optimizar las imágenes que ya tenemos subidas en la web habrá que ir a Ajustes - EWWW Image Optimizer y pulsar en el enlace Optimización en masa. Aquí solo deberemos pulsar el botón Iniciar la optimización para que comience la optimización de las imágenes.

    Aplazar la carga del código javascript al final

    Cuando el código javascript se carga en la cabecera de la página es necesario que este código termine de cargarse antes de cargar el propio contenido visible de la web, con lo que se produce un retraso en la muestra de ese contenido visible. Este suele ser el funcionamiento por defecto de WordPress y los distintos temas que se utilizan en él. Existe algunos plugins que permiten aplazar la carga de este código javascript, de forma que se cargue al final.

    Una opción sería el plugin JavaScript to Footer, que nos permitirá realizar esta acción de forma automática. Simplemente tendremos que instalar y activar el plugin para que este comience a funcionar, sin necesidad de tener que configurar nada más.

    ATENCION: La carga aplazada del código javascript puede provocar errores en la página, precisamente en aquellos apartados de la misma donde se utilice este código: menús desplegables, galerías de imágenes, efectos de ampliación de imágenes, acordeón, etc. Por tanto, es importante que después de utilizar algún plugin de este tipo verifiquemos que la web y todos sus contenidos sigan cargando con normalidad. En caso contrario, es preferible no utilizar ningún plugin para aplazar la carga del javascript.

    Ya tenemos nuestro Wordpress ultrarrápido, comprueba a partir de ahora las ventajas que esto supone :)

    Hasta otro post!


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Rafa Noguera

Rafa Noguera es técnico en Nosolocodigo.com. Expertos en Joomla, Magento y Wordpress. Google+ | Twitter