TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

25

Autoptimize es uno de los complementos populares para acelerar su sitio de WordPress. Hay más de 1 millón de instalaciones activas de estos complementos con una calificación promedio de 4.7 de más de 1000 usuarios. No puede ser falso que tanta gente instale y use este complemento para optimizar su sitio. Sin embargo, debe asegurarse de la configuración correcta para que el complemento funcione para usted.

Relacionado: Los 8 mejores complementos de almacenamiento en caché para WordPress.

¿Qué hace Autoptimize?

Primero, debe comprender que Autoptimize no es un complemento de almacenamiento en caché como WP Rocket o W3 Total Cache. Es un complemento de optimización que ayuda a hacer las siguientes cosas:

  • Combinar todos los archivos CSS y JavaScript
  • Minimice los archivos comprimidos y almacénelos en caché, también minimice el HTML eliminando comentarios y espacios
  • Agregue un encabezado de vencimiento a los archivos para servir la versión en caché
  • Mover CSS al encabezado y los scripts al pie de página

Más tarde, el desarrollador también incluyó la optimización de imágenes para la carga diferida y el servicio de imágenes WebP para acelerar los archivos multimedia. Como se menciona en la página de complementos en WordPress.org, los servidores HTTP / 2 pueden hacer automáticamente muchas de las cosas que hace este complemento. Por lo tanto, debe probar con pruebas para asegurarse de que el complemento realmente agregue algún valor para su instalación.

¿Cómo configurar correctamente Autoptimize en WordPress?

Autoptimize es uno de los complementos más sencillos de configurar. Después de instalar y activar el complemento, vaya al menú "Configuración> Autoptimizar". Tiene las opciones para optimizar JS, CSS, HTML e imágenes en su sitio.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Optimización automática de la configuración

Configuración de JS, CSS y HTML

Esta pestaña tiene múltiples opciones para segregar y optimizar los archivos en su sitio. Autoptimize agregará y minimizará los scripts, CSS y HTML de su tema y complementos. Por lo tanto, elegir algunas de las opciones puede dañar su sitio, especialmente si usa un tema basado en jQuery.

Opciones de JavaScript

  • Optimizar código JavaScript: habilite esta opción para minimizar los archivos JavaScript. Esto comprimirá y reducirá el tamaño de los archivos de script en su sitio.
  • ¿Archivos JS agregados? – habilite esta opción para combinar todos los archivos JavaScript y el servidor de forma asíncrona al cargar páginas en su sitio. Esto le ayudará a eliminar el problema de la secuencia de comandos de bloqueo de procesamiento en la herramienta Google PageSpeed ​​Insights. Sin embargo, en la mayoría de los casos dañará su sitio. La mejor opción es habilitar esto y proporcionar las excepciones para que la página pueda cargarse sin romperse. Pero, dará lugar a un problema de bloqueo de procesamiento en PageSpeed ​​Insights. Puede deshabilitar esta opción y habilitar solo "Optimizar código JavaScript" para minimizar solo los archivos.
  • ¿También agregar JS en línea? – Le recomendamos que desactive esta opción cuando su tema o complemento inyecte muchos scripts de forma dinámica. Habilitar esto puede hacer que el tamaño de la caché crezca más rápido y más grande, lo que afectará el rendimiento en lugar de mejorar.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Opciones de JavaScript

  • ¿Forzar JavaScript en? – la mejor práctica es cargar archivos JavaScript en el pie de página para que se carguen al final de la carga de la página. Esto eliminará eficazmente el bloqueo de renderizado y los problemas relacionados con el script que se muestran en las herramientas de medición de velocidad. Sin embargo, si ve que las opciones anteriores rompen su sitio, habilítelo para cargar scripts en el encabezado para probar si ayuda. Nuevamente, la carga de scripts en el encabezado mostrará una advertencia de bloqueo de procesamiento en la herramienta PageSpeed ​​Insights.
  • Excluir el script de Autoptimize: el complemento por defecto llena este cuadro con jquery.js y otros archivos importantes en su sitio. Si nota que algún tema específico o archivo de complemento está afectando su sitio, puede incluir el archivo aquí. Recuerde completar la ruta relativa del archivo ignorando el nombre de dominio. Además, como se menciona en la descripción, el complemento aún minimizará los archivos excluidos a menos que los excluya en la sección "Misc". Después de probar con diferentes temas, le recomendamos que excluya jquery.js para evitar problemas de rotura de diseño en su sitio. A veces, es posible que no note el problema en el sitio, sin embargo, puede ver el error de la consola en las herramientas para desarrolladores de Google Chrome. El error mostrará algo como "$ o jQuery no está definido" o "función desconocida".
  • ¿Agregar envoltura de prueba-captura? – habilite esta opción cuando encuentre que el complemento rompe su sitio. Le recomendamos que desactive esta opción y excluya el archivo que se rompe en la excepción.

