Habilite la caché del navegador para Google PageSpeed. Complemento WordPress Super Cache, use el caché del navegador
¡Hola a todos! Hoy quiero contarte cómo almacenar en caché elementos externos en Google PageSpeed Insights para aumentar la velocidad de tu sitio. El objetivo será descargar js y otros archivos descargables desde recursos externos a su sitio web.
Cómo habilitar el almacenamiento en caché de archivos en el navegador
Antes de escribir sobre cómo habilitar el almacenamiento en caché de archivos para su sitio web en el navegador del lado del usuario, quiero explicar qué es un caché.
Cache- almacenar archivos vistos en su computadora, lo que a su vez aumenta la velocidad de carga de la página o sitio al verlo nuevamente. El caché tiene su propia vida útil, después de la cual se actualiza o elimina.
Descubrimos qué es un caché. Ahora, revisemos nuestro sitio en el servicio PageSpeed y asegurémonos de que Google recomienda que usemos el caché del navegador. Aquí hay un extracto del mensaje.
Al especificar la fecha o la fecha de vencimiento de los recursos estáticos en los encabezados HTTP, el navegador cargará los recursos recuperados previamente del disco local en lugar de Internet.
Si estos archivos se encuentran en su recurso, puede escribir el código de almacenamiento en caché del navegador en el archivo htaccess, ubicado en la raíz del sitio. Aquí está el código en sí, por si alguien lo necesita.
# compresión de texto, html, javascript, css, xml:
Al pegar este código en el archivo htacces, puede volver a verificar su sitio en el servicio Google PageSpeed
Perspectivas. Si en la sección " usar caché del navegador"Todo está bien, eso significa que lo tendrás allí.
sólo enlaces a recursos externos, como análisis, redes sociales
botones, etc.
Personalmente, en paralelo con este código, utilizo las capacidades de mi hosting para almacenar en caché archivos en el lado del usuario. Se parece a esto. 
Como puede ver, mi hosting le permite habilitar el almacenamiento en caché en el lado del navegador y establecer el nivel de compresión y el período de almacenamiento de archivos. Además, uso un complemento para cargar páginas rápidamente wp super cache, pero tal vez se lo cuente a mis lectores de alguna manera. suscrito a las actualizaciones del blog.
Cómo habilitar el caché de archivos externo en Google PageSpeed Insights
Si ha seguido las recomendaciones para almacenar archivos en caché en su blog. Sólo deberías ver enlaces a recursos externos en la herramienta Google PageSpeed Insights. Debes tener algo similar. 
Como puede ver en la captura de pantalla, Google PageSpeed Insights apuesta por recursos externos, como las métricas de Yandex, Google Analytics y otros. Ahora le diré cómo corregir este error y hacer que los enlaces a recursos externos sean internos y se almacenen en caché en el lado de su servidor.
Usar la caché del navegador para recursos externos
Dado que los archivos de recursos externos no pertenecen a nuestro sitio, primero deben descargarse. Para descargar archivos externos de recursos de terceros, debemos crear un archivo kesh_js.php con el siguiente código. Le aconsejo que utilice Notepad++ para agregar código a un archivo de forma rápida y correcta.
Para escribir el código que necesitamos. toma y copia este enlace:
descargarJs( ‘pega el enlace de PageSpeed aquí /métricas.js ‘ , ruta real("./ carpeta_js« ) . ‘/ métricas.js- inserte el archivo final aquí') ;
De esta manera puedes agregar muchas consultas. Lo único es no olvidarse de asegurarse de que no tenga archivos duplicados en la carpeta. En este caso, utilice un archivo para varios scripts, normalmente el mismo script, o cámbiele el nombre.
Después de agregar el código al archivo. kesh_js.php, puedes llamarlo de otra manera. Debe subirse a la raíz de nuestro sitio. También en la raíz del sitio, debe crear una carpeta. carpeta_js, o bajo otro nombre con derechos de acceso 777/755. Para establecer derechos de acceso a una carpeta, recomiendo usar Fillizille.
Para hacer esto, simplemente abra el programa Fillizilla. A continuación, seleccione la carpeta y configure los derechos de acceso, asegúrese de ser 777, luego de lo cual lo cambiaremos nuevamente a 755. Esto también se puede hacer en el panel de control de su hosting si no desea utilizar este programa. Te mostraré una captura de pantalla sobre cómo configurar los derechos de acceso en el programa Fillizilla. 
Luego abre la sección “ permisos de archivos" e ingrese nuestro valor 777/755.
Cómo habilitar el programador de tareas para el sitio (cron)
El siguiente paso, necesitamos habilitar el programador de tareas para nuestro sitio para que nuestro script https://dirección de su sitio web/kesh_js.php corrió diariamente. Gracias a esto, nuestro sitio web siempre tendrá una versión actualizada de los archivos de recursos externos. Incluso si los desarrolladores realizan cambios en su código, siempre tendremos una versión funcional en el sitio, gracias al programador de tareas.
Para programar tareas para su sitio web, debe ir al panel de control de su alojamiento e ingresar una de las opciones de código.
ejecutar una tarea a través de GET. Si necesita ejecutar un trabajo cron teniendo en cuenta el contexto del motor:
OBTÉN https://site.ru/script.php
donde site.ru es el nombre de su dominio y script.php es el nombre del archivo con la tarea;
ejecutar un trabajo a través de WGET. Una opción alternativa para ejecutar una tarea cron, teniendo en cuenta el contexto del motor:
Wget -q -O - https://site.ru/script.php> /dev/null 2>&1
donde site.ru es el nombre de su dominio y script.php es el nombre del archivo con la tarea;
En nuestro caso debemos escribir:
OBTÉN https://la dirección de tu sitio web/kesh_js.php
O elige una opción alternativa; yo personalmente elegí la primera.
Hemos descubierto qué registrar, ahora abrimos nuestro hosting y vamos a su panel de control. Yo uso el panel de control de ISPmanager, si tienes uno diferente busca la pestaña del programador de tareas, o cron.
Ahora, abra la pestaña "crear".
Luego limpiamos el caché del navegador. Para Google Chrome, use el atajo de teclado ctrl+shift+delete y verifique el funcionamiento del sitio. También recomiendo volver a ejecutar su sitio a través de la herramienta PageSpeed Insights.
Eso es todo por mi parte, te deseo una buena puntuación gracias a este método de acelerar la página. En el próximo artículo, te diré cómo crear un colorido botón de suscripción de YouTube para tu blog, así que no lo olvides. suscríbete a las actualizaciones. ¡Adiós a todos!
Antes de abrir una página, el navegador necesita descargar todo su contenido (HTML, CSS, Javascript e imágenes). Cargar sitios grandes y difíciles de manejar puede ser una experiencia bastante dolorosa si tienes una conexión a Internet lenta (o estás usando un teléfono móvil). Cada uno de los archivos envía una solicitud separada al servidor, y cuantas más solicitudes reciba al mismo tiempo, más trabajo deberá hacer y más lenta se cargará la página. En este caso, utilice la memoria caché del navegador.
La memoria caché del navegador puede guardar algunos de los archivos del sitio para el usuario. En su primera visita, el tiempo de descarga permanecerá sin cambios, pero en la próxima visita, al actualizar la página o cambiar a otra, algunos de los archivos ya estarán guardados en el navegador. Esto significa que el navegador del usuario necesitará descargar menos datos y realizar menos solicitudes al servidor, reduciendo así el tiempo de carga del sitio.
Antes de comenzar esta guía, necesitará lo siguiente:
- Acceso al archivo .htaccess
Paso 1: editar el archivo .htaccess
El proceso es bastante simple, necesita agregar el siguiente código a su archivo .htaccess (puede encontrar una guía sobre cómo determinar la ubicación de su archivo .htaccess):
EXPIRA EL CACHÉ
Después de guardar los cambios en el archivo .htaccess, su sitio comenzará a usar automáticamente el caché del navegador para almacenar archivos temporales.
Paso 2: comprobar el uso de la caché del navegador
Puede comprobar la exactitud de los cambios realizados utilizando muchas herramientas, como WebPageTest o GTMetrix.
Aquí están los resultados ANTES habilitar el almacenamiento en caché del navegador:
A modo de comparación, aquí están los resultados. DESPUÉS habilitar el almacenamiento en caché del navegador:
Conclusión
En esta guía rápida, aprendió cómo acelerar su sitio web usando la memoria caché de su navegador. Si desea aumentar la velocidad de carga de su sitio, utilice la memoria caché del navegador.
Eric Bidelman
Traducción: Vlad Merzhevich
La accesibilidad sin conexión es cada vez más importante para las aplicaciones web. Sí, todos los navegadores tienen mecanismos de almacenamiento en caché, pero no son confiables y no siempre funcionan como se esperaba. HTML5 elimina algunas de estas molestias con la interfaz ApplicationCache.
El uso de una interfaz de caché le brinda a su aplicación tres beneficios:
- navegación sin conexión: los usuarios pueden explorar todo el sitio cuando no están conectados;
- velocidad: los recursos se almacenan en caché localmente, por lo que se cargan más rápido;
- reduciendo la carga en el servidor: las descargas del navegador solo cambian los recursos del servidor.
La caché de aplicaciones (o AppCache) permite al desarrollador especificar qué archivos el navegador debe almacenar en caché y poner a disposición de los usuarios sin conexión. Su aplicación funcionará correctamente incluso si el usuario hace clic en el botón Actualizar sin conexión.
Archivo de manifiesto de caché
El archivo de manifiesto de caché es un archivo de texto simple que enumera los recursos que el navegador debe almacenar en caché para acceder sin conexión.
Ayuda del archivo de manifiesto
Para habilitar el caché de la aplicación, incluya el atributo de manifiesto en la etiqueta .
...
El atributo de manifiesto debe estar en cada página de su aplicación que desee almacenar en caché. El navegador no almacena en caché una página a menos que contenga un atributo de manifiesto (y a menos que esté incluido explícitamente en el archivo de manifiesto). Esto significa que cualquier página con el atributo manifiesto visitada por el usuario se agregará implícitamente al caché de la aplicación. De esta manera no es necesario enumerar todas las páginas del manifiesto.
El atributo manifiesto especifica una URL absoluta o relativa, pero la ruta absoluta debe estar dentro de la misma aplicación web. El archivo de manifiesto puede tener cualquier extensión, pero debe especificar el tipo MIME correcto (ver más abajo).
...
El archivo de manifiesto debe entregarse con el tipo MIME text/cache-manifest. Es posible que deba agregar un tipo de archivo personalizado en el servidor web o mediante la configuración .htaccess. Por ejemplo, para configurar este tipo MIME en Apache, agregue al archivo de configuración:
AddType texto/cache-manifest .appcache
O al archivo app.yaml en Google App Engine:
URL: /mystaticdir/(.*\.appcache) static_files: mystaticdir/\1 mime_type: text/cache-manifest upload: mystaticdir/(.*\.appcache)
Estructura del archivo manifiesto
Un manifiesto simple podría verse así:
CACHE MANIFEST index.html hoja de estilo.css imágenes/logo.png scripts/main.js
Este ejemplo almacena en caché los cuatro archivos especificados en el manifiesto.
Algunas cosas a tener en cuenta:
- la línea CACHE MANIFEST debe ir primero y es obligatoria;
- Los datos de almacenamiento en caché del sitio están limitados a 5 MB. Sin embargo, si estás escribiendo una aplicación para Chrome Web Store, el uso de unlimitedStorage elimina esta limitación;
- Si el archivo de manifiesto o el recurso especificado en él no se pueden descargar, todo el proceso de actualización de la caché fallará y el navegador utilizará la caché de la aplicación anterior.
Veamos un ejemplo más complejo:
CACHE MANIFEST # 2010-06-18:v2 # Registros principales almacenados en caché explícitamente CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Recursos que el usuario necesitará en línea RED: login.php /myapi http://api.twitter.com # static.html se usará si main.py no está disponible # offline.jpg se usará en lugar de todas las imágenes en imágenes/grandes/ # offline.html se usará en lugar de todos los archivos HTML FALLBACK: /main.py /static.html images/large/images/offline.jpg *.html /offline.html
Las líneas que comienzan con una almohadilla (#) son comentarios, pero también pueden tener otro propósito. La caché de la aplicación se actualiza solo cuando cambia el archivo de manifiesto. Entonces, por ejemplo, al editar imágenes o funciones de JavaScript, estos cambios no se almacenarán nuevamente en caché. Debe cambiar el archivo de manifiesto para indicarle al navegador que actualice los archivos en el caché. Crear un comentario con un número de versión, suma de verificación o fecha es una forma de garantizar a los usuarios que están utilizando la última versión. También puede actualizar el caché mediante programación cuando esté lista una nueva versión, como se describe en la sección sobre actualización del caché.
Un manifiesto puede tener tres secciones diferentes: CACHE, NETWORK y FALLBACK.
CACHE: Esta es la sección estándar para grabar. Los archivos enumerados en este bloque (o inmediatamente después del CACHE MANIFEST) se almacenarán explícitamente en caché después de que se descarguen por primera vez.
RED: Los archivos enumerados en esta sección son recursos que requieren una conexión al servidor. Todas las solicitudes a estos recursos omiten el caché, incluso si el usuario está desconectado. Puede utilizar * para especificar un patrón.
RESERVA: una sección adicional especifica páginas de respaldo si un recurso no está disponible. La primera URL es un recurso, la segunda es una reserva. Ambas direcciones deben ser relativas y estar en la misma ubicación que el archivo de manifiesto. Puede utilizar * para especificar un patrón.
Estas secciones se pueden enumerar en cualquier orden y cada sección puede aparecer más de una vez.
El siguiente manifiesto define las páginas "universales" (offline.html) que se mostrarán cuando un usuario intente acceder a la raíz del sitio sin conexión. También indica que todos los demás recursos (como en un sitio remoto) requieren una conexión a Internet.
CACHE MANIFEST # 2010-06-18:v3 # Las entradas explícitamente almacenadas en caché index.html css/style.css # offline.html se mostrará en modo fuera de línea FALLBACK: / /offline.html # Todos los demás recursos (incluidos los sitios) requieren una conexión en línea conexión RED: * # Recursos adicionales en el caché CACHE: imágenes/logo1.png imágenes/logo2.png imágenes/logo3.png
El archivo HTML que hace referencia a su archivo de manifiesto se almacena en caché automáticamente. No es necesario incluirlo en el manifiesto, pero le recomendamos que lo haga.
Actualización de caché
La aplicación sin conexión permanece en la memoria caché hasta que ocurra una de las siguientes situaciones:
- el usuario borra el almacenamiento de datos del navegador para su sitio;
- El archivo de manifiesto ha cambiado. Actualizar un archivo mencionado en el manifiesto no significa que el navegador volverá a almacenar en caché ese recurso. Se debe reemplazar el archivo de manifiesto;
- El caché de la aplicación se actualizó mediante programación.
Estado de caché
El objeto window.applicationCache actúa como su acceso programático al caché del navegador. La propiedad de estado se utiliza para verificar el estado actual del caché.
Var appCache = ventana.applicationCache; cambiar (appCache.status) ( caso appCache.UNCACHED: // UNCACHED == 0 devolver "UNCACHED"; romper; caso appCache.IDLE: // IDLE == 1 devolver "IDLE"; romper; caso appCache.CHECKING: // COMPROBANDO == 2 return "COMPROBANDO"; break; case appCache.DOWNLOADING: // DESCARGANDO == 3 return; case appCache.UPDATEREADY: // UPDATEREADY: // OBSOLETE == 5 return "OBSOLETE"; ESTADO DE CACHÉ DESCONOCIDO";
Para actualizar el caché mediante programación, primero se llama a applicationCache.update(). Intentará actualizar la caché del usuario (lo que requiere que cambie el archivo de manifiesto). Finalmente, cuando applicationCache.status está en estado UPDATEREADY, llamar a applicationCache.swapCache() actualizará el caché antiguo al nuevo.
Var appCache = ventana.applicationCache; appCache.update(); // Intentando actualizar el caché del usuario... if (appCache.status == window.applicationCache.UPDATEREADY) ( appCache.swapCache(); // Exitoso, cambie a un nuevo caché)
El uso de update() y swapCache() no sirve para actualizar recursos para el usuario. Este flujo simplemente le indica al navegador que busque el nuevo manifiesto, descargue el contenido actualizado especificado y vuelva a llenar el caché de la aplicación. Por lo tanto, la página se descarga del servidor dos veces, la primera vez llenando el caché de la nueva aplicación y la segunda actualizando el contenido de la página.
// Comprobar si el nuevo caché está disponible cuando se carga la página window.addEventListener("load", function(e) ( window.applicationCache.addEventListener("updateready", function(e) ( if (window.applicationCache.status = = window. applicationCache.UPDATEREADY) ( // El navegador descarga un nuevo caché // Lo reemplaza y actualiza la página window.applicationCache.swapCache(); if (confirm("Hay una nueva versión de este sitio disponible. ¿Cargarla?" )) ( window.location.reload() ; ) ) else ( // El manifiesto no ha cambiado, nada nuevo en el servidor ) ), false ), false);
Eventos de caché de aplicaciones
Como era de esperar, eventos adicionales monitorean el estado de la caché. El navegador activa eventos durante el proceso de descarga, cuando se actualiza el caché de la aplicación y cuando ocurre un error. El siguiente fragmento escucha eventos para cada tipo de evento de caché:
Función handleCacheEvent(e) ( //... ) function handleCacheError(e) ( alert(Error: ¡Error al actualizar el caché!"); // Ejecutado después del primer almacenamiento en caché del manifiesto appCache.addEventListener("cached", handleCacheEvent , false ); // Comprobar la actualización. Siempre es lo primero en la secuencia de eventos appCache.addEventListener("checking", handleCacheEvent, false); // Se encuentra la actualización, el navegador toma los recursos appCache.addEventListener("downloading" , handleCacheEvent, false); // El manifiesto devolvió un error 404 o 410, la descarga se interrumpió // o el manifiesto cambió mientras la descarga estaba en curso appCache.addEventListener("error", handleCacheError, false // Ejecutado después de); primera descarga del manifiesto appCache.addEventListener("noupdate", handleCacheEvent, false); // Se ejecuta si el archivo de manifiesto devuelve 404 o 410. // Estos resultados en el caché de la aplicación se eliminarán appCache.addEventListener("obsolete", handleCacheEvent, false); // Ejecutado para cada recurso enumerado en el manifiesto mientras appCache los recoge. addEventListener("progress", handleCacheEvent, false); // Se ejecuta cuando los recursos del manifiesto se han descargado recientemente appCache.addEventListener("updateready", handleCacheEvent, false);
Si no se puede descargar el archivo de manifiesto o el recurso especificado, se descartan todas las actualizaciones. El navegador seguirá utilizando la antigua caché de la aplicación en caso de que se produzca dicho fallo.
Creo que no es ningún secreto que la velocidad de carga de una página está influenciada por muchos factores. Si alguien no lo sabe, diré brevemente lo siguiente: la velocidad de carga afecta no sólo si un visitante esperará a que se cargue su sitio, sino también en la optimización SEO. De hecho, hoy en día muchos motores de búsqueda han comenzado a tener en cuenta la velocidad de carga de las páginas al clasificar los sitios. Por lo tanto, cuanto más rápido se cargue su sitio, más visitantes podrá obtener de los motores de búsqueda y, en consecuencia, más dinero podrá ganar con él.
Por eso, en este artículo decidí recopilar los 10 mejores consejos sobre cómo aumentar la velocidad de carga de una página web y del sitio en su conjunto. El artículo no pretende ser genial y está destinado a principiantes.
Entonces, allá vamos:
1. Reducir la cantidad de solicitudes HTTP
El 80% de la carga de páginas se centra en cargar componentes de la página: scripts, fotografías, archivos CSS, flash. La especificación HTTP/1.1 recomienda que los navegadores no descarguen más de 2 componentes de una página web desde un único host en paralelo. Al reducir la cantidad de estos componentes, reducimos la cantidad de solicitudes HTTP al servidor y, como resultado, aumentamos la velocidad de carga de la página.
Pero, ¿cómo se puede reducir la cantidad de solicitudes al servidor sin afectar la apariencia de la página?
2. Coloque los archivos CSS al principio de la página.
Al colocar una conexión a archivos CSS en el encabezado de la página, obtenemos una representación gradual de la página, es decir. la página se cargará gradualmente: primero el encabezado, luego el logotipo en la parte superior, navegación, etc. – y esto a su vez sirve como un excelente indicador de la carga de la página para el usuario y mejora la impresión general del sitio.
Colocar archivos CSS en la parte inferior de la página evita que muchos navegadores muestren la página de forma incremental. Esto se explica por el hecho de que el navegador "no quiere" volver a dibujar elementos cuyo estilo puede cambiar después de cargar la página. Por lo tanto, incluya siempre todos sus archivos CSS en la parte superior de la página en la sección HEAD.
3. Coloque javascript en la parte inferior de la página.
Al colocar archivos javascript en la parte inferior de la página, permitimos que el navegador cargue la página con el contenido primero y solo luego comience a cargar los archivos javascript. Si su sitio se mantiene actualizado y contiene todas las comodidades interactivas posibles, entonces puede haber varios de estos archivos javascript y pueden pesar varios cientos de kilobytes, lo que obliga al usuario a esperar hasta que todos sus archivos javascript estén cargados antes de cargar el La página es desastrosa.
Además, los archivos .js externos bloquean la carga paralela. La especificación HTTP/1.1 recomienda que los navegadores no descarguen más de 2 componentes de una página web desde un único host en paralelo. Por lo tanto, si las imágenes de su sitio están ubicadas en diferentes hosts, recibirá más de 2 descargas paralelas. Y cuando se descarga el script, el navegador no iniciará ninguna otra descarga, ni siquiera desde otros hosts.
4. Minimizar CSS y JavaScript
La minimización de archivos es la eliminación de todos los caracteres no esenciales del código para reducir el tamaño del archivo y acelerar su carga. En el archivo minimizado, se eliminan todos los comentarios y espacios insignificantes, saltos de línea y caracteres de tabulación. Aquí todo es sencillo. Cuanto más pequeño sea el archivo, menos tiempo le tomará al navegador descargarlo. Y estos 24 servicios en línea para comprimir y optimizar código CSS lo ayudarán a minimizar su código.
5. Utilice subdominios para descargas paralelas
Como dije anteriormente, según la especificación HTTP/1.1, los navegadores están sujetos a restricciones en la cantidad de componentes del sitio web cargados simultáneamente, es decir, no más de 2 componentes de un host. Por lo tanto, si su sitio tiene muchos gráficos, es mejor moverlo a un subdominio o subdominios separados. Para ti será el mismo servidor, pero para el navegador será diferente. Cuantos más subdominios cree, más archivos podrá descargar el navegador simultáneamente y más rápido se cargará toda la página del sitio. Todo lo que tienes que hacer es cambiar la dirección de las imágenes por una nueva. Una forma muy sencilla pero eficaz.
6. Utilice la memoria caché de su navegador
El almacenamiento en caché se está volviendo extremadamente importante para los sitios web modernos que dependen en gran medida de JavaScript y CSS. El hecho es que cuando un visitante visita su sitio por primera vez, el navegador descargará todos los archivos javascript y css, y también descargará todos los gráficos y flash, pero al configurar correctamente el encabezado HTTP Expires, hará que los componentes de la página se puedan almacenar en caché. . De esta manera, cuando un visitante visite su sitio nuevamente o pase a la siguiente página de su sitio, algunos de los archivos necesarios ya estarán en la memoria caché del navegador y el navegador no necesitará descargarlos nuevamente. De ahí la ganancia en la velocidad de carga del sitio.
Por lo tanto, configure el encabezado HTTP Expires siempre que sea posible, con varios días o incluso meses de anticipación. Para que el servidor web Apache emita encabezados HTTP Expires que cumplan con las recomendaciones, debe agregar las siguientes líneas al archivo .htaccess ubicado en la carpeta raíz del sitio:
Este fragmento del archivo de configuración del servidor web Apache verifica la presencia del módulo mod_expires y, si el módulo mod_expires está disponible, activa el envío de encabezados HTTP Expires, que establecen el período de retención para los objetos anteriores en el caché de los navegadores y servidores proxy a un año desde el momento de la primera carga. Al configurar la caché del navegador con esa duración, puede resultar difícil actualizar los archivos. Por lo tanto, si cambió el contenido de un archivo css o javascript y desea que estos cambios se actualicen en la memoria caché del navegador, deberá cambiar el nombre del archivo. Por lo general, la versión del archivo se agrega al nombre del archivo, por ejemplo: estilos.v1.css
7. Utilice una CDN para cargar bibliotecas de JavaScript populares
Si su sitio utiliza un marco de JavaScript popular, como jQuery, entonces es mejor usar una CDN para conectarlo.
8. Optimiza tus imágenes
Debe determinar el formato apropiado para sus imágenes. Seleccionar el formato de imagen incorrecto puede aumentar significativamente el tamaño del archivo.
- Los GIF son ideales para imágenes con varios colores, como un logotipo.
- Los archivos JPEG son excelentes para imágenes detalladas con mucho color, como fotografías.
- PNG es su elección cuando necesita una imagen de alta calidad con transparencia.
Aquí hay varios servicios en línea para la optimización de imágenes:
9. No escales las imágenes
No cambie el tamaño de la imagen usando los atributos de ancho y alto de la etiqueta, ni usando CSS. Esto también afecta negativamente a la velocidad de carga de la página. Si tiene una imagen con un tamaño de 500x500px y desea insertar una imagen con un tamaño de 100x100px en el sitio, entonces es mejor cambiar el tamaño de la imagen original usando el editor gráfico Photoshop o cualquier otro. Cuanto más clara sea la imagen, menos tiempo tardará en cargarse.
10. Utilice la compresión Gzip
Los estudios han demostrado que la compresión gzip de un archivo de texto sobre la marcha en el 95% al 98% de los casos permite reducir el tiempo necesario para transferir el archivo al navegador. Si almacena copias archivadas de archivos en el servidor (en la memoria del servidor proxy o simplemente en el disco), en general la conexión se puede liberar de 3 a 4 veces más rápido.
A partir de HTTP/1.1, los clientes web indican qué tipos de compresión admiten configurando el encabezado Accept-Encoding en la solicitud HTTP.
Aceptar codificación: gzip, deflate
Si el servidor web ve dicho encabezado en una solicitud, puede aplicar compresión de respuesta utilizando uno de los métodos enumerados por el cliente. Al emitir una respuesta, el servidor notifica al cliente a través del encabezado Content-Encoding sobre cómo se comprimió la respuesta.
Codificación de contenido: gzip
Los datos transferidos de esta manera son aproximadamente 5 veces más pequeños que los datos originales, lo que acelera significativamente su entrega. Sin embargo, hay un inconveniente: aumenta la carga en el servidor web. Pero el problema con el servidor siempre se puede resolver. Así que no prestemos atención a esto.
Para habilitar la compresión GZIP en su sitio web, debe escribir las siguientes líneas de código en el archivo .htaccess:
Si este método funcionó, entonces genial, si no, puedes probar este código:
Pero nuevamente, este código no funciona en todos los servidores, por lo que es mejor ponerse en contacto con el servicio de soporte de su proveedor de hosting y aclarar este problema.
Bueno, eso es todo lo que quería decirte. En este artículo, intenté enumerar todos los métodos principales de optimización del cliente para aumentar la velocidad de carga de una página web. Además de la optimización del cliente, también existe la optimización del servidor. Pero este es un tema para un artículo aparte.
Si te perdiste algo o tienes algo que agregar, escribe tu opinión en los comentarios a continuación de esta publicación. ¡Gracias por su atención!
El almacenamiento en caché es importante para optimizar un sitio web creado en WordPress porque aumenta la velocidad de carga de la página. A los visitantes del sitio no les gustará el largo tiempo de carga y, como resultado, es posible que simplemente abandonen su sitio sin esperar información, lo que aumenta la cantidad de rebotes. Estos parámetros de comportamiento no se reflejan bien en la clasificación de un sitio por los motores de búsqueda, lo que reduce su posición en los resultados de búsqueda. Para evitar que esto suceda, conecte el complemento WordPress Super Cache, que automáticamente hará el trabajo de almacenar en caché las páginas.
Descripción y capacidades del complemento.
Un caché es un almacenamiento temporal del contenido de una página web. En lugar de descargar datos de la página (como imágenes) del servidor cuando visite el sitio nuevamente, se cargarán en el navegador desde el caché, lo que acelerará significativamente la carga del sitio. Una herramienta de almacenamiento en caché eficaz para WordPress es el complemento especial WordPress Super Cache.
El complemento genera páginas de sitios web estáticas y almacena sus versiones en caché en el servidor. El servidor de su proveedor de alojamiento "servirá" archivos estáticos a los visitantes en lugar de tener que acceder a la base de datos cada vez para recuperar elementos de la página.
¿Qué más puede hacer el complemento WordPress Super Cache?
- Le permite utilizar una red de entrega de contenido (CDN) junto con el almacenamiento en caché, redistribuyendo los materiales solicitados con más frecuencia desde el servidor más cercano al visitante.
- Admite el almacenamiento en caché de versiones de páginas para tabletas y teléfonos inteligentes.
- Utiliza la compresión de páginas para reducir el tiempo de carga del sitio.
- Admite varios tipos de almacenamiento en caché.
- Proporciona la capacidad de restaurar el caché, para que pueda ver las páginas almacenadas en caché incluso cuando se crea un nuevo caché.
Alojamiento de sitios web virtuales para CMS populares:
Instalación del complemento WP Super Cache
El complemento se puede encontrar en el repositorio de WordPress. Para hacer esto, inicie sesión en el panel de administración con su nombre de usuario y contraseña.
- Seleccione el menú Complementos (1) y haga clic en Agregar nuevo (2).
- En la barra de búsqueda, escriba el nombre del complemento WP Super Cache (3).
- Busque la opción deseada en la lista que aparece y haga clic en el botón "Instalar" (4).
- Después de la instalación, active el complemento haciendo clic en el botón correspondiente.
Incluso después de la activación, el complemento WP Super Cache está deshabilitado de forma predeterminada, por lo que verá una advertencia en la parte superior de la pantalla.
Para habilitarlo, siga el enlace proporcionado a la página de administración del complemento o seleccione el comando "Configuración", que se encuentra inmediatamente debajo del nombre del complemento.
En la página de configuración puede ver otra notificación sobre cómo cambiar el archivo wp-config.php; después de actualizar la página, desaparecerá.
Para que el complemento funcione:
- Seleccione la opción "Almacenamiento en caché habilitado"
- Haga clic en el botón "Actualizar".
- Luego verifique que el complemento esté conectado correctamente usando el botón "Verificar".
Si el complemento está conectado correctamente, verá una notificación resaltada en verde. El complemento accede al sitio dos veces y compara las marcas de tiempo de ambas copias. Si coinciden, entonces el almacenamiento en caché está habilitado para el sitio.
De lo contrario, el mensaje se muestra en rojo y deberá buscar la causa del problema.
Configuración del complemento WordPress Super Cache: cómo habilitar y configurar el almacenamiento en caché
WP Super Cache es un complemento potente con muchas opciones, muchas de las cuales pueden mejorar aún más el rendimiento del sitio. El panel de configuración avanzada del complemento proporciona un control flexible sobre los parámetros de almacenamiento en caché de la página web.
Asegúrese de que el almacenamiento en caché esté habilitado y seleccione uno de los tres modos de mantenimiento de caché:
- mod_rewrite es la opción más rápida que permite a WordPress servir páginas estáticas desde el caché sin acceder al intérprete PHP en el servidor;
- El modo PHP se utiliza de forma predeterminada y consume más recursos, lo que puede no ser rentable si el servidor está muy cargado;
- El almacenamiento en caché simplificado es menos productivo que las opciones anteriores, pero también requiere un mínimo de recursos.
Las siguientes configuraciones requieren configuración en la sección Varios.
- La opción "Comprimir archivos de caché" puede entrar en conflicto con otros algoritmos de compresión. Si su sitio también tiene complementos que proporcionan compresión, no marque esta casilla..
- El almacenamiento en caché de la página no es necesario para los usuarios que han iniciado sesión ni para aquellos que dejan comentarios en el sitio. Habilite esta opción para permitir que dichos visitantes vean la página tal como aparece actualmente.
- La reconstrucción automática de la caché no es necesaria si el sitio tiene información actualizada con frecuencia. De lo contrario, los visitantes verán páginas obsoletas.
- El error 304 ocurre cuando el servidor le dice al navegador que el contenido de la página no ha cambiado desde la última visita. En este caso, la carga se produce desde la memoria caché del navegador, lo que acelera aún más el sitio.
- En la página con el parámetro GET hay una búsqueda basada en ciertos criterios (fechas, precio) específicos de cada visita. No es necesario almacenar en caché estas páginas.
- Si los usuarios registrados se consideran anónimos, las páginas almacenadas en caché se mostrarán a todos sin excepción.
- La última opción en esta sección es anunciar el complemento con un enlace al autor integrado en el pie de página.
La sección "Avanzado" contiene configuraciones para usuarios avanzados. Normalmente, para los sitios normales, puedes dejarlos desactivados.
- Si su sitio contiene elementos dinámicos, es posible que algunos de ellos no funcionen correctamente cuando se almacenan en caché. En este caso, necesitará el modo de almacenamiento en caché Lite o PHP y la opción de almacenamiento en caché dinámico habilitada.
- Los sitios diseñados específicamente para dispositivos móviles deberán habilitar la compatibilidad si la plantilla no responde.
- La opción "Eliminar compatibilidad con UTF-8" no es necesaria si todos los caracteres del sitio se muestran normalmente.
- Se puede habilitar la eliminación de archivos de caché en publicaciones nuevas si el sitio se actualiza con frecuencia.
- Se necesitará una conciliación adicional si hay problemas con el almacenamiento en caché de cualquier página.
- Si un visitante dejó un comentario en la página, el caché se actualizará después de moderarlo.
- Puede ver las páginas almacenadas en caché en la pestaña "Estado de la caché", por lo que la opción es opcional.
- La opción ralentiza el trabajo de los archivos, evitando un posible problema en el servidor al almacenar en caché las páginas.
- La opción de desarrollador carga el caché solo después de que se haya cargado WordPress.
Debajo de las opciones se encuentra la dirección de ubicación del caché y la clave personal en caso de que desee ver la página sin almacenar en caché y sin borrar primero el caché.
Si elige almacenar en caché las páginas utilizando el método mod-reescritura, el complemento le pedirá que actualice los permisos de escritura. Para hacer esto, desplácese hacia abajo hasta el botón "Actualizar reglas de reescritura de mods" y haga clic en él.
Luego, establezca la hora y el período durante los cuales serán válidos los datos almacenados en caché en el servidor. Comience con 3600 segundos (1 hora). Si su sitio tiene una gran cantidad de artículos, es posible que deba establecer un tiempo más largo, hasta varios días, después del cual el caché se considerará obsoleto.
Allí puede programar el borrado de la memoria caché según lo programado, configurando el temporizador y el intervalo de actualización. Para sitios que no cambian, la recolección de basura se puede cancelar por completo estableciendo el valor del tiempo de espera en cero.
Puede prohibir el almacenamiento en caché de cierta información en el sitio (por ejemplo, una sección con información constantemente actualizada) marcando la casilla en la sección deseada "Nombres aceptables y direcciones prohibidas" o agregando direcciones de página manualmente.
Borre la lista de robots de búsqueda si desea que reciban información del caché y no carguen el servidor al rastrear el sitio. Para sitios de alta carga con tráfico de más de mil visitas únicas por día, se recomienda habilitar el modo privado. En este caso, se cancelará la actualización de la caché.
En la pestaña "Configuración de CDN", se activa un servicio pago para la distribución eficiente de información cuando se proporciona desde el caché. La pestaña Estado de la caché le mostrará qué páginas están almacenadas en caché y se pueden eliminar manualmente de la lista.
- Vaya a la pestaña Caché general para configurar los ajustes del modo de precarga. ¿Por qué podría necesitar utilizar contenido completamente estático?
- Para ahorrar recursos del servidor.
- Para mejorar la velocidad de carga del sitio.
Para servir un sitio antiguo cuyo contenido ya no está actualizado.
Al seleccionar la función "Crear caché compartido ahora", dé tiempo al complemento para crear el caché automáticamente. Puede monitorear el proceso cambiando a la pestaña "Estado de la caché".
La pestaña "Complementos" solo será necesaria si va a conectar otros complementos que no afecten el almacenamiento en caché de archivos.
Tenga en cuenta que algunos de ellos sólo funcionan en modo caché de PHP. Para los especialistas, la pestaña "Mantenimiento" habilita el modo de depuración y la opción de guardar registros.
Después de un tiempo de ejecutar el complemento WP Super Cache, notará la formación de un caché para el sitio. Configurar correctamente el complemento mejorará significativamente el tiempo de carga del sitio. Las páginas almacenadas en caché se almacenan como archivos HTML o PHP en su servidor de alojamiento. Normalmente, el servidor sabe qué páginas se han actualizado y proporciona al usuario la última versión. Sin embargo, si tiene problemas para mostrar información actualizada, puede borrar manualmente el caché. Elimine las páginas almacenadas en caché del servidor usando el comando "Eliminar todo el caché" en el panel de control o haciendo clic en el mismo botón en la configuración del complemento.
Cuando un usuario visita un sitio por primera vez, su navegador se pone en contacto con el servidor remoto que aloja el sitio. La solicitud del navegador y la respuesta del servidor toman tiempo, dado que los elementos del sitio (imágenes, estilos, scripts) se cargan secuencialmente, uno tras otro. Si la página contiene una gran cantidad de elementos o son de gran tamaño, es posible que tarden mucho en cargarse.
Sin embargo, el navegador del usuario puede almacenar en caché elementos duplicados. Esto hace que el sitio se cargue más rápido porque acceder a los archivos desde su disco duro siempre es más rápido que recuperar datos de un servidor remoto. Del mismo modo, la función de borrado de caché está presente en todos los navegadores.
Si no ve cambios en un sitio que necesita ser actualizado, borre su caché usando el panel de control de configuración de su navegador o vea la página en modo de navegación privada (este modo no utiliza elementos guardados como contraseñas o caché).
