WordPress viene con un sistema de comentarios predeterminado que puede usar para realizar debates interactivos en su blog. Tiene la opción de habilitar o deshabilitar los comentarios en todo el sitio, así como para publicaciones de blog individuales. Cuando tiene una gran cantidad de comentarios en las publicaciones, los usuarios deben desplazarse por toda la sección de comentarios antes de llegar al pie de página. En este artículo, explicaremos cómo cargar comentarios en WordPress de manera perezosa para que solo los cargue cuando sea necesario.
Lazy loading de comentarios
Lazy loading es la función para cargar contenido solo cuando hay interacción con un usuario. Aunque los usuarios de WordPress utilizan principalmente la carga diferida de imágenes, también puede utilizar esta función para los comentarios. Estas son algunas de las razones por las que debería cargar comentarios perezosamente en el sitio de WordPress.
- Los comentarios solo están disponibles en la parte inferior de las publicaciones de su blog y, por lo tanto, no es necesario cargarlos durante la carga inicial de la página.
- La larga lista de comentarios aumentará los elementos DOM, lo que afectará la velocidad de carga de las páginas de su sitio.
- El formulario de comentarios puede interrumpir la experiencia del usuario en su sitio cuando no quieren dejar comentarios.
- La larga lista de comentarios ocupará mucho espacio en los dispositivos móviles, lo que se puede evitar.
- De forma predeterminada, los comentarios mostrarán imágenes de gravatar y la mayoría de los temas no alinearán correctamente la sección de comentarios si deshabilita gravatar desde la configuración. Debido a que las imágenes gravatar se cargan desde un sitio web de terceros, esto afectará la velocidad de su sitio.
En resumen, ocultar y cargar un formulario de comentarios cuando sea necesario mejorará el tiempo de carga de la página y la experiencia del usuario. Dado que estos son factores de clasificación en el algoritmo de búsqueda de Google, puede mejorar su clasificación cargando comentarios de forma perezosa.
Opciones predeterminadas para interrumpir la sección de comentarios
WordPress ofrece varias configuraciones predeterminadas en la sección "Configuración> Discusión" para la gestión de comentarios. Por ejemplo, puede establecer el número máximo de comentarios que se muestran en una publicación de blog. Esto creará comentarios en la página cuando el número de comentarios exceda el límite establecido. Sin embargo, esto no mejora mucho la velocidad, ya que el formulario de comentarios se cargará durante la carga inicial de la página.
Para las imágenes gravatar, puede usar funciones de carga diferida con complementos como WP Rocket o Perfmatters. Además, la mayoría de los complementos gratuitos de almacenamiento en caché y optimización ofrecen una función de carga diferida de imágenes que puede usar para cargar imágenes gravatar de forma diferida. .
Lazy loading de comentarios en WordPress
Los comentarios de carga diferida pueden resolver muchos problemas de velocidad, incluida la carga diferida de imágenes gravatar. Para hacer esto, debe usar el complemento Lazy Load Comments y seleccionar el método. Una vez que esté en la sección del panel de control de WordPress, vaya al área "Complementos> Agregar nuevo". Busque "carga diferida de comentarios" y desplácese hacia abajo para encontrar Complemento Lazy Load para comentarios.
Haga clic en el botón "Instalar ahora" y luego en el botón "Activar" para comenzar a usar el complemento en su sitio.
Personaliza las opciones de carga de comentarios diferidos
El complemento ofrece una configuración simple para decidir cómo desea cargar perezosamente la sección de comentarios. Vaya a la sección "Configuración> Discusión" y desplácese hacia abajo hasta la parte inferior. Justo encima de la sección "Avatares" puedes encontrar una nueva opción para "Lazy uploading comments".
Haga clic en el menú desplegable junto a "Comentarios de Lazy Boot" para encontrar las tres opciones disponibles.
- en el pergamino - Comentarios de carga diferida al desplazarse cuando el usuario llega a la sección de comentarios de la página. Esta es la opción predeterminada y funciona de manera similar a la carga diferida de una imagen.
- Cuando se hace clic - esto mostrará el botón "Cargar comentarios", los usuarios pueden hacer clic él para revelar las secciones de comentarios y formularios.
- Sin carga perezosa - Esto deshabilitará la función de inicio diferido, así que no seleccione esta opción.
Le recomendamos que seleccione la opción "Hacer clic" para mostrar un botón que puede ayudar de dos maneras. Primero, solo los usuarios interesados que quieran dejar o leer comentarios harán clic en el botón. En segundo lugar, puede ahorrar espacio ocultando comentarios y formularios, lo que puede mejorar la experiencia del usuario móvil. Después de seleccionar la opción, desplácese hacia abajo y haga clic en el botón "Guardar cambios" para aplicar la configuración de su sitio.
Probando tu sitio
Le recomendamos que pruebe el botón de carga diferida en su sitio o etapa de prueba. Esto se debe a que la apariencia del botón depende del estilo de su tema y la mayoría de los temas no admiten el estilo correctamente. A continuación se muestra cómo se verá el botón "Cargar comentarios" en el tema predeterminado de WordPress de veintidós. Al hacer clic en el botón, verá una carga giratoria y luego aparecerá la sección de comentarios.
Así es como se ve el botón en uno de los temas de terceros que probamos. Simplemente aparece como texto sin visibilidad clara.
Si su tema no muestra correctamente el botón Cargar comentarios, deberá ajustar los detalles de relleno y el cuadro de CSS personalizado. El complemento utiliza el identificador de clase CSS llc_comments_button para el botón Por ejemplo, a continuación se muestra el código CSS que usamos para alinear el botón en el tema de raza.
#llc_comments_button {
padding: 15px;
margin: 100px;
border-radius: 5px;
font-size: 18px;
background: rgb(255 241 118);
}Puede verificar el código fuente usando la opción de verificación en su navegador y ajustar el relleno, el margen, el radio del borde y otros parámetros del sitio en vivo.
Si desea cambiar el fondo del botón mientras mantiene presionado el cursor, use el siguiente CSS. Debido a que usamos la opción de fondo amarillo del botón predeterminado en el CSS anterior, aquí usamos blanco para mostrar cuando se mantiene presionado el cursor. Esto se combina con el color negro del texto para que los usuarios puedan ver claramente el botón y leer el texto.
#llc_comments_button:hover {
background: rgb(255 255 255);
}Cuando su CSS esté listo, vaya al panel de control de WordPress y vaya a la sección "Apariencia> Personalización". Pegue el código CSS en la sección "CSS avanzado" y haga clic en el botón "Publicar".
Tenga en cuenta que la herramienta de personalización no reflejará el botón, ya que la carga diferida solo funcionará en el sitio en vivo.
Problemas con el enlace de comentarios
Muchos temas muestran un enlace de "Comentarios" como metadatos de la publicación debajo del título de la publicación. Cuando cargue comentarios de forma perezosa, este enlace de comentarios no funcionará, ya que no habrá una sección de comentarios cargada cuando se encuentre en la sección de título de la publicación.
Desafortunadamente, la única opción aquí es deshabilitar el metaenlace de comentarios. Temas ligeros populares como Astra, GeneratePress y Kadence ofrecen la opción de cambiar los metadatos que desea mostrar debajo del título. Sin embargo, si su tema no ofrece esta función, es posible que deba usar CSS para ocultar el enlace. Como se explicó anteriormente, puede hacer clic derecho en el enlace y usar la opción de verificación para encontrar la clase CSS correspondiente en la sección de herramientas para desarrolladores. Una vez que tenga la clase CSS para los metadatos de comentarios, agregue el siguiente CSS en la pestaña Apariencia> Personalización> CSS avanzado para ocultar el enlace.
.my_comments_meta {
display: none;
}Si es necesario, busque ayuda del desarrollador de su tema sobre cómo ocultar el metaenlace.
Lazy loading Configurar comentarios de terceros
Algunos propietarios de sitios usan comentarios de Facebook o Disqus en lugar del formulario de comentarios estándar de WordPress. Si bien esto ayuda a reducir el spam de los comentarios, afectará drásticamente la velocidad al enviar una solicitud HTTP adicional para cargar comentarios de sitios de terceros. Si usa comentarios en Facebook o Disqus, puede cargarlos perezosamente usando varios complementos. Puedes usar Complemento para comentarios sociales perezosos para facebook y Complemento de carga condicional de Disqus para Disqus.
Estos complementos también son del mismo autor, pero ofrecen una gran cantidad de configuraciones personalizadas. Para cargar comentarios de forma perezosa en Facebook, después de instalar el complemento, vaya a la sección "Configuración> Comentarios perezosos en FB". Complete los detalles de la identificación de la aplicación, la cantidad de comentarios para mostrar, seleccione un esquema de color y seleccione la opción de clic. También puede agregar "Comentarios de clase div" para envolver el botón en un elemento div, que puede personalizar con CSS adicional, como se explicó anteriormente.
El complemento condicional de Disqus necesita una integración completa de Disqus antes de que pueda arrancar con pereza. Creará un elemento de menú adicional en la barra lateral del tablero llamado "Disqus". Puede navegar a través de diferentes secciones y personalizar la configuración para cargar lentamente los comentarios de Disqus.
Deja una respuesta