¿Su sitio web tarda en cargarse? La velocidad de la página es un aspecto importante de la experiencia del usuario. El tiempo que tarda la página solicitada en cargarse en el navegador de su usuario afecta enormemente si permanece en su sitio, por ejemplo, para completar una venta.
El tiempo de carga de la página depende de muchos factores: el almacenamiento en caché del navegador es uno de ellos. En este tutorial, discutiremos cómo corregir el ‘aprovechamiento del almacenamiento en caché del navegador’ en WordPress, que es un conocido consejo de optimización del rendimiento recomendado por muchas herramientas de análisis de velocidad de página.
Primero, exploraremos qué es el almacenamiento en caché del navegador y cómo puede ayudar a acelerar su sitio web. Luego, cubriremos cómo evaluar si un sitio de WordPress necesita almacenamiento en caché del navegador. Finalmente, veremos diferentes formas de arreglar el apalancamiento del almacenamiento en caché del navegador en WordPress, con y sin el uso de un complemento.
¿Qué es el almacenamiento en caché del navegador?
Un caché es un espacio de almacenamiento temporal. Cuando un visitante solicita una página en su sitio web, su servidor recopila la información necesaria de la base de datos, la organiza en un documento HTML y la envía al navegador. El navegador analiza este documento y descarga todos los recursos relevantes para mostrar la página.
El almacenamiento en caché es el proceso de almacenar una parte de la carga útil de la página en un caché para que la página posterior se cargue más rápido. Un caché puede estar presente en el servidor o en el dispositivo del visitante.
En la caché del servidor, puede almacenar los resultados de las consultas de la base de datos y / o la respuesta HTML estática para la página solicitada.
El almacenamiento en caché del navegador es el proceso de utilizar el almacenamiento temporal en el dispositivo del visitante para almacenar recursos como hojas de estilo, scripts e imágenes durante un período de tiempo específico.
Las visitas posteriores a una página hacen que el navegador descargue los mismos recursos una y otra vez, cada vez que el usuario solicita la página. Dado que estos recursos estáticos constituyen una cantidad significativa de la carga útil de un sitio de WordPress, el almacenamiento en caché del navegador reduce los tiempos de carga de la página.
¿Necesita almacenamiento en caché del navegador?
Una auditoría del sitio web sobre la distribución del tamaño de los recursos de su carga útil generalmente revela qué tan grandes son sus recursos y cuántas solicitudes debe enviar un navegador para descargarlos antes de mostrar su página. Si ve que una parte importante de su página web consta de archivos estáticos, debe explorar el almacenamiento en caché del navegador para mejorar la velocidad de la página.
Una forma más sencilla de determinar si necesita almacenamiento en caché del navegador es utilizar una herramienta de prueba de velocidad de página como GTmetrix. Simplemente ingrese la URL de su sitio web para comenzar una prueba detallada. Los resultados de la prueba le mostrarán cómo puede acelerar su sitio web. Como puede notar, una recomendación común en la sección de resultados es aprovechar el almacenamiento en caché del navegador.
Alternativamente, puede usar Piensa con Google, una herramienta de prueba de velocidad de página móvil para evaluar su sitio web en dispositivos móviles. Una recomendación clave de esta herramienta es aprovechar el almacenamiento en caché del navegador para su sitio web.
PageSpeed Insights, otra herramienta de Google para probar la velocidad de la página de su sitio web, puede sugerirle que cree una política de caché eficaz para mejorar la velocidad de la página. El almacenamiento en caché del navegador forma una parte importante de una política de caché eficaz.
Arregle el aprovechamiento del almacenamiento en caché del navegador en WordPress sin un complemento
Si no desea utilizar un complemento, puede modificar la configuración de su servidor web para aprovechar el almacenamiento en caché del navegador. Si lo hace, su servidor web le indicará al navegador del visitante que guarde ciertos recursos en la caché del navegador. El navegador almacenará estos archivos localmente durante un período de tiempo específico y los utilizará durante las visitas posteriores a la página.
El proceso de configuración de su servidor web para indicar a los navegadores de sus visitantes que comiencen a almacenar en caché varía de un servidor a otro. En esta publicación, cubriremos cómo habilitar el almacenamiento en caché del navegador en los dos servidores web más populares, Apache y Nginx.
Puede corregir el apalancamiento del almacenamiento en caché del navegador siguiendo estos pasos:
- Agregar encabezados Expires: estos encabezados le indican al navegador cuándo solicitar una nueva versión de un recurso del servidor.
- Modificación de los encabezados de Cache-Control: puede utilizar estos encabezados para configurar sus políticas relacionadas con el caché.
- Configuración de encabezados de etiquetas de entidad (ETags): puede identificar si un recurso en su servidor ha cambiado en comparación con el archivo local.
Arreglar el aprovechamiento del almacenamiento en caché del navegador en Apache
1. Cree o busque el archivo .htaccess
En un servidor Apache, puede establecer todos los parámetros necesarios en el archivo .htaccess. Estos archivos le permiten configurar los ajustes de Apache manualmente. Son archivos de texto sin formato que almacenan parámetros de Apache y establecen permisos y configuraciones para el directorio en el que residen.
Si coloca un archivo .htaccess en el directorio raíz de su sitio web, se aplicará a todas las páginas de su sitio web. También puede colocar otro archivo .htaccess en uno de sus subdirectorios para establecer permisos específicos solo para esa ubicación. Tenga en cuenta que los archivos .htaccess de nivel inferior anulan la configuración de los archivos .htaccess en los directorios principales.
Si tiene acceso de terminal a su servidor, puede iniciar sesión de forma remota para crear un archivo .htaccess en la ubicación adecuada (para las reglas de almacenamiento en caché del navegador a nivel de sitio, esta debería ser su carpeta raíz).
Alternativamente, si usa el administrador de archivos en cPanel, navegue hasta la ubicación requerida y cree un archivo .htaccess.
Si ya tiene un archivo .htaccess, simplemente puede agregarle las nuevas reglas de almacenamiento en caché del navegador.
2. Agregar encabezados de caducidad
La primera configuración en el archivo .htaccess es habilitar el Caduca los encabezados característica. Agregue la siguiente línea al archivo:
ExpiresActive On
A continuación, puede establecer el tiempo para diferentes tipos de archivos de texto utilizando la sintaxis que se muestra a continuación:
ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month"
Para establecer un tiempo de caducidad para las imágenes, utilice el image
escriba en lugar de text
seguido de una barra y la extensión de la imagen.
ExpiresByType image/jpeg "access 1 month" ExpiresByType image/svg "access 1 month"
Para establecer el tiempo de caducidad de las aplicaciones, utilice el application
tipo de archivo y especifique la extensión del archivo.
ExpiresByType application/pdf "access 1 month"
Para cubrir cualquier otro archivo que no haya sido cubierto por ninguna configuración específica, use el ExpiresDefault
palabra clave:
ExpiresDefault "access 1 month"
3. Definir una política de caché
A continuación, debe definir su política de caché mediante la configuración de Cache-Control.
Hay tres partes principales de una política de caché:
- cómo se almacena en caché un recurso
- la ubicación del almacenamiento en caché
- la edad del recurso antes de que caduque
Una caché pública indica al navegador que los recursos se pueden almacenar en caché en cualquier lugar, mientras que una caché privada permite el almacenamiento solo en el dispositivo del cliente.
Por ejemplo, la página de perfil de un usuario que inició sesión debe almacenarse en caché solo en el dispositivo del cliente.
Por otro lado, la página de inicio de un blog también se puede almacenar en caché en un CDN. Puede establecer una política de caché pública agregando la siguiente regla:
<IfModule mod_headers.c> Header set Cache-Control "public" </IfModule>
También puede especificar diferentes políticas para diferentes tipos de archivos agregando los siguientes filtros al módulo de encabezados:
<ifModule mod_headers.c> <filesMatch ".(ico|jpeg|jpg|png)$"> Header set Cache-Control "public" </filesMatch> <filesMatch ".(php)$"> Header set Cache-Control "private" </filesMatch> </ifModule>
El código anterior especifica que el navegador puede almacenar archivos de imagen en cualquier lugar, pero los archivos PHP deben almacenarse en el dispositivo del cliente.
También puede agregar una configuración de Caducidad a cada filesMatch
regla. Debe definir el tiempo de caducidad en segundos. Por ejemplo, establecerlo en cero requiere que el navegador solicite el archivo cada vez que se carga la página:
Header set Expires 0
4. Deshabilite las etiquetas de entidad en Apache
Finalmente, necesitas deshabilitar etiquetas de entidad usando el siguiente código:
FileETag None
La desactivación de ETag obliga al navegador a confiar en su política de caché y evitar la revalidación de archivos cada vez que se carga una página.
Guarde el archivo .htaccess y reinicie Apache para que los cambios surtan efecto.
Arreglar el apalancamiento del almacenamiento en caché del navegador en Nginx
En Nginx, puede encontrar el archivo de configuración nginx.conf en la ubicación / etc / nginx / sites-enabled / default.
Puede agregar un encabezado Expires a tipos de archivos específicos usando el siguiente código:
location ~* .(ico|jpeg|jpg|png)$ { expires 30d; }
También puede agregar un encabezado Cache-Control al mismo bloque de código:
location ~* .(ico|jpeg|jpg|png)$ { expires 30d; add_header Cache-Control "public"; }
Guarde el archivo de configuración y reinicie Nginx para que los cambios surtan efecto.
Arregle el apalancamiento del almacenamiento en caché del navegador con un complemento
Si está utilizando un complemento de almacenamiento en caché de WordPress, es posible que ya sea compatible con el almacenamiento en caché del navegador.
Exploremos ahora cómo solucionar el apalancamiento del almacenamiento en caché del navegador con algunos complementos de almacenamiento en caché populares.
1. Caché de LiteSpeed
Caché de LiteSpeed es un complemento de almacenamiento en caché que le permite arreglar el almacenamiento en caché del navegador de apalancamiento simplemente habilitando la función. Instale y active el complemento y diríjase a la configuración de la caché. Navega al Navegador pestaña y habilitar la Caché de navegador opción.
Además, puede establecer el tiempo de vencimiento. Sin embargo, tenga en cuenta que esta configuración se aplicará a todos los archivos almacenados en caché en su sitio web.
2. Caché más rápido de WP
Caché más rápido de WP es otro complemento de almacenamiento en caché para WordPress con opciones de personalización simples. Su versión gratuita le permite habilitar el almacenamiento en caché del navegador. Vaya a la página de configuración y marque la casilla de verificación para el almacenamiento en caché del navegador, como se muestra arriba.
3. Caché total de W3
Caché total de W3 también es un popular complemento de almacenamiento en caché de WordPress. Le permite personalizar una buena variedad de opciones de almacenamiento en caché. Una vez que lo haya instalado, diríjase al Caché de navegador sección en la página de configuración.
Este complemento le permite establecer permisos para varias categorías de archivos, como imágenes, scripts y hojas de estilo. Para cada categoría, puede establecer encabezados de Expires, Expires lifetimes y ETags.
Terminando
En este tutorial, exploramos la importancia de la velocidad de la página y por qué es posible que desee corregir el aprovechamiento del almacenamiento en caché del navegador en WordPress.
Cubrimos las herramientas de evaluación de la velocidad de la página que le indican si su sitio de WordPress necesita almacenamiento en caché del navegador. A continuación, discutimos cómo puede configurar su servidor web para habilitar el almacenamiento en caché del navegador sin usar un complemento. Finalmente, analizamos tres complementos populares que le permiten corregir el aprovechamiento del almacenamiento en caché del navegador en WordPress.
¿Alguna pregunta sobre cómo solucionar el apalancamiento del almacenamiento en caché del navegador en WordPress? Si es así, pregunte en los comentarios a continuación.