Tiempo de carga en una web de hotel, optimizaciones en maquetación

Neobookings

17 Dic 2012

17 Dic

Tiempo de lectura: 10 minutos

Durante los últimos años los desarrolladores web han ido tomando consciencia de la importancia de optimizar el tiempo de carga en una web. Este cambio de mentalidad no es casual, existen diversos estudios los cuales vinculan directamente esta característica (tiempo de carga) con el rendimiento de un site.

Pero antes de entrar en detalle, vamos a definir lo que entenderemos por “tiempo de carga de una web”:

Entendemos por tiempo de carga de una página web, el tiempo que trascurre al acceder a una landing, entre la primera petición http hasta obtener la respuesta de la última petición http. En otras palabras, tiempo que transcurre desde que la página empieza a cargar hasta que carga por completo.

Cabe destacar que en algunos aspectos esta definición puede ser un poco rígida, ya que una vez descargado todo el contenido web, hay otros factores que también influyen en el retraso en que el navegador muestra el site. Por ello seremos un poco flexibles y trataremos también aspectos orientadas a optimizar la velocidad en que se carga la web en el navegador, una vez descargados todos los contenidos.

Fronteras de un tiempo de carga web bueno y uno malo

Una vez asimilado este concepto (tiempo de carga web), vamos a especificar lo que podemos aceptar por un tiempo de carga bueno y por un tiempo el cual sería recomendable considerar su mejora. Existen diversas opiniones en este aspecto, pero si nos centramos en Google, este nos marca como referencia de tiempo de carga aceptable, hasta los 1.5 segundos. En este caso tomaremos este tiempo como objetivo a mejorar, pero es necesario destacar que debido al diseño de algunas webs (no hacemos referencia solo al diseño gráfico sino al diseño de todo el conjunto del site), este tiempo puede suponer un horizonte lejano.

Pese a las diferentes opiniones que existen respecto a un tiempo de carga aceptable, de lo que si podemos estar seguros es de lo que sería un tiempo inaceptable. Según Jakob Nielsen (autoridad a nivel mundial en usabilidad) el límite de atención de un usuario se perdería a los 10 segundos, por lo que se debe evitar acercarse y por supuesto rebasar, este tiempo de carga.

El siguiente paso es saber cómo calcular el tiempo de carga de una landing. Para medir estos tiempos existen multitud de herramientas, pero dado que este artículo no pretende listarlas, recomendaremos una de ellas:

https://tools.pingdom.com/fpt/

Factores que influyen en el tiempo de carga

Aunque conózcanos la importancia del tiempo de carga y lo limites recomendables para este, no sabemos qué factores afectan en la variación de este. Destacaremos pues los siguientes factores los cuales consideramos más importantes:

Hosting: la estructura física del servidor (discos duros, RAM, procesadores, etc), la localización de este (determina el número de saltos que debe realizar una petición), servidor dedicado o compartido, peticiones servidas por un servidor o por varios (granjas de servidores), etc. Estos factores afectan la velocidad a la que el servidor distribuye la web.
Operador de Adsl del usuario: por supuesto el Adsl contratado de un cliente también afecta. La red de la compañía de Adsl y la velocidad, condicionan el tiempo de carga.
Programación de la web. En este caso distinguiremos dos puntos fundamentales:
- Maquetación: la estructura visual del contenido, la estructura de la maquetación, la distribución y número de ficheros (js, imágenes, css, etc), etc.
- Código: el código empleado para generar contenido dinámico (php, consultas sql, etc), condiciona la velocidad a la que se obtiene este contenido.
Contenido: el usar imágenes, videos, archivos de sonido, texto, etc, también influye en la velocidad de carga.
Navegador usado por el usuario: el tiempo de respuesta no es el mismo al cargar una web en Google Chrome, en Firefox, en Safari o en Internet Explorer, por ello debe ser tenido también en cuenta.

