Professional Documents
Culture Documents
En marzo de 2012, Chico Podjarny realiz una prueba comparando el desempeo de cientos de brillantes pginas web que respondan a travs de cuatro resoluciones de pantalla diferentes. Los resultados fueron muy decepcionantes. (1) Dos aos despus de la aparicin de Responsive Web Design, despus de todo tipo imaginable de diseador y desarrollador haba saltado en el tren, que tomaron una
prueba a casi rock de la teora hasta sus cimientos. Chico demostr que casi todos los sitios sensibles conocido tena sobrepeso. Hemos hecho el Internet a nuestra imagen ... Obeso
Jason Grigsby
Pero, lo ms importante, cada usuario mvil estaba recibiendo la misma sobrecarga kilobyte como usuario de escritorio. La comunidad tuvo diferentes reacciones ante el hecho. Algunos afirmaban diseo de respuesta no no era la solucin definitiva, tal vez lo suficientemente maduros como para los desafos web diseadores enfrentan hoy en da. Afortunadamente, la comunidad Web siempre puede contar con una serie de personas que
van a agarrar el toro por los cuernos y la vuelta a la situacin. Gurs de la Web modernos como Brad Frost , Lucas Wroblewski o cristiana Heilmann vieron la oportunidad donde otros gritaban crisis y lograron convertir el problema en beneficio de la comunidad. Si su sitio web es de 15MB, no es HTML5, que es estpido
cristiana Heilmann
Rendimiento Web tradicionalmente se ha construido alrededor (sin ofender) jerga desarrollador exclusiva. Trminos como GZIPing, uglifying, minifying, bsqueda de DNS, archivos concatenacin ... Este oscuras palabras empujan a los diseadores de la Ecuacin. Las personas inteligentes en la comunidad, sin embargo, se han dado cuenta de que el
problema tiene una raz ms profunda. Realmente no importa si a optimizar y comprimir una imagen de muy alta resolucin, si su plan es para esconderlo de un usuario mvil y seguir haciendo lo descargue. Buen rendimiento es un buen diseo
Brad Frost (2)
Para lograr los sitios verdaderamente ligero, el rendimiento no slo debe ser una preocupacin. Debe ser tratada como una caracterstica de diseo. Para ellos, el rendimiento es igual que cualquier otro tema. Los sitios que superarlo son los que reconocieron desde el principio. Y los que se asoman a l son los que sufren la pena al final. El rendimiento es de respeto. Respeta a los usuarios y van a volver.
Brad Frost
El por qu
No es slo que usted desea que los usuarios tengan una buena experiencia. Si ese fuera el caso se poda cambiar fcilmente el rendimiento de una preocupacin ms importante en su agenda.
Abandono pgina
La investigacin muestra 57% de los usuarios salir de su sitio si se tarda ms de 3 segundos en cargar. (3)
lleva la velocidad como factor de clasificacin. (4) El impacto no es importante para los sitios de media velocidad, pero si la pgina se queda atrs de un cierto umbral, ser castigado con algoritmo de bsqueda de la compaa. Esta prueba de velocidad no slo es una preocupacin cuando se habla de la experiencia del usuario. Sea consciente de la velocidad de carga si su sitio se clasificaron as entre la competencia.
Repetitivo Ahora
Las personas que utilizan su telfono para estar al da con los cambios, repetitivos en curso (resultados deportivos, Facebook alimenta o mercado de valores)
Ahora agujereado
Usuarios que ponen su telfono fuera a la espera de que sucediera algo.
Urgente Ahora
Bastante explica por s mismo Suena asumible, verdad? Bueno, la verdad es que no hay verdad en esto. No hay un 'contexto mvil. La gente utiliza sus telfonos no slo cuando estn caminando en la calle, viajando en tren o descansando en su casa. Ellos hacen todo al mismo tiempo!
Telfonos siguen las personas en todas partes, por lo que la gente usa en cualquier lugar. Contexto Mobile es importante, pero primero tenemos que averiguar qu diablos es.
Tim Kadlec
47% durante el viaje al trabajo A medida que surgen nuevas situaciones, como nuevos mercados y diferente altura hbitos, el contexto mvil cambiar. Podemos asumir con seguridad que el concepto de contexto mvil estar siempre en movimiento, hasta que la gente deje de usar telfonos mviles. Esto nos lleva a mantener un ojo en el ancho de banda. Slo hay un escenario donde se puede servir a los usuarios de un sitio web obesos y salirse con la suya: servir a sus MacBook Pro, mientras estn en casa en el Reino Unido o los EE.UU., con un ancho de banda completo. Pero el resto de las posibles situaciones, que son una gran mayora, tienen que ser cubiertos tambin. Estos incluyen el flujo aparentemente interminable de dispositivos vierte cada da en el mercado, que la gente utiliza para visitar sitios web.
Se incluyen los pases que no tienen que muchos smartphones hace unos aos, pero se despiadadamente salir adelante. Si tus cosas, si su contenido, si su informacin, si sus productos, si sus servicios no estn disponibles en el mvil, que no existe para estas personas
Karen McGrane
Pero lo ms importante, que incluyen todos los lugares la gente va a estar utilizando su sitio. As que hay que ver todos los anchos de banda. No es slo los habitantes de las zonas pobres del mundo claramente no tienen la misma velocidad de datos hacia ellos. La gente intenta acceder a un sitio en el trabajo, con 100mb / s de conexin, en casa, con 2 a
30 MB / s, y tambin con 3G, y tambin con 4G, y tambin con un plan de datos, etc, etc Para decirlo sin rodeos, diseo de respuesta no slo se trata de tamaos de pantalla, sino de diferentes escenarios, por lo que las soluciones deben ser flexibles, adaptables y pensado de arriba a abajo.
Y cmo?
Bueno, bueno que lo preguntas. Dijimos antes no mirar el rendimiento como un grupo de tareas automatizadas ejecutar lado del servidor que ayuda a un sitio ya condenados. Hay formas para llevar a cabo esta preocupacin y convertirlos en una ventaja competitiva.
Descarga y Ocultar
Los activos se descargan todava, pero ocultos.
Descargar y encogimiento
Imgenes de escritorio de nivel de alta resolucin se descargan, y no pierde su ajuste a la pantalla los usuarios
El exceso de DOM
No hay manera de evitar los navegadores analizar y procesar todas las reas de la DOM, incluyendo los ocultos
Un enfoque preventivo
Hay una gran cantidad de informacin que hay sobre qu sitios web guardan en su defecto a superar las expectativas de rendimiento. Pero lo que mucha gente viene a decir algo as como "Ser responsable desde el principio". Todas las tcnicas que voy a cubrir han estado alrededor por un tiempo. Para m lo interesante viene en la forma en que se mezclan y entrelazan, que cubre los defectos de los dems y la combinacin de sus fortalezas. Es ahora, en plena explosin mviles que muestran lo poderosos que son.
los creadores web tenan clase de olvido sobre sus usuarios. Todo un gran porcentaje de ellos estaban recibiendo una forma incompleta de su sitio, contando un poco demasiado en esta nueva y brillante tecnologa. Ahora que los motores de WebKit y Firefox y otros han hecho cargo de gran parte de la cuota de mercado, el problema es la enorme cantidad de dispositivos con navegadores que no cuentan con las capacidades del nuevo iPhone o Samsung. Una vez ms, Aumento progresivo es el nico enfoque que se encarga de estos jugadores olvidados primero y dejar el brillo de los que pueden tomarlo.
Mobile obliga a concentrarse (lo que le permite deshacerse de la confusin que se deriva de tener demasiado espacio en pantalla) Mobile ampla sus capacidades (con la tecnologa como el GPS, la geolocalizacin, los gestos multitctiles, acelermetros, cmaras ...) Desde entonces, el diseo web ha estado cambiando rpidamente a este enfoque. En el camino no slo a diseadores, tambin muchos desarrolladores, han sealado que la construccin mvil primero le da una ventaja sobre el desarrollo de escritorio, muy relacionado con el segundo punto de Lucas W. Aumento progresivo y primer desarrollo mvil han sufrido una fusin de gneros. Devs empezar a construir para mviles y aumentar progresivamente a partir de ah, tomando espacio en la pantalla grande como una mejora sobre una base del ncleo mvil.
Jordania Moore hace un buen resumen de los motivos (8) . Sostiene que, puesto que "no se puede apostar con seguridad la velocidad de conexin ',' El 'diseador Web responsable" se basara en el punto ms bajo de la entrada - un mvil-primera aproximacin, en el supuesto de la velocidad de conexin ms lenta y construir a partir de ah a los puntos de interrupcin ms grandes para conexiones ms rpidas. En el futuro, vamos a ser capaces de confiar en la deteccin de ancho de banda slida, pero por ahora es una buena idea tomar como una preocupacin y tratar de no tomar ninguna medida en la direccin equivocada.
En resumen:
Cdigo del sitio para la resolucin ms baja y posibilidades que le interesan. Hacer uso verdadero de la mejora progresiva desde el principio. Construir una funcionalidad adicional, grficos mejorados y la interaccin cuando se puede utilizar.
cuando, en realidad, "ellos" hagan lo que quieran. Apoyo a las nuevas caractersticas suele ser parcial. RESS naci para ofrecer una solucin. Como mvil En primer lugar, el trmino fue acuado por Luke Wroblewski en 2011 (9) . Se basa en la deteccin de tipo de dispositivo del usuario, evaluar y proporcionar una experiencia taylored para ello. Para ello, existen herramientas pesadas por ah, como WURFL , DeviceAtlas o unos ms ligeros como Gem Browser , que lee la cadena de agente de usuario y comenzar desde all. Evaluar el tipo de dispositivo tiene otras ventajas. Permite a los desarrolladores para servir a diferentes plantillas dependiendo en el dispositivo del usuario. Digamos que usted est construyendo un sitio grande ver, y quiere que su navegacin mvil sea un ser simplificada, que no tiene la mitad de espacio que el escritorio de uno. Usted podra jugar
con el contenido, mostrar y ocultar cosas, movindose alrededor de divs con JavaScript o podra tener diferentes plantillas para pantallas mviles y de escritorio y tener el servidor de decidir cul de ellos para servir. Esto le da a diseo Responsive una ventaja sobre los sitios Mdot. nica ventaja de Mdot hasta RESS lleg fue proporcionar una experiencia especfica para dispositivos mviles. La BBC (personas muy inteligentes, con millones de lectores en todo el mundo y una gran responsabilidad para con sus usuarios) hablar de cmo mejora RESS y progresiva podra funcionar como una sola y nica. Ellos llaman a su enfoque de cortar la mostaza! (10) . Consiste en la creacin de una experiencia central que funcionar en todos los dispositivos que usted puede imaginar. Despus de eso, evaluar el dispositivo en el servidor y deciden si es o no "Corta la
mostaza. Si es as, una experiencia mejorada progresivamente se entrega. Pero, de nuevo, si no lo hace, el usuario puede todava acceder al contenido bsico.
Condicional Loading
Los usuarios de mviles quieren ver nuestras horas de men y el nmero de entrega. Los usuarios de escritorio definitivamente quieren que este 1mb png de alguien sonriendo a
Marquis
ensalada
Mat 'Wilto'
Vamos a dar un par de puntos de vista en cuenta: Los usuarios de mviles quieren que el contenido, tanto como usuarios de escritorio. Si su contenido es accesible desde una URL,
Mobile obliga a concentrarse. Hay algunas limitaciones diseadores tienen que abrazar a servir el mismo contenido, como el ancho de banda y el menor tamao de la pantalla. Tambin se refiere como "Mejora agresivo ', esta tcnica de desarrollo permite a los diseadores se centran en el contenido bsico y progresivamente mejorar para pantallas ms grandes. Se ofrece acceso bsico a determinados contenidos que luego se puede inyectar en la pgina cuando haya espacio disponible. Tal vez sera ms exacto pensar en la carga condicional como contenido primera aproximacin. Usted no tiene el lujo de barras laterales o varias columnas a llenarse de contenido que es slo bueno tener ms que
esencial
Jeremy Keith
Utilice herramientas excelentes como MatchMedia , que imita el comportamiento CSS evaluar el tamao de pantalla de JavaScript.
Lazy Loading
Imagen y el usuario los sitios pesados que necesitan ser optimizados para mviles, como Facebook, Twitter o Pinterest, hacen uso de la carga diferida para proporcionar una mejor experiencia. La primera vez que carga la pgina, se carga un nmero de mensajes. Cuando se desplaza hacia abajo, el diseador asume que es porque quieres navegar a travs de an ms contenido, por lo que se inyecta en la pgina a travs de Ajax. Esto hace que la pgina cargue mucho ms rpido, evitando el exceso de DOM.
El establecimiento de un
Vamos tcnico!
Hay algunos mtodos para lograr velocidad, que funciona en un nivel ms tcnico y menos conceptual.
Imgenes Responsive
Los diseadores y desarrolladores de todo el mundo han estado luchando para conseguir imgenes que responden a la especificacin HTML. Mat marqus Wilto ' es uno de los ms francos. La batalla no est ganada , pero hay una serie de soluciones que se basan en JavaScript para lograr un resultado deseado. Scott, Jehl , tambin del Grupo de filamento , escribi un plugin que imita el formato propuesto por la comunidad y funciona como un encanto: PictureFill
Imgenes de compresin
Daan Jobsis , un diseador holands, encontr un fenmeno muy extrao cuando la compresin de imgenes con Photoshop (12) . l demostr lo siguiente: Tomar una imagen, el doble de su tamao (200%), comprime al
25% o menos de su calidad original, cambiar el tamao de nuevo en el navegador (100%). La imagen no slo ser ms ligero en tamao, pero ya optimizado para pantallas HiDPI, ya que su densidad de pxeles ya se duplica. El problema slo se observa es que el navegador puede tener dificultades para pintar una imagen de tamao doble de nuevo a su tamao original (si es que tiene que hacerlo cien veces, como en los sitios de imgenes fuertes), as que un poco de las pruebas es requerido para ver si esta es la solucin ptima.
Vectores VS Bitmaps
Imgenes SVG son el camino a seguir en el momento. Son completamente escalable, por lo que se obtienen mejores resultados en cualquier pantalla. Proveer de reserva es muy fcil a travs de Modernizr.
Icono Fonts
Tcnicamente se trata de imgenes basados en vectores, slo sirvi como una fuente. Como Chris Coyier dice, 'Icono Fonts son impresionantes porque ": Usted puede fcilmente cambiar el tamao Usted puede cambiar fcilmente el color Usted puede sombrear fcilmente su forma Trabajarn en IE6, a diferencia de PNGs transparentes Usted puede hacer todo lo que puede hacer con imgenes Usted puede hacer cualquier cosa que ver con la tipografa
Imgenes HiDPI
David Bushell escribi recientemente un artculo muy interesante con un poco de
pensamiento en imgenes HiDPI (12) . Sostiene que, aunque hoy en da tenemos la posibilidad de servir iPhones, iPads y otros dispositivos modernos con imgenes que darn cumplimiento a sus capacidades de pantalla, todava es demasiado pronto para asumir un sitio no va a quedar paralizado por hacerlo. Qu significa una conexin rpida y de alta densidad de pxeles que incluso los usuarios quieren una mayor calidad? No es probable que los planes de datos mviles.
David Bushell
El punto es que para hacerlo, pero hacerlo con sensatez, teniendo en cuenta el caso antes de saltar en imgenes 4x.
Qu sigue
Google ha desarrollado recientemente un nuevo formato de imagen, WebP. Proporciona
compresin con y sin prdida de imgenes Web, lo que resulta en archivos 3x ms pequeo, en comparacin con el PNG. Hay, bibliotecas JavaScript ligeros simples que se convierten en y desde WebP disponible. Teniendo en cuenta el impacto de las ltimas herramientas de Google, que es probablemente una buena idea para empezar a experimentar hoy en da con el fin de manejar un sitio de imgenes pesadas.
Activos Loading
Cargar activos con cuidado y en orden. El control de este aspecto proporciona una gran ventaja, por lo que permite que la pgina represente el contenido bsico y mejorar despus.
CSS, Imgenes
Carga controlada a travs de preguntas de los
JavaScript
Hacer uso de la funcionalidad de HTML5, como asncrona o diferir. Tambin hay ayudantes de carga como RequireJS que pueden manejar la carga y dependencias.
Para lograr esto los desarrolladores tienen que pensar cada recurso, pero aqu hay una serie de pautas: Concatenar todos los archivos CSS o hacer uso de Preprocesadores CSS para compilarlos en un solo archivo. Unificar todos los plugins JS con el mismo archivo y cargue siempre en el pie de pgina, a menos que realmente necesitan para bloquear la representacin de la pgina (si carga fuentes Typekit en el pie, se llega al famoso FOUT o 'Flash de texto sin estilo' ). Si tiene que utilizar imgenes PNG, utilice sprites. Se unifican todas las imgenes en una y hacer uso de CSS para cortar las piezas. Hay una serie de soluciones en lnea para hacer esto. Hacer uso del esquema URI de datos donde sea posible, que le permite incluir imgenes como datos en lnea, la
En Resumen
La importancia de rendimiento web ha sido ligeramente alto desde el nacimiento del diseo de respuesta. Los diseadores y desarrolladores se han centrado en la forma de resolver el rompecabezas Responsive y, en su camino, un nuevo multi-banda, multi-dispositivo y multi-ubicacin Web est empezando a entrar en foco.
Para estar preparado para los problemas de maana, tenemos que incluir el desempeo como una consideracin fundamental, ya que la Web Desktop centrado est desapareciendo ante nuestros ojos. El usuario mvil es Hastier y ms dispuestos y no saltar a travs de aros para obtener el contenido, y dado que cada vez ms sitios de primavera, cada da, ser rpido significa estar por delante.
Referencia
1. Implicaciones de rendimiento de Responsive Design
Chico Podjarny
2. Desempeo Diseo
Brad Frost
5. La organizacin Mobile
Lucas Wroblewski
7. Mobile First
Lucas Wroblewski
Lucas Wroblewski