--- url: 'https://metadrop.net/es/articulos/optimizacion-para-moviles' title: 'Optimización para móviles' author: 'Cristian Aliaga' date: '2017-03-28T06:32:01+00:00' updated: '2026-08-04T07:58:55+00:00' type: article summary: 'Recopilación de algunos puntos clave para la optimización en móviles con Drupal.' tags: - 'PageSpeed Insights' - Performance - Application - Theming - 'Responsive web design' published: true og: determiner: Automatic site_name: Metadrop 'image:alt': 'Optimización para móviles' street_address: 'Calle Manuel Luna, 12, 3 Dcha' locality: Madrid region: Madrid postal_code: '28020' country_name: España email: hola@metadrop.net phone_number: '910053180' schema: '@context': 'https://schema.org' '@graph': - '@type': Article '@id': 'https://metadrop.net/es/articulos/optimizacion-para-moviles#article' name: 'Optimización para móviles' headline: 'Optimización para móviles' description: "Recopilación de algunos puntos clave para la optimización en\_móviles con Drupal." about: - 'PageSpeed Insights' - Rendimiento - 'Aplicación móvil' - Theming - 'Diseño web responsivo' datePublished: '2017-03-28T08:32:02+0200' dateModified: '2026-08-04T09:58:55+0200' author: '@type': Person name: 'Cristian Aliaga' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/es/articulos/optimizacion-para-moviles' - '@type': Organization '@id': 'https://metadrop.net/#organization' url: 'https://metadrop.net/' name: Metadrop sameAs: - 'https://www.drupal.org/metadrop' - 'https://twitter.com/metadrop' - 'https://asociaciondrupal.es/partner/metadrop' - 'https://www.linkedin.com/company/metadrop' logo: '@type': ImageObject url: 'https://metadrop.net/themes/custom/mdrop_radix/logo-metadrop-500-500.jpg' width: '500' height: '500' - '@type': ItemPage '@id': 'https://metadrop.net/es/articulos/optimizacion-para-moviles' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://metadrop.net/es' - '@type': ListItem position: 2 name: 'Artículos expertos sobre Drupal y tecnología' item: 'https://metadrop.net/es/articulos' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' --- 1. [Artículos](https://metadrop.net/es/articulos) # Optimización para móviles Martes 28 de Marzo de 2017 Recopilación de algunos puntos clave para la optimización en móviles con Drupal. Empezaremos presentando la herramienta empleada para el análisis de las optimizaciones: [PageSpeed Insights (google)](https://developers.google.com/speed/pagespeed/insights/ "PageSpeed Insights (google)") Esta herramienta nos ofrece un informe muy detallado sobre lo que sería mejorable en la web para reducir lo máximo posible la velocidad de carga y mejorar la experiencia del usuario. Por otra parte tenemos que encontrar la forma de plasmar todas esas mejoras en nuestro sitio Drupal, para ello nuestro mejores aliados son: 1. Un **buen tematizado responsive** (basado en un diseño bien construido). 2. El módulo **[Advanced CSS/JS Aggregation](https://www.drupal.org/project/advagg)** que nos permitirá realizar la mayoría de ajustes relacionados con la **optimización de los ficheros css & js**. - Posicionar todos los ficheros **javascript al final de la etiqueta body** o en su defecto emplear el atributo async (para que el fichero no bloquee la carga del resto de la web). - Emplear **css comprimido con etiquetas style en la cabecera** que aunque en algunos casos puede no ser recomendable (hojas de estilo demasiado extensas). Al menos el css relacionado con la mitad superior de la página si debe ser accesible de la forma más rápida posible. Otras opciones basan en posicionar los estilos al final de la etiqueta body (con la excepción del css relativo a la mitad superior). - No es recomendable el uso de un loader (fondo e icono de carga) dado que se interpretaría un fallo por parte del analizador. Pero en caso de su uso lo adecuado sería incluir un icono animado basado en css, dado que los svg animados no comenzarían a animarse desde el principio. Y cuando cargue la hoja de estilos principal ocultar el loader. Esta opción solo es mejor si ponemos TODAS las hojas de estilos al final y al entrar se observa el salto del texto en crudo (sin nada de estilo). 3. **El uso de la caché del navegador** para servir ciertos ficheros (png, jpg, js, css, etc.). Esto lo conseguiríamos mediante la definición de la cabecera Cache-Control y su parámetro max-age en segundos. De nuevo la herramienta de análisis nos suele recomendar el mejor tiempo (max-age) en base al js relacionado. Una forma de implementarlo sería modificando el fichero .htaccess de nuestro sitio: ```apache Header set Cache-Control "max-age=604800, public" ``` Otra sería mediante la definición de la cabera en Drupal (drupal\_add\_html\_head) solo cuando sea neceario (peticiones de archivo con ciertas extensión). Otra posible forma sería mediante la configuración de la cabecera para dichos archivos en la capa de la caché de nuestro servidor, ie varnish. 4. **Emplear hojas de estilos y ficheros javascript minificados**, esto es, reducir a su mínima expresión mediante la eliminación de comentarios, saltos de línea y espacios en blanco innecesarios. (ej: con YUI). 5. **Optimización de imágenes** con la resolución y tamaño de fichero adecuadas para el dispositivo en el que se van a representar. En caso de que necesitemos varias imágenes para distintas resoluciones en un mismo componente podemos emplear la etiqueta html picture en lugar de la clásica etiqueta img. ## Conclusión Todos estos consejos son solo los principales y tratados por encima a modo de puntos clave, esta lista puede extenderse todo lo que sea necesario, siempre dependiendo de nuestro sitio. Aunque la idea principal siempre sería; **reducir lo máximo posible la velocidad de carga** (a ser posible inferior a 2 segundos) **y mejorar la experiencia del usuario**. [PageSpeed Insights](https://metadrop.net/es/articulos?text=PageSpeed%20Insights) [Rendimiento](https://metadrop.net/es/articulos?text=Rendimiento) [Aplicación móvil](https://metadrop.net/es/articulos?text=Aplicaci%C3%B3n%20m%C3%B3vil) [Theming](https://metadrop.net/es/articulos?text=Theming) [Diseño web responsivo](https://metadrop.net/es/articulos?text=Dise%C3%B1o%20web%20responsivo)