Opciones CSS

Las opciones de CSS son casi similares a las opciones de JavaScript.

  • ¿Optimizar el código CSS? – habilite esta opción para comprimir y minimizar archivos CSS en su sitio.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Opciones CSS

  • ¿Archivos CSS agregados? – habilite esta opción para combinar todos los archivos CSS en su sitio y servir como un solo archivo CSS comprimido y minificado.
  • También agregar CSS en línea: habilítelo para incluir CSS en línea para la agregación. Si su tema o complemento inyecta mucho CSS en línea, esta opción aumentará el tamaño de la caché.
  • Generar datos: ¿URI para imágenes? – habilite esta opción para que Autoptimize pueda integrar las pequeñas imágenes descargadas por su tema y complementos.
  • CSS en línea y diferido: para habilitar esta opción, primero debe conocer el CSS crítico para su sitio. Desafortunadamente, no es fácil obtener CSS crítico ya que cada plantilla de su sitio necesita CSS crítico independiente. Por ejemplo, cuando tiene WooCommerce en su sitio, no puede usar el CSS crítico de la publicación o la página para las páginas de productos de WooCommerce. En nuestra opinión, debería desactivar esta opción en Autoptimize. De lo contrario, puede obtener la API premium de criticcss.com e integrarla con Autoptimize en la pestaña "Critical CSS".
  • Inline all CSS: habilite esta opción para integrar todo CSS en lugar de vincularlo como un archivo. Después de habilitar esta opción, puede ver el código fuente de su sitio para ver la gran cantidad de CSS. Inlining CSS puede mejorar drásticamente la velocidad, sin embargo, puede afectar negativamente si tiene un archivo CSS enorme.
  • Excluir CSS de Autoptimize: si encuentra que el sitio no funciona, puede excluir los archivos CSS específicos en este cuadro de texto. De manera similar a los archivos JavaScript, debe proporcionar la ruta relativa ignorando el nombre de dominio. Autoptimize también excluirá el caché, los iconos y otros CSS de forma predeterminada. También puede proporcionar las carpetas relativas como "wp-content / uploads /" para excluir todos los archivos CSS en esa carpeta.

Aprenda WordPress: consulte más de 400 tutoriales gratuitos de WordPress.

Opciones HTML

Al igual que JS y CSS, habilite la opción "Optimizar código HTML" para comprimir y minimizar el contenido HTML en su sitio. También puede habilitar o eliminar los comentarios utilizando "¿Conservar comentarios HTML?" opción. Recomendamos habilitar ambas opciones.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Opciones HTML

Opciones de CDN

Si está utilizando CDN que crea la URL de la zona, debe ingresar la URL raíz aquí en el cuadro de texto "CDN Base URL". Sin embargo, puede ignorar esto si no está usando CDN o usando Cloudflare o cualquier otro CDN que use servidores de nombres DNS.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Opciones de CDN

Información de caché

