Crear un sitio web ya no es difícil, al menos en apariencia. Cualquiera puede afirmar que ha creado un sitio web para usted. Pero el secreto de un sitio web de alto rendimiento es lo que se hace en el backend del nivel del servidor y está impregnado de complejidad técnica que la mayoría de los diseñadores web no tienen ningún interés o conocimiento. Exploremos algunos de estos secretos que impulsarían su sitio web hacia el cielo con mejores puntajes de PageSpeed ​​e YSlow (para un mejor SEO), y especialmente para los usuarios de dispositivos móviles.

La falacia del diseño web

Para algunos clientes, lo único que les importa es un sitio web "bonito". Quieren blings llamativos, con imágenes de pantalla completa, videos de alta resistencia y guiones llamativos de todo tipo. Para estos clientes, tienen la idea equivocada de que a los clientes que pagan y a los visitantes les gustan los sitios web de esta manera. Desafortunadamente, es una falacia que todavía es apoyada por algunas agencias y diseñadores web que no saben nada más o tienen demasiado miedo de dedicar tiempo a explicar cómo funcionan realmente los sitios web.

Verá, un buen sitio web está destinado a proporcionar información con llamado a la acción (CTA) para que los visitantes puedan convertirse en clientes potenciales y clientes. Por tanto, un buen sitio web debe cumplir dos objetivos principales:

  1. Puede ser encontrado por los visitantes a través de los motores de búsqueda (piense en Google).
  2. Debe ser rapido a cualquier visitante de todo el mundo, especialmente porque ahora vivimos en una economía global, con Amazon como el mejor ejemplo.

Ambos objetivos principales están íntimamente ligados. Google solo indexará su sitio web si es relevante (no está lleno de "spam"), seguro (sin malware ni publicidad maliciosa), rápido (contenido optimizado) y compatible con dispositivos móviles. El incumplimiento de cualquiera de estos criterios penalizará a su sitio web, y los sumideros están cada vez más atrasados ​​en el índice de Google.

¿Y para los usuarios? Los usuarios están impacientes y cada vez más.

