Acelere su tienda Magento: aproveche el almacenamiento en caché del navegador

Desde julio de 2018, la velocidad de carga de la página es un factor de clasificación para los motores de búsqueda. Esto significa que las tiendas Magento bien optimizadas se clasifican mejor y tienen más posibilidades de obtener un mayor tráfico y, como resultado, más clientes. Ya hemos escrito sobre la optimización de la velocidad de Magento 1 y Magento 2 en nuestra guía para principiantes . Y hoy hablaremos más sobre el almacenamiento en caché del navegador.

Haga clic aquí para acelerar su sitio!

Resumen del artículo [ ocultar ]

  • ¿Qué es un almacenamiento en caché del navegador en Magento?
  • ¿Cómo verificar si ya usa caché en su tienda Magento?
  • #1. Aproveche el almacenamiento en caché del navegador para NGINX
  • #2. Aproveche el almacenamiento en caché del navegador para Apache
  • ¿Qué configuraciones serán relevantes para su caché?
  • ¿Has leído sobre las técnicas de optimización de JS?
  • Solución de paquete Amasty para la optimización de su tienda Magento
    • Optimizador de velocidad de página de Google
    • Calentador de caché de página completa

¿Qué es un almacenamiento en caché del navegador en Magento?

Cach es la información sobre su sitio web, que se puede almacenar en el navegador de un usuario. Esto incluye todos los archivos HTML, CSS, JavaScript e imágenes. Puede aprovechar esto para aumentar la velocidad de su sitio web.

Dependiendo de su servidor, hay dos formas diferentes de aprovechar el almacenamiento en caché del navegador en Magento 2.

¿Cómo verificar si ya usa caché en su tienda Magento?

Consideremos el ejemplo de cómo puede verificar fácilmente si ya usa el caché en Google Chrome.

Paso 1:  Abra su navegador y vaya a su sitio web, luego presione F12 (o Fn+F12 para computadoras portátiles).

Chrome DevTools se abrirá en el lado derecho de la página:

Elija la pestaña Red y vuelva a cargar la página.

Paso 2:  Ahora debe elegir el archivo JS/CSS/jpg/jpeg/png/gif .

Verá una sección de Encabezados de respuesta en la pestaña Encabezados :

En nuestro ejemplo, vemos la configuración de una edad máxima en la línea de control de caché y en la línea de expiración está la siguiente información: Thu, 25 Jun 2020 13:29:23 GMT . Esto significa que este archivo se almacenará en el caché durante un año.

La edad máxima es la cantidad máxima de tiempo en segundos que la memoria caché se puede usar nuevamente desde la última visita. Por ejemplo, «max-age=315360000» indica que el sitio web recomienda mantener este archivo JS en la memoria caché del navegador durante los próximos 10 años.

Pero si no tiene ninguna configuración de caché, se ve así:

En ese caso, debe aprovechar el almacenamiento en caché del navegador.

#1. Aproveche el almacenamiento en caché del navegador para NGINX

Paso 1: inicie sesión en el servidor a través de SSH para implementar el almacenamiento en caché de su navegador en NGINX. Luego emita el siguiente comando:

cd /etc/nginx/sites-disponible

nano TU_SITIO.conf

Paso 2: Pegue el siguiente código en el bloque del servidor:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. #caché del navegador de activos estáticos
  2. ubicación ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
  3. expira 7d;
  4. }

Paso 3: Guarde los cambios y salga. Luego, vuelva a cargar la configuración de NGINX con el siguiente comando:  service nginx reload

Paso 4: asegúrese de que todo esté bien recargando la interfaz. ¡Y listo!

Además, puede personalizar estos ajustes. En el ejemplo, tenemos un caché general de siete días para todos los activos. Pero puede establecer cualquier otro período de tiempo o dejar solo algunos tipos de activos. Por lo tanto, puede crear su opción de directiva, por ejemplo:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. #caché del navegador de activos estáticos
  2. ubicación ~* .(jpg|jpeg|png|gif|ico)$ {
  3. expira 7d;
  4. }
  5.  
  6. # almacenamiento en caché del navegador de css y js
  7. ubicación ~* .(css|js)$ {
  8. expira 14d;
  9. }

No hay límites para las opciones de personalización.

#2. Aproveche el almacenamiento en caché del navegador para Apache

Puede agregar el almacenamiento en caché del navegador a su sitio web Magento 2 con .htaccess de dos maneras diferentes: a través de mod_expires o a través de mod_headers . Debe establecer la fecha en que se debe actualizar el caché.

