La configuración ideal de optimización automática + Cloudflare / StackPath CDN (2020)

Optimización automática es un gran complemento, pero para el almacenamiento en caché, WP Rocket suele ser el número 1 en las encuestas de Facebook.


Entonces, ¿por qué lo usarías??

Porque a algunos anfitriones les gusta Ve papi y WP Engine lista negra la mayoría de los complementos de caché (ya que tienen su propio sistema de almacenamiento en caché incorporado) pero no hacen cosas como optimizar HTML, CSS, JavaScript, Google Fonts o CDN (red de entrega de contenido). Entonces, aunque el sistema de almacenamiento en caché de su host podría funcionar bien para el almacenamiento en caché, Autoptimize ayuda a hacer el “resto” de las cosas (arreglando elementos en GTmetrix + Pingdom). Evite Google PageSpeed ​​Insights ya que ni siquiera mide los tiempos de carga.

Incluso el desarrollador de Autoptimize dice en su página de complementos que funciona mejor cuando se combina con un complemento de caché. Recomiendo Swift si vas por la ruta gratuita, y WP Rocket si puede hacer $ 49 / año, ya que es más fácil de configurar (también es lo que uso y tengo puntajes del 100% en GTmetrix) ya que viene con muchas características que la mayoría de los complementos de caché no tienen (limpieza de la base de datos, hospedaje del código de Google Analyitcs localmente, latido del corazón control e integración con Cloudflare + otros CDN). Tengo tutoriales para WP Rocket, Rápido, WP Fastest Cache, W3TC e incluso WP Super Cache.

Así que configuremos la configuración de optimización automática. También te mostraré cómo agregar un CDN (idealmente ambos Flama de nube y StackPath) ya que cada uno tiene su propio conjunto de centros de datos y más centros de datos = entrega de contenido más rápida. Se recomiendan CDN en Guía de optimización de WordPress.

Complemento de optimización automática

1. JS, CSS, & HTML

Habilite todo esto para optimizar archivos JavaScript, CSS y HTML, luego vea las instrucciones a continuación.

Optimización automática de la configuración HTML JS CSS

Optimizar código JavaScript

  • Agregado de archivos JS: habilitar, esto combina archivos JavaScript como lo recomienda GTmetrix. Si está deshabilitado, los archivos individuales se cargarán y no se combinarán.
  • También agregado en línea JS: habilitar, esto combina archivos JavaScript que se encuentran en archivos HTML. Autoptimize da una advertencia que básicamente significa que si rompe algo en su sitio, excluya los archivos JavaScript o desactívelo..
  • Forzar JavaScript en : deshabilitar, a menos que tenga errores de JavaScript. Es mejor intentar encontrar archivos problemáticos y excluirlos que seleccionar esta opción, ya que esto hace que el bloqueo de renderizado de JavaScript (no sea óptimo para la velocidad).
  • Excluir guiones de Autoptimize: si ve errores después de habilitar ciertas configuraciones de JavaScript, encuentre el JavaScript problemático y excluya los archivos aquí.
  • Agregar envoltura try-catch: deshabilitar, a menos que tenga errores de JavaScript. Esta es otra forma de corregir errores JS sin tener que habilitar forzar JavaScript en la cabeza.

Optimizar código CSS

  • Agregado de archivos CSS: habilitar, lo mismo que agregar archivos JS solo para CSS.
  • También agrega CSS en línea: habilitar, lo mismo que agregar archivos JS en línea solo para CSS. Habilite ambos para mejorar aún más los tiempos de carga + puntajes de GTmetrix.
  • Generar datos: URI para imágenes: deshabilitar si usa un CDN. MaxCDN (StackPath) te advierte que habilitar esto obligará a que las imágenes se sirvan desde su origen en lugar de su CDN. Habilitar esto inicialmente puede resultar en menos solicitudes HTTP, pero probablemente no después de configurar un CDN y servir imágenes a través de ese.
  • CSS en línea y diferido: habilitar, solo puede habilitar esta opción o “en línea todo CSS” que Autoptimize no recomienda en sus preguntas frecuentes. Dicen “aunque alinear todos los CSS hará que el CSS no sea bloqueado, hará que su página HTML base sea significativamente más grande, por lo que requerirá más” viajes de ida y vuelta “.
  • Inline todo CSS: deshabilitar, Autoptimize no recomienda habilitar esto.
  • Excluir CSS de Autoptimize: si ve errores después de habilitar ciertas configuraciones de CSS, encuentre los archivos CSS problemáticos y excluirlos aquí. Nota: la opción “minificar CSS y JS excluidos” en las Opciones misceláneas debe deshabilitarse.

