Guía para mejorar la velocidad de WordPress. Parte 2

En la entrada anterior, vimos como utilizar la herramienta de Google PageSpeed Insights para valorar la velocidad de carga de nuestra web y como mejorar, según las recomendaciones que nos da esta fantástica herramienta. Hoy vamos a avanzar un poquito más y aprenderemos a configurar de manera correcta el plugin de WordPress WP Super Cache. Una buena configuración supondrá que nuestra web cargue más deprisa.

 

Cache: que es y como funciona

Seguro que has oído hablar cientos de veces de la cache y seguro que sabes como funciona. Si eres de los que no lo sabe esto te vendrá bien. La cache es una forma de entregar la información, la cual ya estaba almacenada y no es necesario solicitarla a la fuente original, liberando al servidor de trabajo y por lo tanto mejorando la velocidad de carga. Si queréis una definición más extensa o más info. Google os ayudará.

¿Por qué es importante? Si tienes muchas visitas en tu web y no la tienes bien optimizada (pesa mucho, muchas imágenes, javascript, código fuente, etc.) el servidor puede no dar más de si y venirse abajo. Y esto amigos, supone un problema.

 

WP Super Cache: instalación y configuración

A nosotros nos gusta este plugin y es del que hablaremos, pero existen otras opciones como W3 Total Cache (que ya recomendamos en otra entrada) o WP Fastest Cache. Vamos a entrar en materia.

Lo primero de todo es descargarse el plugin. Podéis sacarlo del repositorio de WordPress en esta dirección: Descargar. Una vez lo tengáis instalado y activado, podemos empezar con la configuración del mismo. Para ello vamos a Ajustes > WP Super Cache.

 

WP Super Cache WordPress

 

Cuando entremos en la configuración veremos esta pantalla. Lo que haremos será activar el plugin, por lo tanto, activaremos la opción Catching On (Recommended). Actualizamos estado y la cache comenzará a funcionar. Es interesante ir mirando en Google PageSpeed Insights como va mejorando nuestra puntuación. Para configurar todas las opciones, hacemos click en la pestaña Avanzado.

 

WP Super Cache WordPress Avanzado

 

En la sección Avanzado hay muchas opciones. Nosotros activaremos las siguientes:

Use mod_rewrite to serve cache files: por defecto viene activada la segunda opción. Nosotros la cambiamos y seleccionamos la primera. Con esto conseguimos que el plugin sirva la cache mediante .htaccess y no mediante PHP. Esto puede fallar en servidores que no utilicen .htaccess, en estos casos utiliza la opción por defecto.

Compress pages so they´re served more quickly to visitors: esta opción habilita la compresión gzip y se comprimen todas las páginas para mejorar la velocidad de carga.

Don’t cache pages for known users: con esto lo que hacemos es que el plugin no sirva la cache a los usuarios logueados en WordPress. Es muy útil para cuando hacemos modificaciones en la web y queremos ver los resultados.

Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated: otra opción que tenemos que activar. Esto lo que hace es servir un archivo mientras se esta generando el nuevo, por ejemplo cuando un usuario publica un comentario, actualiza la cache.

Mobile device support: viene de serie activad y añade compatibilidad para móviles.

El resto de opciones las dejamos como están y ya tendremos una parte del trabajo realizada. Bajamos un poco y le damos al botón Actualizar Estado. Debajo del botón aparecerá lo siguiente.

 

WP Super Cache WordPress Reglas Mod Rewrite

 

Al final de este cuadro amarillo tendremos un botón que dice Actualizar reglas mod_rewrite, lo pulsamos para que las reglas se actualicen en nuestro archivo .htaccess. Aparecerá una ventana verde con el resultado final. Y así, el plugin está operativo, pero nosotros seguimos con un par de cosas más.

 

WP Super Cache WordPress Contents

 

Pasamos a la pestaña Contents. Aquí simplemente vemos las páginas de nuestra web que han sido almacenadas en la cache. También podemos borrar la cache por si hemos realizado alguna modificación y así se genere de nuevo. Tenemos 2 botones que son:

Regenerate cache stats: para actualizar los datos.

Mostrar archivos en cache: podremos ver todos los archivos en la cache y borrarlos de manera independiente.

Ahora vamos a pasar a la pestaña Preload. Es muy importante configurar bien sus opciones para precargar la cache, es decir, que se genere antes de que el usuario entre en nuestra web. Esto no solo es útil para el usuario, que recibirá la información antes, si no también para nuestro hosting que no tendrá que trabajar tanto.

 