Simplemente coloque este código en el .htaccess ubicado en su carpeta public_html . Edite este archivo y guárdelo:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. # Aproveche el almacenamiento en caché del navegador usando mod_expires #
  2. <IfModule mod_expires.c>
  3. ExpiresActive On
  4. ExpiresByType image/jpg «acceso más 1 año»
  5. ExpiresByType image/jpeg «acceso más 1 año»
  6. ExpiresByType image/gif «acceso más 1 año»
  7. ExpiresByType image/png «acceso más 1 año»
  8. ExpiresByType text/css «acceso más 1 mes»
  9. Aplicación ExpiresByType/pdf «acceso más 1 mes»
  10. ExpiresByType text/x-javascript «acceso más 1 mes»
  11. Aplicación ExpiresByType/x-shockwave-flash «acceso más 1 mes»
  12. ExpiresByType image/x-icon «acceso más 1 año»
  13. ExpiresDefault «acceso más 2 días»
  14. </IfModule>
  15. # Fin de aprovechar el almacenamiento en caché del navegador usando mod_expires #

Con este código, su sitio actualizará la información sobre sus archivos jpg, jpeg, gif, png cada año, y los archivos pdf, javascript y flash se actualizarán cada mes. Por supuesto, puede cambiar esta configuración y personalizarla para su tienda.

Pero si tiene un servidor compartido y no tiene acceso a Mod_Expires , puede usar Mod_headers para aprovechar el almacenamiento en caché del navegador. Por favor, aplica este código:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. # Aproveche el almacenamiento en caché del navegador usando mod_headers #
  2. <IfModule mod_headers.c>
  3. <FilesMatch «.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$»>
  4. El conjunto de encabezados caduca «miércoles, 15 de abril de 2020 20:00:00 GMT»
  5. Encabezado establecido Cache-Control «público»
  6. </FilesMatch>
  7. </IfModule>
  8. # Fin de aprovechar el almacenamiento en caché del navegador usando mod_headers #

¿Qué configuraciones serán relevantes para su caché?

En primer lugar, debe comprender con qué frecuencia actualiza su sitio web. Por lo general, debe mantener el caché de un mes a un año. Las imágenes tardan mucho en cargarse y rara vez se actualizan, por lo que puede dejarlas en un caché durante mucho tiempo, elija la configuración como «acceso más un año» . Y CSS, HTML y Javascript generalmente se actualizan con más frecuencia, por lo que puede configurar actualizaciones mensuales para ellos.

¿Has leído sobre las técnicas de optimización de JS?

Déjanos tu email y te enviaremos una guía completa en el momento, ¡nada de spam!

Solución de paquete Amasty para la optimización de su tienda Magento

Si está buscando una solución simple y efectiva para aprovechar el almacenamiento en caché del navegador, podemos ofrecerle un paquete de 2 extensiones. Instálelos juntos y harán que su sitio web sea extremadamente rápido para los motores de búsqueda y para sus usuarios.

Optimizador de velocidad de página de Google

Esta extensión acelera su sitio web al administrar todos los aspectos de la optimización del rendimiento:

  • Optimizar imágenes . Este mod ayuda a disminuir el tamaño de todas las imágenes JPEG, PNG y GIF sin perder calidad.
  • Minimice HTML, CSS, JS y combine archivos CSS y JS . Esto lo ayudará a realizar una descarga rápida y uniforme del caché.
  • Firme archivos estáticos para mostrar siempre la versión actual del diseño de su sitio web.
  • Use tablas planas para acortar la consulta en la base de datos.
  • Use la indexación asíncrona para evitar conflictos entre diferentes operaciones y más.

Google Page Speed ​​Optimizer va para Magento 1 y Magento 2 y tiene ediciones Community y Enterprise. Brindamos 90 días de soporte gratuito y actualizaciones gratuitas de por vida para cada extensión.

Calentador de caché de página completa

Este mod te ayuda a calentar el caché. De hecho, la memoria caché de la tienda se borra por muchas razones, desde las actualizaciones del contenido de la página hasta el vencimiento de la vida útil de la memoria caché. Esta herramienta almacenará en caché oportunamente todas las páginas necesarias y se actualizará automáticamente después de los cambios.

Allí puedes:

  • Priorice las páginas para el calentamiento;
  • Genera colas basadas en las actividades de los clientes;
  • Especifique la fuente de generación de la cola;
  • Excluir páginas ;
  • Programe un tiempo específico para el calentamiento y más.

Esta extensión se adapta a Magento 1 y Magento 2 y tiene ediciones Community y Enterprise. Para todos, ofrecemos 90 días de soporte gratuito y actualizaciones gratuitas de por vida.

Estas extensiones funcionan perfectamente juntas y se complementan entre sí, lo que te ayudará a alcanzar la mejor velocidad de tu sitio web.

Esperamos que esta publicación te haya sido útil. Si todavía tiene preguntas, no dude en hacerlas en los comentarios a continuación.

PD Un agradecimiento especial a Anton Shiroky por la ayuda con esta publicación.

Publicaciones relacionadas:

  1. Métodos de almacenamiento en caché de Magento 2 [Guía para principiantes]
  2. WP-Optimize vs WP Rocket: ¿Cuál es el mejor complemento de almacenamiento en caché?
  3. WP Rocket Review 2023 Su complemento de almacenamiento en caché integral para WordPress
  4. WP Rocket Review 2023 Su complemento de almacenamiento en caché integral para WordPress