Seguimos con nuestra épica saga de artículos. Esta vez vamos a rematar todos los puntos que había comentado en la primera entrega.
Para ello vamos a finiquitar la página y solventar todos los errores que detectamos en nuestra mini-auditoría inicial, así que toca trabajar en lo siguiente:
- Optimización de los tiempos de carga.
- Mejoras en la seguridad de la web.
- Corrección de los errores de crawleo.
Si andas algo perdido aquí tienes el enlace a la primera entrada de A song of Seo and Aliexpress.
Tabla de Contenidos
Recuerda que esto lo estoy haciendo «live». Simplemente abro un nuevo borrador en WordPress y voy redactando la entrada a medida que hago los cambios 👌.
Antes de continuar me gustaría hacer una aclaración. En aras de estructurar estos posts y no enrollarme demasiado estoy explicando todo lo que llevo a cabo a modo de «checklist». No os lo toméis al pie de la letra, cada sitio es un mundo y hay decenas de detalles propios de cada web que debemos trabajar si queremos hacer un buen trabajo.
Web Performance Optimization
Llegados a este punto, creo que ya estáis acostumbrados a mi manera de estructurar los artículos. Así que voy a saltarme la parrafada explicando que es el WPO y paso a dejaros una preciosa captura del excel con el que estoy trabajando ahora mismo.
Básicamente podéis ver 3 secciones diferenciadas:
- La primera muestra métricas obtenidas en distintas herramientas siendo estas Pagespeed Insights de Google (Mobile/Desktop), Pingdom, GtMetrix (Pagespeed/YSlow) y datos de Webpagetest.org.
- A continuación hago una serie de comprobaciones a las distintas versiones de la web: con o sin ssl y con o sin el prefijo www. Me he encontrado a varios clientes con redirecciones extrañas y bucles con el https. Hay que asegurarse de que todo funciona perfectamente 😎 .
- Para terminar marco unos objetivos con dos webs de la competencia. Mi criterio para seleccionar dos sitios suele ser: el primer puesto para el competidor más potente (en cuanto a visibilidad) mientras que el segundo puesto se lo adjudico a la página con una mejor relación optimización/rankings.
Estamos utilizado el servidor de Estocolmo para las medidas de Pingdom y el ubicado en Dulles (Chrome) en Webpagetest.org
Este es un primer boceto de nuestra hoja de cálculo (la plantilla básica que uso para todos mis proyectos). Tengo muy mascada la metodología que uso para mis sitios y os la desglosaré en breves, pero sentiros libres de adaptarla a vuestro gusto.
Podéis fijaros que voy realizando cambios poco a poco y voy anotando los distintos resultados. Hay veces que alguna herramienta arroja métricas extrañas, pero hay que tener en cuenta que estamos trabajando con distintos tipos de cache, minificaciones y combinaciones de ficheros, cargas asíncronas, etc. Por lo que no hay que preocuparse. Con un poco de experiencia sabrás que esperarte de cada cambio y cuales tienen prioridad 😉 .
El servidor
Actualmente la web se encuentra alojada en un VPS Optimizado de Raiola.
No le he metido mano al servidor ya que si unos cracks de la talla del equipo de Raiola dicen que el servidor esta optimizado, suponemos que lo estará 😜.
Sé que esto pide a gritos una demostración práctica y una serie de benchmarks, pero no es algo prioritario y tampoco es que me sobre el tiempo para ponerme a analizar todo. Más adelante esperad encontraros con una actualización en esta sección.
Por ahora os dejo con el siguiente artículo de Álvaro Fontela en el que nos muestra las bondades de sus servidores y una pequeña captura de las specs del susodicho.
Otra serie de factores a destacar son:
- Nginx como proxy inverso (declaro mi amor incondicional por Nginx 😍).
- Zend OPCache para PHP.
- Otros caches en Ram como el propio de Nginx y Memcached.
- VestaCP como panel de control. (¡OpenSource leñe!)
Métricas como el First Byte Time dependen directamente de la calidad del servidor (server response time). No busques ahorrarte unas pelas en alojamiento porque lo acabarás pagando.
WP Rocket
Estoy seguro de que casi todos lo conoceréis. WP Rocket lleva unos años en la cumbre de los plugins de cache (anteriormente se la rifaban W3 Total Cache y WP Super Cache) y en mi opinión es una auténtica gozada.
Si os fijáis en el los distintos cambios a la web reflejados en el excel todos son funciones disponibles en WP Rocket.
Cuentan con una documentación muy extensa, bien redactada ¡si es que incluyen hasta gifs! y my sencilla de seguir, por lo que os remito a su página de referencia.
Sin embargo si que os voy a dejar un par de notas:
- Las funciones de deprecado de javascript y css son las que suelen generar mayores problemas.
- No te compliques demasiado si no tienes ciertos conocimientos técnicos o puedes contratar a un programador.
La gente tiende a obsesionarse con las métricas de Google Insights. Fijaros en los resultados de Webpagetest (y la mejora en tiempo de carga real de la página) y lo poco que varían los resultados de Google.
Por ahora voy a dar por terminada esta primera fase de optimización empiezo a estar reventado tengo pendiente de implementar un par de mejoras y es probable que aún le de un repaso final cuando termine esta serie de artículos, pero ya sabéis: hay tener prioridades.
Este es el excel resultante:
Os he añadido a la tabla los resultados que ofrece Page Speed Insights una vez eliminas todo el render-blocking content. Esperad una futura actualización con los cambios implementados 😄.
Os resumo brevemente el por qué de los distintos puntos:
- Sólo con activar WP Rocket vemos una mejora notable en el tiempo de carga total (nos ajusta headers y empezamos a usar la cache).
- Activando el Lazy load para imágenes e iframes ofrece un incremento de rendimiento bestial. Recordad que nuestra web está constituida principalmente por imágenes. Fijaos en la reducción del tamaño de la página y el número de peticiones y la consecuente reducción de los tiempos de carga.
- Minificamos HTML CSS y JS. Id probando de uno en uno y comprobad que todo funciona correctamente. Podéis excluir fácilmente los elementos problemáticos. Podéis ver que el impacto en rendimiento no es demasiado espectacular.
- Combinamos los distintos js y css para reducir el número de archivos a cargar. Esta función puede tunearse bastante y hay margen de mejora 😋.
- Deferimos el javascript. Esto le encanta a Google, pero hay que andarse con ojo ya que pueden dejar de funcionar ciertas funciones. Ojo a la gráfica ya que es probable que me pillara una versión cacheada y que no tuviera en cuenta este cambio (tomad el paso 6 como referencia).
- Eliminamos strings de jquery acortando un poco el código (esto le encanta a GTMetrix).
- Configuramos Cloudflare en onjunto con WPRocket para obtener un pequeño boost de rendimiento.
Hace menos de un mes que WPRocket se actualizó facilitando enormemente los pasos la carga asíncrona de CSS y JS. La verdad es que me tienen conquistado 😍.
Conclusiones del proceso
Todos tenemos nuestros templates para WP referencia. Esos que solemos utilizar en los distintos nichos que montamos. Cuando utilizo una plantilla nueva (como es el caso de esta web con Shopera) suelo dedicarle bastante tiempo a echar un vistazo al código antes de empezar a utilizarla.
Viendo los resultados estoy satisfecho. La plantilla se adapta bien a los cambios (queda trabajar el CSS) y las métricas son decentes 👍.
Al estar trabajando con un e-commerce he hecho unos cambios en la hoja de cálculo teniendo en cuenta las categorías (páginas que buscaremos posicionar) y la tienda (nos interesa una experiencia de usuario perfecta).
La competencia son páginas muy potentes, pero tienen descuidado el WPO por lo que es un punto a favor interesante.
Qué queda por hacer
Podéis ver que aún quedan un par de tareas por realizar en nuestro excel.
Los que he realizado hasta ahora son bastante genéricos y los replico en todas las webs (WordPress) en las que trabajo. Además de todo lo anterior toca revisar las recomendaciones que nos arrojan las distintas herramientas, valorarlas y tomar medidas si es necesario.
Por último quedaría perfilar ciertos detalles y hacer una buena limpieza de código 😵.
También hemos solucionado los errores de rastreo arrojados por la herramienta de prueba de optimización para móviles.
Seguridad
Vamos a realizar un par de acciones básicas para cualquier sitio web que funcione sobre WordPress.
Con esto tendremos suficiente para olvidarnos de los típicos ataques de fuerza bruta suelen sufrir los sitios que funcionan bajo nuestro CMS favorito.
Vamos a utilizar dos plugins muy sencillos:
- WPS Hide Login: Reemplaza nuestra url de acceso por una a nuestra elección, haciendo que la original arroje un 404.
- 2 Factor Authentication (MiniOrange): añade una capa extra de seguridad (tenemos varias opciones entre las que elegir) a nuestro login.
Podríamos seguir abogando por Security through obscurity ocultando que utilizamos WordPress y otras técnicas similares, pero como medidas básicas e indispensables es suficiente.
No soy un experto en la materia, pero conozco otras medidas más «complejas» aplicadas a nivel de servidor que podríamos implementar (me las reservo para más adelante). Mi consejo es que cuentes con un hosting de calidad y cuides tus contraseñas.
Diffie-Hellman Key Exchange
La documentación sobre esta vulnerabilidad se encuentra en https://weakdh.org/.
Dejo la referencia, para poder revisitarla y solventarla en un futuro (esperemos que cercano).
Errores de crawleo
Toca darle una buena limpieza a la web.
Sitemaps
Empezamos configurando el sitemap de Yoast. Hubo unos años en los que dejaba algo que desear pero actualmente cumple perfectamente con su trabajo.
Incluiremos lo siguiente en nuestros ajustes:
- Páginas.
- Productos.
- Categorías de Productos.
Como ya comenté anteriormente la página no cuenta con un blog.
Las imágenes tienen mucha importancia en la mayoría de los ecommerce. Siendo mi caso una tienda de posters debo cuidarlas con mayor razón si cabe 😏.
Tras buscar algo de información me he decantado por utilizar Udinra Image Sitemap y ver que tal funciona.
De momento me gusta la estructura que utiliza aunque el panel de control es horrible.
Estoy abierto a otras sugerencias ya que el seo para imágenes es un campo que tengo algo pendiente (es una de la razones por las que inicié este proyecto).
Como siempre, envolvemos nuestros xml con papel de regalo y se los enviamos con una postal a San Google 🎁.
Netpeak Seo Spider
Toca pasar vuestro crawler favorito por la web para tener un vistazo claro de todos los errores el sitio.
En mi caso voy a seguir utilizando el software de Netpeak (recordad que tenéis una prueba gratuita de 15 días), aunque podéis utilizar ScreamingFrog (gratis para 500 urls creo recordar) y similares.
Un sacan rápido arroja dos errores 404:
- El primero debido a un cambio de url de una categoría que no se vio reflejado en el menú. Fácil, sencillo y para toda la familia.
- El segundo corresponde a una categoría de tercer nivel y tiene más chicha que el anterior. Os explico ahora mismo.
Actualmente estoy utilizando un plugin llamado remove category slug (el viejo truco de colocar un».» pero lo prefiero en plugin por situaciones como esta).
El objetivo es generar unos permalinks de categoría más «limpios» ya que éstas son mis páginas objetivo a posicionar.
Accediendo a las páginas que enlazan al 404 (los productos de esa categoría) podemos ver que los enlaces siguen la siguiente estructura:
https://dominio.com/./categoria1/categoria2/categoria3/
La cual se «reconstruye» perfectamente generando:
https://dominio.com/categoria1/categoria2/categoria3/
Sin embargo esta página devuelve un 404.
Esto ocurre únicamente a partir del tercer nivel de profundidad.
Una comprobación de:
https://dominio.com/shop/categoria1/categoria2/categoria3/
Nos devuelve la página categoría 3 sin problema por lo que podemos acotar las causas del bug.
Echando un vistazo rápido al código no he visto nada que parezca generar este error. Por lo que he decidido limitarme a dos niveles de profundidad mientras encuentro una solución. #Prioridades.
Search console
Una vez que sé que he solventado todos los errores de enlazo interno de nuestra web paso a WebmasterTools.
Recordad Google nos mostraba una buena ristra de errores para una web tan pequeña, así que vamos a ver que podemos hacer.
Ajustes Varios en WordPress y Woocommerce.
Antes de empezar quiero comentaros un par de ajustes que realicé previamente y son comunes a casi todos los WordPress.
En primer lugar accediendo a Settings->Writing podemos cambiar la categoría por defecto de nuestros posts y eliminar ese uncategorized que queda tan feo 😉.
Acto seguido eliminé la página asignada al blog por defecto para evitar contar con una página en blanco por falta de entradas.
Errores de Servidor
Estos errores son bastante prioritarios en comparación a los 404 clásicos que nos podemos encontrar y la verdad es que eme sorprendió bastante verlos en esta web.
De un vistazo pude ver que no eran más que unos cuantos errores 526 surgidos de un conflicto entre Cloudflare y mi propio certificado ssl.
utilizar una CDN como Cloudflare en un proyecto con tráfico de todas las partes del globo puede aportarte mucho valor.
Errores 404
Estos 190 errores not found surgen a raíz de la importación del contenido demo de la plantilla y de testeos con la estructura de urls.
El bot de Google los rastreó en un primer momento y ahora que todos esos «placeholders» han sido eliminados nos lo muestra en search console.
La rutina habitual que suelo llevar a cabo para arreglar estos errores es marcar a todos como solucionados y esperar a ver cuáles vuelven a surgir.
Esto nos permite filtrar los errores verdaderos y ahorrarnos bastante tiempo.
Así que toca esperar un poco y ver si nos vuelve a mostrar fallos. En principio todo debería estar correcto (recuerda que hemos ido solucionando fallos en pasos anteriores), pero nunca se sabe. Puede haber un sinfín de elementos que causen problemas y tendremos que echar mano de la herramienta Fetch & Render as Google para ver que está fallando.
Soft 404
Existían menos de una decena de soft 404, todos ellos procedentes de categorías sin productos.
Simplemente eliminamos dichas categorías y tenemos todo listo 👌
Conclusión
Le hemos dado un buen repaso a toda la web y podemos contar con que ofrece una buena experiencia de usuario y se comporta de un modo óptimo para empezar a posicionarse para algunas búsquedas.
Quedan un par de tareas pendientes que revisaré más adelante, pero por ahora hemos cubierto lo básico.
Y ya lo sabes; deja cualquier duda u opinión en los comentarios 😎.