Una guía detallada para optimización para sitios WordPress

Índice del artículo

1. Diagnóstico: herramientas para evaluar la velocidad actual
2. Plugins: sólo los estrictamente necesarios
3. Imágenes: optimizadas y con su versión webp
4. Tip secreto: el mejor plugin de cache para WordPress
5. Medidas técnicas para el servidor
6. Correr nuevamente las herramientas de diagnóstico.
7. Caso de éxito: soluciones en optimización WordPress

Consejos para optimizar tu sitio WordPress

Con una gran cantidad de excelentes complementos y temas disponibles, WordPress facilita la creación de un sitio web completo con muchas funciones.

Sin embargo, es fácil que tu instalación de WordPress se infle y no esté optimizada, lo que perjudica el rendimiento del sitio.

En esta guía, enumeramos algunos complementos gratuitos y escribimos algunas recomendaciones para los desarrolladores WordPress así como usuarios que buscan un servicio de optimización de sitios web WordPress.

En nuestra experiencia estos son los puntos más importantes a la hora de optimizar un sitio web.

1. Diagnóstico: herramientas para evaluar la velocidad actual

Lo primero que debemos conocer es dónde estamos parados respecto a la velocidad de el sitio WordPress. En algunos casos puede que no se note a simple vista, pero luego de correr un test de velocidad con estas herramientas podremos conocer más en detalle qué tan optimizado está nuestro sitio.

Asimismo podremos saber qué componentes están generando una carga más lenta y sobre todo tener indicios de cómo resolver la lentitud de el sitio web WordPress.

Recomendamos utilizar estas herramientas de diagnóstico web, c:

a) Las herramientas de optimización de Google: estas son esenciales por el simple hecho de que toda la mejora que perciban impactará de lleno en nuestro posicionamiento en el buscador de Google. Un primer y rápido análisis de velocidad web puede realizarse con Test my Site de Google que aportará una métrica de velocidad para móviles. En segundo lugar podremos realizar un examen más exhaustivo con la herramienta Page Speed Insights . La misma nos indicará toda serie de métricas y un detalle pormenorizado sobre los motivos del puntaje de optimización tanto para móviles como para pc desktop.

b) GTmetrix: Entre sus variadas herramientas existe la posibilidad de descarga de un reporte en pdf así como gráficas de visualización de la carga de componentes en tu sitio web.

c) Pingdom: Pingdom ofrece monitoreo de rendimiento y tiempo de actividad rentable y confiable para su sitio web. Con Pingdom puede monitorear el tiempo de actividad, el rendimiento y las interacciones de sus sitios web para una mejor experiencia del usuario final. La ventaja de pingdom es que permite simular la velocidad desde diferentes partes del mundo.

Extra Tip: Vale la pena volver a analizar la página después de cada paso de optimización para que puedas ver qué elementos son grandes ganancias y qué pasos posiblemente empeoren las cosas.

2. Plugins: sólo los estrictamente necesarios

Es común instalar muchos complementos en el transcurso de una implementación de un sitio WordPress. La desactivación de complementos reduce las solicitudes de la página y el tamaño total de la página.

Por eso es importante revisar uno por uno qué funcionalidad atienden en tu sitio web y eliminar los que ya no se necesitan o no se usan. O los que pueden ser reemplazados por una línea de código sin demasiado esfuerzo ni conocimiento. Como Font Awesome, muy utilizado para implementar íconos de calidad, que puede ser reemplazado por solo una línea de código en la cabecera del tema (header.php)

<script src=»https://kit.fontawesome.com/024d56c0fb.js» crossorigin=»anonymous»></script>

Por último es importante mantener los plugins actualizados ya que pueden contener mejoras de rendimiento y seguridad.

3. Imágenes: optimizadas y con su versión webp

La optimización de imágenes es una tarea importante y, en muchos casos, de alto impacto en su flujo de trabajo de optimización de WordPress, reduce el tamaño total de la página así como la velocidad de carga de los elementos de la misma. Asimismo incorporar formatos de última generación como webp (muestra la misma calidad que JPEG sin pérdidas) permite un mejor rendimiento y es uno de los requerimientos más usuales que Google exige para la optimización de la página y la consecuente mejora en el posicionamiento.

Existen varias herramientas para optimización de imágenes de forma masiva, como shortpixel, imagify o smush que si bien son potentes e contienen además la posibilidad de generar las versiones webp de las imágenes existentes en el carrete de imágenes, en general permiten un porcentaje limitado de imágenes a comprimir por mes.