2. Opciones de CDN

Aquí es donde tu URL de CDN va (instrucciones a continuación). Cloudflare no le proporciona una URL de CDN (en su lugar, cambiará los servidores de nombres). La URL base de CDN es específicamente para StackPath, KeyCDN y otros CDN, no Cloudflare. Sugiero usar StackPath + Cloudflare ya que sus CDN tendrán más centros de datos y más centros de datos = sitio web más rápido.

Paso 1: Regístrese para obtener un CDN. Utilizo StackPath que tiene más de 34 centros de datos que están ubicados en gran medida en los Estados Unidos y es donde están la mayoría de mis visitantes. Cuesta $ 10 / mes con una prueba gratuita de 30 días.

StackPath-Data-Centers

Paso 2: En el panel de StackPath, haga clic en la pestaña CDN y crear un sitio StackPath CDN.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-Server-IP-Address

* Copie la dirección IP de su servidor como se necesita en el paso 5 de esta sección.

StackPath-CDN-URL-Autoptimize

Paso 3: Pegue su URL de CDN en Autoptimize con http: // o https: // (lo que use).

Optimización automática de URL de CDN

Paso 4: En StackPath vaya a CDN → Configuración de caché, luego haga clic en “Purgar todo”.

StackPath-Purge-Cache

Paso 5: Incluya en la lista blanca la dirección IP de su servidor en StackPath (WAF → Cortafuegos).

StackPath-Whitelist-IP

Paso 6: Ejecute su sitio en GTmetrix y la “red de entrega de contenido” debe ser verde en YSlow.

CDN GTmetrix YSlow

3. Configuraciones varias

Aquí están las configuraciones misceláneas:

Optimización automática de ajustes misceláneos

Guardar script agregado / css como archivos estáticos – si está habilitado, esto significa que los archivos CSS y JS se guardan en la memoria caché y se sirven a través de su servidor, por lo que si su alojamiento no los maneja, habilítelos.

Minificar archivos CSS y JS excluidos – si excluye ciertos archivos CSS y JavaScript, es porque hay un problema al intentar optimizarlos, y no quiere que se minimicen.

También optimice para editores / administradores registrados – deshabilitar, generalmente desea deshabilitar las funciones de rendimiento en el administrador de WordPress, incluidas las funciones de rendimiento de Cloudflare.

4. Configuración de imágenes

La optimización automática también puede ayudar a que las imágenes se carguen más rápido.

Configuración de optimización automática de imágenes

Optimizar imágenes – Las URL de su sitio web se cambiarán para que apunten a CDN de ShortPixel. Esto no debería afectar su aspecto siempre y cuando sea una compresión sin pérdidas, pero se cargarán más rápido.

Calidad de optimización de imagen – encuentre su propio equilibrio único entre compresión y calidad (uso Glossy). Estas son las diferencias en cada nivel de compresión de ShortPixel:

Niveles de compresión de imagen ShortPixel

  • Con pérdida: mayor compresión, mayor pérdida de calidad.
  • Lustroso: compresión media, poca pérdida de calidad.
  • Sin pérdida: baja compresión, pérdida de calidad más baja.

Cargue WebP en navegadores compatibles – habilitado si usa imágenes WebP e imágenes de carga diferida.

