La importancia de la velocidad del sitio web

  • Retención de visitantes. Cuanto más tiempo tarde la página en cargarse, más probable es que un usuario rebote.
  • Clasificaciones de motores de búsqueda de Google. Google tiene en cuenta la velocidad de carga de la página como una de las muchas señales de clasificación utilizadas para determinar la clasificación de los motores de búsqueda.
  • Supera a tus competidores. Si su sitio web se está cargando constantemente más rápido que la competencia, es más probable que los usuarios se queden con usted que contactar con los sitios más lentos.
  • Mejor experiencia de usuario. Evite la frustración del usuario con un sitio web lento y déle una experiencia de usuario optimizada.

    Acelere su sitio web

    ¡En el mundo instantáneo de hoy, la velocidad lo es todo!

Cómo optimizar el rendimiento del sitio web

Aquí tenemos una lista de cosas que puede hacer para optimizar la velocidad de su sitio web. Muchas de estas técnicas pueden requerir conocimientos adicionales, como el uso de los sprites CSS mencionados a continuación. No queremos reinventar la rueda aquí, pero puedes encontrar tutoriales en línea con un poco de Google-fu (busca en Google las palabras clave con las que no estás familiarizado o te gustaría saber la mejor manera de implementar). Empecemos.

    1.  

    2. La velocidad de alojamiento es esencial. Puedes tener el código más optimizado del planeta, pero si estás alojando con un proveedor de segunda categoría que tiene un tiempo de retraso significativo y un tiempo lento hasta el primer byte (TTFB), tus esfuerzos de optimización serán en su mayoría inútiles. Ejecute pruebas de rendimiento basadas en métricas para determinar el host web más rápido. Performance monitoring
    3.  

    4. Limite el número de solicitudes requeridas por una página. Cada vez que un usuario envía una solicitud desde un navegador al servidor, pierde preciosos milisegundos. Al consolidar elementos en archivos individuales, como un archivo de sprite CSS en lugar de docenas de archivos de imagen, se limita el número de solicitudes que el navegador realizará
    5.  

    6. Genere un archivo sprite CSS. En lugar de descargar docenas de imágenes para cada página de su sitio, un archivo sprite CSS solo debería requerir una sola descarga. Esto eliminaría la necesidad de tener muchas imágenes más pequeñas para cosas como menús, bordes redondeados e imágenes de fondo. La esencia de un archivo sprite CSS es que apila todas las imágenes de su sitio en un único archivo PNG y crea referencias a cada ubicación de imagen en su CSS. Ahora, cuando necesite mostrar la imagen, simplemente llame a la clase CSS dentro de una etiqueta div.
    7.  

    8. Utilice CSS siempre que sea posible. Deshazte de estilos en línea, imágenes y otro contenido compartido en varias páginas de tu sitio web.
    9.  

    10. Consolide sus hojas de estilo para que solo haya una solicitud CSS. Una vez que descargue la hoja de estilos, elimina las solicitudes futuras de todos los elementos relacionados con el estilo.
      Una posible excepción a la regla de una hoja de estilo por sitio es si está optimizando el tiempo de interacción o el contenido «por encima del pliegue». El contenido que aparece en la parte superior de la página que permite a un usuario comenzar a interactuar con el sitio debe priorizarse cuando le preocupa que los usuarios reboten si la página tarda demasiado en cargarse. En este caso, puede cargar un archivo CSS para mostrar por encima del contenido de plegado correctamente de inmediato y, a continuación, cargar el segundo archivo CSS para optimizar todo lo demás en la página.
    11.  

    12. Usar redes de entrega de contenido (CDN). Las CDN ponen el contenido del sitio web, especialmente imágenes, vídeo y archivos multimedia más grandes, lo más cerca posible del usuario final. En lugar de que todos los usuarios llamen a los elementos desde el servidor web, ahora descargan estos elementos de un servidor CDN que se hospeda a solo unos saltos de distancia en un centro de datos cerca de su ubicación geográfica.
      Siempre y cuando no utilice más de un par de dominios, la división de elementos entre varios dominios (como su dominio base y una red CDN) maximizará las descargas paralelas simultáneas en el explorador. En ese momento, el costo de la búsqueda de DNS comienza a contar en su contra.
    13.  

    14. Minimice el número de búsquedas DNS requeridas por su sitio. Cada elemento hospedado por un dominio único puede requerir una búsqueda adicional que podría agregar segundos a su tiempo de carga. Incluso las solicitudes en dominios relacionados (como www.example.com y css.example.com) todavía requieren una búsqueda adicional. Si esto suena contra-intuitivo después de que acabamos de recomendar el uso de CDN, es porque debe haber un medio feliz. Simplemente intente limitar el número de dominios adicionales a los que se hace referencia. Los optimizadores extremos llegan a eliminar todos los botones de redes sociales porque llaman a cada dominio.
    15.  

    16. Asegúrese de que su servidor permite el almacenamiento en caché del navegador en función de la edad del archivo, la expiración y Etag. Esto significa que cualquier contenido que un navegador haya descargado recientemente del servidor, como un logotipo de empresa, no se volverá a descargar mientras siga siendo válido. Asegúrese también de que cada elemento tiene un TTL adecuado, o la edad del archivo, para aprovechar el almacenamiento en caché del explorador.
    17.  

    18. Mueve JavaScript a la parte inferior de tu página. Esto garantiza que el contenido se cargue antes de esperar a que se carguen archivos JavaScript más grandes.
    19.  

    20. Cuando tengas la opción, consolida o elimina tantos plugins de JavaScript como sea posible. Si bien es genial recopilar datos sobre cómo los visitantes usan su sitio web, no desea que el script que recopila esos datos ralente su sitio y afecte negativamente a la experiencia del usuario. Si vas a agregar un nuevo plugin a un sitio web, asegúrate de no estar duplicando la funcionalidad de un plugin existente, y si lo estás, elimina el plugin antiguo.
    21.  

    22. Utilice la compresión en su sitio. El uso de gzip puede disminuir significativamente el tamaño total de los archivos que está enviando desde el servidor al navegador. La compresión a menudo proporciona más de un 70 por ciento de disminución en el uso del ancho de banda.
    23.  

    24. Optimice los tamaños de archivo enviando solo el tamaño de imagen más pequeño requerido por la página. Edite la imagen para que tenga el tamaño exacto de píxel requerido en la página. Al elegir un formato de archivo para imágenes, utilice PNGs o JPEG, en lugar de TIFF y BDP. Utilice una herramienta de compresión de imágenes como TinyPNG. Es una gran herramienta para reducir el tamaño de archivo de las imágenes antes de ponerlas en su sitio. Evite también las etiquetas de origen vacías en las imágenes. Una etiqueta vacía hace que el explorador envíe una solicitud adicional al servidor.
    25.  

    26. Minifique el código. Una vez completada la página, ejecute un código un minifier. La versión de Google(https://developers.google.com/speed/docs/insights/MinifyResources), elimina todo el código innecesario, como espacios vacíos, líneas vacías, etc., guardando KBs de tamaño de archivo.
    27.  

    28. Optimice su base de datos. Si el sitio usa una base de datos para hospedar contenido dinámico, desea asegurarse de que la base de datos está indizada correctamente. Después de indexar la base de datos, minimice el número de llamadas realizadas a la base de datos. Por ejemplo, si el sitio obtiene resultados de la base de datos para mostrar una lista de productos, reutilice los resultados de la consulta en lugar de enviar una consulta adicional al profundizar en un subconjunto de resultados.
    29.  

    30. Supervise su sitio diariamente en busca de solicitudes rotas. Si el sitio contiene código que apunta a un elemento que ya no existe, ya sea en el servidor o desde un tercero, está perdiendo innecesariamente tiempo enviando y esperando 404 errores.
    31.  

    32. Consejo de bonificación! Pruebe regularmente la compatibilidad de su sitio en diferentes navegadores, incluidas diferentes plataformas móviles. Los visitantes móviles están empezando a dominar el mercado de navegadores. Concéntrese en probar su sitio en el móvil antes del escritorio.
    33.  
      Siguiendo estos pasos, debería ser capaz de optimizar la velocidad de carga de su página web y aumentar la facilidad de uso de su sitio web. ¡Garantizar la calidad de su contenido para retener la atención de los visitantes del sitio depende de usted!


      Además de ejecutar una prueba de velocidad del sitio web para obtener una imagen clara del rendimiento de su sitio web de todo el mundo, la herramienta de información de velocidad de página de Google es ideal para analizar su página web y proporcionar sugerencias sobre cómo realizar muchas de las optimizaciones enumeradas en este artículo. El plugin Yslow también es una gran herramienta para encontrar formas adicionales de optimizar una página web.