La otra noche, estaba haciendo swipe en una popular aplicación social, mis dedos se deslizaban con gran vigor, cuando de repente unas cuantas imágenes consecutivas en HD se quedaron atascadas allí girando en círculos durante cinco o seis segundos - literalmente, casi tiré mi teléfono en ese momento. Puede que te hayas encontrado con este tipo de males, ¿verdad? Las imágenes que se cargan lentamente pueden ser fatales para las plataformas de medios sociales, y los usuarios no tienen paciencia para esperar a que se carguen en el búfer. Sobre todo ahora que las aplicaciones sociales no se pueden mover a encontrarse con ataques DDoS o rastreadores maliciosos, sin el uso de CDN de alta defensa simplemente no puede superar, pero la protección añadida, la velocidad es a menudo arrastrado hacia abajo de nuevo. Esto no es, varios amigos corrieron a preguntarme: “con un CDN de alta defensa, pero la imagen es aún más lento, se puede tener en cuenta la seguridad y la experiencia?”
El problema está aquí: muchas personas piensan que un conjunto de CDN de alta defensa está bien, de hecho, la configuración por defecto puede no ser adecuado para los escenarios de imagen en absoluto. CDN de alta defensa con el fin de resistir los ataques, por lo general aumentar los enlaces de autenticación o nodos de enrutamiento, mal manejado se ralentizará la solicitud de imagen. He probado tres servicios principales: CDN5, CDN07 y 08Host, y he descubierto que, con la configuración predeterminada, el tiempo de carga de la primera imagen puede ser superior a 200 ms que sin CDN. Hoy en día, incluso las CDN tienen que “evitar a los compañeros de equipo”.
No espere que los proveedores de CDN optimicen por usted, sus soluciones genéricas pueden no ajustarse a su negocio. La causa principal de la lentitud en la carga de imágenes suele ser tres: el tamaño de la imagen es demasiado grande, el orden de solicitud es poco razonable y la estrategia de almacenamiento en caché de la CDN es inútil. Especialmente en las plataformas sociales, los usuarios suben imágenes de distintas resoluciones, una imagen PNG sin comprimir supera fácilmente los 10 MB, lo que ejerce una presión directa sobre el enlace de transmisión de la CDN de alta defensa. Otro escollo es que muchos desarrolladores para ahorrar tiempo, sincronizan directamente la carga de todas las imágenes, la página se abre para lanzar decenas de peticiones, el límite de concurrencia de la CDN se ha convertido en un cuello de botella.
Mi pensamiento es: “compresión + lazy loading” combinación perforar el cuello de botella de velocidad, y luego ajustar la configuración para las características de CDN de alta defensa. En primer lugar, vamos a hablar de compresión - no creo que lo que “la compresión sin pérdida es suficiente”, las imágenes sociales no es necesario mantener la imagen original. Yo suelo utilizar el formato WebP + compresión con pérdida, medida que la reducción de volumen PNG de 70% o más, y el ojo desnudo apenas puede ver la diferencia. Aquí está mi habitual script de compresión ImageMagick para poner en el proceso de carga para automatizar el proceso:
Tenga en cuenta que el parámetro -quality no debe ser inferior a 80, de lo contrario el ruido será demasiado evidente. Escalar el límite de aspecto (1920×1080) evita que los usuarios arrastren el CDN pasando imágenes 4K, y el sufijo > significa escalar proporcionalmente. Por cierto, asegúrate de añadir -strip para eliminar la información Exif, lo que puede ahorrar muchos datos redundantes. Después del procesamiento, una imagen original de 3MB puede ser comprimida a unos 300KB, cuando se utiliza la transmisión CDN5 o 08Host, la tasa de aciertos de la caché mejora significativamente, porque la sincronización entre nodos es más rápida para archivos pequeños.
No basta con comprimir, hay que hacer que la CDN almacene las imágenes en caché de forma eficiente. Las CDN de alta defensa, como CDN07, suelen disponer de mecanismos de caché multicapa, pero pueden ignorar las variantes de imagen por defecto. Se recomienda forzar las cabeceras de caché, como devolver Cache-Control: public, max-age=2592000 (30 días) para las imágenes WebP. No utilice cadenas de consulta para distinguir las versiones de las imágenes (como image.jpg?v=2), que invalidarán la caché de la CDN; en su lugar, utilice hashes de nombres de archivo (como image-abc123.webp), para que el nodo de la CDN pueda almacenarse directamente en la caché y evitar conflictos.El backend de 08Host admite la coincidencia regular de la ruta de la estrategia de almacenamiento en caché de imágenes, que es más flexible que la configuración global de CDN5.
El siguiente paso es la carga retardada (lazy loading), que funciona especialmente bien para los flujos de noticias sociales. El principio es sencillo: dar prioridad a la carga de imágenes en la zona visible y cargar el resto cuando el usuario se desplace. Al reducir el número de solicitudes en la primera pantalla, se reduce naturalmente la presión sobre la CDN de alta definición; al fin y al cabo, los retos de validación o las comprobaciones de ruta sólo se activan en las imágenes necesarias. Hoy en día los navegadores soportan de forma nativa loading=”lazy”, pero por compatibilidad con versiones anteriores, yo mismo solía implementarlo utilizando la Intersection Observer API:
Nota para agregar data-src a la etiqueta img para almacenar la URL real, src poner imagen de marcador de posición (1×1 píxeles de imagen transparente). Medido en el entorno CDN07, el número de solicitudes de imagen de la página de inicio de 40 + abajo a 6-8, el tiempo de carga de la primera pantalla más rápido en 1,3 segundos. Sin embargo, no ser perezoso para cargar demasiado, la primera pantalla de imágenes clave todavía debe ser precargado, de lo contrario el usuario entra a ver un gran espacio en blanco más difícil.
También hay algunas técnicas de optimización en la propia CDN de alta seguridad. Por ejemplo, habilitar el protocolo HTTP/2 puede multiplexar las solicitudes, para evitar el número de conexiones TCP están llenos de solicitudes de imagen.08Host por defecto en HTTP/2, pero CDN5 tienen que abrir manualmente en la consola. Además, ajustar la configuración de compresión del nodo CDN - gzip es común, pero el efecto sobre la imagen es pobre, se recomienda abrir la compresión Brotli (CDN07 apoyar la mejor), la tasa de compresión de recursos de texto se puede elevar de nuevo 20%. También hay un pequeño escollo: las reglas WAF de la CDN de alta defensa puede ser erróneamente las solicitudes de imagen, tales como Mal juicio User-Agent o Referer, recuerde agregar la ruta de la imagen estática a la lista blanca, o inexplicablemente retorno 403 será divertido.
Por último, no te olvides de la supervisión y las pruebas A/B. Después de conectar la CDN, ejecute puntuaciones periódicas con WebPageTest o GTmetrix, centrándose en LCP (máximo dibujado del contenido) y CLS (desplazamiento del diseño). Me he encontrado con un repentino pico de latencia en uno de los nodos de CDN5, lo que provocaba que la carga perezosa de las imágenes se activara demasiado tarde, y las imágenes sólo llegaban tarde cuando los usuarios se desplazaban frenéticamente. El problema se resolvió dividiendo el nombre de dominio (img1.ejemplo.com, img2.ejemplo.com) para repartir la presión de los nodos CDN.
Para ser sinceros, no existe una solución única para la optimización, hay que ajustarla continuamente. La carga de imágenes sociales es un proyecto sistemático: compresión para reducir el volumen, lazy loading para reducir la concurrencia, configuración de la CDN para mejorar la eficacia de la caché... las tres cosas son indispensables. Recientemente probado 08Host función de compresión inteligente, de acuerdo con el estado de la red puede ajustar dinámicamente la calidad de la imagen (4G calidad de degradación de la red 80%, Wi-Fi para restaurar la calidad original), que es particularmente amigable para la escena social móvil. Por supuesto, si utiliza CDN07, puede combinar su API de optimización de imágenes para procesar el tamaño y el formato en tiempo real, ahorrándose la molestia de implementar servicios de compresión.
En resumen, no tome la alta defensa CDN como una caja negra, es a la vez un escudo y una lanza cuando se ajusta correctamente. ¡Ahora el usuario roza el mapa rápido, el ataque también se evita, el equipo que los chicos finalmente no tienen que levantarse en medio de la noche para hacer frente al colapso - esta experiencia, valor!