A parte de estos factores, existen otros, pero se ha considerado este grupo suficientemente representativo para hacerse una idea de lo que interviene en el retraso de carga de una site.

Por qué es importante mejorar el tiempo de carga

Dicho todo esto la pregunta es, en que afecta mejorar el tiempo de carga de una web?. Veamos dos puntos los cuales pueden mejorar al optimizar el tiempo de carga:

Mejora de la experiencia de usuario: si se agiliza y facilita la navegación de un usuario en la web, se mejorar de forma directa aspectos como el rebote y la tasa de conversión. Los dos gráficos que vemos a continuación ejemplifican lo anterior:

Fuente: https://www.webperformancetoday.com

Mejora el posicionamiento natural en Google: Google es consciente de la importancia de la velocidad de carga en una web, por ello su algoritmo tiene en cuenta este factor al clasificar las webs en los rankings de resultados.

Vemos pues que el tiempo que tarda en cargar una landing no es un factor trivial, sino un factor que reviste de mucha importancia en el desempeño de la web.

Optimizaciones y consideraciones para mejorar la velocidad de una web de hotel

Hasta ahora se ha visto que es el tiempo de carga de una web, como se ve afectado por una multitud de factores y la importancia de mejorarlo, veamos a continuación un conjunto de optimizaciones y consideraciones. Para no generalizar y evitar extender mucho el artículo, nos centraremos en situaciones típicas que se dan en una web de hotel y, en optimizaciones y consideraciones a realizar sobre la maquetación (no olvidar que el artículo se centra optimizaciones en maquetación, por ello solo trataremos código html, css y javascript).

Conjunto de consideraciones:

Tener en cuenta el tiempo de carga en etapas tempranas del diseño: en muchas ocasiones (demasiadas), se crea la web y se deja para la etapa de mantenimiento (etapa posterior la creación de una web) todas las optimizaciones de velocidad. Este tipo de prácticas no suelen ser muy recomendables ya que un diseño que tenga en cuenta este factor inicialmente, puede ahorrar problemas y tiempo en futuras optimizaciones de este tipo.
No sobrecargar una sección con fotos, especialmente la home: en algunos casos un hotel dispone de un conjunto de fotos el cual se desea enseñar, pero este conjunto de fotos puede ser demasiado grande haciendo muy pesada la landing. Es aconsejable escoger de este conjunto un grupo reducido de fotos para mostrase en esa sección, y mostrar la totalidad de fotos en secciones especialmente pensadas para ello, por ejemplo la sección de galería.
Reducir número de imágenes de los sliders: los sliders suelen ser usados para mostrar diversas fotos o diversos grupos información asociados a fotos. Un problema habitualmente ligado a este tipo de visualizadores es que se sobrecargar el slider con un número excesivo de slides, provocando un aumento excesivo de peso de una landing. Se aconseja pues determinar un tiempo que se crea adecuado para que el usuario ve un slide y dividir el tiempo medio de un usuario en esta sección por ese valor, de esta forma sabremos el conjunto recomendable de slides para la landing.
No sobrecargar una landing con un conjunto excesivo de ofertas o promociones: otro elemento habitual en las webs de hotel y cadenas, son los paneles de ofertas. Es recomendable usar estos paneles para mostrar un conjunto reducido de ofertas (ofertas destacadas) y dejar la visualización de la totalidad de ofertas para una sección pensada para ello (listado de ofertas). De esta forma se elimina información innecesaria y se reduce peso.
Uso de la misma imagen en distintas páginas: aunque una web de hotel tenga secciones claramente diferenciadas, se puede dar el caso de que una misma imagen sea usada en diversas de esas secciones. Es recomendable en estos casos usar el mismo fichero de imagen en las distintas secciones para poder aprovecharnos de la cache del navegador y reducir descargas de datos y peticiones a servidor innecesarias.
Procurar usar en los sliders el mismo tamaño de imagen: la forma de visualizar imágenes puede cambiar de una sección a otra, por ello una misma web de hotel puede tener distintos sliders. Se recomienda, siempre que sea posible, usar en ellos el mismo tamaño de imágenes. Así podemos aprovechar la cache al usar una misma imagen en distintos sliders.
Evitar usar imágenes para mostrar texto: en ocasiones para mostrar un texto con un formato determinado, se recurre a imágenes. Hay que evitar este tipo de prácticas dado que una imagen pesa más que el texto, se recomienda pues generar estos textos mediante css y javascript.
No abusar de las tipografías que no sean de sistema: una parte importante del diseño gráfico de una web de hotel recae en la tipografía. Pese a ello, el uso de varias familias tipográficas que no son de sistema o una misma con variaciones, puede suponer un gran peso para la web además de un trabajo importante de renderizado. Se aconseja pues usar para textos resaltados (títulos, subtítulos, etc) una variedad reducida de tipografías que no sean de sistema y para el texto principal una tipografía de sistema.
Procurar usar una coherencia en los efectos de la web: dada la variedad de formas de presentar la información en una web de hotel o cadena, se puede dar el caso que para mostrar esta información se haga uso de un amplio conjunto de animaciones y efectos. Este tipo de recursos pueden suponer añadir y usar diversas librerías de javascript, por ello es recomendable tratar mantener una constancia en el uso de estos efectos, para usar un número reducido de ellos y evitar llamadas y cargas innecesarias en el servidor.
Usar paginación para listados: existen diversas páginas que son usadas como un listado, por ejemplo un listado de hoteles en una cadena. En caso de que estos listados sean largos (muchos hoteles con sus respectivas imágenes e información), es interesante usar una paginación la cual solo muestre una parte de los hoteles evitando la carga de la totalidad de hoteles del listado. De esta forma se consigue una carga más rápida de la página.

