Corregir 'Eliminate render-blocking resources' - Gatsby - Typography - Google Fonts - Parte Dos

Ariel Alvarado | Julio 03, 2020

El problema de eliminar recursos que bloquean el primer renderizado fue solucionado en un post anterior. Recordemos que la solicitud que más tardaba y bloqueada el renderizado era una solicitud de fuentes de google:

<link
  href="//fonts.googleapis.com/css?family=Alegreya+Sans:500|Alegreya:400,400i,700,700i"
  rel="stylesheet"
  type="text/css"
  data-gatsby-typography="true"
/>

Por desgracia las soluciones presentadas no son tan fáciles de aplicar en gatsby con typography.js, así que analizaremos más a fondo la forma de solucionar este problema.

Realizaremos varios pasos para optimizar este proceso, detallados a continuación:

1. Evitamos solicitudes innecesarias

Revisando la solicitud a las fuentes de google, la respuesta es simplemente un conjunto de estilos que apuntan a la fuente (woff2):

/* cyrillic-ext */
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Alegreya Italic"), local("Alegreya-Italic"),
    url(https://fonts.gstatic.com/s/alegreya/v13/4UaHrEBBsBhlBjvfkSLk96fp56N1.woff2)
      format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Alegreya Italic"), local("Alegreya-Italic"),
    url(https://fonts.gstatic.com/s/alegreya/v13/4UaHrEBBsBhlBjvfkSLk967p56N1.woff2)
      format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local("Alegreya Italic"), local("Alegreya-Italic"),
    url(https://fonts.gstatic.com/s/alegreya/v13/4UaHrEBBsBhlBjvfkSLk96bp56N1.woff2)
      format("woff2");
  unicode-range: U+1F00-1FFF;
}
// muchas más fuentes

Entonces, evitaremos esta solicitud agregando el todo el contenido de este archivo a uno de nuestros archivos css para evitar esta solicitud innecesaria.

2. Evitemos cargar demasiadas fuentes

Revisando la cantidad de solicitudes a las fuentes, tenía cuatro que me parecieron demasiadas. Revisando el sitio web me encontré con que no necesitaba la fuente en itálica ya que no la utilizaba demasiado y el reemplazo de fuente no era demasiado notorio así que simplemente eliminé las definiciones de las fuentes que no necesitaba.

3. Cargamos las fuentes con preload

Como ya tenemos la referencia a las fuentes en nuestro archivo, primero le diremos a typography.js que no necesitamos que agregue un header para realizar la solicitud, nosotros nos adelantaremos y solicitaremos las fuentes de manera asíncrona.

Agregamos la configuración omitGoogleFont con el valor false a las configuraciones de gatsby-plugin-typography para evitar que se carguen las fuentes de google por defecto:

gatsby-config.js

    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
        omitGoogleFont: false,
      },
    },

Ahora, solicitaremos las fuentes de manera asíncrona en nuestro archivo layout con Helmet (el siguiente es un archivo muy resumido, simplemente una muestra de como utilizar Helmet para agregar links al header de nuestro sitio web):

layout.js

import React from "react";
import { Helmet } from "react-helmet";
import "./layout.css";

const Layout = ({ children }) => {
  return (
    <>
      <Helmet>
        <link
          rel="preload"
          href="https://fonts.gstatic.com/s/alegreya/v13/4UaErEBBsBhlBjvfkSLk_xHM8pBULjtH.woff2"
          as="font"
        />
      </Helmet>
      contenido maravilloso que utiliza nuestras fuentes...
    </>
  );
};

export default Layout;

El contenido agregado a nuestro sitio es:

<head>
  <!-- otros headers -->
  <link
    rel="preload"
    href="https://fonts.gstatic.com/s/alegreya/v13/4UaErEBBsBhlBjvfkSLk_xHM8pBULjtH.woff2"
    as="font"
    data-react-helmet="true"
  />
</head>

Con estos pasos lograremos mejorar el performance de nuestro sitio web, probablemente no lo notes en tu ordenador de escritorio pero tus usarios de celular loa gradecerán. Además, google da prioridad a los sitios que funcionan mejor en dispositivos mobiles, recuerden, nunca esta demás hacer feliz a google xD.

Y eso es todo por ahoras, keep coding.