Eliminar la query string de archivos CSS y JS en WordPress

Uno de los ajustes más comunes en el proceso de acelerar la descarga de nuestra página web (WPO) es establecer la caché del lado del navegador del usuario, que evitará que éste se descargue determinados archivos en cada visita, como imágenes, ficheros de hojas de estilo o ficheros de javascript.

Estableceremos la caché de navegador desde el fichero .htaccess de nuestra web, definiendo un tiempo de cacheo para cada tipo de archivo de nuestro sitio, ya que una imagen no tendrá por norma general la misma duración de caché que por ejemplo un fichero CSS, y con unas sencillas instrucciones tendremos lista la caché de navegador de nuestra web.

Ficheros CSS y JS con parámetros (query string) en su URL

A veces en CMS´s como WordPress tendremos varios ficheros javascript o de hojas de estilo que se sumarán al código fuente del sitio con parámetros del tipo:

<script type="text/javascript" src="http://www.midominio.xx/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.3.1"></script>

Como puedes ver, al final de la URL aparece un parámetro ?ver=4.3.1 que determina la versión del archivo que se está cargando. Hasta ahí todo correcto, pero ¿Que sucede con estas URLs que incorporan la interrogación (query string)? Pues que este tipo de ficheros no se guardan en la caché del navegador y provocan que el usuario se los tenga que descargar en cada consulta a la web.
Sucede además que WordPress añade muchos de estos archivos a través de plugins, lo que hace que cuando tengamos nuestra web lista encontremos 5, 10 o más ficheros CSS o JS que no se cachean y que por lo tanto relentizan el tiempo de carga de nuestra web.

Cómo eliminar la interrogación de los ficheros CSS y JS en WordPress

Para solucionar esto podemos añadir el siguiente código al fichero functions.php de nuestro tema, y así eliminar estas cadenas extras en la URL de los ficheros permitiendo cachearlos a nivel de navegador. El código es este:

/* SE ELIMINAN LOS QUERY STRINGS (?) DE LOS ARCHIVOS ESTATICOS JS Y CSS*/
function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
/* FIN SE ELIMINAN LOS QUERY STRINGS (?) DE LOS ARCHIVOS ESTATICOS JS Y CSS*/

Con este simple código tus ficheros CSS y JS ya serán cachebles. Espero que te sirva de ayuda


Cómo crear una versión móvil de tu web

Desde hace años que se viene hablando de las versiones móviles de los sitios web, sobre todo desde la revolución de los smartphones, pero desde hace 2-3 años a esta parte lo que se intuía como una opción es ya una necesidad, tanto por el cambio del comportamiento de los usuarios, que cada vez usan más sus dispositivos móviles incluso superando ya a la navegación de escritorio, como por su incidencia en los resultados de búsqueda que incluso Google ha anunciado.

Ofrecer a los usuarios y a los robots de los buscadores una versión móvil de nuestra web es ya una necesidad si queremos que nuestro proyecto online arraigue con fuerza, y para eso tenemos 3 opciones posibles.

Diseño web adaptable

Este tipo de diseño es la mejor opción para la mayoría de sitios web.
El diseño adaptable o responsive es aquel que adapta la estructura y los contenidos al tamaño de la pantalla del usuario tratando de facilitar el acceso a la web en pantallas más pequeñas.

Este tipo de diseño web tiene múltiples ventajas como puede ser el ahorro de recursos ya que el sitio web es el mismo tanto para dispositivos móviles como para navegadores de escritorio y el mantenimiento o la actualización es más sencillo. Además cualquier acción que se lleve a cabo (SEO, PPC, Analítica web…) se realiza tanto para los usuarios móviles como para los de escritorio al mismo tiempo.

Este tipo de diseño puede presentar algunos inconvenientes en determinados proyectos que necesiten de requerimientos muy específicos y que su adaptación a pantallas más pequeñas no sea viable por la propia naturaleza del servicio, pero éstos son casos, muy concretos y poco frecuentes.

Contenido dinámico

Esta solución presenta 2 versiones web, una para móvil y otra para escritorio, pero manteniendo siempre la misma URL.
Es la segunda opción recomendada por Google en el caso de que no pueda llevarse a cabo un diseño adaptable.

En esta opción se debe prestar especial atención en la forma en la que se dirige a la versión móvil tanto a los usuarios como a los robots de los buscadores, y deben identificarse las cadenas de agente de usuario del navegador para su correcto funcionamiento, utilizando además la cabecera “Vary HTTP” e informar al robot mobile de los buscadores del contenido para estos dispositivos.
Si quieres conocer algo más sobre su implementación de esta cabecera vista esta página para desarrolladores de Google