Otra herramienta interesante es EWWW Image Optimizer que permite comprimir y generar las versiones webp de forma masiva sin límites o cuotas mensuales. Recomendamos tenerla instalada y activarla cada vez que se vayan a incorporar contenidos a la web. Asimismo para subir de mejor manera nuestras imágenes podemos previamente pasarlas por un compresor como compressor.io o redimensionarlas con iloveimg luego pasarlas por un conversor a webp online y subir esas versiones directamente.

4. El tip secreto: el mejor plugin de cache para WordPress

¡Atención a esta sección! Con el almacenamiento en caché, tu sitio web brindará datos ya generados (es decir, contenido almacenado en caché) a los visitantes, en lugar de generar datos dinámicamente para cada visita. Sea cual sea el que instalemos, es prioritario configurar lo siguiente: Minimizar HTML, Minificar CSS,  Habilitar la compresión GZip.

Una vez más, hay muchos complementos de almacenamiento en caché disponibles para WordPress. Como WP Fastest Cache (ligero y gratuito) o WP Rocket (muy completo pero de pago). 

Pero la que sin duda hemos encontrado infalible luego de varias optimizaciones web es una herramienta de cache poco conocida, que es muy bien recibida por las herramientas de diagnóstico de google.

Te compartiremos el mejor plugin para optimizar tu web que utilizamos en todas nuestras implementaciones. Permite generar más de 90 puntos en el ranking de optimización de Google tanto para pc desktop como para móviles. ¡TOTALMENTE GRATIS!

CLICKEÁ EN ESTE LINK PARA SOLICITAR EL

PLUGIN Y LA GUÍA DE INSTALACIÓN

5. Tips más técnicos: Cloudflare, carga selectiva de elementos y configuración del servidor

a) Cloudflare actúa como intermediaria entre el cliente y el servidor, usando unos sistemas llamados proxies reversos (reverse proxies) para crear copias espejo y cachés de sitios web. Eso permite distribuir las copias y que estén accesibles de forma rápida y segura a los clientes. Podes conectarla con un plugin.

b) Carga selectiva: Por otro lado a medida que agregas complementos a tu instalación de WordPress, los scripts de los complementos se agregan al encabezado global de la página, lo que significa que se cargan en cada página.

Entonces, cada vez que un visitante carga su página, también se cargan todos los scripts de complementos, ya sea que realmente se necesiten en la página específica o no . Cuantos más complementos tenga, más scripts tendrá, lo que puede tener un gran impacto en su rendimiento.

Una tarea efectiva que puede realizar para mejorar el rendimiento de la página es servir solo los scripts que realmente se necesitan en las distintas páginas de su sitio web. Puede realizarse manualmente con un plugin como WP Asset Clean Up.

c) Configuración del servidor: podes ver una guía detallada en el blog de GTmetrix.

6. Último paso en la optimización para sitios WordPress: 

Por último debemos correr la purga de Cache de el plugin de cache que tengamos instalados, borrar el historial de navegación en nuestro browser y correr una vez más las herramientas de diagnóstico enunciadas en el punto 1.

Deberías ver mejoras en las siguientes métricas:

• Puntuaciones de rendimiento/estructura
• Primera pintura con contenido
• Pintura con contenido más grande
• Tiempo para Interactivo
• Índice de velocidad
• Número de solicitudes

También deberías ver mejoras en las siguientes auditorías:

• Elimine los recursos que bloquean el renderizado
• Minimizar CSS/JavaScript
• Reducir CSS/JavaScript no utilizados
• Codifique imágenes de manera eficiente
• Habilitar la compresión de texto
• Servir activos estáticos con una política de caché eficiente

7. Caso de éxito: soluciones rápidas en optimización de WordPress

En esta implementación ejecutamos una migración de otro sitio anterior replicando los contenidos de un sitio original que el cliente poseía anteriormente, por lo que luego tuvimos que realizar una serie de pasos para poder optimizarla correctamente.

Comenzamos con estos puntajes:

Luego de pasar las imágenes por EWWW Optimizer, instalar el plugin de cache – nuestro tip secreto – que recomendamos en el punto 4 y conectar a la CDN de Cloudflare obtuvimos estos resultados:

Conclusión sobre optimización para sitios WordPress

Es importante respetar estos ítems a la hora de tener un sitio web dinámico y bien posicionado.

WordPress tiene muchos complementos que no solo te permiten crear fácilmente un sitio web con todas las funciones, sino que también optimizan el rendimiento para una buena experiencia de usuario.

Los complementos de optimización anteriores son una buena opción general para la mayoría de los sitios web, tanto en términos de compatibilidad como de mejora del rendimiento del sitio.

Si tenés un sitio de WordPress, probá seguir esta guía y mejorá la experiencia de tu página para todos los visitantes. O contáctanos para optimizar tu sitio web ecommerce.

Fuentes: https://gtmetrix.com/wordpress-optimization-guide.html

La entrada Guía de optimización para sitios WordPress se publicó primero en Cónclave.