Imágenes de carga lenta – Personalmente, no debo cargar mis imágenes de forma diferida porque cargar imágenes constantemente a medida que se desplaza hacia abajo puede ser molesto para los usuarios. Sí, da como resultado menos solicitudes y es recomendado por Google para tiempos de carga más rápidos, pero me resulta molesto. Esto depende totalmente de ti.

5. CSS crítico

Esto se refiere a la Optimice automáticamente el plugin de encendido criticalcss.com.

Requiere una prima plan pagado de criticalcss.com ($ 7 / mes).

El complemento crea reglas CSS esenciales para garantizar que las páginas se procesen antes de cargar el CSS completo, mejorando el “tiempo de inicio de procesamiento”. Todo lo que necesita hacer es instalar el complemento, inscribirse en un plan, ingresar su clave API de CSS crítico en la sección “CSS crítico” de Optimización automática, y el complemento hará el resto. Verifique el complemento Página de preguntas frecuentes para detalles sobre configuraciones personalizadas.

Yo personalmente no lo uso y prefiero usar los $ 7 adicionales al mes en un servidor más potente.

Optimice automáticamente el encendido de criticalcss com

Optimización automática de configuraciones críticas de CSS

6. Configuraciones adicionales

Ajustes automáticos adicionales

Fuentes de Google – habilitar si se usa Fuentes de Google que ralentizan los tiempos de carga a medida que se extraen de los recursos externos (la biblioteca de fuentes de Google). Prefiero la opción “combinar y vincular en la cabeza”, ya que esto mejora los tiempos de carga sin visibilidad al ver la carga de las fuentes (que es lo que suele ocurrir cuando se carga de forma asincrónica. También pruebe la última opción de fuente de Google “combinar y cargar fuentes de forma asincrónica con webfont.js“Y ver cuál produce mejores resultados en GTmetrix.

Eliminar emojis – habilitar (los emojis son malos para los tiempos de carga).

Eliminar cadenas de consulta de recursos estáticos – las cadenas de consulta generalmente son generadas por complementos y no se pueden arreglar (en GTmetrix / Pingdom) simplemente habilitando esto, pero puede intentarlo. La mejor solución es verificar si su sitio tiene complementos de CPU altos y reemplazarlos con complementos livianos. La mayoría de los complementos de CPU alta incluyen redes sociales, galería, creadores de páginas, publicaciones relacionadas, estadísticas y complementos de chat en vivo. También debe eliminar todos los complementos innecesarios y limpiar la base de datos (utilizando un complemento como WP-Optimize) para borrar tablas dejadas por complementos desinstalados.

Preconéctese a dominios de terceros – ayuda a los navegadores a anticipar solicitudes de recursos externos (Google Fonts, Analytics, Maps, Tag Manager, Amazon store, etc.). Por lo general, aparecerán como “reducir las búsquedas de DNS” en su informe GTmetrix, pero a continuación hay ejemplos comunes.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Precargar solicitudes específicas – puedes encontrar más sobre precarga y sugerencias de recursos del navegador de WP Rocket, pero esto básicamente hace que ciertos archivos se descarguen como alta prioridad.

Archivos Javascript asíncronos – esto significa que algo impide que el contenido de la mitad superior de la página se cargue rápidamente. Este tutorial sobre renderizar bloqueando JavaScripts lo explica bien, pero si ve errores de JavaScript en GTmetrix y Pingdom, el Complemento asíncrono JavaScipt podría hacer el truco.

Optimizar videos de YouTube – si su sitio tiene videos, WP YouTube Lyte lazy los carga para que solo se carguen cuando los usuarios se desplazan hacia abajo y hacen clic en el botón de reproducción, eliminando así las solicitudes iniciales a los servidores de YouTube. Esto puede ahorrar varios segundos en cargas de contenido con videos, ya que son uno de los elementos más pesados ​​en una página. WP Rocket y Swift Performance tienen esto integrado en su configuración, por lo que no necesita esto si usa uno de ellos como complemento de caché.

7. Optimizar más

Si desea optimizar aún más su sitio, aquí están las herramientas recomendadas:

WP Rocket – calificó el complemento de caché n. ° 1 en varias encuestas de Facebook y tiene muchas opciones no incluidas con Autoptimize (limpieza de la base de datos, control de latidos, hospedaje de Google Analytics localmente, reemplazo del iframe de YouTube con una imagen de vista previa, agregando la caché del navegador a Facebook Pixel, etc.). WP Rocket también maneja casi todo lo que hace Autoptimize, por lo que solo necesita 1 complemento para todas esas optimizaciones de velocidad. Por eso es tan genial. También puedes obtener un 10% de descuento aquí.

ShortPixel – plugin de optimización de imagen popular y el que uso.

StackPath – CDN con más de 30 centros de datos. Muy fácil de configurar; simplemente regístrese para un plan ($ 10 / mes) luego copie / pegue su URL de CDN en la opción Autoptimize CDN URL.

SiteGround – generalmente calificado como el host # 1 en las encuestas de Facebook y también utilizado por Yoast.

Yoast-en-Twitter-Nosotros-acabamos de cambiar a Siteground

Encuesta de alojamiento 2019

2017-WordPress-Hosting-FB-Poll

Recomendaciones de alojamiento de Elementor

Recomendación de alojamiento de julio de 2019

WordPress-Host-Poll-Ago-2018

Shared-Hosting-Poll-2017

Encuesta de alojamiento 2019

Ir a la empresa de alojamiento

WordPress-Hosting-Poll-2017

Encuesta de alojamiento gestionado

WooCommerce-Hosting-FB-Poll

Encuesta de alojamiento web 2016

Best-WordPress-Hosting-Provider-Poll

Best-Web-Hosting-2019-Encuesta

Encuesta de alojamiento amigable de WP

2016-WordPress-Hosting-FB-Poll

Hospedaje favorito para Elementor

Recomendaciones de alojamiento 2018

Managed-WordPress-Hosting-Poll-2017

2019-Hosts-Encuesta-1

Hosting-Poll-For-Speed

WordPress-Hosting-Poll-June-1

Recomendación de SiteGround

2014-Managed-WordPress-Hosting-FB-Poll

Encuesta sobre el mejor proveedor de alojamiento web

Encuesta de alojamiento-febrero-2019

Hosting-Recomendaciones-Encuesta

Bluehost vs SiteGround

Encuesta de alojamiento web de WordPress

La gente generalmente migra porque su tecnología de velocidad es mucho más rápido que EIG o GoDaddy:

Cambio a SiteGround

Migración del tiempo de carga de SiteGround

Bluehost a SiteGround GTmetrix

HostGator a SiteGround

SiteGround Google PageSpeed ​​Insights

100 puntaje perfecto en SiteGround

SiteGround Genesis

Velocidad entregada por SiteGround

Tiempos de carga reducidos con SiteGround

Nuevos tiempos de respuesta de SiteGround

HostGator a SiteGround Migration

Tiempos de respuesta de SiteGround en Joomla

Cambiado a SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround en Joomla

SiteGround Tiempos de carga reducidos

SiteGround Speedy Hosting

Nuevo tiempo de respuesta de SiteGround

Mejora del tiempo de respuesta de SiteGround

SiteGround también lo hace migraciones gratis con GrowBig+.

Cloudways – más rápido que SiteGround (es un alojamiento en la nube, no compartido) y también recibió una calificación alta en las encuestas de Facebook. Comienza en $ 10 / mes con su Plan DigitalOcean. Ofrecen 1 migración gratuita (en la que los tomé) y esto es lo que sucedió con el tiempo de respuesta de mi servidor:

SiteGround-vs-Cloudways-Cloud-Hosting

Recomendaciones de alojamiento Facebook

Encuesta WooCommerce VPS Cloud Hosting

Encuesta de alojamiento en la nube de VPS

Sugerencias de alojamiento de WordPress

Tiempos de respuesta de Cloudways

Motor WP a Cloudways

Intitulado

Cloudways Pingdom Tiempos de carga

Cloudways-Facebook-Review

Puede obtener un 25% de descuento en sus primeros 2 meses de Cloudways con el código de promoción OMM25.

Kinsta – Alojamiento premium de $ 30 / mes y, aunque no los he probado, no he escuchado más que cosas buenas sobre la velocidad, el soporte, los tiempos de actividad de Kinsta y casi todo sobre su alojamiento.

Perfmatters – Complemento de Kinsta que se encarga de lo que me gusta llamar “optimizaciones varias”, como deshabilitar selectivamente los complementos, limitar las revisiones posteriores, deshabilitar los autoguardados, alojar Google Analytics localmente y mucho más. Se encarga del 10% final de velocidad..

Autoptimize recomienda algunos de estos, otros no:

Optimización automática de complementos

8. Cloudflare

La optimización automática no tiene configuraciones para agregar Cloudflare ‘CDN, Pero esto es fácil de configurar. Y definitivamente deberías porque esto agrega 200 centros más a su red de entrega de contenido (CDN).

Centros de datos de Cloudflare

Paso 1. Regístrese en Cloudflare y se le pedirá que agregue su sitio y comience un escaneo.

cloudflare-begin-scan

Paso 2. Una vez que se realiza el escaneo, seleccione el plan gratuito, luego Cloudflare lo llevará a través de un conjunto de páginas. Eventualmente lo llevarán a una página donde Cloudflare le asigna 2 servidores de nombres.

Cloudflare-Name-Servers-Dashboard

Paso 3. Inicie sesión en su registrador de dominios (por ejemplo, Namecheap) y haga una búsqueda en Google de “cómo cambiar los servidores de nombres en Namecheap” (solo busque su registro de dominio), luego siga sus instrucciones. Copiarás los 2 servidores de nombres proporcionados por Cloudflare y los pegarás en una opción de servidores de nombres personalizada en tu registrador de dominios. Permita 72 horas para la propagación..

Servidores de nombres Godaddy Cloudflare

Eso es!

Que sigue?

Mira mi video – es un video de 42 minutos, pero cubro casi todo (marcas de tiempo en la descripción del video) y deberías aprender muchísima información sobre la velocidad del sitio de WordPress:

Quiere saber cómo obtuve puntajes del 100% en GTmetrix?
Vea mi guía completa de optimización de velocidad de WordPress que tiene más de 38 consejos para arreglar elementos de GTmetrix / Pingdom, incluida la actualización a PHP 7, servir imágenes escaladas, especificar dimensiones de imagen, limpieza de bases de datos, alojar Google Analytics localmente, WP Disable y otros.

Preguntas frecuentes

&# x1f680; ¿Necesito otros complementos de velocidad además de Autoptimize??

Sí, por lo general, también desea utilizar un complemento para el almacenamiento en caché, la optimización de imágenes, la limpieza de la base de datos, el control de los latidos y la desactivación selectiva de complementos. Recomiendo WP Rocket, ShortPixel y Perfmatters para aquellos.

&# x1f680; ¿Cómo se configura un CDN con Autoptimize??

Elija su CDN (uso StackPath), copie su URL de CDN y péguelo en el campo CDN UR de Autoptimize.

&# x1f680; ¿Cómo optimizar Google Fonts con Autoptimize??

Recomiendo usar la opción Combinar y vincular en el encabezado, y conectar previamente las fuentes con Autoptimize.

&# x1f680; ¿Autoptimize se encarga del almacenamiento en caché??

No, necesitará usar un complemento separado para el almacenamiento en caché. Recomiendo WP Rocket o SG Optimizer si usa SiteGround.

&# x1f680; ¿Cómo se configura la configuración de optimización automática??

Todo se enumera en este tutorial: solo vigile su informe de GTmetrix y los elementos específicos que deben repararse. Si la configuración de Autoptimize no lo soluciona, considere usar otro complemento para arreglar elementos.

Preguntas? Déjame una línea!
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map