browser-cache - htaccess - especificar caché de navegador

¿Cómo aprovecho el almacenamiento en caché del navegador para las fuentes de Google?

Question

Probé mi sitio a través de Pingdom y obtuve esto:

Busqué pero no pude encontrar una solución a esto. ¿Alguien sabe cómo puedo obtener esto de 14 a 100?

Answer 1

Como no puede controlar los encabezados de Google (incluidos los encabezados de caducidad), solo puedo ver una solución: descargue estas dos hojas de estilo y fuentes en su propio servidor de alojamiento, cambie las etiquetas HTML en consecuencia.

Luego, puede configurar los encabezados de expiración (lo que Pingdom llamó ''duración'') como desee.

Por ejemplo, abre el primer enlace :

/* latin */
@font-face {
  font-family: ''Montserrat'';
  font-style: normal;
  font-weight: 400;
  src: local(''Montserrat-Regular''), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format(''woff2'');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Descargue este archivo .woff2 y guárdelo en cualquier lugar de su servidor web. Copie y pegue esta hoja de estilo en cualquiera de sus propios archivos CSS o HTML. Cambie el enlace de fonts.gstatic.com a su nueva URL.

Google sirve estas fuentes con un tiempo de vencimiento de 1 día. Puede establecerlo fácilmente en 30 días.

Answer 2

En primer lugar, es importante aclarar la distinción entre el almacenamiento en caché de los archivos CSS de Google Fonts y los archivos de fuentes reales. De acuerdo con las preguntas frecuentes de Google Fonts , sus archivos de fuentes se guardan en caché durante un año. Son los archivos CSS que se guardan en caché durante 24 horas:

Las solicitudes de activos CSS se guardan en caché durante 1 día. Esto nos permite actualizar una hoja de estilo para apuntar a una nueva versión de un archivo de fuente cuando se actualiza y asegura que todos los sitios web que utilicen fuentes hospedadas por la API de Google Fonts usarán la versión más actualizada de cada fuente dentro de las 24 horas de cada publicación .

Los propios archivos de fuentes se guardan en caché durante un año, lo que acumulativamente hace que toda la web sea más rápida: cuando millones de sitios web enlazan con las mismas fuentes, se almacenan en caché después de visitar el primer sitio web y aparecen instantáneamente en todos los demás sitios visitados posteriormente. . A veces actualizamos los archivos de fuentes para reducir su tamaño de archivo, aumentar la cobertura de idiomas y mejorar la calidad de su diseño. El resultado es que los visitantes del sitio web envían muy pocas solicitudes a Google: solo vemos 1 solicitud de CSS por familia de fuentes, por día y por navegador.

Yo recomendaría no alojar estos archivos CSS usted mismo, ya que se retrasará y no utilizará las últimas versiones de las fuentes a medida que se actualicen.

Sin embargo, hay un par de maneras de acelerar la solicitud de CSS:

1. Como Mark mencionó en su respuesta, puede combinar sus dos webfonts en una sola solicitud: https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
2. Si solo está usando ciertos estilos de cualquiera de las fuentes, solo puede cargar los estilos que está usando en realidad. Aquí cargamos todo Montserrat, pero solo cargamos tres estilos de Open Sans; regular (400), cursiva (400i) y negrita (700): <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">

Answer 3

Lo que comencé a trabajar fue agregar PHP como post-procesador a mis archivos CSS en mi archivo .htaccess con el código (estoy usando una extensión de archivo .pcss personalizada, solo para separarla de mis simples archivos CSS):

<FilesMatch "/.pcss$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>

Luego usé el siguiente código en mi archivo CSS para obtener y repetir el contenido de la URL de la fuente que quería.

<?php
echo file_get_contents("https://fonts.googleapis.com/css?family={FONT}");
?>

Answer 4

No es una solución completa, pero puede mejorar la situación combinando las dos solicitudes a una:

https://fonts.googleapis.com/css?family=Montserrat|Open+Sans

Lo hago para dos tipos de letra en uno de mis sitios y marcó 86 frente a tu 14. Es importante destacar que esta es una aceleración real, no solo un truco para reducir un puntaje arbitrario.

Answer 5

Tenga en cuenta que no tiene permitido almacenar en caché el CSS provisto por Google más de 24 horas.

Solo digo ... de acuerdo con los términos y condiciones de Google.

Answer 6

Una solución bastante fácil sería generar su propio kit con el generador de Webfont de Font Squirrel:

https://www.fontsquirrel.com/tools/webfont-generator

Para poder usar esto, necesitaría descargar las fuentes (Montserrat y Open Sans están disponibles en Font Squirrel) y agregarlas al generador. Esto se puede usar para agregar más personalización. (Lo he usado muchas veces en los casos en que la fuente en Google Webfonts no tenía el subconjunto necesario para el idioma húngaro, aunque estaba disponible en la fuente original).