Si su sitio web se carga muy lentamente en Wi-Fi público o en un dispositivo móvil, seguirán adelante (en una métrica medible conocida como "bounce rate“). Si su sitio web es pesado y lento, los visitantes esperarán unos segundos y harán clic en otro lugar. Acaba de perder la única oportunidad de involucrar a un nuevo cliente potencial.

Algunos diseñadores web ejecutarán su sitio web prototipo en un disco local que obviamente no tendrá penalización de velocidad, y es posible que no se dé cuenta de lo lento que será su sitio web en la vida real. Algunos pueden alojar su sitio web prototipo en una red troncal de fibra local, y también puede pensar que el sitio web es bastante rápido. Pero la realidad es que el sitio web solo parecerá rápido si está en la misma columna vertebral y no pasa por demasiados saltos.

Diseñar para teléfonos móviles tampoco es tan fácil como parece. La mayoría de los diseñadores web utilizarán un tema CMS (sistema de gestión de contenido) que sea "receptivo" y, en circunstancias habituales, su sitio web podrá verse en un teléfono móvil.

Sin embargo, el diablo está en los detalles, y muchos de estos temas usan marcos que son muy pesados ​​y reducirán la velocidad de su sitio web, especialmente para dispositivos móviles, y se clasificarán mal en las pruebas móviles.

Examinemos ahora cómo probar su sitio web para ver si es compatible con Google, ancho de banda y compatible con dispositivos móviles.

El sesgo educativo es un problema

Muchas escuelas se enfocan en el diseño web y olvidan que el DESARROLLO es tan importante o incluso más importante que el diseño cuando se trata de crear un buen sitio web.

Y dado que muchas personas solo se enfocan en la estética en lugar de las complejidades técnicas, el componente de desarrollo falta en muchos trabajadores de sitios web. Lo sé, ya que he entrevistado a innumerables candidatos y la mayoría no cumplió con el tipo de trabajo que necesitaba hacer. Incluso los proveedores de alojamiento web no están exentos.

He hablado con colegas muy amables en los campos de soporte técnico de las empresas de alojamiento web, y fueron lo suficientemente honestos como para admitirme que lo que les comuniqué estaba “por encima de su nivel salarial” (citando sus palabras). Tuve que solucionar y resolver muchas complejidades técnicas a lo largo del largo y arduo viaje desde 1996 hasta ahora (¡21 años!).

¿El sitio web es realmente compatible con dispositivos móviles?

Es fácil conseguir que un tema adaptado a dispositivos móviles (adaptable) funcione automáticamente. Lo que mucha gente no se da cuenta es que un sitio web no solo tiene que ser visualmente compatible con un teléfono inteligente, también tiene que ser compatible con el ancho de banda, es decir, cargar lo suficientemente rápido en un móvil con una conexión 3G o tal vez 4G.

La forma gratuita y sencilla de probar su sitio web es con el navegador que ha creado el rey de los motores de búsqueda: el Google Chrome navegador.

Bajo el navegador Herramientas de desarrollo opción, seleccionar HNI, y Estrangulamiento opciones y seleccione "Bueno 3G"(Una buena estimación para muchos usuarios de teléfonos inteligentes en esta parte del mundo desarrollado) y haga clic en"Deshabilitar caché".

En la parte inferior de la pantalla, verá 3 lecturas:

  • Propuestas,
  • (datos) transferido, y
  • Acabar (tiempo para cargar la página por completo).

Cuanto menor sea el número de solicitudes, menor será la transferencia de datos y menor será el final (tiempo para cargar la página por completo), más compatible con dispositivos móviles será su sitio web en términos de ancho de banda móvil.

Por ejemplo, nuestro sitio web realiza 23 solicitudes, tiene un tamaño de 640kB y se carga completamente en 6.6 segundos en una conexión móvil 3G.

20170423_chrome3g_mb1

Prueba de limitación de red de Chrome: nuestro propio sitio web

A continuación, se muestra un ejemplo de la página de una agencia de diseño web, que realiza 79 solicitudes, tiene un tamaño enorme de 1.5 MB y se carga en 9.81 segundos en una conexión 3G móvil.

20170423_chrome3g_webdevcd1

Prueba de limitación de red de Chrome: una agencia de diseño web

Aquí hay una tienda web de comercio electrónico que diseñamos, que alberga 50 opciones de productos en esta página y realiza 70 solicitudes, tiene un tamaño de 1.1 MB (debido a los 50 productos) y termina de cargarse en 9.76 segundos.

20170423_chrome3g_ecommepshub1

Prueba de limitación de red de Chrome: un sitio de comercio electrónico que desarrollamos

Aquí hay una tienda web de comercio electrónico de otra empresa, con 244 Solicitudes, 6.7 MB de tamaño, y termina de cargarse en 39.91 segundos. Es extremadamente hostil para un usuario móvil y la tasa de rebote será alta. Hubiera sido más prudente reducir el número de solicitudes en cada página con un diseño más inteligente y, por lo tanto, reducir el tamaño total de la página y su tiempo de carga.

20170423_chrome3g_ecommchallgr1

Prueba de limitación de red de Chrome: un gran sitio de comercio electrónico local

Si bien podemos medir qué tan amigable es un sitio web para dispositivos móviles y su correspondiente ancho de banda, ¿qué determina este rendimiento? Lo averiguaremos en un momento.

Las habilidades de seguridad y administración de servidores son vitales

Para un sitio web típico de CMS, el diseñador web típico juega solo con la parte de WordPress, con temas, complementos y contenido (texto, imágenes y enlaces a videos y otro contenido). Realmente no es ciencia espacial e incluso entonces, muchos diseñadores web fallan en el componente crítico de asegurar adecuadamente el sitio de WordPress.

Tengo el privilegio de ser un practicante de seguridad desde 1996, y he realizado programas de seguridad y he consultado a niveles estratégicos, para al menos comprender lo que se debe hacer. Pero muchos diseñadores jóvenes no tendrán este mandato ni este conocimiento. Para los complementos de seguridad de WordPress, una mala configuración puede hacer que el sitio web caiga (500 errores prohibidos) e incluso bloquear a los usuarios legítimos por completo. Y la falta de seguridad puede hacer que el sitio web caiga muy fácilmente a través de los frecuentes ataques DDoS (denegación de servicio distribuida) y de fuerza bruta. Es un factor crítico y no debe tratarse a la ligera.

Algunos diseñadores web no se centran (o no tienen experiencia) en la administración de servidores, lo que marca la diferencia en su Puntuaciones de PageSpeed ​​y YSlow, así como el rendimiento móvil, ya que muchos de estos parámetros solo se pueden configurar en el servidor.

Un buen sitio web que tiene SEO de calidad (optimización de motores de búsqueda) y optimización de contenido necesita conocimientos de programación y administración de servidores, como APACHE configuración / seguridad del servidor web, PHP lenguaje de programación y SQL gestión de la base de datos para ajustar WordPress CMS. Estas habilidades técnicas son el dominio de programadores y desarrolladores.

Algunas trivialidades que pueden ayudar al rendimiento y la seguridad de su sitio web, pero que los simples diseñadores pueden descuidar, también son las versiones de su software de servidor web Apache (u otro software de servidor web comparable), PHP y SQL.

Por ejemplo, ¿está ejecutando al menos Apache 2.4x, PHP 7 y MariaDB 10? Nuevamente, estos requerirán algunos ajustes para que su sitio web funcione correctamente.

GTmetrix al rescate

GTmetrix es una gran plataforma de pruebas para comprobar la velocidad y la optimización de su sitio web. Si está seleccionando un diseñador web o una agencia, use GTmetrix como prueba de fuego para sus habilidades. Un buen diseñador o agencia debería al menos poder optimizar la velocidad de su sitio web.

Hay 2 puntuaciones que necesita conocer, Page Speed, y YSlow, que son formas comunes para que los profesionales de la industria midan la velocidad y la optimización de un sitio web y descubran cómo mejorar el sitio web en consecuencia.

Es más fácil lograr una puntuación PageSpeed ​​más alta, mientras que la puntuación YSlow es mucho más estricta. Puede obtener una B para PageSpeed ​​y una D para YSlow. En mi opinión, un buen sitio web debería ser una A para PageSpeed ​​y una B o mejor para YSlow.

¿Cuál es la puntuación de su sitio web?

Además de las puntuaciones de PageSpeed ​​y YSlow, otros factores críticos que puede distinguir de GTmetrix son:

1) Tiempo completamente cargado - una verdadera medida de la velocidad y el tamaño de una página web, ya que algunas personas pueden usar "Carga lenta”Para cargar imágenes de forma asincrónica, pero los usuarios aún necesitan cargar la página completa para leer todo.

