El acelerador de sitios de Jetpack pone a tu disposición nuestra red de distribución de contenido (CDN), optimizada para que los archivos estáticos e imágenes se sirvan de manera más rápida y eficiente.
El tiempo es que una web tarda en servir imágenes y otros archivos es uno de los factores que más impactan la velocidad del sitio. Así es como una red de publicación de contenido (o CDN) ayuda a acelerar tu sitio:
- Sirve tu contenido desde centros de datos de alta velocidad y dedicados.
- Permite que más archivos sean descargados simultáneamente por el navegador.
- Distribuye las peticiones en centros de datos situados en diferentes ubicaciones geográficas para mejorar las velocidades de descarga y proporcionar redundancia.
Usando el acelerador de sitios de WordPress.com puedes distribuir la carga del servidor de manera más eficiente y ahorrar ancho de banda.
En esta guía
¿Tienes alguna pregunta?
Pregunta a nuestro AI AssistantA continuación puedes ver más detalles sobre las diferentes técnicas que nuestro acelerador de sitios utiliza para mejorar el rendimiento de tu sitio.
El CDN de Imágenes es un servicio de aceleración y edición de imágenes. Al duplicar tus fotos y almacenarlas en nuestros servidores, se reduce la carga en el servidor principal de web y se reducen el tiempo de espera.
¿Cómo gestiona las imágenes el acelerador de sitios?.
- Filtra los contenidos para servir las imágenes desde otro servidor pero no cambia nada en tu base de datos.
- Actúa sobre imágenes en publicaciones y páginas, así como en imágenes destacadas/miniaturas de publicaciones a través del filtro image_downsize. Ejemplos de funciones de WordPress que utilizan el filtro image_downsize incluyen:
- Todas las imágenes se comprimen al vuelo utilizando una combinación de pngquant y OptiPNG o jpegoptim. La compresión sin pérdida está configurada a calidad de 100 por defecto.
- Estas mejoras se aplican a publicaciones antiguas y nuevas. Además, se puede activar o desactivar fácilmente y los cambios se aplican en unos pocos minutos.
- Sirve datos de imágenes WebP a navegadores que soportan el formato de imagen WebP (ten en cuenta que la extensión del archivo original no cambiará).
Además de imágenes, nuestro CDN también aloja y sirve archivos estáticos desde nuestros servidoresCDN). Algunos ejemplos son el JavaScript y CSS que se envían con el núcleo de WordPress, Jetpack y WooCommerce. Al no tener que lidiar con estos archivos estáticos, se agiliza aún más la carga en tu servidor.
¿Cómo consigue esto el acelerador de sitios?
- Filtra las URL de los archivos estáticos que se cargan con cada página de WordPress.
- Este filtrado se aplica sólo a los archivos estáticos del núcleo de WordPress, Jetpack y WooCommerce.
El acelerador de sitios redimensiona fotos comprobando los atributos de ancho y alto del elemento img y sirviendo una imagen escalada a esas dimensiones. Si detecta que el ancho de la pantalla es más pequeño que la imagen pedida, reduce aún más el ancho de la imagen para que coincida con el del viewport.
Si no hay un tamaño preestablecido, Jetpack restringirá las imágenes al tamaño indicado al subir la imagen a una entrada o a la configuración de «ancho del contenido» de tu tema.
Finalmente, si no se establece un ancho de contenido en tu tema, el acelerador de sitio se ajustará por defecto a 1000px. Esto es para asegurar que los sitios no intenten servir imágenes más grandes de lo que necesita el tema que estás usando.
Eliminamos los parámetros de ancho y alto para evitar que tus imágenes se deformen cuando la imagen redimensionada no tiene las mismas dimensiones que la original. Esto es esencial cuando cambias de un tema a otro y el nuevo tema es más estrecho que el anterior. Uno de los beneficios de esto es que redimensionaremos automáticamente tus imágenes para que no excedan el ancho soportado por tu tema.
El acelerador de sitios de WordPress.com es:
- Código abierto: disponible a través de SVN en
http://code.svn.wordpress.org/photon/y en Trac en http://code.trac.wordpress.org/browser/photon - Usa múltiples dominios: Para aprovechar los descargas paralelas soportamos múltiples subdominios para Site Accelerator. Si tiendes a tener muchas imágenes por página, puedes dividirlas entre i0.wp.com, i1.wp.com, e i2.wp.com. Para aprovechar la caché, puede ser útil usar el mismo subdominio para archivos en llamadas posteriores.
- Funciona con SSL: Puedes usar Site Accelerator en páginas SSL sin advertencias de contenido mixto. Solo usa
https://i{0,1,2}.wp.comen lugar dehttp://i{0,1,2}.wp.com
Puedes ir a Ajustes → Rendimiento y activar los siguientes ajustes:
- Acelerar los tiempos de carga de imágenes: Alojamos tus imágenes desde nuestros servidores. Esto proporciona una carga de imágenes más rápida para tus lectores.
- Acelerar los tiempos de carga de archivos estáticos: Alojamos archivos estáticos como JavaScript y CSS desde nuestros servidores para aliviar la carga en tu sitio.
El acelerador de sitios solo puede funciona con imágenes disponibles públicamente. Si tu sitio está configurado como privado, tus imágenes (incluyendo en la biblioteca de medios) devolverán un mensaje de 403 Forbidden si la opción «Acelerar los tiempos de carga de imágenes» está activada.
Para comprobar si las imágenes se están cargando desde la CDN, puedes seguir estos pasos:
- Espera unos momentos y luego carga tu sitio en un navegador web diferente para evitar problemas de caché.
- Verifica la URL de una imagen en el inspector de tu navegador o abre la imagen en su propia pestaña. Las imágenes servidas desde nuestra CDN tienen URLs que comienzan con
https://i0.wp.com,https://i1.wp.com,https://i2.wp.como similar. - Si no ves i0.wp.com o similar, consulta nuestros pasos de solución de problemas a continuación.
Si has habilitado el acelerador de sitios y ves que hay imágenes rotas en tu web, sigue estos pasos:
- Espera unos momentos y luego carga tu sitio en un navegador web completamente diferente al que normalmente usas para asegurarte de que no sea la caché de tu navegador la que interfiere con el cambio de URL. Puede tardar unos minutos en reflejarse estos cambios en todo tu sitio.
- Verifica que tu conexión de Jetpack esté funcionando correctamente.
- Intenta desactivar todos tus plugins excepto Jetpack antes de verificar tus imágenes nuevamente. Si se muestran correctamente, sabrás que otro plugin está interfiriendo con la aceleración del sitio. Puedes averiguar qué plugin es responsable habilitando cada plugin uno por uno y verificando las imágenes rotas después de cada uno.
- Si el acelerador de sitios aún no está funcionando después de probar tus plugins, puede haber un conflicto con el tema actual. Para probar esto, cambia a uno de los temas por defecto como Twenty-Twenty Four. Si esto resuelve el problema, se puede identificar que el problema está relacionado con el tema, y te recomendaríamos contactar al autor del tema para obtener más ayuda.
- El acelerador de sitios no realiza invalidaciones de caché. Los activos estáticos están vinculados a la versión pública de WordPress, Jetpack o WooCommerce que estás utilizando. Para las imágenes, si deseas «refrescar» una imagen, necesitarás cambiar su nombre de archivo. Agregar argumentos de consulta aleatorios, comúnmente conocidos como «cache busters», no funcionará.
- Los activos de temas y plugins no son soportados por Site Accelerator en este momento.
- No es posible purgar automáticamente todas las imágenes del sitio desde Jetpack. Si hay una imagen o foto que ya no está en tu servidor y deseas eliminar, por favor contacta al soporte con un enlace directo al archivo tal como aparece en tu sitio. Estos comenzarán con
i0.wp.com,i1.wp.com,i2.wp.com, oi3.wp.com. Dado que las imágenes solo pueden ser purgadas manualmente por URLs individuales, hay un límite en la cantidad que podemos eliminar. - Site Accelerator solo maneja imágenes
.gif,.png,.jpg, y.webpde servidores que escuchan enpuerto 80para HTTP ypuerto 443para HTTPS. Esto se aplica a aproximadamente el 99.99% de los servidores web en el mundo. Si tienes problemas, intenta usar el filtro jetpack_photon_reject_https. - No escalaremos una imagen para mostrarla más grande que la original. Si tu imagen original tiene 1000px de ancho y pides a Jetpack que la haga de 5000px, serviremos la imagen original de 1000px. Las imágenes escaladas de esta manera raramente ganan en calidad, sólo tardan más en descargarse.
- El acelerador web no aplica filtros complejos imágenes grandes (
colorize,brightness,ulb,contrast,smooth, etc.). - Si tu servidor tarda más de 10 segundos en recuperar una imagen para nuestra CDN, el proceso se agotará, y tu imagen parecerá estar rota. Intenta subir una imagen con un nombre diferente y con dimensiones o tamaño de archivo más pequeños si esto sucede.
- No es posible elegir o limitar desde dónde en el mundo se servirán tus imágenes. Tenemos servidores ubicados en todo el mundo, y el servidor que finalmente carga tu imagen depende de una variedad de factores, incluida la ubicación del visitante.
- El acelerador de sitios no soporta PNGs animados.
- El acelerador de sitios no sirve archivos de audio (
.mp3,.wav,.flac, etc.) o video (.mp4,.wmv,.flv, etc.). Si deseas alojar videos en nuestra CDN, consulta la función de Alojamiento de Videos de Jetpack.
Las imágenes pueden ser recortadas, redimensionadas y filtradas utilizando una API controlada por los siguientes argumentos de consulta GET:
| Recurso | Descripción |
|---|---|
| GET?w= | Establece el ancho de una imagen en píxeles:http://i0.wp.com/s.ma.tt/files/2012/06/DSC01205.jpg?w=300  |
| GET?h= | Establece el height de una imagen en píxeles:http://i0.wp.com/s.ma.tt/files/2012/06/MCM_0629-1600x1064.jpg?h=200  |
| GET?crop=x,y,w,h | Recorta una imagen por porcentajes x-offset,y-offset,width,height (x,y,w,h). Se utilizan porcentajes para que no necesites recalcular el recorte al transformar la imagen de otras maneras, como redimensionándola. Por ejemplo: Imagen original: 4-MCM_0830-1600×1064.jpgcrop=12,25,60,60 toma un rectángulo del 60% por 60% de la imagen fuente comenzando en un offset del 12% desde la izquierda y 25% desde la parte superior. http://i0.wp.com/s.ma.tt/files/2012/06/4-MCM_0830-1600x1064.jpg?crop=12,25,60,60  crop=160px,160px,788px,788px toma un cuadrado de 788 por 788 comenzando en 160 por 160. http://i0.wp.com/s.ma.tt/files/2012/06/4-MCM_0830-1600x1064.jpg?crop=160px,160px,788px,788px  crop=160px,25,1400px,60 te muestra que también puedes mezclar los tipos de parámetros, por ejemplo un rectángulo de 1400 píxeles por 60% de la imagen comenzando en 160 píxeles por 25%. http://i0.wp.com/s.ma.tt/files/2012/06/4-MCM_0830-1600x1064.jpg?crop=160px,25,1400px,60  |
| GET?resize= | Redimensiona y recorta una imagen a las dimensiones exactas de width,height en píxeles. Establece el primer número lo más cerca posible del tamaño objetivo y luego recorta el resto. La dirección en la que se redimensiona y recorta depende de las proporciones de aspecto de la imagen original y el tamaño objetivo.http://i0.wp.com/s.ma.tt/files/2012/06/9-DSC01406-1600x1066.jpg?resize=400,220  http://i0.wp.com/s.ma.tt/files/2010/11/MCM_4443.jpg?resize=200,400  Esto es útil para tomar una imagen de cualquier tamaño y hacer que se ajuste a una cierta ubicación mientras se pierde lo menos posible de la imagen. |
| GET?fit= | Ajusta una imagen a una caja contenedora de dimensiones de width,height. Se mantiene la relación de aspecto de la imagen.http://i0.wp.com/s.ma.tt/files/2010/10/MCM_4049.jpg?fit=300,300  http://i0.wp.com/s.ma.tt/files/2010/10/MCM_4214.jpg?fit=300,300  Por ejemplo, |
| GET?lb= | Agrega un efecto de letterboxing negro a las imágenes, escalándolas a width, height mientras se mantiene la relación de aspecto y se llena el resto con negro.
http://i0.wp.com/developer.files.wordpress.com/2013/03/letterboxing-example.jpg?lb=310,250 Imagen original  ?lb=310,250  |
| GET?ulb= | Elimina el efecto de letterboxing negro de las imágenes con ulb. Esta función toma solo un argumento, true.
http://i0.wp.com/developer.files.wordpress.com/2012/11/black-letterboxing-example.jpg?ulb=true Imagen original  ?ulb=true  |
| GET?filter= | El filter parámetro GET es opcional y se utiliza para aplicar uno de múltiples filtros. Los valores válidos son: negate, grayscale, sepia, edgedetect, emboss, blurgaussian, blurselective, meanremoval.
Imagen original  filter=negate  filter=grayscale  filter=sepia  filter=edgedetect  filter=emboss  filter=blurgaussian  filter=blurselective  filter=meanremoval  |
| GET?brightness= | Ajusta el brillo de una imagen. Los valores válidos son -255 a 255 donde -255 es negro y 255 es blanco. Más alto es más brillante. El valor por defecto es cero.brightness=-40 oscurecerá una imagen en 40 y brightness=80iluminará una imagen en 80.
http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9517-1600x1065.jpg?brightness=-40 http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9517-1600x1065.jpg?brightness=0 http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9517-1600x1065.jpg?brightness=80 brightness=-40  brightness=0  brightness=80  |
| GET?contrast= | Ajusta el contraste de una imagen. Los valores válidos son -100 a 100. El valor por defecto es cero.contrast=-50 disminuirá el contraste en 50 y contrast=50 aumentará el contraste en 50.
http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9517-1600x1065.jpg?contrast=-50 http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9517-1600x1065.jpg?contrast=0 http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9517-1600x1065.jpg?contrast=50 contrast=-50  contrast=0  contrast=50  |
| GET?colorize= | Agrega matices de color a una imagen con colorize pasando una lista separada por comas de valores rojo, verde, azul (RGB) como 255,0,0 (rojo), 0,255,0 (verde), 0,0,255 (azul). http://i0.wp.com/s.ma.tt/files/2024/02/IMG_3775.jpeg?colorize=100,0,0 colorize=100,0,0  colorize=0,100,0  colorize=0,0,100  |
| GET?smooth= | El smooth parámetro puede ser utilizado para suavizar la imagen.
http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9230-1600x1064.jpg?smooth=1 Imagen original  smooth=1  Desde el área de comentarios del manual de PHP sobre la función: “Aplica una matriz de convolución de 9 celdas donde el píxel central tiene el peso arg1 y los demás un peso de 1.0. El resultado se normaliza dividiendo la suma con arg1 + 8.0 (suma de la matriz). Se acepta cualquier número decimal, un valor grande (en la práctica: 2048 o más) = sin cambio”. En pocas palabras, 0 parece ser el suavizado máximo con números más altos siendo menos suavizado. |
| GET?zoom= | Usa zoom para dimensionar imágenes para dispositivos y navegadores de alta relación de píxeles cuando se hace zoom. No disponible para usar con recorte. El zoom está destinado a ser utilizado por scripts como devicepx.js que establecen automáticamente el nivel de zoom. Los niveles de zoom válidos son 1, 1.5, 2-10.
http://i0.wp.com/s.ma.tt/files/2012/02/MCM_4246-1600x1064.jpg?w=310&zoom=2 Imagen original  zoom=2  |
| GET?quality= | Usa el parámetro calidad para gestionar la calidad de salida de imágenes JPEG y PNG. Los ajustes válidos están entre los valores de 20 a 100. Para JPEGs, un ajuste de 100 producirá la imagen con la calidad original sin alterar. Sin embargo, al especificar una calidad de 100 para PNGs, la imagen se comprime utilizando compresión sin pérdida y produce una imagen con calidad idéntica a la original. Ten en cuenta que si el navegador web que realiza la solicitud soporta el formato de imagen WebP, entonces las imágenes PNG y JPEG se convertirán automáticamente al formato de imagen WebP por el servidor. Al especificar 100 como la calidad en este caso, se producirá una imagen comprimida sin pérdida, que en algunos casos puede resultar en un archivo más grande que el original. Ten en cuenta que el ajuste de calidad por defecto para JPEGs es 89%, para PNGs 80%, y para imágenes WebP es 80%. http://i0.wp.com/ma.tt/files/2014/09/8084136238_169f1ca1f0_o.jpg?w=310&quality=50 Imagen original  quality=50  |
| GET?strip= | Usa la funcionalidad strip para eliminar los datos Exif, IPTC, comentarios y de color de la imagen JPEG de salida para reducir el tamaño del archivo de la imagen sin eliminar ningún dato visual de la imagen. Si los datos de orientación están incluidos en los metadatos Exif, la imagen se rotará en consecuencia. Hay 3 ajustes válidos para este parámetro:
http://i0.wp.com/ma.tt/files/2012/06/13-MCM_0885.jpg?w=310&strip=all Imagen original  strip=all  |
