homefinance blog
¿Se pregunta cómo optimizar la velocidad de la página y las imágenes de Google? En este artículo, descubrirá las mejores técnicas de optimización de imágenes que mejoran las advertencias de imágenes del elemento de velocidad de página (PSI).
Problemas de imagen: fuente: Google PageSpeed Insights Google es una fuente importante de ingresos para la mayoría de las empresas, por lo que es esencial posicionarse. La velocidad de la página es uno de los KPI más importantes en el algoritmo y verá cómo las técnicas de optimización de imágenes son una excelente manera de aumentar la velocidad de su sitio de WordPress.
Vamos a bucear. Por qué las imágenes son cruciales para mejorar la velocidad de la página según Google, la optimización de las imágenes de la página es importante para las clasificaciones y la experiencia del usuario. En realidad, tienes que preparar fotos para la web. ¿Sabía que un gran volumen de imágenes no optimizadas suele ser el culpable detrás de un sitio web lento? Así es como las imágenes influyen en la actuación:
La velocidad general de la página: las imágenes grandes pueden hacer que su sitio disminuya la velocidad y altere a sus visitantes que se espera que accedan a la información lo antes posible. Como se muestra en la figura a continuación, las imágenes son el recurso dominante en una página web:
El peso de la página dependiendo del tipo de contenido – Fuente: HTTP Almanah Archive es una excelente fuente de peso de la página y también representa el mayor número de solicitudes HTTP en la página:
Solicitudes de acuerdo con el tipo de fuente de contenido: HTTP Almanah Archive Cuando un visitante llega a su sitio, su navegador debe solicitar y descargar algunos archivos para reproducir el contenido. Se realiza una solicitud HTTP en el servidor para cada archivo: solicitudes HTTP explicadas – Fuente: WP Rocket Cuantos más recursos tenga, más solicitudes. Un sitio de carga más rápido.
Conversiones: la optimización de imágenes para la velocidad de la página es crucial para los ingresos de su negocio. Necesita un sitio de carga rápida con imágenes fáciles para hacer feliz a su visitante, de lo contrario, los clientes potenciales se irán justo antes de navegar. Según Google, si el tiempo de carga de la página es de más de 5 segundos, ¡la probabilidad de rechazo aumenta en un 90%!
Rechazo y velocidad de la página – Fuente: Piense con Google Saw cómo las imágenes juegan un papel importante en el rendimiento de una página web. Superemos los efectos de las imágenes no opmistas en Google PageSpeed Insights.
¿Cuál es el impacto de las imágenes en Google PageSpeed Insights? PageSpeed Insights es un instrumento alimentado por Lighthouse que analiza el contenido de una página web, incluidas las imágenes. Una vez que se completa la auditoría, PageSpeed proporciona diagnóstico y recomendaciones para optimizar las imágenes y hacer esa página más rápido. Hay dos valores de velocidad de páginas afectados por imágenes: la pintura de contenido más grande (LCP), que es Google Core Web Vitals y First Paint (FCP).
FCP y LCP afectados por imágenes – Fuente: PageSpeed Insights
Primera pintura (FCP): está relacionado con los primeros elementos de texto e imagen en la pantalla. La pintura de contenido más grande (LCP): marca el punto donde se cargó el contenido principal. Google puede empeorar los dos KPI si las imágenes por encima del tiempo de carga. Servir imágenes en los formatos de nueva generación de Google recomienda convertir imágenes en WebP o AVIF, ya que estos formatos ofrecen una mejor compresión que JPEG o PNG. La compresión de la imagen significa descargas más rápidas, menos datos y un sitio más rápido. En el ejemplo a continuación, podría guardar casi 135 kb convirtiendo mi imagen JPEG en WebP: Ahorros potenciales debido a WebP o AVIF – Fuente: PSI 2. Codificación efectiva de imágenes Imágenes efectivas significa reducir el tamaño de un archivo de imagen, sin embargo, manteniendo una excelente calidad. Si las economías potenciales son de 4 kb o más, Google indicará que la imagen es optimizable. Casi 25 kb de posibles ahorros: fuente: PSI 3. Postpones fuera de la pantalla Una forma adicional de optimizar las imágenes para el rendimiento es posponer las imágenes fuera de pantalla y aplicar el script de carga perezoso en el pliegue (no en la pantalla del visitante). El propósito es priorizar primero los recursos críticos y cargar las imágenes “ocultas” más adelante.  Economía estimada del tiempo de carga perezoso: 5.4 S – Fuente: PSI 4. La dimensión de imágenes correctas Otra recomendación de Google es dimensionar adecuadamente las imágenes, especialmente cuando las servimos en dispositivos móviles (diseño receptivo). En la imagen a continuación, podría guardar 50 kb cambiando el tamaño y optimización de mi imagen para dispositivos móviles. Tiempo de carga estimado para corregir imágenes: 0.6 S – Fuente: PSI 5. Servir activos estáticos con una memoria caché Efection Memorizing in Cache HTTP puede acelerar el tiempo de carga del tiempo de carga de la página para visitas repetidas en el sitio. Google señala todos los recursos estáticos que no se almacenan en caché:  La dimensión de la transferencia que podría optimizarse con el caché – Fuente: PSI En la siguiente sección, analizaremos cómo abordar cada uno de los elementos en las ideas de la imagen de la imagen y cómo mejorar la velocidad de la página. Cómo optimizar las imágenes para la velocidad y el rendimiento de la página de Google Para optimizar las imágenes de Google y mejorar la velocidad de la página, puede implementar las siguientes 8 técnicas de rendimiento:  Convertir imágenes en webp (u otro formato de nueva generación)  Compresor Fotografías  Reloz fotos Establecer las dimensiones de la imagen Implementar carga perezosa Habilite el caché de su navegador en caché Aproveche un CDN Use gráficos .svg cuando sea posible Vamos a superar los instrumentos web y los complementos que puede usar para cada optimización recomendada por Google para mejorar su puntaje general del faro. 1. Convierta las imágenes en WebP (u otro formato de nueva generación) Una de las formas más efectivas de optimizar sus imágenes de Google es convertirlas en WebP utilizando un complemento de WordPress. Crea una versión webp de las imágenes, lo que resulta en una mejor compresión y optimización. Imagify es de hasta 20 MB de datos por mes. (Verifique el precio completo de Imagify). Conversación de imágenes de imágenes con Imagify Puede verificar otros complementos de conversión WebP: WebP Converter para medios y Web Express. Si no desea usar un complemento, encontrará muchas herramientas en línea gratuitas como Convertio o EZGIF. Debe tomar algunos pasos adicionales para este método: cargar las imágenes, descargarlas en la webp y colocarlas en su biblioteca de WordPress. Ejemplo de la herramienta basada en la web para convertir JPG a WebP – Fuente: Convertio 2. Comprimir imágenes de comprimir una imagen significa una reducción significativa de su tamaño para reducir el costo de almacenamiento. ¡Según Google, esto le dará a su sitio un buen impulso de rendimiento! Los complementos de WordPress más populares para comprimir imágenes sin perder calidad son: Imagify (con 3 niveles de compresión: normales, agresivos y ultra que pueden comprimir las imágenes a granel)  Compresión de imágenes con un solo clic – Fuente: Imagify   Óptimo Comprimir JPEG y PNG (PNG Tiny) Ewww  Shortpíxel Lea nuestra guía para obtener más información sobre los mejores 6 complementos de compresión de imágenes de WordPress. También puede usar software de diseño como Photoshop o Lightroom para comprimir imágenes, pero tenga en cuenta que la calidad se puede modificar. La última opción es elegir una herramienta basada en la web. Herramienta web de compresión de imágenes: TinyPng Source 3. RESEATE Las imágenes de Google recomiendan un cambio de tamaño correcto, especialmente en el móvil. Puede usar software como boceto, vista previa o GIMP para cambiar el tamaño de las imágenes y reducir su peso. Cambiar el tamaño de una imagen en el boceto nota: también puede usar Imagify para cambiar el tamaño de las imágenes grandes. Hay una opción de optimización automática de imágenes más grandes. RESTACIMIENTO DE LAS IMÁGENES MÁS GRANDES CON IMAGIFY 4. Establezca las dimensiones de la imagen de la página de páginas sugiere establecer un ancho y alturas explícitos para los elementos de la imagen. El propósito es reducir los cambios de apariencia y mejorar el cambio de diseño de valor acumulativo (CLS), otra medición de vital de la web central. Mide la estabilidad visual del contenido. Para establecer un tamaño de imagen, asegúrese de que las etiquetas de “ancho” y “altura” tengan un valor, como se muestra en el rojo a continuación:  Una forma manual de averiguar si las dimensiones están configuradas correctamente es usar la herramienta para los desarrolladores en Chrome e inspeccionar sus imágenes : Establecimiento de ancho y altura: Fuente: Chrome 5. Implementar la carga perezosa La carga perezosa es una de las formas más efectivas de optimizar sus imágenes de Google y rendimiento.¿Por qué?Usted le dice al navegador solo que descargue las imágenes que ve el visitante. Lanzamiento del contenido necrítico: la fuente: WP Rocket para aplicar la carga perezosa a sus imágenes, puede usar un complemento gratuito de WordPress, como LazyLoad by WP Rocket o AutOptimize.Lazyload by WP Rocket es muy simple: WordPress LazyLoad por wprocket WordPress Imagen También puede implementar la carga manual de lazy, agregando la siguiente etiqueta de imagen:   Para obtener más información sobre la carga perezosa, le sugerimos que lea este artículo sobre los mejores complementos de carga perezosa. 6. Active la memoria del navegador en la memoria de caché en caché es otra recomendación de Google para la velocidad de página, ya que permite que las imágenes se transmitan más rápido. La memoria del navegador puede ayudar a reducir la carga del servidor al reducir el número de solicitudes HTTP por página. Google sugiere el uso de un complemento de WordPress para implementar la memorización en caché. Uno de los mejores complementos de caché es el cohete WP. Aplica el 80% de las mejores prácticas de rendimiento web, tiene una interfaz simple y una configuración rápida. 7. Aproveche un CDN utilizando una imagen CDN reduce significativamente los costos de tráfico y aumenta la nota en Google PageSpeed Insights. Optimice cómo se entregan las imágenes a los visitantes, sin importar dónde se encuentren en el mundo. Debido a esta técnica de optimización de imágenes, se reduce la cantidad de datos transferidos. IMPORTANTE: Configurar un CDN desde cero puede ser abrumadora. Deberá lidiar con los registros DNS y los campos CName. Si prefiere una instalación automática, es posible que desee probar RocketCDN. Hacen trabajo duro y configuran el CDN para usted. 8. Use gráficos SVG cuando sea posible una de las características de SVG más valiosas para el rendimiento es que el gráfico se puede escalar sin perder calidad. SVG significa gráficos vectoriales escalables y se basa en XML. En el backstage, este formato son ecuaciones y matemáticas, lo que facilita la escala sin comprometer los píxeles. Imágenes y velocidad de página:  Un estudio de caso para aplicar todas las técnicas recomendadas que acabamos de mencionar para poder comparar nuestro rendimiento antes y después de optimizar una página web. Usaremos PageSpeed Insights y GTMetrix para la auditoría. La primera columna muestra los resultados antes de cualquier tipo de optimización. Creé una página web de 8 HD en mi iPhone. La segunda columna muestra mejoras después de implementar técnicas de optimización de imágenes. Mis resultados en Google PageSpeed Insights han mejorado permanentemente: | |||
| antes de optimizar la imagen | después de la optimización de imágenes (imagen + cohete WP + cohete CDN) | ||
| nota general |
|
||
| Advertencias de velocidad de página |
|
 ! 