¿Cómo solicitar presupuesto para un sitio web institucional o e-commerce?

Índice del artículo

1. ¿Es una migración o un proyecto desde cero?
2. Dominio, Hosting y cuentas de mail
3. Identidad y Contenidos
4. Tamaño del proyecto (ecommerce, portfolio o blog)
5. Funcionalidad e Integraciones

¿Cómo solicitar cotización de un sitio web institucional o ecommerce?

Cuando se toma la decisión de agregar un canal virtual a nuestras opciones de comunicación con usuarios y clientes es de gran utilidad contar con una hoja de ruta que nos servirá para clarificar internamente a qué apuntamos y transmitirlo en detalle a desarrolladores WordPress o agencias dedicadas a implementar ecommerce, blogs y sitios institucionales.

En nuestra experiencia estos son los puntos más importantes a la hora de solicitar un presupuesto para desarrollo web.

1. ¿Es un proyecto desde cero, una migración o una nueva funcionalidad?

Lo primero que deberá ser aclarado es el tipo de proyecto al que apuntamos. Un proyecto desde cero tendrá un grado de complejidad diferente que una migración de una página en un formato o tecnología anterior o un agregado de una funcionalidad.

Solicitar cotización para un proyecto web de cero permitirá mucha más flexibilidad a la hora de elegir el formato y herramientas a utilizar. Mientras que una migración si bien por un lado permitirá acelerar el proyecto por contar con una estructura y contenidos de la página, tendrá la contrapartida de cierta rigidez a la hora de integrar o mantener las funcionalidad deseadas.

El agregado de una o varias nuevas funcionalidades en muchos casos requerirá un permiso temporal al desarrollador o agencia. Esto para comprobar la estructura interna de la web a la que se le desea realizar modificaciones, la factibilidad y las herramientas necesarias para llevarlo a cabo.

2. Dominio, Hosting y cuentas de mails

Dominio: es nuestro nombre en el espacio virtual, el principio de todo. Es importante clarificar si ya se cuenta con el mismo o si se debe incluir en el presupuesto.

En caso de solicitar que se incluya, será útil aclarar qué tipo de dominio precisaremos (.com o .com.ar). Los valores y moneda de pago difieren sustancialmente, así como algunas variantes para permitir a la Agencia o desarrollador chequear la disponibilidad del dominio. Cuánto más popular sea la palabra o frase que deseamos para nuestro dominio más difícil será que esté disponible, y si lo está, su costo será considerable. El dominio es un costo que debe ser pagado en forma anual. Se puede chequear la disponibilidad de dominios locales en nic.ar y dominios .com en Namecheap o Godaddy.

Hosting:

será el espacio donde alojaremos nuestra web o aplicación. En este punto es importante clarificar si ya se cuenta con un servicio de hosting y cuál sería este. Eso indicará al desarrollador o agencia cómo debe realizar la implementación, y que plan es el más adecuado para el tipo de web que se desea. En caso de no contar con un hosting muchas agencias, como es nuestro caso en Cónclave, cuentan con alianzas con servicios de hosting que permite abaratar costos y tener concentrado un pack de servicios con un solo oferente. Para cualquiera de los dos casos, es importante tener en cuenta que no será lo mismo solicitar un hosting para un blog o una landing page que para un ecommerce o marketplace. Estos últimos incluirán múltiples funcionalidades como el carrito de compras, cotizadores online, registro de usuarios, conversor de monedas etc.. 

Mails:

este caso se podría incluir dentro de lo considerado para el hosting, ya que los servicios de hosting suelen incluir dentro de sus plantes cuentas de mails. Nuevamente será importante aclarar si ya contamos con un servicio de mailing o no, cuántas cuentas precisamos dar de alta. También irá atado al dominio ya que las direcciones de mails contendrán el dominio luego del @ .

presupuesto para un sitio web o e-commerce

3. Identidad, Referencias y Contenidos

Si queremos algo sobrio, con caminos de usuario simples para que el usuario encuentre rápidamente lo que precisa, o bien si precisamos que el usuario quede impactado visualmente dando mayor prioridad a sliders con videos, transiciones y botones que generen deslizamientos en la página etc.. Las posibilidades son muchas, por ello es bueno acotar lo mejor posible la identidad del proyecto.

Identidad:

En este punto será importante aclarar cuál será la identidad que se está buscando. Para que el encargado de cotizar pueda incluir elementos u opciones estéticas dentro del presupuesto. Esto permitirá tomar una decisión mejor fundada a la hora de elegir una agencia para implementar un sitio web o ecommerce. 

Páginas de referencia:

A su vez, suma mucho añadir páginas de referencia, o secciones dentro de las mismas que permitan hacerse una idea más acabada de la identidad que se pretende.