WP Super Cache WordPress Preload

 

Aquí lo que haremos será decirle al plugin, cada cuanto tiempo tiene que crear la cache. Yo recomiendo 1440 minutos (un día entero). En cuanto al resto de opciones, las podemos dejar tal cual. Cuando lo tengamos listo, hacemos click en Update Settings y luego en Preload Cache Now. A partir de aquí, el plugin te indica cuanto tarda en crear la cache. En función del tamaño de tu web puede tardar más o menos.

Conclusión: Velocidad de carga mejorada

Con todo esto, ya tenéis vuestro plugin funcionando. Cuando la cache se haya generado podéis hacer un nuevo test en Google PageSpeed Insights para comprobar si ha mejorado la puntuación de tu web. No te obsesiones con esto ya que no depende solo de ti, pero si haces las cosas bien en tu web y contratas un buen servidor, no tendrás problemas.

Nota: La pestaña CDN nos la hemos saltado ya que no es necesaria si no tienes un volumen elevado de visitas. Es algo más complicado de configurar ya que necesitas un servicio de CDN como Cloudflare para hacerlo funcionar correctamente. Recomendamos acudir a un experto para configurarlo.

 

Guía para mejorar la velocidad de WordPress. Parte 1

Tener una web en WordPress no es solo añadirle contenido y ya está. Tu web tiene que estar bien optimizada. Y esto es una guerra que nunca termina. Cuando tenemos una web ya sea un blog, un portfolio o una tienda, siempre estamos buscando cosas nuevas que mejoren nuestra posición en internet. Esto tiene sus efectos positivos pero, ¿nos paramos a pensar como afecta a nuestra web en términos de carga?.

Como usuario, si una web tarda más de 2 segundos en cargar, lo más probable es que me haya ido a buscar lo que quería a otro sitio y probablemente no vuelva (fallo de experiencia de usuario). La velocidad es algo fundamental en una web no solo para los usuarios, también para Google. ¿Y esto es cierto? Pues sí, ya que Google posiciona mejor las webs que tienen una mejor velocidad de carga. Al usuario no le gusta esperar y Google siempre se adapta a ello mostrando webs más rápidas.

 

Herramientas para medir la velocidad web

 

Ahora te preguntarás, ¿Y como sé si mi web esta bien optimizada y carga a la velocidad de la luz? Pues es tan sencillo como utilizar una de las múltiples herramientas online. Aquí te recomendamos las siguientes:

Todas funcionan igual: insertas la url de tu web y le das al botón de analizar. Una vez ha terminado el proceso, te dará un calificación de la F a la A o de 0 a 100. Con esa calificación ya sabrás si tienes una web rápido o no. Pero la cosa no queda aquí, ya que estas herramientas proporcionan información adicional para mejorar tu web. Nosotros vamos a ver la información que nos da Google PageSpeed Insights.

Una vez introduzcas y rastrees tu web, PageSpeed Insights te ofrecerá 2 pestañas: una con la puntuación para móviles y otra para la versión de escritorio de tu web. Mediante un código de colores podemos saber las cosas que están mal (rojo) y hay que darles prioridad, las cosas que tenemos que mejorar (amarillo) y lo que esta bien en nuestra web (verde). En los móviles hay un extra que es la experiencia de usuario, que puntúa de la misma forma.

google pagespeed insights

Cuantas más reglas cumplamos y estemos en verde, mejor valoración tendremos. Lo interesante de Google PageSpeed Insights, es que nos dice exactamente lo que tenemos mal y como mejorarlo. Vamos a centrarnos en estos avisos y la forma de solucionarlos en WordPress.

 

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

 

Esta recomendación es, probablemente, la más común de todas. Hace referencia a la forma en la que se cargan los elementos de la web. Podríamos decir que Google es un poco caprichoso y, como siempre, da prioridad al contenido y que el resto de cosas se ejecuten al final de la web.

Si has desarrollado la web desde 0 o has añadido tu mismo el CSS  y el JavaScript, puede que este problema no lo tengas, pero si utilizas una plantilla (y no esta optimizada) seguramente tengas este problema. Es complicado de solucionar ya que depende mucho de la plantilla elegida y de los plugins que tengamos. Puedes usar un plugin como JavaScript to Footer  que mueve la carga de JavaScript al footer de la web, aún así, si tu web tiene mucha cosa probablemente se te desconfigure la misma, así que copia de seguridad y úsalo bajo tu propio riesgo.

 

Optimizar imágenes WordPress

 