|
! Se remedian los problemas y advertencias de PSI de imagen  El peso total de las imágenes fue de 3.5 MB ahora disminuyó a 36.8 kb  La mitad de las solicitudes HTTP fueron hechas por imágenes. Después de la optimización, son responsables de solo el 22% de las solicitudes.  Las solicitudes de HTTP pasaron de 16 a 9  Mi vitalidad central de la web está en verde ahora  La nota de rendimiento pasó de 68/100 a 95/100 en móvil  El tiempo de carga total fue de 3.9 sy disminuyó a 1.2 s ¡El tamaño de mi página era de casi 4MB y ahora tiene 91 kb! La conclusión para optimizar las imágenes para la velocidad de la página y Google, apliqué el siguiente protocolo de rendimiento: Instalé Imagify, que me permitió: Convertir mis fotos en webp Cambiar el tamaño de mis imágenes más grandes Comprimir y optimizar mis imágenes usando el modo Ultra para codificarlas de manera efectiva He activado RocketCDN para permitir que mis imágenes se transmitan más rápido en todo el mundo. Usé WP Rocket para: Implementar memorización en caché Aplicar carga perezosa en mis imágenes Optimizar mi código JS y CSS Impacto de Imagifify en las auditorías de PageSpeed Insights: ¿están todos en verde?¡Comience el viaje de optimización de imágenes con Imagify!Antes de instalar el complemento, puede comenzar a usar la aplicación web gratuita. 
Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.
Tags Cómo optimizar las imágenes de velocidad de página (y Google) Check AlsoCum să îmbunătățești designul site-ului web utilizând Logo Carusel și Testimonial CaruselCum să îmbunătățești designul site |