2) Tamaño total de la página - ¿Es lo suficientemente pequeño para móviles? ¿El ancho de banda de la página web es compatible con Wifi público lento o 3G? Aquí es donde necesitas cordura en lugar de obsesión. Una de las fallas comunes de los diseñadores web (incluidas algunas grandes tiendas) es que las imágenes no están optimizadas para la Web. Por ejemplo, NO necesita una imagen de 4,000 píxeles (ancho) para la Web, que está más diseñada para imprimir. Una imagen de 1,200 píxeles (ancho) con una compresión de imagen óptima es suficiente. Además, sirva "imágenes escaladas", lo que exige más del diseñador web, pero ayudará con PageSpeed ​​y el rendimiento. Recuerde que nuestra vista humana se basa en la lógica difusa y es muy sofisticada para distinguir detalles sin la necesidad de una resolución completa o alta. Como pionero en el diseño de medios interactivos desde 1986, le aseguro que hay muchos trucos increíbles que se pueden emplear para reducir drásticamente el tamaño de las imágenes y hacer que el sitio web sea liviano.

3) Propuestas - el número de solicitudes HTTP a varios sitios y servidores para cumplir con el servicio de toda la página. Algunos sitios realizan cientos de solicitudes de servidor, que son demasiadas. Para solicitudes legítimas como CSS (hojas de estilo en cascada) y JS (Javascript), combínelas y minimícelas si es posible. Inserte pequeños archivos CSS y JS siempre que pueda. Las llamadas HTTP innecesarias pueden reducir la usabilidad de un sitio web, aumentar las tasas de error, reducir la velocidad y también plantear problemas de seguridad y privacidad. Estas solicitudes a menudo ocurren con dominios de cookies, proveedores de publicidad, plataformas de video, plataformas de redes sociales, etc. Utilice las solicitudes con prudencia. Si es necesario, elija los denominadores más bajos y consolide o agilice las solicitudes.

