Esta guía fue creada por David Fern, Administración del Seguro Social

Uso de JavaScript, uso de CSS, tamaño de imágenes y recursos, almacenamiento en caché/uso de red y ventanas emergentes. Estas son las prácticas principales en las que los sitios web gubernamentales más visitados deben centrarse para ser más amigables con los dispositivos móviles. Pero, ¿cómo puede trabajar en cada una de estas áreas para ayudar a garantizar que su sitio web mantenga a los usuarios móviles encantados y regresando?

Durante seis meses, del 22 de septiembre de 2017 al 22 de marzo de 2018, el Programa Federal de Pruebas Móviles de Colaboración Colectiva probó los 26 sitios web del gobierno federal de los Estados Unidos más visitados en dispositivos móviles (teléfonos inteligentes y tabletas) utilizando siete herramientas de prueba automatizadas compatibles con dispositivos móviles. Los resultados indicaron que estas son las prácticas comunes que hacen que estos sitios no sean tan amigables para dispositivos móviles como un usuario podría esperar o desear en una experiencia móvil. La mayoría de estas áreas no se relacionan directamente con problemas de usabilidad, sino que se refieren a cómo se construye el sitio (lo que puede conducir a un rendimiento deficiente). Para obtener más información sobre cómo realizamos las pruebas, consulte la sección Metodología al final.

