EL GALARDONADO DESARROLLO WEB DEL HOTEL EL PALACE BARCELONA 5*GL

Este proyecto consistió en el rediseño de la página web del Hotel El Palace Barcelona, adaptándonos a los últimos estándares de usabilidad y mejorando sobre todo las velocidades de carga y su visualización en dispositivos móviles. Desde el Hotel El Palace se nos planteó la necesidad de rediseñar su sitio web con estos tres objetivos principales: 

• Branding. Renovar la imagen de marca, reflejando la identidad actual.
   

• UX y usabilidad. Mejorar la experiencia del usuario, la propuesta debía estar centrada en un modelo de navegación User-Centric & Mobile-First.
   

• Optimización web. Tiempos de carga rápida y buenas puntuaciones en WPO.
   

Los dos principales retos tecnológicos que nos propusieron fueron los siguientes:

• Mejorar el tiempo de carga, que fuese inferior a 2 segundos tanto en móvil como en desktop.

• Mejorar la puntuación de WPO, obteniendo unos valores entre 90% y 100%.

La herramienta que utilizamos para este proyecto de desarrollo fue Lighthouse, que busca mejorar la calidad de la página y cuenta con auditorías de performance, accesibilidad, progressive web apps, SEO y más. De esta forma, decidimos trabajar la optimización en dos etapas: una primera de maquetación y una segunda de programación y conexión con nuestro gestor de desarrollo propio Júpiter CMS.

Lo primero que hicimos fue ejecutar la auditoría de Google Lighthouse para que realizara el análisis de la página web. A continuación, con el informe empezamos a trabajar punto por punto las recomendaciones propuestas hasta conseguir la nota deseada. El resultado fue que teníamos mucho trabajo por hacer en los apartados de Rendimiento y Aplicaciones Web Progresivas. Sin embargo, los resultados de Accesibilidad, Mejores Prácticas y SEO fueron muy satisfactorios desde el inicio.

Nos pusimos a trabajar para resolver las incidencias de Rendimiento, se trataba de eliminar los recursos que bloqueaban la carga de la página. Para ello, ejecutamos una carga previa (carga preload) de los estilos principales de la web, ya que son un tipo de archivo que suelen ser muy pesados y tardan mucho en cargar. Lo mismo hicimos para las tipografías, realizar una carga previa y, además, configuramos el atributo “font-display” para reducir el tiempo del bloque de la carga. Y para el resto de archivos de estilo y javascripts efectuamos una carga asíncrona (carga defer), es decir, dejar que los archivos se carguen en paralelo con el análisis del HTML para no ralentizar su carga.

Una vez resueltos estos puntos, el siguiente paso era optimizar bien las imágenes. Los principales cambios fueron empezar a utilizar formatos webp y poner un width y un height en línea, ya que así se evitan cambios de diseño a la hora de cargar la página. También utilizamos la librería Lazy Load que nos permitió ahorrar tiempo de carga y mejorar la experiencia de usuario. Finalmente, establecimos un tamaño de imagen adecuado para las principales resoluciones de pantalla. 

Otro punto clave que siempre se debe tener en cuenta, es revisar los plugins externos del sitio web. Estos bajan mucho la nota porque requieren de peticiones externas. Por este motivo, recomendamos utilizar aquellos que realmente son imprescindibles y van a favorecer la venta directa.

En Emexs siempre aspiramos a la excelencia en todos nuestros proyectos, y el hecho de ser reconocidos mediante unos premios tan prestigiosos como los Awwwards pareció recompensar ese esfuerzo que ponemos en cada etapa del proceso. Recibimos la nominación por este proyecto, con diseño de Quim Fonoll y contenidos de Julia Basquiat. Sin embargo, eso no fue todo. Este proyecto resultó ganador por Best Web en la segunda edición de los premios Beyond Luxury Awards. Un honor que, sin duda, llevaremos con nosotros siempre, y alimenta nuestras ganas de superarnos y de seguir trabajando.

Hemos conseguido desarrollar una web intuitiva, de fácil manejo para el usuario y que va acorde con la imagen corporativa del hotel. Además, se han logrado con creces los retos propuestos respecto a los tiempos de carga y a las puntuaciones de WPO, teniendo en cuenta la complejidad del diseño y de las animaciones requeridas. 

¿Y ahora? Seguimos midiendo y analizando los resultados.