¿Cómo aprovechar el almacenamiento en caché del navegador en WordPress?

En este tutorial, aprenderemos cómo aprovechar el almacenamiento en caché del navegador en WordPress para acelerar su sitio.

Hay varias formas de acelerar los sitios web de WordPress en general, sin embargo, durante el análisis de optimización de la velocidad del sitio web, el almacenamiento en caché del navegador es el problema que se descubre con más frecuencia.

Puede usar una variedad de herramientas de Internet, incluidas Google PageSpeed ​​Insights, GTMetrix y Pingdom, para rastrear y probar la velocidad de su sitio web. Le brindan resultados precisos y le muestran dónde necesita trabajar su sitio web. Es posible que haya visto la advertencia "Aprovechar el almacenamiento en caché del navegador" al evaluar la velocidad del sitio.

También puede leer: Servir activos estáticos con una política de caché eficiente

¿Qué es aprovechar el almacenamiento en caché del navegador?

El almacenamiento en caché es el período de tiempo que los navegadores mantienen los recursos almacenables en caché de un sitio web en sus sistemas locales.

Imágenes, JavaScript, CSS y otros recursos se encuentran entre ellos. Los materiales almacenables en caché que se guardan en su máquina se vuelven a cargar cada vez que alguien ve el sitio web. Por lo tanto, hay un aumento notable en la velocidad de carga del sitio web. La gente desea usar el almacenamiento en caché del navegador en WordPress por este motivo.

¿Cómo funciona aprovechar el almacenamiento en caché del navegador en WordPress?

Hay numerosos procesos que se ejecutan en segundo plano cada vez que un usuario ingresa a un determinado dominio.

Su sitio web de WordPress se hace visible por todo lo que se comunica al navegador del usuario. Estos elementos del sitio web incluyen secuencias de comandos, gráficos, hojas de estilo, contenido y más. Cuando sea necesario, deberán transferirse desde el servidor del sitio web al navegador del usuario. Los siguientes son los pasos en este proceso:

1. Se ingresa una URL en el navegador del visitante.
2. El navegador realiza una solicitud al servidor que aloja su sitio web (la solicitud HTTP).
3. El usuario recibe los datos después de que el servidor los haya ensamblado. Los usuarios comienzan a experimentar una desaceleración en este punto. Las personas pueden minimizar el tamaño de los guiones, optimizar el tamaño de las imágenes y otras medidas para detener esta lentitud.
4. El navegador ahora puede finalmente mostrar el sitio web después de que se hayan transferido los datos. Cuando los usuarios acceden a diferentes páginas, se repite el procedimiento. El bajo rendimiento puede deberse a que el servidor recibe una gran cantidad de solicitudes a la vez. Por lo tanto, las personas deben optimizar sus sitios web para mantener su velocidad.

Tanto los navegadores web como los programas de software utilizan contenido en caché. Se guarda momentáneamente en su disco local. El término "caché web" o "caché HTTP" se refiere a estos datos. El navegador cargará los datos de su computadora y descargará el contenido del sitio web cada vez que visite el mismo sitio web.

Debe usar una herramienta particular para determinar si su sitio web de WordPress utiliza efectivamente el almacenamiento en caché del navegador.

Diferencia entre el almacenamiento en caché del navegador y el almacenamiento en caché del servidor

Para reducir la carga y la latencia en los servidores web, el almacenamiento en caché web del lado del servidor (para el almacenamiento en caché del lado del servidor, siempre recomendamos LiteSpeed ​​Cache para WordPress) a menudo implica el uso de un proxy web que almacena las respuestas web de los servidores web frente a los que se encuentra. El almacenamiento en caché web en el lado del cliente también puede incluir el almacenamiento en caché basado en navegador, que guarda una copia en caché del contenido web al que se accedió previamente.

Este procedimiento implica el uso del servidor web para producir páginas web almacenadas en caché para su sitio web. Las acciones antes mencionadas son un ejemplo de almacenamiento en caché de páginas web, que es principalmente del lado del servidor.

Puede mejorar el sistema de almacenamiento en caché del servidor de diferentes maneras. La mejor opción sería actualizar los encabezados de Apache. La siguiente etapa sería usar complementos de WordPress, y luego se agregaría el CDN.

Método 1: aprovechar manualmente el almacenamiento en caché del navegador en WordPress

Nota: este método solo funciona con LiteSpeed ​​Enterprise o Apache.

Al incluir algún código en el archivo .htaccess, puede aprovechar manualmente el almacenamiento en caché del navegador en WordPress. Para tres objetivos distintos, en realidad necesita agregar tres bits de código:

1. Agregar encabezados de caducidad
2. Agregar encabezados de control de caché
3. Desactivar etiquetas electrónicas

