La otra noche, estaba haciendo swipe en una popular aplicaci\u00f3n social, mis dedos se deslizaban con gran vigor, cuando de repente unas cuantas im\u00e1genes consecutivas en HD se quedaron atascadas all\u00ed girando en c\u00edrculos durante cinco o seis segundos - literalmente, casi tir\u00e9 mi tel\u00e9fono en ese momento. Puede que te hayas encontrado con este tipo de males, \u00bfverdad? Las im\u00e1genes 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\u00fafer. 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\u00f3n a\u00f1adida, la velocidad es a menudo arrastrado hacia abajo de nuevo. Esto no es, varios amigos corrieron a preguntarme: \u201ccon un CDN de alta defensa, pero la imagen es a\u00fan m\u00e1s lento, se puede tener en cuenta la seguridad y la experiencia?\u201d<\/p>\n
El problema est\u00e1 aqu\u00ed: muchas personas piensan que un conjunto de CDN de alta defensa est\u00e1 bien, de hecho, la configuraci\u00f3n 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\u00f3n o nodos de enrutamiento, mal manejado se ralentizar\u00e1 la solicitud de imagen. He probado tres servicios principales: CDN5, CDN07 y 08Host, y he descubierto que, con la configuraci\u00f3n predeterminada, el tiempo de carga de la primera imagen puede ser superior a 200 ms que sin CDN. Hoy en d\u00eda, incluso las CDN tienen que \u201cevitar a los compa\u00f1eros de equipo\u201d.<\/p>\n
No espere que los proveedores de CDN optimicen por usted, sus soluciones gen\u00e9ricas pueden no ajustarse a su negocio. La causa principal de la lentitud en la carga de im\u00e1genes suele ser tres: el tama\u00f1o de la imagen es demasiado grande, el orden de solicitud es poco razonable y la estrategia de almacenamiento en cach\u00e9 de la CDN es in\u00fatil. Especialmente en las plataformas sociales, los usuarios suben im\u00e1genes de distintas resoluciones, una imagen PNG sin comprimir supera f\u00e1cilmente los 10 MB, lo que ejerce una presi\u00f3n directa sobre el enlace de transmisi\u00f3n de la CDN de alta defensa. Otro escollo es que muchos desarrolladores para ahorrar tiempo, sincronizan directamente la carga de todas las im\u00e1genes, la p\u00e1gina se abre para lanzar decenas de peticiones, el l\u00edmite de concurrencia de la CDN se ha convertido en un cuello de botella.<\/p>\n
Mi pensamiento es: \u201ccompresi\u00f3n + lazy loading\u201d combinaci\u00f3n perforar el cuello de botella de velocidad, y luego ajustar la configuraci\u00f3n para las caracter\u00edsticas de CDN de alta defensa. En primer lugar, vamos a hablar de compresi\u00f3n - no creo que lo que \u201cla compresi\u00f3n sin p\u00e9rdida es suficiente\u201d, las im\u00e1genes sociales no es necesario mantener la imagen original. Yo suelo utilizar el formato WebP + compresi\u00f3n con p\u00e9rdida, medida que la reducci\u00f3n de volumen PNG de 70% o m\u00e1s, y el ojo desnudo apenas puede ver la diferencia. Aqu\u00ed est\u00e1 mi habitual script de compresi\u00f3n ImageMagick para poner en el proceso de carga para automatizar el proceso:<\/p>\n
Tenga en cuenta que el par\u00e1metro -quality no debe ser inferior a 80, de lo contrario el ruido ser\u00e1 demasiado evidente. Escalar el l\u00edmite de aspecto (1920\u00d71080) evita que los usuarios arrastren el CDN pasando im\u00e1genes 4K, y el sufijo > significa escalar proporcionalmente. Por cierto, aseg\u00farate de a\u00f1adir -strip para eliminar la informaci\u00f3n Exif, lo que puede ahorrar muchos datos redundantes. Despu\u00e9s del procesamiento, una imagen original de 3MB puede ser comprimida a unos 300KB, cuando se utiliza la transmisi\u00f3n CDN5 o 08Host, la tasa de aciertos de la cach\u00e9 mejora significativamente, porque la sincronizaci\u00f3n entre nodos es m\u00e1s r\u00e1pida para archivos peque\u00f1os.<\/p>\n
No basta con comprimir, hay que hacer que la CDN almacene las im\u00e1genes en cach\u00e9 de forma eficiente. Las CDN de alta defensa, como CDN07, suelen disponer de mecanismos de cach\u00e9 multicapa, pero pueden ignorar las variantes de imagen por defecto. Se recomienda forzar las cabeceras de cach\u00e9, como devolver Cache-Control: public, max-age=2592000 (30 d\u00edas) para las im\u00e1genes WebP. No utilice cadenas de consulta para distinguir las versiones de las im\u00e1genes (como image.jpg?v=2), que invalidar\u00e1n la cach\u00e9 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\u00e9 y evitar conflictos.El backend de 08Host admite la coincidencia regular de la ruta de la estrategia de almacenamiento en cach\u00e9 de im\u00e1genes, que es m\u00e1s flexible que la configuraci\u00f3n global de CDN5.<\/p>\n
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\u00e1genes dentro del \u00e1rea visible y cargar el resto cuando el usuario se desplace. Al reducir el n\u00famero de solicitudes en la primera pantalla, se reduce naturalmente la presi\u00f3n sobre la CDN de alta definici\u00f3n; al fin y al cabo, los retos de validaci\u00f3n o las comprobaciones de ruta s\u00f3lo se activan en las im\u00e1genes necesarias. Hoy en d\u00eda los navegadores soportan de forma nativa loading=\u201dlazy\u201d, pero por compatibilidad con versiones anteriores, yo mismo sol\u00eda implementarlo utilizando la Intersection Observer API:<\/p>\n
Nota para agregar data-src a la etiqueta img para almacenar la URL real, src poner imagen de marcador de posici\u00f3n (1\u00d71 p\u00edxeles de imagen transparente). Medido en el entorno CDN07, el n\u00famero de solicitudes de imagen de la p\u00e1gina de inicio de 40 + abajo a 6-8, el tiempo de carga de la primera pantalla m\u00e1s r\u00e1pido en 1,3 segundos. Sin embargo, no ser perezoso para cargar demasiado, la primera pantalla de im\u00e1genes clave todav\u00eda debe ser precargado, de lo contrario el usuario entra a ver un gran espacio en blanco m\u00e1s dif\u00edcil.<\/p>\n
Tambi\u00e9n hay algunas t\u00e9cnicas de optimizaci\u00f3n en la propia CDN de alta seguridad. Por ejemplo, habilitar el protocolo HTTP\/2 puede multiplexar las solicitudes, para evitar el n\u00famero de conexiones TCP est\u00e1n llenos de solicitudes de imagen.08Host por defecto en HTTP\/2, pero CDN5 tienen que abrir manualmente en la consola. Adem\u00e1s, ajustar la configuraci\u00f3n de compresi\u00f3n del nodo CDN - gzip es com\u00fan, pero el efecto sobre la imagen es pobre, se recomienda abrir la compresi\u00f3n Brotli (CDN07 apoyar la mejor), la tasa de compresi\u00f3n de recursos de texto se puede elevar de nuevo 20%. Tambi\u00e9n hay un peque\u00f1o escollo: las reglas WAF de la CDN de alta defensa puede ser err\u00f3neamente las solicitudes de imagen, tales como Mal juicio User-Agent o Referer, recuerde agregar la ruta de la imagen est\u00e1tica a la lista blanca, o inexplicablemente retorno 403 ser\u00e1 divertido.<\/p>\n
Por \u00faltimo, no te olvides de la supervisi\u00f3n y las pruebas A\/B. Despu\u00e9s de conectar la CDN, ejecute puntuaciones peri\u00f3dicas con WebPageTest o GTmetrix, centr\u00e1ndose en LCP (m\u00e1ximo dibujado del contenido) y CLS (desplazamiento del dise\u00f1o). 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\u00e1genes se activara demasiado tarde, y las im\u00e1genes s\u00f3lo llegaban tarde cuando los usuarios se desplazaban fren\u00e9ticamente. El problema se resolvi\u00f3 dividiendo el nombre de dominio (img1.ejemplo.com, img2.ejemplo.com) para repartir la presi\u00f3n de los nodos CDN.<\/p>\n
Para ser sinceros, no existe una soluci\u00f3n \u00fanica para la optimizaci\u00f3n, hay que ajustarla continuamente. La carga de im\u00e1genes sociales es un proyecto sistem\u00e1tico: compresi\u00f3n para reducir el volumen, lazy loading para reducir la concurrencia, configuraci\u00f3n de la CDN para mejorar la eficacia de la cach\u00e9... las tres cosas son indispensables. Recientemente probado 08Host funci\u00f3n de compresi\u00f3n inteligente, de acuerdo con el estado de la red puede ajustar din\u00e1micamente la calidad de la imagen (4G calidad de degradaci\u00f3n de la red 80%, Wi-Fi para restaurar la calidad original), que es particularmente amigable para la escena social m\u00f3vil. Por supuesto, si utiliza CDN07, puede combinar su API de optimizaci\u00f3n de im\u00e1genes para procesar el tama\u00f1o y el formato en tiempo real, ahorr\u00e1ndose la molestia de implementar servicios de compresi\u00f3n.<\/p>\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. \u00a1Ahora el usuario roza el mapa r\u00e1pido, el ataque tambi\u00e9n 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!<\/p>","protected":false},"excerpt":{"rendered":"
La otra noche, estaba haciendo swipe en una popular aplicaci\u00f3n social, mis dedos se deslizaban con gran vigor, cuando de repente unas cuantas im\u00e1genes consecutivas en HD se quedaron atascadas all\u00ed girando en c\u00edrculos durante cinco o seis segundos - literalmente, casi tir\u00e9 mi tel\u00e9fono en ese momento. Puede que te hayas encontrado con este tipo de males, \u00bfverdad? Las im\u00e1genes 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\u00fafer. 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\u00f3n a\u00f1adida, la velocidad es a menudo arrastrado hacia abajo de nuevo. Esto no es, varios amigos vinieron a m\u00ed y me pregunt\u00f3: \u201ccon el uso de CDN de alta defensa, pero la imagen es a\u00fan m\u00e1s lento, no se puede tener en cuenta la seguridad y la experiencia?\u201d El problema est\u00e1 aqu\u00ed: muchas personas piensan que un conjunto de CDN de alta defensa estar\u00e1 bien, de hecho, la configuraci\u00f3n por defecto puede no ser adecuado para la escena de la imagen en absoluto. Alta defensa<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"gallery","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[150],"tags":[],"collection":[],"class_list":["post-1034","post","type-post","status-publish","format-gallery","hentry","category-updates","post_format-post-format-gallery"],"_links":{"self":[{"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/posts\/1034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/comments?post=1034"}],"version-history":[{"count":1,"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/posts\/1034\/revisions"}],"predecessor-version":[{"id":1091,"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/posts\/1034\/revisions\/1091"}],"wp:attachment":[{"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/media?parent=1034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/categories?post=1034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/tags?post=1034"},{"taxonomy":"collection","embeddable":true,"href":"https:\/\/www.ddosgj.com\/es\/wp-json\/wp\/v2\/collection?post=1034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}