Factores que afectan al tiempo de carga de una página web

test velocidad amazon.com

Factores que afectan al tiempo de carga de una página web

Hacer una página web es una tarea laboriosa que a menudo necesita de varios profesionales: un desarrollador frontend o implementador, un diseñador, un programador backend, un project manager…

Podríamos ir añadiendo roles como más complejo es el proyecto.

Si queremos que una web sea lo más profesional posible, accesible y usable, entonces deberemos empezar a tener en cuenta otros criterios de desarrollo como el rendimiento y el tiempo de carga.

Estos factores tienen una incidencia muy notable sobre el posicionamiento web y la tasa de conversión de una tienda online.

En la entrada de hoy describimos cuales son los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web IFCD0110

Estos son:

Factores que influyen en el lado cliente:

  • HTML
  • CSS
  • Javascript
  • Contenido web

Factores que influyen en el lado servidor

  • Base de datos
  • Hosting

Mejoras desde el punto de vista cliente

HTML

Es cierto que estamos hilando muy fino pero en web unas décimas de segundo son importantes:

Asegúrate de abrir y cerrar las etiquetas html correctamente

No hagas trabajar al ordenador de más. Haz que las etiquetas html y atributos que escribas estén en correspondencia con tu DOCTYPE declarado.

Usa minificadores de código.

CSS

Revisa lo siguiente:

El navegador consume tiempo analizando que selectores tienen una mayor especificidad. Evita el uso de selectores redundante o demasiado específicos.

En la medida de lo posible intenta separar en hojas distintas el html, el css y el JS.

Depura el CSS. No obligues el navegador a trabajar de más para entender lo que has escrito.

Usa minificadores de CSS.

Javascript

El javascript puede tener una influencia notable sobre el tiempo de carga de una página web.

Uno de los grandes riesgos es el de interactuar con elementos del DOM mientras la estructura HTML todavía no se haya cargado del todo.

Solicitar un nodo que no existe se traduce en un tiempo valioso.

Del mismo modo realizar tareas repetitivas cuando estas pueden ser ahorradas es otro ejemplo. El uso de variables nos puede hacer ahorrar consultas innecesarias. Por ejemplo podemos guardar la longitud de un array en una variable, o guardar una llamada a un nodo determinado que cumpla una condición en una variable.

Podemos reducir los puntos principales a tener en cuenta en:

Optimización de código: Ahorra estructuras redundantes y llamadas repetitivas innecesarias a un mismo valor.

¿Escribir el JS justo antes del cierre del body o en la cabecera? Asegúrate en cualquier caso que el html siempre se haya cargado por completo.

Compresión del código. Cuando hay miles de líneas se pueden ahorrar muchos kb.

Analiza la versión de explorador de tus usuarios. Si estás usando librerías como jQuery fíjate que de garantizar compatibilidad para IE8 inferiores o no hacerlo se ahorran muchos kb

Contenido web

Por contenido web debemos pensar en toda aquella información que la página web termina mostrando.

En ningún caso estoy diciendo que debamos ahorrar en contenido.

Sino que debemos optimizar las imágenes y llevar a cabo todas aquellas implementaciones técnicas que hagan que el contenido se interprete por el navegador lo más rápido posible.

Reduce el peso de las imágenes. png > gif > jpg = jpeg. Por ejemplo no pongas un png si no se requieren transparencias.

Utiliza photoshop o un programa de edición de imágenes para optimizarlas al máximo. 72ppp es suficiente.

Utiliza la caché para entregar el contenido. Por ejemplo utiliza gzip para entregar contenido al navegador.

Cuidado con aquellas imágenes demasiado grandes de ancho que te rompen el responsive. (intenta usar medidas relativas)

Mejoras desde el punto de vista servidor

Bases de datos

Veamos ahora desde el lado servidor algunas acciones que se pueden tener en cuenta a nivel de base de datos.

Reduce llamadas innecesarias a la base de datos. Si estás usando un CMS este punto es complicado. Pero puedes mirar de no usar plugins innecesarios.

Puedes cachear tu base de datos.

Mantén una base de datos limpia y libre de información que no se va a utilizar para reducir su tamaño.

Hosting

A nivel de hosting y siendo realistas no todos tus clientes van a necesitar un VPS.

Es más, normalmente terminarás en un hosting compartido.

Seremos dependientes de nuestro proveedor de hosting.

Aún así hay muchas cosas que podemos preguntar a nuestro proveedor y/o pedir que nos configuren.

Un hosting barato puede salir caro. Asegúrate del tipo de máquinas que utiliza tu proveedor de hosting. Por ejemplo...¿son sistemas reciclados de otros proveedores?

Utiliza las tecnologías de caché que te ofrece el hosting. Pregunta si usan Memcached, opcache, ...

Elimina todos aquellos archivos de todo tipo que no utilizas. Imagina un ordenador al 100% de uso de todos sus recursos... ¿irá más lento?

En ocasiones hay procesos que desconocemos que consumen mucho tiempo de máquina. Habla con tu proveedor alguna vez... ¡los pequeños cambios pueden ser muy poderosos!

En la medida de lo posible pide a tu proveedor que te implemente php7 (si ya lo tienes por defecto asegúrate de que sea la versión activa)

Querido lector,

hasta aquí un resumen de todos los factores que deberemos tener en cuenta.

Realmente fijaros que se trata de aplicar la lógica de pensar en todos los puntos que intervienen en el desarrollo web.

  • ¿Que lenguajes web usamos?
  • ¿Donde se almacena la información?
  • ¿Como se entrega la información?
  • ¿Como y quien lee la información?
auditoria web con el navegador

Finalmente, notar que no hemos hablado de herramientas específicas. Algunas que recomiendo son:

  • La herramienta de auditoria web (audit > performance) o sino directamente en la pestaña de network de la consola del navegador. Fíjate que puedes hacer el test con la opción de conexión lenta y rápida a internet, con la caché desactivada, …
  • Pingdom Tools
  • PageSpeed tools de Google.

¡Nos vemos mañana con una nueva publicación!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.