Quizá sea lo mas sencillo de hacer y sin riesgo. Lo interesante es que PageSpeed Insights te ofrece un listado de imágenes que ocupan más de lo necesario y deberías optimizarlas.Para ello puedes hacer 2 cosas:

  • Descargar todas las imágenes que te recomienda PageSpeed Insights y optimizarlas mediante Photoshop o alguna herramienta similar. Luego las subimos de nuevo.
  • Utilizar un plugin (un clásico) como WP Smush o EWWW Image Optimizer que optimizan las imágenes nada más subirlas. También puedes optimizar las que ya hay subidas.

Esta primera opción es la mejor ya que siempre hay que limitar el uso de plugins.

 

Habilitar compresión

 

Esto consiste en comprimir los recursos de tu web con gzip, tecnología que tiene que estar habilitada en tu servidor. Puedes añadirlo mediante un plugin como WP Super Cache (hablaremos de el en otro momento) o añadir el siguiente código a tu archivo .htaccess

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Recuerda haz una copia de seguridad del archivo .htaccess antes de tocar nada.

 

Minificar HTML, CSS y JavaScript

 

Esto nos dice que tenemos que compactar nuestros archivos HTML, CSS y JavaScript eliminando espacio innecesario, comentarios, etc. PageSpeed Insights te recomienda que archivos tienes que modificar y, lo mejor, es que te da la opción de descargar las versiones ya preparadas de dichos archivos.

google pagespeed insights

Con Google PageSpeed Insights podrás mejorar el rendimiento de tu web gracias a su información intuitiva y fácil de aplicar, además de que es una herramienta gratuita. De todos modos, no te vuelvas loco si no puedes aplicar todas las recomendaciones ya que algunas no dependen de tí.

En el próximo post veremos como configurar el plugin de caché WP Super Cache

El código nos divierte como a enanos

Hace unos días encontré en la App Store una aplicación llamada Codeacademy con la que supuestamente podemos aprender a programar: un poco de JavaScript por aquí, un poquito de HTML, su dosis de CSS… y ya tenemos un programita o una web. Después de leerme un poco de lo que trata la aplicación (aquí toda la información) me la descargué y la probé. Tengo que decir que todo muy básico y muy intuitivo. Es una aplicación para aprender algunos conceptos básicos sobre la programación. Nada del otro mundo.

Lo realmente interesante está en su web: http://www.codecademy.com/. A través de esta, podemos aprender a programar de una forma sencilla y divertida, mediante una consola interactiva con la que programar y una serie de ejercicios prácticos para empezar desde cero. Codecademy propone desde el principio, tres ejercicios con los que aprender los conceptos más básicos de HTML, CSS y JavaScript.

· Web Personal: Con el primer ejercicio aprenderemos los conceptos básicos de la programación web con HTML y CSS. Muy sencillo e intuitivo.

· Anima tu Nombre: El segundo ejercicio nos permite desarrollar una pequeña animación con un poco de JavaScript.

· El Sistema Solar: En este último ejercicio aprenderemos, sobre todo, CSS. El objetivo es desarrollar el sistema solar con HTML y CSS.

A medida que avanzamos, vamos consiguiendo medallas o logros que podremos compartir, al igual que todos los ejercicios que completamos. Destacar que, a pesar de que también está en castellano (América Latina), la plataforma está en inglés y es como mejor están desarrollados los ejercicios (por una mala traducción al castellano en muchas cosas).

Codecademy es una buena forma de acercarse a la programación y aprender los conceptos básicos. ¿Por qué me parece interesante? Porque creo que en el mundo tecnológico en el que vivimos, en el que con un solo click podemos encontrar información sobre todo, aprender algo de programación para iniciar tu proyecto online es algo fundamental.

Instalar WordPress en local para Mac

Imaginaos por un momento que estais en una clase de desarrollo web con WordPress y, salvo vosotros, nadie mas tiene una Mac. Lo mejor de todo viene cuando le preguntas al profesor y te dice que no tiene ni idea de instalar WordPress en local en un Mac. Por un caso similar, hace más o menos un año realice un videotutorial explicando paso por paso como instalar WordPress en local para Mac. Hoy recupero ese video que publiqué en su momento en mi web personal: manueladver.com

 

Instalar WordPress en local para Mac puede convertirse en una pesadilla muy grande si no sabes como hacerlo y, lo peor, es que hay pocos tutoriales que lo dejen completamente claro y, si buscamos videotutoriales, es aún peor (y lo digo por propia experiencia). Espero que este video os sirva de ayuda.

Pin It on Pinterest