Conjunto de optimizaciones:

Minimizar código: para que una persona entienda un código (html, css, javascript, etc) con comodidad, necesita tener: espacios en blanco, saltos de línea, tabulaciones, etc. Este tipo de caracteres, en parte, no son necesarios por el programa que interpreta el código (navegador), por ello se aconseja reducir el tamaño de estos ficheros eliminando estos caracteres innecesarios. Este tipo de cosas no hay que hacerlas a mano sino que hay diversos programas para hacerlo de forma automática.
Usar imágenes con el tamaño justo de visualización: una forma de disminuir peso de una landing es cargando imágenes con el tamaño en que se verán en el navegador, de esta forma se evita cargar imágenes más pesadas de lo que se necesitaría.
Optimizar el peso de las imágenes: en muchas ocasiones, pese a que usemos una imagen con el tamaño usado en maquetación, esta sigue teniendo un peso que podría ser reducido. Esto suele deberse a un nivel de calidad superior al necesario o a un conjunto redundante de meta-información en el fichero. Por ello se recomienda usar en las imágenes, programas que optimicen estos elementos para reducir el peso.
Usar el tag <img> solo cuando sea necesario: las imágenes son otro tipo de contenido de una web, pero el mostrar estas imágenes no suele implicar usar el tag <img>. El uso excesivo de este tag hace difícil usar otras técnicas para reducir llamadas a servidor. Se aconseja pues usar solamente el tag <img> cuando la imagen sea parte del contenido principal de la landing.
Al usar el tag <img> usar sus atributos height y width para darle un tamaño por defecto: así se consigue una percepción mayor en la velocidad de tiempo de carga de la web. Esto se debe a que no es necesario esperar la carga de la imagen para saber su tamaño y en consecuencia se evitan descuadres de la maquetación durante la carga.
Usar en cada caso el formato de imagen adecuado (JPEG, GIF, PNG, etc): existen distintos formatos de imagen y cada uno de ellos lleva asociada una forma distinta de codificar los pixeles y de optimizar el espacio. En líneas generales diremos que es recomendable usar JPEG para fotografías, GIF para imágenes con o sin transparencias y con grandes áreas de un mismo color, y PNG para imágenes con transparencias y una mayor complejidad de colores que en el formato GIF.
Usar sprites: siempre que se pueda es aconsejable agrupar imágenes que no formen parte del contenido principal en un mismo fichero y cargarlas en la web mediante css. De esta forma al tener muchas imágenes en un mismo fichero se requiere de una única llamada a servidor para descargar el archivo.
Maquetar reduciendo el código html: una reducción del código html puede no suponer una disminución del peso de la web y además ayuda a los robots a indexar en menos tiempo el contenido.
Cargar ficheros (css, js, etc) solo cuando sean necesarios: se debe procurar cargar ficheros js y css solo en las landings que sea necesario, de esta forma se disminuye el peso y se evitan llamadas innecesarias al servidor.
Agrupar código css y javascript: siempre y cuando sea posible, es importante agrupar tanto el código css como javascript, en el menor número de ficheros, de esta forma se evitan peticiones innecesarias al servidor.
Separación de carga de una miniatura de imagen y de la imagen a tamaño real: si una página tiene un listado de miniaturas de imágenes es importante cargar solamente estas imágenes reducidas para evitar grandes cargas. Una vez el usuario clique sobre la miniatura, la imagen a tamaño real puede ser cargada mediante una petición asíncrona de AJAX al servidor (para esto existen muchos plugins javascript del estilo “ventana modal”).
Controlar el uso de iframes: los iframes son páginas dentro de otras, lo que puede llegar a demorar mucho el tiempo de carga general de la web. Puede parecer que estos elementos son poco comunes pero la realidad es que la mayoría de redes sociales los usan como medio para integrarlas en una web. Se recomienda retrasar la carga de estos iframes hasta que la totalidad de la web se haya cargado (estos se puede conseguir mediante javascript).
Colocar css dentro del head: de esta forma se cargan los estilos previamente al código html, así se aplican las reglas css a medida que se carga el código html.
Retrasar carga del código javascript: una carga prematura del código javascript puede producir bloqueos en la carga del código de la web, por ello es recomendable situar todo el código javascript antes de la etiqueta </body> y forzar que su carga sea al final (para esto existen diversas librerías javascript).