Esta opción nos permitirá un mayor control sobre la versión móvil y de escritorio ya que se desarrollan de forma independiente y además aprovechará por ejemplo, como la versión responsive, la fuerza de nuestras campañas SEO.
Por contra nos exigirá mayor cantidad de recursos ya que tendremos que desarrollar de forma paralela 2 versiones de nuestra web

Sitios web independientes

Con mucho la opción menos recomendada de entre las que se tratan en este artículo.
Esta opción también presenta 2 versiones web diferentes, una para los dispositivos móviles y otra para los de escritorio pero dirigiendo a cada grupo de usuarios a una URL diferente.
La redirección se lleva a cabo identificando las cadenas del agente de usuario y enviado a los usuarios a su versión web correspondiente según está información.

El caso más habitual de las 2 versiones de URL sería algo así:

  • Versión móvil: http://movil.midominio.es
  • Versión escritorio: http://www.midominio.es

En esta opción se debe prestar especial atención a las etiquetas que se deben añadir en cada versión de la web para que los robots de los buscadores entiendan la relación entre ambas y sepan cual es el contenido que debe indexarse y cual es el contenido alternativo para los móviles y tabletas.

Las etiquetas a implementar sería así:

Para la versión de escritorio se empleará la etiqueta alternate:

<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://movil.midominio.es" >

Para la versión móvil se empleará la etiqueta canonical:

<link rel="canonical" href="http://www.midominio.es" >

Además de esto, se debe incluir en el sitemap del sitio web ambas versiones para que los robots sean capaces de indexar ambas versiones de forma más eficiente y rápida, quedando de la siguiente manera

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.midominio.es
<xhtml:link rel="alternate" media="only screen and (max-width: 640px)"
href="http://movil.midominio.es" />
</url>
</urlset>

Esto es todo. Espero que te haya servidor como ayuda u orientación a la hora de saber que tipo de sitio web móvil se ajusta más a tus necesidades.


Charla de Javier Casares Mejorar el rendimiento de Wordpress - Wordpress Day Cantabria

Javier Casares en Wordpress Day Cantabria Turno para Javier Casares con WPO para Wordpress, la ponencia de este Cantabria Wordpress Day a la que le tenía más ganas.

Javier es un referente en lo que web performance se refiere, al menos para mí, sobre todo por su claridad y experiencia en un tema tan técnico y específico.

De cara a la mejora del rendimiento de nuestros Wordpress debemos tener presente algunas cosas como:

  • Configuración
  • Análisis
  • Alojamiento web
  • Plantillas
  • Plugin

Entre los consejos que nos ha ofrecido en su extensa charla destacaría:

  • Cuida tus plugins. Busca calidad frente a funcionalidad
  • Buscar un hosting con buena conectividad, no necesariamente en tu mismo país
  • Activar GZip en nuestro host
  • Activar cache de Wordpress y configurar la expiración de estas
  • Tratar de optimizar la base de datos

