Principal
/
Tutorial WordPress
/
Tutorial para el plugin SG Optimizer
/
Optimización de la portada desde SG Optimizer

Optimización de la portada desde SG Optimizer

Minimizar HTML, JS, CSS y combinar Google Fonts

Para encontrar estas funciones, ve a tu escritorio de WordPress > SG Optimizer > pestaña Frontend Optimization. Activar todas estas opciones mejorará significativamente la velocidad de carga de la web, quitando todos los caracteres innecesarios de tus archivos CSS y JS, así como del resultado en HTML de tu sitio. El plugin también combinará en una todas las solicitudes de Google Fonts usadas en tu sitio. Esto reducirá el tamaño del sitio web y mejorará el tiempo de carga de las páginas.

También puedes excluir archivos particulares de las diferentes optimizaciones de ser necesario.

Combina archivos CSS y JS

La combinación de archivos CSS y JS reducirá las solicitudes realizadas hacia tu sitio web y, por lo tanto, mejorará su velocidad de carga. El plugin mantendrá los scripts y estilos en su ubicación original tras la combinación para una mejor compatibilidad con otros complementos.

La combinación de archivos JavaScript puede causar problemas con scripts que requieren un cierto orden de ejecución. Es por eso que te recomendamos que verifiques la interfaz de tu sitio web después de habilitar esta optimización.

Activación de la optimización de Web Fonts

Con la optimización de Web Fonts, estamos cambiando la forma predeterminada de cargar las fuentes de Google para evitar solicitudes HTTP. Además de eso, todas las demás fuentes que utiliza tu sitio web WordPress se precargarán correctamente para que los navegadores tarden la menor cantidad de tiempo posible en almacenarlas en caché y renderizarlas.

Para activar la optimización, inicia sesión en tu escritorio de WordPress > SG Optimizer > pestaña Optimización de la portada. Desplázate hacia abajo hasta la sección Optimización de fuentes web y haz clic en el botón para activarlo.

Cuando lo habilitas, agregamos el llamado enlace “preconnect” a fonts.gstatic.com así que haremos la búsqueda DNS, la negociación TLS y el protocolo de enlace TCP, lo que dará como resultado una descarga más rápida de la fuente cuando se solicite. Cuando la optimización esté habilitada y funcione correctamente, podrás ver el siguiente enlace en la etiqueta principal de la página web. Puedes encontrarlo accediendo a tu sitio web, haz clic derecho y selecciona Ver código fuente.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Precarga de fuentes

La opción Precarga de fuentes aparecerá una vez habilites la Optimización de fuentes web. De este modo, podrás precargar las fuentes que estés utilizando para un renderizado más rápido y un mejor rendimiento web. asegúrate de precargar solamente las fuentes que estés utilizando. En la mayoría de los casos, puedes encontrar esas fuentes cuando realizas una prueba de PageSpeed y se te solicita que cargues previamente esos recursos. Puedes hacerlo aquí.

Esto agregará un enlace de precarga en la sección de cabecera de tu sitio web para garantizar una carga más rápida de esos recursos. Cuando agregues fuentes para precargar, asegúrate de pegar la URL completa de la fuente. Si todo está configurado correctamente, los enlaces en la pestaña Precarga de fuentes deberían estar visibles en la etiqueta principal como en el ejemplo siguiente.

<link rel="preload" as="font" href="https://www.website.com/wp-content/plugins/woocommerce/assets/fonts/star.woff" crossorigin="">

Si las fuentes no se utilizan, aparecerá un aviso amarillo en la consola en unos segundos indicando que la fuente fue precargada pero no se usó en un par de segundos. Esto significa que la fuente no se utiliza y no es necesario que esté precargada.

Cambiar las propiedades de visualización de las fuentes

Además de eso, si estás utilizando la optimización Combinar CSS, cambiaremos la propiedad de visualización de fuente a swap para eliminar el bloque de renderizado para esas fuentes. Si la familia de fuentes no tiene una propiedad de visualización de fuentes especificada, la agregaremos.

La combinación de estas optimizaciones disminuirá el tiempo de bloqueo de renderizado y aumentará la velocidad de carga de tu sitio web.

Eliminar cadenas de consulta de los recursos estáticos

La funcionalidad estándar del script de carga de WordPress es añadir una versión del código que se carga. Quitar esos parámetros de versión mejora la posibilidad de almacenar en cache tu web tanto en la CDN como en el navegador de tus visitantes.

Ten en cuenta que eliminar las cadenas de consulta no evitará que estos recursos sean cargados de nuevo una vez hagas cambios, así que no deberías preocuparte.

Desactivar emojis

Por defecto, WordPress cargará scripts para detectar y generar emojis automáticamente en tu contenido. Desactivar esta opción evitará que los cargue, ahorrando tiempo de carga. Ten en cuenta que la mayoría de los navegadores modernos convertirán igualmente los símbolos más comunes como ; ) a un emoji de forma automática.

Comparte este artículo