Gorka Molero Pensamiento

WEB PERFORMANCE 2.0

Gorka Molero, 14 de agosto 2013
Siga el debate

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)

Google, la pgina de velocidad y SEO

A la vuelta de la primavera de 2010, Google

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.

Consideraciones de ancho de banda

De vuelta en el da, la gente sola hablar sobre el concepto muy abstracto de "Contexto Mobile '. Teora famosa de Google rompe los usuarios mviles a tres tipos (5) :

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

Lucas Wroblewski muestra algunas estadsticas muy interesantes: (6)

Dnde estn las personas que utilizan los dispositivos mviles?

84% en el hogar 80% durante el tiempo de inactividad de varios durante todo el da 76% espera en las lneas de espera para las citas 69% mientras que las compras 64% en el trabajo 62% mientras ve la televisin (alt. estudio afirma 84%)

 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.

Usted no puede decidir qu dispositivos acceden a su sitio, los usuarios hacen

Karen McGrane

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.

Lo que debe evitar

Chico Podjarny cita tres razones principales para el nmero de sitios web que responden hinchados que vemos por ah: (1)

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.

Mejora progresiva ...

... Tiene por objetivo proporcionar una experiencia web reducido a lo esencial y tomar desde all. Hace un par de aos esta teora fue capturado principalmente desde el punto de vista del navegador. Con las nuevas tecnologas como HTML5, CSS3, jQuery y as sucesivamente,

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.

En primer desarrollo mvil

Ya en 2009, Luke Wroblewski propuso disear mviles primero por tres razones: (7) Mobile est explotando

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.

RESS: Responsive Web Design + componentes del lado del servidor

Para muchas personas, el diseo Responsive tena una especie de esencial a corto venida. Se bas principalmente en la deteccin de ancho de pantalla. A medida que ms y ms tipos de dispositivos emergen, dispositivos hbridos como los porttiles de pantalla tctil y as sucesivamente, la deteccin de caractersticas se ha convertido en esencial para el diseo de respuesta. Bibliotecas que se le proporcionen, principalmente Modernizr , han florecido y se usan ahora en la mayora de los proyectos. Ellos ayudan a los desarrolladores valorar si el navegador del cliente es compatible con algunas funciones y proporcionar en consecuencia. Sin embargo, muchas veces es difcil de confiar en los navegadores, ya que "ellos" le dicen que apoyan las funciones

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,

se puede acceder a los dispositivos mviles.

Brad Frost

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

presupuesto por resultados

Tim Kadlec argumenta que el establecimiento de un peso mximo de pgina y estar siempre al tanto de que es la mejor manera de mantener a cargar la pgina hacia abajo (11) . "Establezca sus metas y atenerse a ellos. Steve Souders menciona tres opciones para elegir, si usted se cae encima de su presupuesto: Optimizar una caracterstica o un activo existente Eliminar una entidad o activo existente No agregue una nueva caracterstica de activo. Para m, esto suena un poco radical, pero tiene un punto de seguir de cerca el desempeo general de un sitio a travs del tiempo y con cada nueva caracterstica.

Vamos tcnico!
Hay algunos mtodos para lograr velocidad, que funciona en un nivel ms tcnico y menos conceptual.

Las tcnicas de imagen

Imgenes constituyen alrededor del 60% de los sitios web. Si usted est sirviendo los usuarios mviles con conexiones de ancho de banda desconocidas imgenes de escritorio de tamao, que son bsicamente condenando su sitio a los malos resultados El truco para conseguir esto es para servir a diferentes versiones de imgenes, dependiendo del tamao de la pantalla o escribir. Se podra servir una pequea imagen de un telfono mvil y una alta resolucin de una a una computadora de escritorio. Se

podra cumplir una doble imagen de tamao a un dispositivo Hi-DPI.

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

medios, la carga condicional o perezoso y tcnicas de imagen sensibles / compresin

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.

Publicidad, Widgets Sociales y todos los bienes de terceros

Slo despus de inyectar la carga.

Tcnicas de interpretacin de la vieja escuela

Ellos han estado alrededor por un tiempo, pero siguen siendo tan relevantes hoy en da.

Reducir el nmero de peticiones HTTP

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

eliminacin de algunas de las solicitudes HTTP ms.

Reducir el nmero de bytes

Uglify, cercenar cada script o un archivo CSS se llama desde la pgina. Configure su servidor para permitir la compresin GZIP y expansin y GZIP cada activo.

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

3. Abandono Website sucede despus de 3

segundos 4. Cmo la pgina Carga Velocidad Impactos SEO y experiencia de usuario

Spencer Yao

5. La organizacin Mobile
Lucas Wroblewski

6. Cundo y dnde est la gente que utilizan dispositivos mviles?

Lucas Wroblewski

7. Mobile First
Lucas Wroblewski

8. Consideraciones responsable de Responsive Web Design

Jordn Moore

9. RESS: Responsive Design + Server Side Components

Lucas Wroblewski

10. Corte de la mostaza

de la BBC News Responsive

11. Determinacin de un presupuesto Performance

Tim Kadlec

12. Revolutie Retina Seguimiento

Daan Jobsis

13. El Raster Image Paradox

David Bushell