En la sección "Información de caché" puede encontrar el estado del almacenamiento en caché de Optimización automática. Le mostrará la ruta, el tamaño y la cantidad de archivos almacenados en caché.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Información de caché

Opciones misceláneas

  • ¿Guardar scripts / CSS agregados como archivos estáticos? – esto debería estar habilitado de forma predeterminada ya que los archivos comprimidos deben servirse como un recurso estático para mejorar la velocidad. Como se menciona en la descripción, si hay un problema de visualización, desactive esta opción e intente que ayude.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Opciones misceláneas

  • ¿Minificar los archivos CSS y JS excluidos? – el complemento minimiza automáticamente todos los archivos CSS y JS, aunque ha excluido archivos específicos en la configuración de CSS o JS. Desactive esta casilla de verificación si desea desactivar la minificación de los archivos CSS y JS excluidos.
  • ¿Optimizar también para editores / administradores registrados? – recomendamos desactivar esta opción para que pueda ver el sitio real sin Autoptimize cuando inicie sesión como administrador o editor. De lo contrario, es posible que observe problemas al trabajar con los complementos del generador de páginas.

Guarde todos los cambios para que el complemento comience a funcionar en su sitio.

Imagenes

La pestaña "Imágenes" ofrece opciones para optimizar imágenes.

  • Optimizar imágenes: esta opción le ayuda a utilizar la CDN global de Shortpixel para optimizar y ofrecer sus imágenes sobre la marcha. Shortpixel es una solución de compresión de imágenes premium que le permite optimizar 150 imágenes por mes. Puede ver el estado actual y el uso de la cuota en esta sección.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Optimización de imagen

  • Calidad de optimización de imagen: puede elegir una de las opciones brillantes, con pérdida o sin pérdida. Puede comprobar las diferencias entre estas opciones y probar sus imágenes en la página Shortpixel. Esto le ayudará a seleccionar la mejor opción para sus necesidades.
  • ¿Cargar WebP en navegadores compatibles? – elija esta opción para servir imágenes WebP para Chrome y otros navegadores compatibles.
  • ¿Imágenes de carga diferida? – La carga diferida aplazará las imágenes fuera de la pantalla y se cargará solo cuando el usuario alcance la posición de la imagen en el navegador. Habilite esta opción para mejorar la velocidad de carga y mejorar la puntuación en la herramienta Google PageSpeed ​​Insights.
  • Exclusiones de carga diferida: aquí puede introducir los tipos de imágenes o los nombres de archivo para excluirlos de la carga diferida.

Tenga en cuenta que la mayoría de los complementos y temas vienen con carga diferida como una opción incorporada. Por ejemplo, el tema del periódico, el complemento Jetpack, el complemento WP Smush y el complemento SG Optimizer para usuarios de SiteGround tienen la opción de carga diferida. Le recomendamos que utilice la carga diferida solo cuando no utilice opciones similares en otros complementos o temas de su sitio. De manera similar, habilite Shortpixel solo cuando no tenga una CDN externa para el almacenamiento en caché de imágenes. Además, use esto con precaución ya que tiene restricciones de uso.

Extra