El realizar todas las optimizaciones anteriores en la totalidad de una web, puede suponer un coste excesivo en horas de trabajo por lo que es importante tratar de centrar estas mejoras en las landings más importantes del site. Entre ellas destacaremos secciones habituales en una web de hotel o cadena tales como “Home”, “El Hotel”, “Ofertas o promociones” y “listado de hoteles”.

También es importante destacar que de las optimizaciones anteriores no todas proporcionan el mismo beneficio en términos de velocidad de carga, por lo que es recomendable priorizar estas mejoras y desechar las que conlleven más problemas que beneficios. Para hacerse una idea de la prioridad de algunas de las mejoras comentadas anteriormente, aconsejaremos usar las dos aplicaciones siguientes:

Conclusiones

La optimización del tiempo de carga de una web de hotel o cadena, es uno de los factores de peso para mejorar la experiencia del usuario y el posicionamiento en Google. Pero este tipo de optimizaciones requieren tiempo y conocimientos, por lo que es necesario aplicar estas mejoras de forma progresiva y continuada.

En Neobookings tenemos amplia experiencia en optimización de tiempo de carga en webs, por ello somos conscientes de que un proceso de optimización de este tipo es aconsejable que empiece desde fases tempranas de diseño y que sea continuo durante todo el ciclo de vida de la web de hotel o cadena. También hay que remarcar que una vez alcanzada una cota satisfactoria en tiempo de carga, no hay que obsesionarse con seguir haciendo este tipo de optimizaciones de forma indefinida, debido a que se llegará a un punto en que el beneficio obtenido sea insignificante en relación al trabajo invertido.

Neobookings, SEO para hoteles