Hemos estado trabajando con Jetpack por aquí como patrocinador. Es una gran combinación porque, como alguien con un montón de sitios de WordPress autohospedados, Jetpack es uno de esos complementos obvios para mí. Jetpack puede hacer un montón de cosas buenas para cualquier sitio en una variedad de formas muy diferentes. Aquí hay una forma de pensarlo: le brinda el poder de los servidores masivos de WordPress.
Por ahora, concentrémonos en un ángulo de lo que Jetpack puede hacer por usted: el rendimiento de la imagen. Jetpack hace mucho por ti en este sentido, resolviendo algunas mejoras de rendimiento no triviales. Echemos un vistazo a lo que veo como los cuatro grandes impulsos que obtienes de Jetpack en tus imágenes.
1) WordPress hace imágenes responsivas por ti
OK, hice trampa con el primero porque en realidad no necesitas Jetpack para beneficiarte de esto. Pero es un concepto importante y fundamental para imágenes rápidas. Con solo usar WordPress, obtiene imágenes receptivas básicas de forma gratuita.
Si ya sabe de lo que estoy hablando, aquí hay un ejemplo de la salida que verá en el DOM de una publicación de WordPress con una imagen cargada a través de Media Uploader:
Es maravilloso obtener esto de forma gratuita, ya que escribir la sintaxis de las imágenes receptivas a mano es bastante engorroso.
Si eres nuevo en la idea de las imágenes receptivas, la gran idea es esta: en lugar de que una sola imagen vaya a cualquier navegador que visite su sitio web, tiene varias imágenes en diferentes tamaños y se entrega la más correcta. Imagine que en lugar de que un teléfono móvil descargue una imagen de 1600 píxeles de ancho (mucho más grande de lo que necesita), solo descarga una imagen de 320 píxeles de ancho, ahorrando una tonelada de tiempo de descarga.
Hemos escrito mucho sobre imágenes receptivas a lo largo de los años.
2) Obtienes un CDN
Lea un poco sobre el rendimiento web y se le dirá unánimemente: “use un CDN”. Una CDN es una red de entrega de contenido, esencialmente servidores web diseñados específicamente para hacer que el servicio de activos como imágenes sea súper rápido. Lo llaman red porque no es solo un servidor, son muchos servidores ubicados físicamente en todo el mundo, de modo que cuando se solicita su sitio web desde diferentes ubicaciones en todo el mundo, los archivos que se envían provienen de ubicaciones geográficamente más cercanas (más rápido !). Sin mencionar que hace otras cosas inteligentes, como no requerir cookies para cada solicitud web, como probablemente lo haga su propio servidor.
Literalmente, activa un interruptor en Jetpack y estarás usando una imagen CDN:
Se llama Fotón.
La velocidad del sitio se ve afectada por muchos factores y uno de ellos es la entrega de contenido. El uso de lo que se conoce como una red de entrega de contenido (o CDN) ayuda a:
- Entregando su contenido desde centros de datos dedicados y de alta velocidad.
- El navegador puede descargar más archivos simultáneamente.
- Los centros de datos distribuidos (es decir, en diferentes ubicaciones geográficas) mejoran las velocidades de descarga y brindan redundancia.
- Al distribuir la carga y ahorrar ancho de banda, reduce sus costos de alojamiento existentes (o los mantiene bajo control).
3) Obtienes optimización
Una Kravets dice que la optimización de imágenes es una ganancia de rendimiento fácil para los diseñadores. Es algo fácil de ver. Intente tomar una captura de pantalla de algo, exportar algo de Photoshop o tomar alguna fotografía de archivo. Luego colóquelo en una herramienta como ImageOptim y observe cómo se reducen los bytes a medida que lo optimiza. Ahorros masivos.
Pero, ¿no sería bueno si no dependiera de usted optimizar manualmente todas sus imágenes antes de usarlas? Se supone que las computadoras nos ayudan con las tareas domésticas, ¿verdad? Cuando activa la función CDN de Jetpack, sus imágenes ahora están alojadas en Photon, y puede ver en los documentos de Photon cómo maneja cosas como el cambio de tamaño y la calidad por usted.
4) Obtienes carga perezosa
Lazy loading es la idea de que no carga nada a menos que lo necesite. En el caso de las imágenes, no descargue la imagen a menos que esté visible en la página. Por ejemplo, no descargue una imagen que esté tres cuartas partes por debajo de un artículo al que un usuario nunca se desplazará hacia abajo, pero si lo hace, descárguelo.
Ya sabes lo que dicen, la solicitud web más rápida es la que nunca se realiza. Jeremy Wagner, de Google, dice:
Cuando cargamos imágenes y videos de forma diferida, reducimos el tiempo de carga de la página inicial, el peso de la página inicial y el uso de recursos del sistema, todo lo cual tiene un impacto positivo en el rendimiento.
Esta es otra característica de flip-a-switch que funciona en cualquier tema. Enciéndelo, tienes carga diferida.
Todos juntos ahora
- Obtiene imágenes receptivas con WordPress, lo que por sí solo puede ser una gran ganancia de rendimiento.
- Con Jetpack, esas imágenes receptivas están alojadas en CDN, lo que proporciona un aumento de velocidad y un excelente almacenamiento en caché para las imágenes que se descargan.
- El hecho de que esté utilizando imágenes receptivas y un CDN no significa automáticamente que esas imágenes estén optimizadas, pero están en Photon.
- Por último, no se descarga nada a menos que las imágenes estén a la vista (carga diferida), que es lo más eficiente que puede hacer.
Bastante convincente.