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.

 

Tienda Online: 9 puntos a tener en cuenta

Un día te levantas y te dices a ti mismo “si todo el mundo vende por internet ¿por qué yo no? es la hora de montar una tienda online”. Cada vez compramos más por internet, por lo tanto, es una oportunidad de negocio muy real. Vender nuestros productos por la red de redes, nunca había sido tan fácil. Tenemos multitud de sistemas y plataformas para vender nuestros productos. Nos montamos una página web tipo tienda, metemos nuestros productos y ya lo tenemos todo listo para vender… pero ¿esto es así?.

A la hora de montar una tienda online hay que tener una serie de cosas muy claras, si no queremos fracasar a las primeras de cambio. Una tienda online la podemos tener montada en unas horas utilizando gestores de contenido como WordPress con su plugin Woocommerce, utilizar la plataforma de tienda online Prestashop o Magento, otra plataforma de tienda online. Pero, si tu tienda física no la empiezas con el local ¿lo harías con tu tienda online?.

 

graficadver diseño web tienda online

 

Tienda online: 2 Preguntas fundamentales

 

Antes de ponernos con la plataforma que vamos a utilizar y el diseño de la tienda, me gusta responder a estas 2 cuestiones:

 

  • ¿Conozco a mi cliente objetivo? saber quien es mi cliente, quien es el destinatario de mis productos. Esto es igual que si montas una tienda física: tienes que conocerlo a la perfección para saber como llegar hasta él.
  • ¿Conozco a mi competencia? puede que mi competencia ya esta vendiendo online. Conocer como lo hace la competencia nos puede ayudar a saber como enfocar nuestra tienda, como podemos mejorar lo que hacen ellos, que podemos ofrecer que ellos no, etc.

 

Una vez respondemos a estas 2 preguntas, es la hora de dejar claros los aspectos básicos, lo que ofrecerá nuestra tienda online:

 

Donde queremos vender

 

¿Queremos vender solo en nuestro país o a todo el mundo? pensad en las aduanas, restricciones que tienen los países a ciertos productos e incluso en tu propio país te puedes encontrar con problemas a la hora de realizar envíos de ciertos productos.

 

Tipo de producto

 

¿Vendemos productos físicos o servicios? tenemos que tener muy en cuenta el tipo de producto que vendemos ya que así podremos determinar si necesitamos envío o no, que precio tendrá el envió, etc.

 

Características de los productos

 

¿Tenemos la información detallada de nuestro producto? descripción, fotos, características concretas, es algo fundamental para que nuestros clientes sepan lo que están comprando.

 

Formas de pago

 

Si vamos a usar TPV contratado con un banco, PayPal, contrareembolso, etc. Ahora mismo existen multitud de opciones a la hora de pagar y que el cliente agradece. Estudia las que hay y elige las que sean mejores para ti y tus clientes.

 

Plazo de las entregas

 

Un punto muy importante que puede decantar muchas ventas. Gestionar bien los plazos de entrega es fundamental y hay que tener claro cuanto tardará en llegar al cliente final nuestro producto. El plazo de entrega lo enlazamos con los el tipo de producto por temas de envío, peso, etc. No te comprometas con plazos que no puedas cumplir.

 

Devoluciones

 

Otra cosa a tener en cuenta es nuestra política de devoluciones. Hay que tenerla bien desarrollada y que los clientes puedan acceder a ella sin dificultad. Evita muchos problemas.

 

Una tienda online requiere que tengamos todos estos puntos claros, bien analizado todo y lo más detallado posible. Si no es así, las posibilidades de fracasar son altas. Es tedioso y aburrido, seguro que más de uno lo considera hasta complicado, pero es algo que hay que realizar antes de empezar con el desarrollo de la propia tienda.

 

graficadver diseño web tienda online

 

Por fin tengo mi tienda, pero ¿he terminado ya?

 

El trabajo en una tienda online no termina cuando tengo la web finiquitada. Necesita de una trabajo constante que incluye cosas como:

 

  • Gestionar pedidos: estos llegan a través de la web y hay que revisarlos para que no haya errores, proceder con la preparación y el envío del producto.
  • Incidencias: aquí entra todo tipo de problemas, desde envíos que no llegan, cuentas que no se activan correctamente, etc.
  • Pagos y devoluciones: revisar que los pedidos se han pagado y, sobre todo, saber como gestionar de manera correcta las devoluciones.
  • Actualizar nuestra tienda y promocionar: este es un trabajo duro, hay que estar muy pendiente del stock, añadir productos nuevos y detallarlos a la perfección, promocionar nuestra tienda mediante redes sociales, nuestro blog, etc.

 

Como veis una tienda online requiere de tener las cosas muy claras antes de empezar con el diseño de la propia tienda. Requiere de una importante planificación previa que mucha gente no tiene en cuenta y es el motivo por el que fracasan. Si lo haces bien podrás conseguir un negocio rentable y con la comodidad de poder gestionarlo desde cualquier sitio.

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

Tu WordPress te necesita: Plugins imprescindibles

