Limpieza de activos Pro

Lo primero que hay que hacer es echarle un vistazo lógico. ¿Hay alguna característica particular que quieras conservar o dejar de lado? ¿Hay algún complemento ejecutándose en una página que no necesita estar allí?

Dame Un ejemplo

Los formularios de contacto son comunes. Mucha gente los tiene en el pie de página o repartidos por todas partes. ¿Realmente necesitas esto? Si alguien se comunicara con usted, iría a la página de contacto. Es muy raro que alguien use un formulario de contacto en el pie de página, entonces, ¿por qué tenerlo ahí?

Los scripts de formularios de contacto son bastante pesados: generalmente entre 50 kb y 80 kb y están cargados de CSS. Ahora, ese pequeño formulario en su pie de página está obligando a la página a cargar esos scripts en cada carga de página. ¿No sería mejor tener sus formularios de contacto en una página lógica y cargar solo los scripts de contacto en esa página?

Este es el tipo de cosas de las que se trata la optimización. Con Asset Cleanup Pro puede ir a la página "Contáctenos" y descargar los scripts del formulario de contacto en todo el sitio, excepto en esa página. Ahora ha ahorrado entre 50 y 80 kb en el peso de la página al reorganizar sus formularios de contacto para que sean más lógicos.

Puedo Hacer esto ¿Con todos los guiones?

Sí, más o menos. También es muy útil con la marca. A menudo, la velocidad de la página significa reducir un poco su sitio web. Pero su marca puede depender del aspecto y las características que tenga su sitio web. Así que piense en la estructura de su sitio web teniendo en cuenta la marca. Crear páginas que sean más básicas como la mía. Página principaly luego crea unos que tengan tu marca por todas partes, como mi Sobre nosotros página.

Siempre que sus páginas de destino estén optimizadas, eso es realmente lo único que importa. Nunca sacrifiques la marca por la velocidad de la página. Simplemente hace que su sitio web se vea horrible a medida que lo elimina más y más. Superar 90% en Google Insights es bastante fácil en una computadora de escritorio, pero en un dispositivo móvil es una historia diferente. Los criterios son mucho más estrictos ya que los datos dependen de velocidades de red 4G simuladas. No te obsesiones con ello. Mientras se cargue rápidamente y tenga una puntuación móvil de 70, todo irá bien. Para que lo sepas, la puntuación promedio global al momento de escribir este artículo es 38% en dispositivos móviles.

Aplazar el código significa cargar un fragmento de código más adelante en el proceso. Precargar o Async significa cargarlo lo antes posible junto con otros archivos. Con la carga asincrónica, el navegador procesará los archivos junto con otros archivos para evitar cualquier bloqueo de renderizado. Aplazarlo no lo cargará en absoluto hasta el final del proceso de carga.

Para obtener una buena puntuación de velocidad de página y tiempos de carga rápidos, debe posponer la carga de scripts que no sean necesarios de inmediato. En lo que te centras es en el contenido "en la mitad superior de la página". Es decir, lo que ves cuando cargas la página por primera vez. No es necesario cargar nada en el pie de página ni las imágenes más abajo en la página, solo el contenido en la parte superior.

Aquí es donde puede resultar confuso porque no siempre es lo que ves lo que se debe cargar. Por ejemplo, es posible que tenga ciertas rutinas JS que dependan de otro archivo. Esto significa que el archivo JS "principal" debe cargarse para que funcione la subrutina JS secundaria. Uno común que aparece en los informes de Google Insights es el JQUERY archivo. Este es un archivo de marco del que dependen muchos otros archivos JS para funcionar. Puedes intentar descargarlo, pero lo más probable es que obtengas errores. Mi consejo es que lo tengas cargado y te ahorres muchos dolores de cabeza. Aún puedes obtener puntuaciones altas cuando esté cargado.

La precarga tiene problemas similares. Es genial que los archivos se carguen sin bloqueo de renderizado, pero la clave aquí es que los archivos se descargan en conjunto con otros archivos. Esto es especialmente cierto con los archivos JS y puede causar algunos problemas. Esto nuevamente se debe a las dependencias. Si un archivo JS principal no ha terminado de descargarse antes de que su script secundario comience a descargarse, el script secundario no puede funcionar y genera errores.

Lo mismo puede decirse de los archivos CSS, pero no causará errores centrales, sino problemas de diseño. La mayoría de los temas tienen un archivo de 'módulo' central que contiene la mayor parte del código CSS que son los componentes básicos de su sitio web. Este archivo debe mantenerse cargado para evitar errores y problemas de cambio de diseño, y normalmente es bastante grande. Aquí es donde entra en juego el CSS y la precarga críticos, pero profundizaremos en eso más adelante. Carga rápida página.

Entonces, lo que hay que hacer es ver el video, luego ir página por página y marcar las casillas para posponer o precargar el archivo desde cada página. Si es algo que no necesita cargar en absoluto, marque la casilla para descargarlo en todo el sitio y se descargará en todas las páginas. Solo haga uno o dos códigos a la vez, borre el caché y verifíquelo. Si haces demasiados y se rompe, entonces será un poco de trabajo de detective ver cuál rompió el sitio web.