El uso de recursos de terceros en el sitio afectará la velocidad de carga de la página. La pestaña "Extra" ofrece opciones adicionales para optimizar algunos contenidos estándar de terceros en su sitio.

  • Google Fonts: si está utilizando Google Fonts en su sitio, tiene opciones para deshabilitar o combinar.
  • Eliminar emojis: WordPress usa de forma predeterminada un script de emoji Unicode para agregar símbolos de emoji en su sitio. Si no está utilizando emojis, le recomendamos que habilite esta opción para desactivar los emojis.
  • Elimina las cadenas de consulta de los recursos estáticos: los archivos CSS y JS usan el control de versiones y agregan un parámetro en la URL usando "ver". Si tiene un sitio web estático (este es el caso de la mayoría de los sitios de WordPress, excepto los foros y los sitios personalizados), no es necesario utilizar el control de versiones, ya que los archivos también son de naturaleza estática. Cuando agrega todos los archivos CSS y JS, automáticamente el complemento servirá el archivo en caché como un recurso estático. Sin embargo, si ha excluido algunos archivos o no ha agregado CSS o JS, habilite esta opción para eliminar las versiones de la URL.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Opciones extra

  • Preconexión a dominios de terceros: la preconexión permite conectarse con el servidor de terceros antes de enviar la solicitud del navegador HTTP. puede agregar los dominios que desea preconectar en este cuadro de texto.
  • Precargar solicitudes específicas: la precarga ayuda a cargar las URL vinculadas, lo que aumenta de antemano la velocidad de carga de la página. Ingrese cualquier dominio de terceros como fonts.google.com para precargar.
  • Archivos JavaScript asíncronos: introduzca archivos JS de terceros que desee cargar de forma asíncrona mediante la propiedad "asincrónica".
  • Optimizar videos de YouTube: esta opción necesita un complemento adicional para cargar videos de YouTube de forma diferida.

Problemas frecuentes con Autoptimize

Cuando se optimiza correctamente, el complemento Autoptimize puede mejorar la velocidad y la puntuación de su sitio en la herramienta Google PageSpeed ​​Insights. Sin embargo, tiene pocos problemas al usarlo como solución para la optimización de la velocidad.

1 Uso con otros complementos

El problema con Autoptimize es que no se trata de un almacenamiento en caché, sino que incluye la mitad de las opciones de optimización que ofrece un complemento de almacenamiento en caché completo. Debe elegir complementos como WP Super Cache para trabajar con Autoptimize para evitar opciones redundantes. De lo contrario, no necesita usar Autoptimize cuando tiene complementos como W3 Total Cache o WP Rocket.

2 integraciones de ventas adicionales

Con las pocas opciones disponibles, puede ver que el complemento vende más la integración con Shortpixel, WP YouTube Lyte y criticcss.com. cada integración necesita un complemento o una cuenta adicional, lo que no es necesario cuando elige un complemento de almacenamiento en caché premium como WP Rocket con un buen CDN. Además, hay una sección "¡Optimizar más!" pestaña para vender los productos de socios.

3 CSS crítico

CSS crítico es el CSS necesario para cargar el contenido de la mitad superior de la página en una página. El problema es que cada diseño de página, como publicación, página, producto, portafolio, etc., necesita CSS crítico separado para cargar correctamente el pliegue superior. Esta es una tarea complicada para generar CSS crítico usando otro complemento "Autoptimize criticcss.com power-up" y una clave API premium de crticialcss.com.

4 Rompiendo el diseño del sitio

En la mayoría de los casos, el complemento romperá el diseño de su sitio. Debe verificar y analizar manualmente para encontrar el script u opción que rompe su sitio y excluirlos del complemento Autoptimize.

5 Tamaño de caché creciente

La incorporación de CSS y JS hará que el tamaño de la caché crezca drásticamente. Hemos probado con el popular tema Periódico para encontrar que el tamaño de la caché alcanza el 100% en un solo día. El problema es que el complemento proporciona estas opciones sin la purga automática de caché. Eso significa que debe iniciar sesión manualmente en el panel y eliminar el caché cada vez que aumenta el tamaño.

¿Cómo configurar correctamente Autoptimize en el sitio de WordPress?

Optimización automática de caché completa

Conclusión

En nuestra opinión, este complemento funciona bien cuando tiene un tema simple y utiliza complementos de almacenamiento en caché simples como WP Super Cache. Sin embargo, la mayoría de los usuarios utilizarán complementos estándar como Jetpack o W3 Total Cache en su sitio. En este caso, Autoptimize será una opción redundante que no completa el complemento o deshabilita ciertas opciones.

Fuente de grabación: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More