4) Almacenamiento en caché - además del almacenamiento en caché a nivel de servidor, también puede aprovechar el almacenamiento en caché del navegador para permitir a sus usuarios almacenar en caché el contenido en sus propios discos. Esto reducirá el tiempo de carga cuando sus visitantes regresen, ya que habrían almacenado en caché parte del contenido. Puede configurar esto en el servidor backend. Y en su sitio web, configure un complemento de almacenamiento en caché de buena calidad.

5) Gzip - configure su servidor para servir contenido comprimido, especialmente archivos de texto como HTML, JS y CSS. Algunas páginas se pueden comprimir hasta en un 70% y ayudarán con los tiempos de carga generales.

6) Mantener viva - configure su Apache para habilitar conexiones HTTP persistentes de modo que las mismas conexiones puedan enviar y recibir solicitudes sincrónicas, aumentando la velocidad para sus usuarios.

7) Caducar encabezados - otra configuración a nivel de servidor que se puede configurar en el servidor o en el nivel del sitio web. La mayoría del contenido puede tener un encabezado de expiración designado, donde el contenido transitorio como el texto puede tener una expiración más corta, mientras que las imágenes, videos, documentos y scripts pueden tener una expiración más larga, ya que es menos probable que cambien con frecuencia. La advertencia es con algunos scripts externos (como los scripts de Google), ya que no tendremos control a nivel de servidor sobre ellos, por lo que no podemos designarles encabezados de expiración.

A continuación, se muestra un ejemplo de nuestras puntuaciones GTmetrix, que muestra A tanto para PageSpeed ​​como para YSlow, con un tiempo de carga completa muy corto (1.8 s), un tamaño de página total pequeño (693 kB) y 22 solicitudes:

20170423_gtmetrix_mb1

Puntaje GTmetrix - nuestro propio sitio web

Aquí hay un ejemplo de un proveedor de alojamiento web, que tiene una E para PageSpeed ​​y YSlow, con 7 segundos de tiempo de carga completa, 2.22 MB de tamaño total de página y 170 solicitudes incrédulas.

20170422_gtmetrix_sgwebhost1

Puntaje GTmetrix: un gran servidor web

Aquí hay un ejemplo de una agencia de diseño web, que tiene una A para PageSpeed ​​pero una C para YSlow, con un tiempo de carga total de 23.9 s realmente lento, tamaño de página total de 2.66 MB, con 52 solicitudes.

20170422_gtmetrix_sgwebdesign1

Puntaje GTmetrix - una agencia de diseño web

Aumento de CDN

Una red de entrega de contenido (CDN) puede agregar un impulso adicional, aunque no es del todo necesario si ha realizado una configuración de buena calidad para habilitar una puntuación A para PageSpeed. YSlow asigna un valor a las CDN, por lo que si no ejecuta una CDN, su puntuación YSlow se reducirá. Existen diferentes CDN y, en la medida de lo posible, GASTAR en un buen CDN, ya que los CDN gratuitos nunca funcionarán tan eficazmente como un CDN dedicado pagado. No hay almuerzo gratis en el mundo.

Entonces, si tiene un sitio web, le sugiero que lo pruebe con GTmetrix y Google Chrome ahora mismo, y tenga una idea de lo que se puede mejorar. Si las puntuaciones son abismales e inquietantes, no se preocupe, ya que existen técnicas probadas en el back-end de su servidor para hacer las cosas bien. No será un paseo corto y fácil por el parque, pero valdrá la pena a medida que aumente sus puntajes y reduzca las penalizaciones en SEO. Y si aún no tiene un sitio web y está hablando con posibles diseñadores web y agencias, pruebe sus propios sitios web con GTmetrix y Google Chrome. Luego, encuentre a las personas adecuadas para ayudarlo a avanzar.


Dr Seamus Phan

Dr Seamus Phan es el director de tecnología y jefe de contenido de McGallen & Bolden. Es experto en tecnología, estrategia, branding, marketing, capacitación en liderazgo y manejo de crisis. Este artículo puede aparecer simultáneamente en su blog. Conectarse LinkedIn. © 1984-2020 Seamus Phan et al. Todos los derechos reservados.