Contenidos:

Por último pero no menos importante, es muy positivo haber realizado el ejercicio previo de un menú inicial. Esto permitirá listar la cantidad de páginas internas que requerirá el proyecto, así como las relaciones internas necesarias. Ejemplos de estas páginas internas son la sección de «Nosotros» o o «Sobre la empresa», «Contacto», «Preguntas Frecuentes» entre otras.

Si bien el detalle o secciones dentro de cada página interna ya entrará más en la órbita del desarrollador, así como las recomendaciones según su expertise, siempre es importante que se adjunten aclaraciones en caso de alguna sección sea de especial importancia. Para dar un ejemplo, no será lo mismo una sección de Contacto estándar con un texto inicial, un formulario web, un mapa y datos de contacto que una sección de contacto de una clínica donde haya que seleccionar un especialista y un horario disponible, donde ya se apunta más a una sección de reservas que de contacto.

4. Tamaño del proyecto (ecommerce, portfolio o blog)

A continuación es importante aclarar el tamaño del proyecto. Muchas agencias utilizan este ítem para medir el tiempo y recursos que deberán dedicarle. Es importante aclarar no solo la cantidad de productos o servicios (100, 1.000, 10.000) que se desean ofrecer sino también la complejidad de los mismos. No será lo mismo una web para estudio de arquitectura que quiera ofrecer una docena de servicios con un formulario para solicitar entrevista en cada uno de ellos que una vinoteca con muchas categorías y cientos de productos o una imprenta con 20 o 30 productos variables donde el usuario debe seleccionar tamaño, color, forma, grosor del papel entre otros atributos posibles con distintos valores resultantes según las variantes escogidas antes de agregar al carrito. Cada proyecto requiere un armado distinto del archivo de productos a subir, que llevara más o menos tiempo en función de la complejidad.

Para el caso de una web para portfolios o un blog si bien pueda tener una menor complejidad también aplican las consideraciones de cantidad de elementos y categorías necesarias.

En este punto también es importante considerar si se proveerán las imágenes de los elementos a cargar en la web con el formato preciso (600×600 píxeles por ejemplo para productos) o si esto también será encargado a la agencia o desarrollador.

5. Funcionalidad e Integraciones 

Este último punto está destinado a lo que se pretende que los usuarios así como el operador o administrador del sitio puedan realizar en nuestro sitio web. Es importante sumar un listado de funcionalidades e integraciones para que el presupuesto pueda contener lo más fielmente posible la cantidad de horas y recursos necesarios.

Ejemplos de funcionalidades son desde ya:

• Agregar al carrito
• Formularios Web
• Cotizador Online
• Conversor de monedas
• Multilenguaje
• Ofertas por cantidad
• Web Chat o Whatsapp Web
• Buscador de productos

Adicionalmente la definición de las integraciones requeridas son importantes ya que en este punto la agencia o desarrollador podrá definir el alcance total del proyecto, si puede o no cumplir con la totalidad de los requerimientos o precisa tercerizar alguno de ellos en alguna agencia especializada. Esto suele ser particularmente importante cuando se requiere que el sistema ecommerce se integre con el sistema de gestión interna y el mismo posiblemente haya sido generado hace mucho tiempo y a medida. Algunas integraciones pueden ser las que se muestran a a continuación:

• Pasarela de pago (Mercado Pago, Paypal)
• Pasarela de Envíos (OCA, Correo Argentino, Fedex)
• Sistema de envíos de mailing (Mailchimp, Doppler)
• Facturación (AFIP)
• Sistemas de gestión (Odoo)
• Otros sistemas internos

Conclusión sobre presupuesto para un sitio web o e-commerce

Este listado de ítems a tener en cuenta para pedir un presupuesto web vale tanto para un proyecto de cero, como para una adaptación o nueva funcionalidad que estemos buscando. El mayor detalle permitirá al encargado de generar un presupuesto web contar con datos precisos para listar las tareas, tiempo y recursos necesarios de la mejor manera. Esto da lugar a tener un presupuesto en línea con la expectativa y minimiza los errores de interpretación que podrían dar lugar un importe mayor o menor al necesario.

Tener claro internamente qué tipo de web necesitamos permite solicitar presupuesto para un sitio web a varios oferentes en poco tiempo y recibir una respuesta con mayor celeridad. Y dado que todos contarán con el mismo detalle será más simple comparar cada una de las ofertas. Una solicitud de presupuesto detallada genera también confianza, respeto y compromiso a futuro en el desarrollador web o agencia que tomará el trabajo a futuro.

Fuentes: https://conclave.ar

La entrada 5 claves a la hora de pedir un presupuesto para un sitio web o e-commerce se publicó primero en Cónclave.