Siempre he renegado un poco de los plugins de WordPress. ¿Por qué? Básicamente porque consideraba que pudiendo hacer tu mismo las cosas con un poquito de php, html y css, no es necesario recurrir a los plugins. Pero, cuando uno empieza a trabajar con WordPress, se da cuenta de que hay cosas que es mejor controlarlas mediante plugins. Nos hacen la vida más fácil, sencilla y son una herramienta imprescindible si queremos tener nuestra web o blog a punto. 

 

¿Muchos plugins o pocos y de calidad?

 

A la hora de trabajar con plugins es preferible tener pocos instalados, sobre todo porque hay que ver como afectan estos a la velocidad de carga de nuestra web. Cuantos más plugins, lo normal es que nuestra web necesite cargar un mayor número de archivos y viceversa, afectando esto a la velocidad de carga. De todos modos depende del tamaño de los plugins, ya que uno solo puede tener el tamaño de 5.

Yo recomiendo que utilicemos los plugins que de verdad necesitemos y que nos ayuden a controlar mejor nuestra web.

 

Los Imprescindibles de WordPress

 

WordPress SEO by YOAST

Plugins WordPress SEO by Yoast

La joya de la corona, imprescindible si tienes un blog. No es un plugin fácil de configurar por lo que tendrás que dedicarle tiempo. Tiene un montón de funcionalidades como optimización de imágenes, sitemap, etc. Para configurarlo correctamente te recomiendo esta guía de Victor Saldarriaga:

WordPress SEO by YOAST: Configurar correctamente parte 1

WordPress SEO by YOAST: Configurar correctamente parte 2

WordPress SEO by YOAST: Configurar correctamente parte 3

Si no tienes tiempo para configurarlo All in One SEO puede ser tu solución, más sencillo de configurar pero con menos opciones.

Descargar WordPress SEO by YOAST

 

UpdraftPlus – Backup/Restore

Plugins WordPress UpdraftPlus

Otro plugin imprescindible si queremos tener segura nuestra web. Con este plugin podremos realizar copias de seguridad de toda nuestra web. ¿Por qué es importante? Siempre podemos tener problemas con un plugin que se instala mal, una mala actualización de Wordpres, un ataque externo, etc. Es muy sencillo de configurar y permite tanto hacer copias y guardarlas en tu servidor, como guardarlas en servicios en la nube como Dropbox.

Descargar UpdraftPlus

 

W3 Total Cache

Plugins WordPress W3 Total Cache

Probablemente sea el mejor plugin para gestionar la cache de nuestra web. Por si no lo sabes, la cache es una funcionalidad que hace que se guarden ciertos elementos de la web para que no tengan que volver a ser servidos, acelerando de esta forma la carga de nuestra web. Es un plugin complejo de utilizar y al que tendrás que dedicarle tiempo.

Guía de configuración de W3 Total Cache

Descargar W3 Total Cache

 

Google Sitemap

Plugins WordPress Google Sitemap

WordPress SEO by YOAST ya trae su propio gestor de sitemap, pero si no te aclaras, Google Sitemap es un plugin sencillo que te permitirá crear tu sitemap y tenerlo actualizado con un solo click. Complemento perfecto para Google Webmaster Tool.

Descargar Google Sitemap

 

WP Cookie Banner

Plugins WordPress WP Cookie Banner

¿Habeis visto ese popup que tienen todas las web hablando de las cookies? Seguro que si. WP Cookie Banner es un plugin que nos permite añadir un popup para explicar que hacemos con las cookies. Es sencillo de utilizar y tiene opciones muy diversas. Podemos escribir el texto que queramos y darle el estilo que mas concuerde con nuestra web. Recordad que hay que cumplir la ley.

Descargar WP Cookie Banner

 

Antispam Bee

Plugins WordPress Antispam Bee

Con este plugin bloquearas todo el spam de tu blog. Tiene unas sencillas opciones de configuración. Además añade en el dashboard una gráfica con la que ver todo el spam que está bloqueando.

Descargar Antispam Bee

 

Login LockDown

Plugins WordPress Login Lockdown

La seguridad en WordPress es fundamental sobre todo cuando tenemos una web con muchas visitas y susceptible de intentar ser tirada abajo de alguna forma. La función de este plugin es registar la IP, la fecha y la hora de los intentos fallidos de hace login en nuestra web. Si detecta varios intentos fallidos en un breve periodo de tiempo, bloquea el inicio de sesión. Un plugin sencillo de configurar que nos proporcionará seguridad extra.

Descargar Login LockDown

 

Contact Form 7

Plugins WordPress Contact Form 7

Muchos templates traen por defecto su página de contacto o un shortcode de contacto. Si lo que quieres es tener un formulario personalizado al 100% lo mejor es utilizar este plugin. Puedes crear los formularios que quieras y para hacerlos funcionar solo tendrás que utilizar el shortcode que generan. Fácil y sencillo.

Descargar Contact Form 7

 

9º Flare

Plugins WordPress Flare

Puedes recurrir a los clásicos iframes que ofrecen las diferentes redes sociales, pero si quieres tener un todo en uno, Flare es tu plugin. Muy sencillo de utilizar y nos permitirá añadir las redes sociales que queremos utilizar. Lo podremos colocar tanto al principio com al final de nuestros posts. Incluye la barra flotante que nos persigue mientras hacemos scroll. Lo dicho, todo en uno.

Descargar Flare

 

Estas son nuestras propuesta, ¿utilizais algún plugin en especial?.

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