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

Print Friendly, PDF & Email
Factores que afectan al tiempo de carga de una página web
Valora esta entrada
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!

Entradas relacionadas:

Eliminar eventos Javascript .removeEventListener()
- 718
Ejemplos prácticos de como usar addEventListener() y removeEventListener() del tutorial gratuito de Javascript (y apuntes para mis alumnos)
Pseudo Clases :link, :active, :hover y :visited
- 33
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Como hacer espacios en blanco con html
- 116
Has intentado separar palabras en blanco pulsando el espaciador? Seguramente has comprobado que no funciona. En esta publicación vemos un ejemplo de como se debe hacer con HTML.
Como mezclar CSS y HTML. Acoplamiento CSS
- 158
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 39
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Que tienen los gestores de contenidos (CMS) para ser tan útiles
- 314
Los gestores de contenidos son aplicaciones web alojadas en un servidor que nos ayudan enormemente en la tarea de realizar un sitio web. Son herramientas pensadas para que personas sin conocimientos t...
Trucos para maquetar más rápido con wordpress
- 276
Visual Composer es un plugin de wordpress que dota al editor visual de una gran variedad de shortcodes con muchísima fuerza. Gracias a VC he ganado entre 10 y 15 minutos diarios antes dedicado al maqu...
Estrategias para luchar contra el spam 2/2
- 238
WordPress tiene soluciones alternativas para combatir el spam y que no requieren de la instalación de plugins. Esta entrada completa la de ayer en la que se planteaba una solución mediante un plugin....
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
- 542
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones. Veamos en este escrito como es su sintaxis, que a...
Diferencias técnicas y de uso entre páginas y entradas de wordpress
- 220
Existen dos enfoques distintos para diferenciar las páginas y las entradas de wordpress. Podemos mirarlo desde el punto de vista técnico y desde el punto de vista de uso de usuario. Esta publicación a...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.