Debe tener acceso a los archivos de su sitio web para agregar este código, lo que puede lograr iniciando sesión en su cuenta de alojamiento o CyberPanel.

Vaya a su tablero de CyberPanel

Haga clic en WordPress -> Listar WordPress en el menú del lado izquierdo

Entrarás en la Lista de sitios web de WordPress . Desde aquí, haga clic en el título de su sitio de WordPress

Este es su CyberPanel WordPress Manager . Haga clic en Administrador de archivos.

En public_html , encontrará . archivo htaccess . Tenga en cuenta que las reglas de htaccess solo son compatibles con LiteSpeed ​​Enterprise. No es compatible con OpenLite Speed. Haga clic derecho sobre él y haga clic en CodeMirror

Agrega el siguiente código al final del . htaccess del contenido del archivo copiándolo y pegándolo. No modifique el archivo de ninguna otra manera.

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

El código antes mencionado le indica al navegador que entregue una copia en caché de los recursos estáticos en lugar de descargar uno nuevo.

Los tiempos de actualización/caducidad también se incluyen en la configuración:

HTML toma 600 segundos.
JavaScript y CSS durante un mes
Para imágenes, un año

Los visitantes no tendrán que descargar recursos particulares con demasiada frecuencia gracias a sus fechas de vencimiento. Si es necesario, puede cambiar rápidamente los tiempos de caducidad.

Para establecer políticas de almacenamiento en caché del navegador sobre cómo se almacena en caché un recurso, dónde se almacena en caché y la edad máxima antes de caducar, debemos incluir encabezados de control de caché. No necesitamos repetir los tiempos de vencimiento como ya los mencionamos anteriormente.

el siguiente código, luego pégalo:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

Las etiquetas electrónicas se deshabilitarán para que los navegadores deban usar encabezados de vencimiento y control de caché en lugar de verificar archivos. Aquí está la clave:

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Una vez que haya terminado, haga clic en Guardar .

Método 2: Aproveche el almacenamiento en caché del navegador en WordPress usando complementos

Un solo error puede arruinar por completo su sitio web, por lo tanto, editar el archivo.htaccess puede ser bastante peligroso. Por lo tanto, puede usar complementos como W3 Total Cache si no quiere correr riesgos innecesarios.

Complemento de caché total de W3

Aquí se explica cómo usar W3 Total Cache, uno de los mejores complementos para este propósito, para aprovechar el almacenamiento en caché del navegador.

Ingresa a tu Panel de WordPress

Haga clic en Complementos -> Agregar nuevo en el menú del lado izquierdo

Busque la memoria caché W3 Total . Ahora instale y active este complemento

La pestaña Rendimiento aparecerá en el menú del lado izquierdo. Haga clic en Rendimiento -> Configuración general en el menú del lado izquierdo

Desplácese hacia abajo hasta Caché del navegador y asegúrese de que esté habilitado y guarde los cambios.

Ahora haga clic en Rendimiento -> Caché del navegador en el menú del lado izquierdo

Asegúrate de eso

1. Establecer encabezado de caducidad
2. Establecer control de caché
3. Establecer etiqueta de entidad

están habilitados. Guarde todos los cambios.

Complemento de caché LiteSpeed

CyberPanel proporciona a cada usuario LiteSpeed ​​Cache de forma predeterminada con cada implementación del sitio de WordPress. Si no está utilizando CyberPanel, puede descargarlo desde aquí.

Simplemente activando la función, el complemento de almacenamiento en caché LiteSpeed ​​Cache le permite explotar el almacenamiento en caché del navegador.

Entra en tu Panel de WordPress

Haga clic en LiteSpeed ​​Cache -> Cache en el menú del lado izquierdo

Haga clic en la pestaña Navegador en la barra superior

Asegúrese de que la memoria caché del navegador esté habilitada y haga clic en Guardar cambios

Conclusión

Recuerde que a veces, después de instalar un complemento, no notará los cambios que realiza de inmediato. El archivo CSS/Stylesheet es el culpable de este retraso. No podrá ver los cambios que ha realizado debido al caché del navegador que ya guardó en su máquina. Se recomienda utilizar la función de incógnito de su navegador para ver el sitio web a fin de verlo correctamente después de múltiples modificaciones. No consumirá recursos de caché si usa esta función, y debería poder notar claramente los cambios.

El enfoque que seleccione para aprovechar el almacenamiento en caché del navegador es, en última instancia, irrelevante. Observarlo en acción es lo único que cuenta. El método que utilizó para llegar allí es irrelevante siempre que Aproveche el almacenamiento en caché del navegador en las funciones de WordPress según lo previsto. No hay un enfoque correcto o incorrecto; el resultado será el mismo independientemente de su elección. Aprovechar el almacenamiento en caché del navegador mejorará los tiempos de carga, ya sea que decida realizar cambios en el archivo .htaccess o emplear un complemento.