La información aquí describe las cinco prácticas principales que encontramos en estos sitios:

  1. Optimizar JavaScript
  • Ubicación de JavaScript
  • Minificar JavaScript
  • No usar JavaScript en línea
  • Optimizar CSS
    • Evitar Dimensiones y Posiciones Absolutas en Directivas CSS
    • Usar hojas de estilo externas para Separar el Almacenamiento en caché de CSS del Contenido
    • Combinar Activos de Imagen CSS en Archivos de Sprites
  • Optimizar imágenes
    • Limitar el Tamaño y el peso de la página
    • Habilitar la compresión de recursos
    • Optimizar imágenes
    • Especificar Dimensiones de imagen
  • Utilizar el almacenamiento en caché
    • Aprovechar el almacenamiento en caché del navegador
    • Combinar varios archivos Para mejorar el rendimiento
  • Evitar ventanas emergentes
  • Tenga en cuenta que, si un sitio web se desarrolla utilizando un sistema de gestión de contenido (CMS) o un marco de desarrollo, es posible que no todas estas configuraciones sean configurables. Sin embargo, sugerimos que los desarrolladores investiguen las capacidades del sistema para determinar si pueden ser. Algunas de estas recomendaciones pueden ocurrir en la capa de servidor web, que puede estar separada del código del programa.

    Optimizar JavaScript

    El problema más común es el uso de JavaScript. JavaScript se utiliza en muchas aplicaciones de escritorio y móviles porque amplía la funcionalidad de las páginas web, es un lenguaje relativamente fácil de aprender y usar, y se ejecuta relativamente rápido en el lado del cliente. Sin embargo, si JavaScript no se coloca y ejecuta desde un lugar óptimo en el código, no se minimiza ni se usa en línea, puede afectar negativamente el rendimiento de la aplicación en dispositivos móviles que tradicionalmente tienen recursos mínimos.

    Colocación de JavaScript

    Agrupar problemas JavaScript al final del marcado de página es óptimo para la carga de la página. Cuando la especificación HTTP coloca JavaScript en otro lugar de la página (por ejemplo, en la parte superior), esto puede resultar en un bloqueo de carga mientras se descargan los archivos JavaScript. Además, antes de que el navegador pueda renderizar una página, tiene que construir el árbol DOM analizando el marcado HTML. Cada vez que el analizador encuentra un script, se detiene y ejecuta el script antes de continuar el análisis. Esto ralentiza el rendimiento de la carga de la página.Solución

    : Coloque scripts en la etiqueta <head> y use los atributos async o defer, lo que permite descargar los scripts lo antes posible sin bloquear su navegador.

    Los scripts con el atributo async se ejecutan de forma asíncrona. Esto significa que el script se ejecuta tan pronto como se descarga, sin bloquear el navegador mientras tanto, y que el segundo script se puede descargar y ejecutar antes del primer script.

    Los scripts con el atributo defer se ejecutan en orden (es decir, primer script uno, luego script dos). Esto tampoco bloquea el navegador. A diferencia de los scripts async, los scripts defer solo se ejecutan después de cargar todo el documento.

    • Fixit – Colocación de JavaScript| https://mobiforge.com/design-development/fixit-javascript-placement
    • Eliminar JavaScript de Bloqueo de Renderizado| https://developers.google.com/speed/docs/insights/BlockingJS
    • Reducir el tamaño del contenido de la parte superior del pliegue| https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
    • ¿Dónde debo poner etiquetas <script> en el marcado HTML? | http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

    Problema de Minificar JavaScript

    : Los archivos JavaScript siempre deben minimizarse para reducir el tiempo de tránsito y ayudar a acelerar la carga de la página.

    La minificación de soluciones elimina los datos innecesarios o redundantes sin afectar la forma en que el navegador procesa el recurso. La herramienta de Entorno de Desarrollo Integrado (IDE) utilizada para desarrollar el sitio puede incluir características que minimizarán el JavaScript durante el proceso de compilación. También puede hacer esto con las herramientas de cierre de Google, incluido el Compilador de cierre, un optimizador que reescribe su código y minimiza el espacio muerto para que la descarga sea más rápida. Es típico minificar solo en el entorno de producción, ya que la solución de problemas y la depuración en los entornos de desarrollo serán más fáciles con JavaScript no minificado.

    • Minificar recursos (HTML, CSS y JavaScript) | https://developers.google.com/speed/docs/insights/MinifyResources
    • Cómo Reducir al Mínimo tus Sitios Web CSS, HTML & JavaScript| https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

    No use JavaScript en línea

    Problema: No se debe usar código JavaScript en línea porque requiere que el navegador pase el marcado de código JavaScript que ralentiza el procesamiento.Solución

    : Mueva todo el código JavaScript a un único archivo minificado, lo que proporciona una separación limpia de marcado, estilo y código. Esto también se puede lograr habilitando el filtro «JavaScript en línea» en los servidores web Apache y Nginx.

    • Fixit – Javascript en línea| https://mobiforge.com/design-development/fixit-inline-javascript
    • Javascript en línea| https://modpagespeed.com/doc/filter-js-inline
    • Por qué el Código CSS y JavaScript en línea es tan Malo| https://dzone.com/articles/why-inline-css-and-javascript-

    Recursos:

    • JavaScript: Ventajas y Desventajas http://www.jscripters.com/javascript-advantages-and-disadvantages/

    Optimizar CSS

    Las hojas de estilo en cascada (CSS) describen cómo se mostrarán los elementos HTML en la pantalla, pueden ahorrar mucho trabajo y controlar el diseño de varias páginas web simultáneamente.

    Sin embargo, CSS puede aumentar el tiempo de carga de la aplicación si se especifican dimensiones y posiciones absolutas en directivas CSS, no se utilizan hojas de estilo externas para separar el almacenamiento en caché del CSS del contenido, los activos de imagen CSS no se combinan en archivos de Sprites y/o hay más de una etiqueta H1 por página.

    Evitar las dimensiones y posiciones absolutas en directivas CSS

    Problema: Se deben evitar las dimensiones y posiciones absolutas y de píxeles en directivas CSS, ya que es posible que no permitan que el navegador adapte el contenido para que se ajuste a la pantalla o al renderizado correctamente en todos los tipos de dispositivos. Sin embargo, hay excepciones a esta regla. Por ejemplo, si desea que las imágenes se adapten a una pantalla en particular, tiene más sentido especificar la dimensión en píxeles. Además, las medidas de píxeles pueden ser apropiadas para márgenes, bordes y relleno.

    Solución – Utilizar medidas relativas tales como em, ex, bolder, larger, y thick cuando sea posible. Por ejemplo, al especificar la fuente, use font-size: 1.5em en lugar de font-size: 12px.

    • Medidas Fixit| https://mobiforge.com/design-development/fixit-measures

    Use hojas de estilo externas para Separar el almacenamiento en caché de CSS del Contenido

    Problema: Se deben usar hojas de estilo externas para separar las instrucciones CSS del HTML. Este almacenamiento en caché CSS por un navegador web evita otro viaje al servidor y acelera la carga de la página.Solución

    : En la sección <head> del HTML, use el lenguaje para llamar al archivo CSS externamente, manteniendo las instrucciones CSS en un archivo separado del HTML (consulte a continuación).

    <link rel="stylesheet" type="text/css" href="https://mysite.com/main.css" media="screen" title="style (screen)" />

    Advertencia: El uso de muchas hojas de estilo CSS externas puede afectar negativamente al rendimiento, por lo que deben combinarse en un solo CSS externo.

    • CSS interno vs Externo| http://infoheap.com/internal-vs-external-css/
    • Optimizar la Entrega de CSS| https://varvy.com/pagespeed/optimize-css-delivery.html

    Combine activos de imágenes CSS en archivos Sprite

    Problema: Cuando se usan muchas imágenes de forma independiente, se requieren varias solicitudes de red para descargar cada una. Los sprites CSS combinan varias imágenes en un solo archivo de imagen para su uso en un sitio web para acelerar el tiempo de entrega y carga. El archivo se puede cortar usando CSS.

    Solución: Puede encontrar muchas herramientas para crear hojas de sprites, incluidas Compass, Lemonade, SpriteMe, Fireworks CS6 y TexturePacker.

    • Fixit – Imagen Sprints| https://mobiforge.com/design-development/fixit-image-sprites
    • CSS Sprites: Qué son, por Qué son Cool, y Cómo usarlos| https://css-tricks.com/css-sprites/
    • Hojas de sprites CSS: Mejores Prácticas, Herramientas y Aplicaciones Útiles| https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications–webdesign-8340

    Recursos

    • ¿Qué es CSS? | https://www.w3schools.com/css/css_intro.asp

    Optimizar imágenes

    El peso de la página, también conocido como «la gravedad de la web», disminuye el rendimiento de la aplicación al aumentar el tiempo de carga y reducir el uso de datos de red. Comprender el peso de la página, la compresión de recursos, la optimización de imágenes y las dimensiones de la imagen es fundamental para una estrategia web exitosa.

    Limitar el tamaño y el peso de la página

    Problema: El tamaño total del archivo de la página, incluidos los archivos dependientes, afectará el tiempo de carga y la cantidad de tiempo que tarda un rastreador móvil en evaluarlo. Las páginas limpias y ligeras son las mejores para el SEO móvil; los motores de búsqueda móviles preferirán clasificar estas páginas. Esfuérzate por mantener el tamaño de archivo de todas las páginas móviles por debajo de los 25 kilobytes. Este es el tamaño máximo de archivo que el iPhone almacenará en caché para cualquier elemento que se descargue.Solución

    : Hay muchas maneras de reducir el peso de la página, incluida la optimización de imágenes, la compresión gzip, la Minificación, el almacenamiento en caché, la consolidación de JavaScript y CSS. Otras soluciones incluyen evitar lo siguiente: incrustaciones e inclusiones, marcos de JavaScript y CSS, fuentes personalizadas y desorden de páginas innecesario. La mejor solución depende de los detalles de su sitio.

    • Fixit-Límite de Tamaño de página| https://mobiforge.com/design-development/fixit-page-size-limit
    • Comprender el Peso de la Página| https://mobiforge.com/research-analysis/understanding-web-page-weight
    • Reducción del Peso de la Página| https://mobiforge.com/design-development/reducing-page-weight

    Habilitar la compresión de recursos

    Problema: Comprimir recursos con gzip o Desinflar puede reducir el número de bytes enviados a través de la red.Solución

    : La mayoría de los servidores se pueden configurar para usar compresión gzip. Por ejemplo, puede habilitar la compresión gzip en un servidor Apache utilizando el archivo de configuración .htaccess. También puede usar mod_gzip para habilitar la compresión gzip y mod_deflate para comprimir la salida de su servidor antes de enviarla a su visitante. Si su sitio está alojado en un servidor Windows, puede habilitar la compresión de archivos estáticos y dinámicos seleccionando «habilitar compresión estática» en el administrador de IIS (Servicios de información de Internet).

    • Habilitar compresión| https://developers.google.com/speed/docs/insights/EnableCompression
    • Habilitar compresión gzip| https://varvy.com/pagespeed/enable-compression.html
    • Cómo Habilitar la Compresión gzip| https://www.giftofspeed.com/enable-gzip-compression/

    Problema de Optimizar imágenes

    : Las imágenes de la página deben optimizarse para reducir el tamaño de su archivo sin afectar significativamente su calidad visual. Formatear y comprimir imágenes puede ahorrar muchos bytes de datos.Solución

    : Utilice aplicaciones de compresión de imágenes para reducir fácilmente el tamaño de archivo de las imágenes. Estas herramientas eliminan datos ocultos en el archivo de imagen, como perfiles de color y metadatos adicionales (p. ej., geolocalización del lugar donde se tomó la fotografía), que no son necesarios. Proporcionan una forma rápida y fácil de reducir el tamaño de los archivos sin perder calidad de imagen. Las herramientas de compresión de imágenes incluyen TinyJPG, Compressor.io, Kraken, ImageOptimizer, ImageOptim, Crush Pics y Minifier (Aplicaciones de Shopify).

    • Optimizar imágenes| https://developers.google.com/speed/docs/insights/OptimizeImages
    • Fixit-Crujido de imágenes| https://mobiforge.com/design-development/fixit-image-crunch
    • Optimización de Imágenes para la Web: Guía práctica| https://www.abetterlemonadestand.com/optimizing-images-for-web/
    • Cómo Optimizar Imágenes para Tu Sitio Web de WordPress| https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website

    Especificar Dimensiones de imagen

    Problema: las dimensiones de imagen siempre deben incluirse y las imágenes no deben volver a muestrearse en tiempo de ejecución, ya que esto ralentizará la representación de la página. Cuando se hace referencia a las imágenes desde su marcado, debe enumerar sus dimensiones de visualización para el navegador. Especificar un ancho y un alto para todas las imágenes permite una representación más rápida al eliminar la necesidad de reflujos y repintes innecesarios.Solución

    : Especifique el ancho y el alto de la imagen incluyendo los atributos width y height cuando utilice el elemento img (consulte a continuación).

    <img src="images/clown.jpg" width="50" height="50" />

    Si no se especifican dimensiones en el documento que contiene, o si las dimensiones especificadas no coinciden con las de las imágenes reales, el navegador requerirá un reflujo y un repintado una vez que se descarguen las imágenes. Para evitar los reflujos, especifique el ancho y el alto de todas las imágenes en la etiqueta HTML <img> o en CSS.

    • Fixit-Especificar Tamaños de Imagen| https://mobiforge.com/design-development/fixit-specify-image-sizes
    • Especificar Las Dimensiones de la Imagen| https://gtmetrix.com/specify-image-dimensions.html

    Utilice el almacenamiento en caché

    Reducir el número de veces que los recursos de procesos y solicitudes de aplicaciones mejorarán el tiempo de carga y reducirán el uso de datos de red. Puede hacerlo de dos maneras: almacenando en caché local o minimizando el uso de scripts y objetos externos.

    Aprovechar el almacenamiento en caché del navegador

    Obtener recursos de problemas a través de la red es lento y costoso, y la descarga puede requerir múltiples viajes de ida y vuelta entre el cliente y el servidor, lo que retrasa el procesamiento y puede bloquear la representación del contenido de la página. Esto también puede incurrir en costos de datos para el visitante. Todas las respuestas del servidor deben especificar una directiva de almacenamiento en caché para ayudar al cliente a determinar si puede reutilizar una respuesta obtenida previamente y cuándo.Solución

    : Aproveche el almacenamiento en caché del navegador cambiando los encabezados de solicitud de sus recursos para usar el almacenamiento en caché. Puede agregar código al archivo de configuración .htaccess en el servidor / host web o usar el encabezado HTTP básico Cache-Control (consulte a continuación).

    Cache-Control: max-age=2592000, public
    • Aproveche el Almacenamiento en Caché del Navegador| https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
    • Fixit-Almacenamiento en caché| https://mobiforge.com/design-development/fixit-caching
    • Aproveche el Almacenamiento en Caché del Navegador| https://varvy.com/pagespeed/leverage-browser-caching.html
    • Lo que es .htaccess? | http://www.htaccess-guide.com/
    • Control de Caché| https://varvy.com/pagespeed/cache-control.html

    Combine varios archivos Para Mejorar el rendimiento

    Problema: Cada objeto externo descargado en una página requiere una solicitud de servidor de nombres de dominio (DNS) independiente. Esto no es un gran problema en una computadora tradicional con una conexión rápida, pero en redes móviles más lentas puede causar latencia. Esto perjudicará el rendimiento de la aplicación y el tiempo de carga.Solución

    : Reduzca el número y el tamaño de los recursos necesarios para el sitio. Sin embargo, si eso no es posible, combine todos los archivos CSS externos en una sola hoja de estilo o todos los archivos JavaScript en un solo archivo grande para reducir el número de llamadas al navegador.

    • Prácticas Recomendadas para Aplicaciones Web Móviles: Minimice los Recursos Externos| https://varvy.com/pagespeed/cache-control.html
    • Cómo Reducir las solicitudes HTTP para Acelerar Tu Sitio de WordPress| https://yoast.com/reduce-http-requests-wordpress/
    • Pasos Sencillos para Mejorar Los Tiempos de Carga de la Página| http://www.peachpit.com/articles/article.aspx?p=1431494&seqNum=5

    Evite las ventanas emergentes

    El uso de ventanas emergentes no es necesariamente malo en una aplicación de escritorio. Sin embargo, si la aplicación utiliza un diseño adaptable o se utiliza en una aplicación móvil, las ventanas emergentes a menudo obstruyen y perjudican la experiencia del usuario. Atraen la atención del usuario de la página a la ventana emergente, y el usuario novato se confunde y frustra rápidamente.

    Ventanas emergentes

    Problema: las ventanas emergentes no son compatibles con muchos dispositivos móviles y su uso puede tener resultados impredecibles

    Solución: Hay muchas alternativas a las ventanas emergentes que son visibles sin ocupar toda la ventana, como cajas de luz, expansión en línea y anuncios de banner estacionarios.

    • Fixit – Ventanas emergentes| https://mobiforge.com/design-development/fixit-pop-windows
    • La Muerte de las Ventanas Emergentes Móviles y Lo Que Puedes Hacer En Su Lugar| http://searchengineland.com/death-mobile-pop-ups-can-instead-263390
    • Google está Tomando Medidas Enérgicas contra las Ventanas Emergentes Intrusivas para Móviles: Esto es lo que los Profesionales del Marketing Deben Saber| https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf
    • ¿Cuál es la Mejor Alternativa a un Pop-up? | https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up
    • 5 Reglas de Experiencia de usuario Esenciales para el Diseño de Diálogos| https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116
    • 9 Alternativas No Tan Intrusivas a los Anuncios Emergentes Flotantes| https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius

    Nuestra Metodología para este Estudio

    Utilizamos los siguientes pasos para realizar este estudio:

    1. Utilizando estadísticas del Programa de Análisis Digital (DAP), obtuvimos los nombres de los 26 principales sitios web del gobierno federal de los Estados Unidos a los que acceden los dispositivos móviles.
    2. Probamos cada sitio utilizando siete herramientas de prueba automatizadas compatibles con dispositivos móviles:
      • Prueba compatible con dispositivos móviles de Google| https://www.google.com/webmasters/tools/mobile-friendly/
      • Moxie Móvil| https://www.mobilemoxie.com/tools/site_analysis/
      • Listo para Mobi| http://ready.mobi/
      • Información de la Página| https://developers.google.com/speed/pagespeed/insights/
      • Verificador de MobileOK de W3C| https://validator.w3.org/mobile/
      • Herramienta de SEO Varvy| https://varvy.com/
      • Gtmetrix – https://gtmetrix.com/
    3. Después de analizar los criterios fallidos reportados por cada herramienta, compilamos los resultados en una sola hoja de cálculo de Microsoft Excel.
    4. Agrupamos los problemas que encontramos en 15 o más sitios en las cinco categorías cubiertas en esta guía, que se enumeran en orden de más ocurrencias (JavaScript) a menos ocurrencias (ventanas emergentes).

    Articles

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.