Hablamos de Wordpress, así que en WPO también tenemos plugins como P3, que nos permitirá conocer que falla en nuestra instalación de Wordpress. Plugin imprescindible.
Ha comentado muchos otros plugins para externalizar el correo y sacarlo del servidor principal, configuraciones de SSL, minificar ficheros... Ha comentado tantos que no puedo detallarlos todos en este experimento de live blogging, os voy a remitir a los slides de su ponencia donde los encontrarás todos (https://www.dropbox.com/s/d12aum23zrxhihp/wpcantabria-mejora-rendimiento.pdf?dl=0)

Seguramente una de las ponencias más densas de la jornada, que personalmente revisare en detalle y con mas tranquilidad delante del ordenador. La verdad es que es lujo escuchar a Javier Casares hablando de WPO


Charla de Dario Balbontín La potencia sin control no sirve de nada - Wordpress Day Cantabria

Dario Balbontin en Cantabria Wordpress Day ¿Cuanto de potente o cual es el límite de Wordpress? Dario Balbontin ha desarrollado un charla bastante clarificadora en este sentido. Wordpress no tiene limites sobre todo si lo utilizas como framework más que como gestor de contenidos puro y duro.

Dario ha hecho un recorrido por las características y posibilidades que Wordpress pone a nuestra disposición siempre desde el punto de vista de la personalización de todas estas opciones: plantillas, plugins... Además de algunas opciones avanzadas que podemos encontrar por defecto y quizás no son demasiados conocidas como la caché de Wordpress.

¿Como podemos mejorar el rendimiento de nuestro Wordpress desde su instalación?

  • Determina los permisos de archivos
  • Configuracion del fichero robots.txt
  • Mejorar el fichero .htaccess
  • Realizar algunos ajustes de seguridad básicos
  • Ajustar la estructura de los enlaces

Además de estos ajustes de seguridad "manuales" podemos utilizar algunos plugins:

  • Akismet
  • EliminaCabeceras
  • Limit login attemps
  • Wordpress Firewall
  • Acunetix WP Security
  • Wordpress Database Backup

Hablando de controlar la potencia de Wordpress ha repasado tambien algunos ajustes de código y usos recomendados que harán mejorar el rendimiento de nuestro Wordpress y nuestro hosting

Una charla técnica que podemos aplicar desde ya y que sin duda tendremos que repasar cada vez que hagamos una instalación para disponer de un Wordpress lo mas optimizado posible tanto a nivel de rendimiento como de seguridad


Charla de Antonio Villegas Test A/B en Wordpress - Wordpress Day Cantabria

Si Caín Santamaría no lo tuvo fácil abriendo la jornada, Antonio Villegas no lo ha tenido mejor después de la comida/networking ;)

Antonio Villegas en Wordpress Day Cantabria Nos expone 2 formas de mejorar los resultados de nuestra web: Generar más tráfico o mejorar los resultados del tráfico que ya tenemos. En esta última opción es en la que se ha basado la ponencia, y la clave de los test A/B

¿Cómo puedo optimizar mi web?

  • Analítica web
  • Realizando encuestas
  • Haciendo estudios de usabilidad
  • Probar posibles mejoras

Para todo esto Antonio propone realizar test A/Bde nuestras web, formularios o todo aquello que queramos optimizar.

Algunas de las recomendaciones para las web que tienen poco tráfico Antonio propone

  • Test de elementos de alto impacto
  • Construye alternativas radicales
  • Testea paginas con mas tráfico
  • haz testing de Amplio espectro

Para realizar este tipo de test en Wordpress puedes utilizar algunos plugins como el de su empresa, Nelio Test A/B, un plugin bastante flexible y con periodo de prueba.

Ha explicado el funcionamiento de este plugin y las alternativas que nos ofrece para poner en marcha nuestro test y las conclusiones que podemos obtener realizando este tipo de pruebas, algo que debemos dejar de hacer porque la optimización es un proceso continuo.

La charla ha sido basada quizás en exceso en el plugin, pero ha explicado muy bien la base de los test A/B para quienes no conozcan este tipo de prácticas de optimización.


Charla de Dani Reguera Internacionalización y multilenguaje en Wordpress

Dani Reguera en Wordpress Day Cantabria Dani Reguera ha empezando su charla aclarando 2 conceptos claves: internacionalización y multilingüismo, algo importante a tener en cuenta antes de comenzar nuestro proyecto.

La clave pasa por internacionalizar el contenido ajustando el lenguaje al que emplea el usuario (no es lo mismo el inglés americano que el londinense), además debemos disponer evidentemente de multiidioma para que el usuario pueda navegar por nuestro site en su idioma natural.

No es tan sencillo como traducir literalmente nuestro contenido a 2, 3 o 6 idiomas.

Otra recomendación muy importante que Dani Reguera nos hace es cuidar las redirección del usuario cuando cambiamos de idioma. Es importante llevar al usuario a la misma página en la que estaba antes de cambiar de idioma.

Dani nos ha hablado además de una serie de plugins que nos van a permitir manejar varios idiomas en nuestros sitios, ademas de algunos consejos sobre la etiqueta hreflang, que nos facilita indicar a los buscadores donde están las diferentes versiones de nuestro contenido según su idioma.

Algunos consejos que nos da para nuestros sitios multiidioma

  • URL traducida al idioma
  • Contenido traducido, evidentemente
  • Etiquetas SEO traducidas
  • Ajustar etiquetas de idioma ISO al idioma adecuado

Una ponencia supercompleta que para quienes no estamos tan al día en sitios multiidioma y que ha resultado bastante clarificadora.
Dani es un ponente muy rápido y me ha sido casi imposible seguirle "al vuelo". Disculpas por ello :/


1 2 3 4 5 6