Cambiar el orden de carga con Asset Cleanup Pro es uno de los conceptos básicos para optimizar su sitio web. Sin embargo, es la etapa que consume más tiempo en el proceso de velocidad de la página. Un buen consejo es trabajar con sus complementos antes de abordar los archivos del tema. Esto se debe a que es fácil ver qué complementos se están cargando en la página y juzgar si necesita los archivos o no. Algunas funciones del tema podrían ser menos obvias y son los archivos del tema los que suelen causar la mayor cantidad de errores. Es posible que no necesites cargar nada en todo el sitio web, aparte de una página crítica, y es fácil pasar por alto un ícono no cargado, o que falte un carrusel, etc.

Así que lo que Debería ¿Hacer?

Como se ha dicho, hay muchas etapas para la optimización y esta es la primera. Por suerte también es el más complejo. Una vez que haya cargado sus complementos solo donde deben estar y esté satisfecho de que todo funcione, realizaría una nueva copia de seguridad del sitio. Luego, haga una prueba de velocidad de página para obtener una puntuación, anótela y salte a otra etapa que le esté molestando en el informe Insights. Tal vez pruebe la optimización de imágenes o el truco del organizador de complementos si tiene una gran carga de contenido en el móvil.

Otro pequeño consejo que resulta especialmente útil a la hora de aplazar archivos JS es hacer clic derecho en la ventana de Chrome y hacer clic en 'Inspeccionar'. Esto abre una ventana que muestra todo el código cargándose en su pantalla. Ahora actualice la página web. Si aparece un pequeño ícono rojo con una cruz cerca de la parte superior de la ventana del código de Chrome, haga clic en él. Esto le informará sobre cualquier error en la página. Mire cuál es el error y compárelo con los nombres de los archivos en su página. Restablezca lo que hizo por última vez (o deje de posponer JQUERY si lo ha intentado). Actualice la página web y vea si el error desapareció. Si ya no está, sabes que no debes aplazar ese archivo en particular.

No intentes hacer todo de una sola vez. Úselo con facilidad, instale los complementos y luego el tema en sí una vez que se sienta cómodo con la interfaz de usuario de Asset Cleanup.

Al comienzo del video, notará que el anfitrión está hablando de eliminar las funciones principales de WordPress. Preste especial atención a esto porque es un atributo de Asset Cleanup Pro que no encontrará en ningún otro lugar. Le permite eliminar el código central no utilizado que puede reducir seriamente el peso de su sitio web.

WordPress es tan grande que rara vez necesitamos algo como todo lo que tiene para ofrecer, así que recortemos eso. Asset Cleanup Pro hace que este proceso sea muy fácil, ya que todo lo que debe hacer es ingresar al área de administración del complemento y pequeños interruptores activan y desactivan las funciones. ¡No se requiere codificación!

Que hace Cada característica ¿Hacer?

Con la carga de la fuente, entraremos en eso una vez que lleguemos al Dios mío página. Una vez que hayamos terminado de descargar las fuentes al servidor, podemos bloquear todas las llamadas salientes a Google Fonts a través de Asset Cleanup Pro. Todo lo que tienes que hacer es hacer clic en avanzado y marcar la casilla. ¡No lo hagas todavía porque sólo cargará las fuentes predeterminadas del sistema que se ven terribles!

Un consejo rápido sobre las fuentes

En las opciones de tema, utilice la menor cantidad de tipos de fuentes posible. Puede utilizar diferentes pesos de fuente para los títulos, etc., pero no utilice tipos diferentes. Los archivos de estilo de fuente son grandes y elegir una fuente sólida no sólo parece consistente, sino que realmente ayuda a la velocidad.

La mayoría de la gente puede desactivar el servicio Pingback XML-RPC. Esto también cierra algunas puertas a los ataques a su sitio web. No podrás desactivarlo si utilizas servicios de blogs externos, Jetpack o tienes una aplicación conectada a tu sitio. Sin embargo, si no tiene nada de esto, desactívelo.

Los comentarios se explican por sí solos. Si no los usas, desactívalo. Si lo haces, mantenlo cargado. Lo mismo puede decirse de EMOJI y Dashicons. Si utiliza un creador de páginas como Elementor o WP-Bakery, desactive también Gutenberg. Esto carga bastante código que no es necesario. Su creador de páginas se encargará de ello.

Con la limpieza del código fuente HTML, prácticamente puedes eliminarlos todos. Hay instrucciones en la página, así que léalas para asegurarse de no estar utilizando ninguna de las funciones.

Si está utilizando Kinsta o cualquier otro proveedor de alojamiento web con Cloudflare, no habilite el servicio CDN. La CDN ya lo maneja y causará errores si lo habilita. Si está utilizando una CDN diferente, ingrese su dirección de CDN aquí. Esto ayudará a Asset Cleanup Pro a servir archivos desde la ubicación correcta en su configuración.

Puede volver y optimizar con Asset Cleanup Pro en cualquier momento. Es bueno probar las optimizaciones en las sesiones para que, una vez que ciertas cosas funcionen, puedas dejar de trabajar y volver a hacerlo más tarde. Cada vez que agrega un nuevo complemento, puede ingresar y optimizar ese complemento en particular de la forma en que desea que se cargue.

Limpieza de activos profesional En sí mismo no lleva demasiado tiempo acostumbrarse. Lo que puede resultar confuso es todo este asunto de aplazar/precargar. Un movimiento en falso puede alterar la funcionalidad, así que hazlo siempre en pequeñas partes para que puedas recordar fácilmente cualquier cambio que acabas de realizar.

Una vez que esté satisfecho con su progreso, pase a la siguiente etapa.