La velocidad es usabilidad.
Para decirlo con más precisión, la velocidad del sitio web es una parte importante de la usabilidad. La interfaz más intuitiva jamás creada por la mente del hombre no le servirá de nada si el usuario se hace pis en el momento en que se carga.
Eso es. El artículo ya está hecho ... Ok, entonces hay mucho más para él, pero esa primera oración es aproximadamente la mitad de lo que necesitas saber. Tenemos que hacer que nuestros sitios web sean rápidos.
Podría usar muchas expresiones superlativas como "increíblemente rápido" o "extremadamente rápido", o incluso "más rápido que una bala que acelera", pero serían inadecuadas. Es más simple decir que no existe tal cosa como "demasiado rápido".
Necesitamos tomarnos un minuto para hablar sobre a qué velocidad me refiero. En resumen, toda la velocidad. Más específicamente, tres tipos de velocidad:
Este sería el tiempo que demora toda la información en descargarse a los dispositivos de los usuarios. Esto se ve afectado principalmente por la velocidad de la conexión a Internet y el tamaño real de los archivos.
No puedes hacer mucho acerca de la conexión, pero puedes hacer mucho acerca del tamaño del archivo.
Después de descargar los archivos, el navegador debe procesarlos y procesarlos. Todo ese procesamiento y representación se ve afectado por la forma en que se escribió su código y todo lo demás que está sucediendo en el teléfono, la tableta o la computadora portátil / escritorio del usuario.
Lo único que puedes controlar es tu propio código, pero eso hace una gran diferencia.
Y luego está el factor psicológico. Los sitios web rápidos pueden verse y sentirse como lentos. Los sitios web lentos pueden hacerse sentir un poco más rápido con la aplicación judicial de algunos trucos.
Esta parte se trata de estudiar a su usuario y dejarles saber qué sucede cuando interactúan con su sitio web o aplicación.
Debe prestar atención a los tres aspectos de la velocidad del sitio web para hacer que su sitio sienta que va rápido. Y cuanto más grande es el sitio, más hay para optimizar.
Comencemos, entonces.
Muchas veces, especialmente en aquellos proyectos experimentales más pequeños que amo tanto, me encuentro pasando más tiempo en el CSS que cualquier otra parte del código. A menudo también hay más CSS escritos que HTML o JavaScript. Entonces, allí mismo, es un indicador de cuánto puede afectar su CSS el tamaño del archivo.
Luego, por supuesto, está la cuestión de qué tan rápido se ejecutará realmente su sitio web en el escritorio, la computadora portátil, la tableta o el teléfono de su usuario. Gran parte del "trabajo" real o representación de una página web es realizada por el software, con un poco de ayuda de su GPU.
Puede cargarse rápidamente, pero desplazarse lentamente. La forma en que se escribe su CSS tiene un efecto directo en la rapidez con que un dispositivo en particular puede mostrar realmente la página web una vez que los archivos se han descargado.
Al optimizar un sitio web para que se ejecute más rápido, el CSS suele ser un buen lugar para comenzar.
CSS que se encuentra en su hoja de estilos y no hace nada hace que sus archivos sean innecesariamente más grandes. De acuerdo, entonces este podría parecer obvio; pero aún le sucede a los mejores de nosotros.
Sacas un poco de contenido y te olvidas de eliminar el CSS anterior. Cambia la clase o ID de un elemento contenedor y olvida eliminar el CSS anterior. Escribes algo de CSS, te das cuenta de que hay una mejor manera, y olvidas ... la obtienes.
Incluya múltiples desarrolladores de aplicaciones para el usuario en la mezcla, y obtendrá una receta para una hoja de estilos inmanejable e inmanejable, o una colección de ellos, si no tiene cuidado. El código no utilizado ralentiza la carga de la página en virtud de su propia existencia como datos. Disminuye el desarrollo porque puede confundir a las personas que leen la hoja de estilo.
También puede significar tiempos de renderización más lentos, ya que es solo más CSS para que el navegador vea mientras combina todo el CSS con sus elementos HTML apropiados.
Ya sea que revise y elimine todos los CSS antiguos de forma manual, use herramientas automáticas para ayudarlo a encontrar selectores de CSS no utilizados, o simplemente elimine los elementos al azar hasta que se rompa algo (no lo haga), debe sacar el código anterior.
Hablando de cómo el navegador coincide con el CSS con el HTML apropiado, es hora de mirar los selectores de CSS. Mucho se ha escrito sobre qué selectores rinden más rápido, cuáles son lentos, si debes molestarte con los lentos, y así sucesivamente.
El problema es que gran parte de esta información es antigua. En el año 2000, Dave Hyatt (un desarrollador que trabaja en Safari y miembro activo del Grupo de trabajo CSS del W3C) escribió esto:
La triste verdad sobre los selectores de CSS3 es que realmente no deberían usarse en absoluto si te preocupa el rendimiento de la página.
Si echas un vistazo a el documento De donde vino esa cita, verá que estaba hablando de selectores como : primer hijo y otros pseudo selectores. Y él tenía razón.
Él todavía lo es; pero en los últimos quince años, las computadoras han avanzado un poco. Hoy en día, el esfuerzo adicional requerido de la computadora para procesar CSS no debería ser notado por nadie, excepto aquellos que usan los dispositivos móviles más baratos.
Esa es una preocupación en sí misma, así que realmente, dependerá del proyecto en cuestión, los datos demográficos de tu objetivo, etc. En pocas palabras, use su mejor criterio y tal vez no se exceda en los pseudo-selectores.
De lo contrario, a menos que sus páginas alcancen el tamaño de un libro, los selectores que use deberían tener muy poco efecto en el rendimiento de su sitio. Aún así, eche un vistazo al documento vinculado anteriormente y familiarícese con lo que rinde más rápido y lo que no. Aún puede encontrar la información útil.
También puedes ver Este artículo de CSS-Tricks para una visión un poco más reciente sobre el tema.
Por supuesto, también hay propiedades CSS que tardan más tiempo en renderizarse que otras. Las propiedades clásicas como ancho, alto y color siguen siendo las más rápidas. Los que tienden a demorar un poco más (y pueden variar de un navegador a otro) tienden a ser propiedades de CSS3 como la sombra de caja.
El proceso de agregar una sombra paralela a un elemento es complejo, en lo que respecta a la representación de páginas web. Lo interesante es que, como se señaló en Rocas HTML5 , la potencia de procesamiento requerida puede variar mucho dependiendo de las dimensiones específicas de la sombra paralela.
Este artículo indica que lo mismo se aplica a otras propiedades como border-radius y transform.
Una vez más, estos tendrían poco efecto en la representación de una página en una computadora de escritorio o computadora portátil promedio. Sin embargo, los dispositivos móviles podrían tener un impacto mayor, y la experiencia podría sufrir como resultado. Todo el mundo odia el desplazamiento entrecortado.
Aún así, eso tiene que sopesarse contra el costo de usar imágenes para producir los mismos efectos. ¿Alguien recuerda las cosas que hicimos para obtener esquinas redondeadas, alguna vez?
Simplemente no te excedas, y tus estilos se renderizarán lo suficientemente rápido.
Ahora nos metemos en otro territorio. Las animaciones CSS pueden ser tremendamente rápidas, o pueden ralentizar el navegador hasta el punto de que los equipos de juego tienen problemas para mantenerse al día.
Esto se debe en parte a que no todas las animaciones se representan por igual. Parte del trabajo pesado es realizado por el hardware, mientras que otros tipos de animación tienen que ser renderizados completamente por las funciones propias del navegador. Esto es especialmente costoso en dispositivos móviles.
En otro articulo en HTML5 Rocks, las propiedades de CSS que son las más rápidas para animar son posición , escala , rotación y opacidad.
Consulte el artículo para obtener una descripción más completa de lo que se puede animar mientras se mantiene el "costo" bajo.
Aquí es donde te ofrezco los consejos más prácticos que yo, el autor, puedo darte. Use preprocesadores CSS como LESS, SASS y Stylus. Claro, si los usa mal, puede generar hojas de estilo más grandes de lo que esperaba; pero los beneficios potenciales valen la pena.
Por ejemplo, si desea reducir el número de solicitudes HTTP realizadas al servidor (siempre es una buena idea), incluya todos los restablecimientos, marcos, en un archivo LESS / SASS. Cuando compila, todo estará en una sola hoja de estilo. Además, la mayoría de los preprocesadores ofrecen la opción de generar todos los CSS en forma reducida.
De esta forma, puede usar tantos archivos diferentes como necesite para la organización del código, sin afectar demasiado el tamaño del archivo.
JavaScript puede ser muy lento. Para ser más específico, JavaScript puede tener un efecto mucho más directo en la parte de "procesamiento" de la ecuación de velocidad que el CSS. Peor aún, JS puede volverse exponencialmente más pesado en términos de tamaño de archivo para lograr cosas aparentemente triviales.
Es un doble golpe de lentitud dolorosa, y nuestros usuarios son a menudo las víctimas, especialmente aquellos en los navegadores móviles. Sin embargo, esto no es culpa del lenguaje. Cuán atormentado se pone nuestro JS es a menudo en proporción directa a nuestra ignorancia de la programación en general.
No soy desarrollador. A menudo uso librerías como jQuery, o complementos JS individuales e independientes para hacer las cosas. Cuanto más tengo que hacer, más complementos necesito para que todo funcione. Estos complementos y marcos incluyen opciones adicionales y funciones que quizás nunca use.
Está el problema del robo de ancho de banda, allí mismo.
Además, los complementos podrían no funcionar bien juntos. Podrían ralentizarse unos a otros, o uno podría evitar que otros trabajen por completo.
Ahí está el poder de procesamiento desperdiciado, allí mismo.
Si realmente desea acelerar su sitio web, reduzca los milisegundos (o segundos enteros, en algunos casos) esto es lo que debe hacer:
Al igual que CSS, lo mejor es mantener JS en archivos externos y vinculado a su HTML. Puede que no piense que es tan importante si no tiene mucho código JS, y agrega una solicitud HTTP, pero esto es lo que sucede: el navegador almacena en caché los archivos CSS y JS externos.
Entonces, cuando esa misma página es solicitada nuevamente, u otras páginas en su sitio que usan el mismo CSS o JS son solicitados, esos archivos externos en caché se usan en lugar de ser descargados nuevamente. Eso es tiempos de carga del sitio más rápidos y un procesamiento un poco más rápido. Vale la pena llamar al servidor de vez en cuando.
Básicamente, la teoría es la siguiente: el navegador representa primero lo que está en la parte superior del código fuente de la página. Es por eso que cosas como la etiqueta van cerca de la cima.
Sin embargo, los archivos de JavaScript pueden ralentizar todo al impedir que el navegador represente su HTML hasta que se carguen. Dado que la mayoría de los efectos y complementos de JS comúnmente utilizados solo necesitan funcionar una vez que el resto de la página está en la pantalla, esto es menos que ideal.
Mejore la experiencia del usuario y reduzca el tiempo de carga percibido al vincular los archivos externos en la parte inferior de la página, justo antes de la etiqueta.
Para cuando un usuario interactúa con cualquier cosa que requiera JS, debe estar listo para funcionar.
Si está diseñando una aplicación hecha y derecha, entonces puede y tal vez debería ignorar esta sección. Un marco bueno, flexible y ligero puede ofrecer a los desarrolladores una gran ventaja. Sin embargo, para sitios web de tamaño pequeño a mediano, incluir un marco de JavaScript puede ser excesivo. En estos sitios web, JS se utilizará principalmente en el back-end de CMS para la administración de contenido. En el front-end, es posible que tenga un control deslizante de imagen o diseño de mampostería o dos. Si eres realmente elegante, es posible que hayas completado automáticamente en la barra de búsqueda.
La mayoría de los contenidos no necesitan ser imaginados y animados de esta manera. JavaScript, en la medida de lo posible, debe reservarse para mejorar la experiencia del usuario. Depender de él para simplemente actualizar un sitio puede resultar en un sitio lento y lento, especialmente en dispositivos móviles.
En cierto modo, todos los marcos de código son todos iguales, ya sea JavaScript, PHP, Python, HTML o CSS: cada característica es un montón de código. Al elegir un marco o complemento para un trabajo, pregúntese si va a utilizar cada característica que ofrece, o incluso la mayoría de ellos.
Si no, ¿el marco es modular? ¿Puedes escoger y elegir solo las partes que realmente necesitas? Si es así, y usted cree que la compensación del tamaño del archivo valdrá la pena, entonces, ¡por supuesto, adelante! De lo contrario, es una buena práctica ver qué puedes sacar más de lo que puedes meter.
¡No permanentemente! Piénselo de esta manera, ¿hay algún contenido o funcionalidad en su sitio oculto por JS? ¿Pueden las personas acceder a él sin tener JS habilitado en sus navegadores?
Si es así, entonces genial. Sin embargo, si las personas no pueden ver información importante, ponerse en contacto con usted o navegar correctamente sin JavaScript, entonces tiene un problema. Claro, puedes confiar en que la mayoría de las personas todavía lo tienen habilitado, pero siempre tienes esos casos extremos.
¿Cómo se relaciona esto con la velocidad del sitio web? Imagínese lo lenta que será la navegación si una parte de su sitio web simplemente no funciona.
No en serio, si usted no es un desarrollador y tiene el presupuesto para uno, obtenga uno, incluso para trabajos pequeños y simples. A la larga, es más barato contratar a alguien con experiencia para que lo haga bien.
En caso de que las cosas salgan terriblemente mal (y estamos hablando de computadoras aquí, entonces algo saldrá mal), descubrirán qué salió mal más rápido. Tendrán experiencia en encontrar ese tipo de problemas y resolverlos. Si nada más, serán mejores para buscar en Google esos temas en particular.
Lo más importante es que sabrán cómo hacer lo que debe hacerse con menos código. Menos código (generalmente) se ejecuta más rápido y (siempre) se descarga más rápido. Ese es el consejo más simple que puedo dar.
(Si usted es un desarrollador o está aprendiendo, he compilado una lista de tutoriales que se encuentran en la parte inferior de este artículo. Se incluyen algunas guías para principiantes para escribir JavaScript que se ejecutan rápidamente).
Cuando saca el video de la ecuación, lo más importante en cualquier sitio determinado por contenido es las imágenes. Las imágenes tienden a ser grandes, voluminosas y lentas como el infierno cuando no están optimizadas.
Ahora, con la proliferación de pantallas de retina que nos obligan a utilizar imágenes más grandes si queremos que las cosas se vean bien en cada dispositivo, el problema no será más fácil de resolver. Y, lo que es peor, es un problema que es fácil olvidar hasta que termine gastando más de lo previsto en ancho de banda.
Cuando cada byte cuenta, no podemos permitirnos olvidar.
La buena noticia es que este no es un problema nuevo de ninguna manera. ¿Por qué es eso bueno? Significa que hay toneladas de posibles soluciones para elegir, y puede usar más de una de ellas a la vez. De hecho, esa es generalmente una buena idea.
Entonces, hasta que los ISP y las empresas de hosting comiencen a proporcionarnos ancho de banda ilimitado (no contenga la respiración), aquí hay algunas cosas que puede hacer:
Simplemente, haz todo lo que puedas, visualmente hablando, con CSS y JavaScript antes de pasar a las imágenes. El código siempre será más económico de transferir que las imágenes, así que quédate con eso tanto como puedas. A pesar de la potencia de procesamiento consumida por las sombras paralelas basadas en CSS, gradientes y similares, considere las ventajas y desventajas.
También tenga en cuenta que las imágenes SVG cuentan, en esta instancia, como "código", porque eso es todo lo que son: código XML que se representa como una imagen. Por lo tanto, deben usarse siempre que necesite algo relacionado con el vector.
Ahora, volviendo a las pantallas retina antes mencionadas, ¿qué hacemos con ellas? ¿Cómo ahorramos ancho de banda allí?
Aquí es donde volvemos al elemento y a la propiedad del conjunto de imágenes . Son relativamente nuevos y no son totalmente compatibles, pero sí permiten que los navegadores elijan el tamaño de imagen adecuado para el dispositivo que se está utilizando.
Entonces, aunque esto no le ahorrará ningún ancho de banda a alguien que vea su sitio en su iMac, no es un gran problema porque es muy probable que tenga banda ancha. Alguien en su teléfono, mientras tanto, obtiene una versión más pequeña de la misma imagen, impidiéndoles esperar demasiado.
Muchos problemas de tamaño de imagen se corrigen una vez que aprende qué formato de imagen usar en cualquier situación dada. Podría continuar sobre los formatos de imagen específicos, cómo funciona la compresión, etc., pero realmente solo necesitas recordar un par de cosas:
Eso es realmente todo. Si hace esto y juega con la configuración de optimización cuando guarda las imágenes, a menudo puede obtener una calidad bastante decente en archivos de tamaño relativamente pequeño.
Sin embargo, hay un nuevo formato denominado WebP, que Chrome y Opera admiten automáticamente. Google reclamaciones los archivos WebP son un 26% más pequeños que PNG y un 25-34% más pequeños, dependiendo de un par de factores.
Esta es una gran noticia, a excepción de dos cosas: Firefox y IE. Ahora, si no le molesta usar los respaldos y un guión adicional, puede usar el formato WebP ahora, hoy. Solo descarga WebPJS y estás listo para irte
WebPJS usa JavaScript y un poco de Flash ( suspiro ... pero eso es solo para IE) para que funcione, pero funciona. Podría considerar si necesita servir muchas imágenes más grandes rápidamente, con el inconveniente de que no funcionará sin el JS.
Hay dos tipos de compresión que puede usar en sus imágenes. Primero, tenemos compresión con pérdida . Esto se usa en formatos con pérdida como JPEG. Le permite comprimir cualquier imagen tanto como quiera con la comprensión de que la calidad empeorará y empeorará. Las cosas se pixelarán y perderán definición.
La compresión sin pérdida se usa en formatos como PNG, y puede reducir el tamaño de sus archivos hasta cierto punto. Sin embargo, tiene sus límites. Siempre llega un punto en el que es imposible hacer una imagen más pequeña sin perder calidad.
Si tiene Photoshop o un editor de imágenes similarmente avanzado, a menudo es mejor usarlos para comprimir sus imágenes para que pueda ver cómo se verá el resultado cuando haya terminado.
(Las herramientas automáticas, especialmente las herramientas en línea, en mi experiencia, tienden a comprimir las cosas tal vez un poco demasiado. Sin embargo, voy a enumerar las mejores herramientas de compresión que he encontrado en la sección de enlaces a continuación).
Si está usando un CMS como WordPress, automáticamente cambiará el tamaño de las imágenes que son demasiado grandes. También es fácil encontrar complementos que los comprimirán automáticamente por usted.
Eso sí, solo recomiendo la compresión automática en los casos en que sabe que va a subir lotes, y muchas imágenes de calidad similar para el mismo propósito. Un blog de fotos es un ejemplo.
Si está ejecutando un sitio donde los usuarios están cargando sus propias imágenes, bueno ... el cambio de tamaño automático y la compresión es una necesidad absoluta, y es por eso que cada red social lo hace.
Aquí hay algunos consejos que no encajaban en ninguna de las tres categorías anteriores.
"Minificar" su código solo significa que se eliminan todos los espacios y saltos de línea adicionales. Esto puede reducir el tamaño del archivo bastante significativamente.
Puede sonar como un montón de trabajo, pero existen herramientas para minimizar CSS y JS automáticamente, y mantener los archivos minificados separados para sus archivos fuente, por razones bastante obvias.
Como se mencionó anteriormente, varios preprocesadores de CSS pueden emitir todo su código en forma minificada en primer lugar.
Siempre que su servidor esté configurado correctamente, todo su código puede enviarse al navegador en un formato comprimido. Los archivos de texto se comprimen muy bien, lo que reduce considerablemente el tamaño de los archivos enviados.
Ahora, su servidor tiene que tomarse un instante o dos para comprimir los archivos que envía, y el navegador del usuario tiene que descomprimirlos, pero esto generalmente vale la pena el intercambio de ancho de banda.
Para una explicación completa de cómo funciona esto, vea Cómo optimizar su sitio con la compresión GZIP .
El almacenamiento en caché del navegador se realiza de forma automática en cierta medida gracias a los navegadores modernos. Un navegador va a un sitio y almacena temporalmente las imágenes y otra información que encuentra allí.
De esta forma, si el mismo usuario regresa dentro de un período de tiempo determinado, el navegador no tiene que volver a solicitar las mismas imágenes. Simplemente carga los que ya tiene y solicita cualquier nueva imagen que no tenga.
Sin embargo, hay algo que puede hacer para decirle a los navegadores qué caché y por cuánto tiempo, como se ve en esta guía .
Y luego está el almacenamiento en caché del servidor. El almacenamiento en caché de servidores básicamente solo toma su sitio y coloca una especie de "copia" entre sus usuarios y su servidor real. ¿Por qué te molestarías?
Bueno, es especialmente útil para las personas que usan sistemas de administración de contenido a gran escala. Hacer que los usuarios accedan a una copia temporal de su sitio en lugar de a la realidad reduce la cantidad de llamadas a su base de datos. La información se muestra y carga más rápido porque no tiene que volver a procesarse cada vez.
Dependiendo de cómo esté configurado, el almacenamiento en caché del servidor también puede reducir los costos de ancho de banda en general. Básicamente, cuanto más grande sea tu sitio, más razón tienes para buscarlo en el caché.
Y ahora, la sección que todos han estado esperando: ¡la lista de enlaces! En general, tenemos tutoriales y guías, y un par de herramientas de compresión de imágenes para recomendar.
Yahoo! puede que no sea tan importante como lo fue antes, pero su red de desarrolladores tiene muchas cosas buenas. Esto incluye su Las mejores prácticas para acelerar su sitio web , que cubre algunas de las cosas básicas que puedes hacer. Algunos cubren el mismo terreno que este artículo, pero hay más.
En la introducción, mencioné la velocidad percibida del sitio, también conocida como performance percibida. Si quieres leer más sobre eso, echa un vistazo Una guía para principiantes sobre el rendimiento percibido: 4 maneras de hacer que su sitio móvil se sienta como una aplicación nativa .
Effeckt.css es un conjunto de animaciones basadas en CSS que están diseñadas para renderizar rápidamente, sin importar en qué plataforma esté el usuario.
Esta es una guía para asegurarse de que su CSS se descargue y procese lo más rápido posible por el navegador.
Cuando recién comienzas, aprendiendo a codificar correctamente puede ser un impulso de velocidad tan grande como cualquier consejo aleatorio de trucos que pueda aprender. El código incorrecto cuesta más en términos de tiempo de procesamiento, así que aprenda a hacer las cosas de la manera correcta.
Aquí está un guía básica que se enfoca más específicamente en escribir JavaScript que se ejecuta rápidamente.
Asi como dice el titulo, esta es todo un consejo dirigido específicamente a JavaScript V8.
Y a veces, probablemente termines usando jQuery. Si vas a hacer eso, al menos deberías saber cómo escribir los selectores jQuery que no te ralentizarán. Y aquí es donde Sitepoint lo tiene cubierto .
Lee esto para obtener más información sobre los formatos de imagen en la web. La información es un poco antigua, pero aún válida, y es bueno saberlo.
Esta es una guía más técnica para la optimización de imágenes proporcionada por Google Developer Network.
Compressor.io es una de las herramientas más impresionantes que he encontrado personalmente. Es una aplicación en línea, por lo que tendrá que cargar los archivos que desee comprimir, pero puede hacer maravillas para los JPG. Ofrece opciones de compresión tanto sin pérdidas como sin pérdidas, cada una con resultados bastante sorprendentes, y también puede procesar por lotes.
Trimage se especializa en la compresión sin pérdida, pero puede instalarse en su propia computadora, en Windows, Mac o Linux. Dado que se instala en su computadora (y sí, viene con varias opciones de línea de comando y una GUI), puede ejecutarse fácilmente como parte de un flujo de trabajo de desarrollo.
Como siempre, hay mucho más por aprender. Pero armados con la información que hemos proporcionado y los recursos a los que nos hemos vinculado, estarás encaminado a crear sitios y aplicaciones que no molesten a tus usuarios.
Y ese es el primer paso para impresionarlos.