CSS Crítico en Shopify
CSS Crítico en Shopify - en resumen
El CSS crítico es una colección de reglas CSS necesarias para el primer renderizado. Estas reglas CSS se colocan en el head de la página. Esto asegura que el navegador comience a renderizar sin tener que descargar todos los archivos CSS que bloquean el renderizado
Shopify es una solución de tienda web todo en uno ampliamente utilizada donde cualquiera puede construir fácilmente su propia tienda. Desafortunadamente, Shopify no está construido con una puntuación perfecta de PageSpeed y no soporta CSS crítico automatizado. El CSS crítico en Shopify solo se puede agregar manualmente.
En este artículo, te mostraré cómo agregar rápidamente CSS crítico a tu tienda web de Shopify.
¿Qué es el CSS Crítico?
Debido a la forma en que funcionan todos los navegadores modernos, el renderizado de la página es bloqueado por archivos CSS externos. Cuando un navegador tiene que descargar 1 o más archivos CSS, el renderizado de una página puede bloquearse fácilmente durante 100ms o incluso más.
Una forma de evitar eso es usar CSS crítico. El CSS crítico es una colección de CSS necesario para renderizar solo la parte visible de la página. Este CSS crítico a menudo se coloca inline, en el head de la página. Esto asegura que el navegador no tenga que descargar 1 o más archivos CSS antes de poder comenzar a renderizar. Mientras tanto, mientras se muestra la página, tu navegador descarga los archivos CSS finales en segundo plano.
Empieza rápido: ¡CSS crítico en Shopify!
Shopify es una solución de tienda web popular todo en uno. Funciona muy fácilmente, pero la velocidad de página no es el punto fuerte de Shopify. Por ejemplo, no hay un buen soporte automatizado para CSS crítico por defecto. Por lo tanto, tendremos que agregar soporte para CSS crítico manualmente. Afortunadamente, no es mucho trabajo. Sigue la guía paso a paso a continuación para usar CSS crítico en Shopify.
1. Crea un nuevo tema
Al editar el comportamiento central de una plantilla en Shopify, lo mejor es crear un nuevo tema. Navega a tu tema actual a través de 'Online Store'> 'Themes' y copia tu tema actual a un nuevo tema haciendo clic en 'Actions'> 'Duplicate'
2. Generar CSS crítico
Hay numerosas formas de generar CSS crítico de varias maneras. Yo mismo uso el módulo Critical de NodeJs en combinación con algunos ajustes manuales. Eso es un poco un rompecabezas, pero a menudo la mejor solución.
Si eso es un poco demasiado técnico para ti, podrías probar uno de los muchos generadores de CSS crítico en línea. Ingresa la url de tu sitio web aquí y la herramienta generará automáticamente tu CSS crítico para ti. Copia este CSS crítico y procede al siguiente paso.
3. Subir CSS crítico
En tu nuevo tema, navega a la carpeta snippets y crea un nuevo archivo llamado critcal.css.liquid. Pega el contenido del CSS crítico generado en el paso 2 en tu nuevo archivo.
4. Editar los archivos de la plantilla
Abre tu plantilla en la carpeta Layout. Necesitamos hacer 2 ajustes aquí. Primero agregamos el CSS crítico en el head de la página:
<head>
{% include 'critical.css'%}
Luego edita las referencias CSS existentes para descargar los archivos CSS originales en segundo plano. Para esto usaremos la etiqueta preload. La etiqueta preload indica a tus navegadores que un archivo se usará más tarde en la página. El navegador entonces descargará este archivo en paralelo. Una vez que estos archivos se hayan descargado, activa los archivos CSS a través de JavaScript:
<link
rel = "preload"
href = "{{'theme.scss.css' | asset_url}}"
type = "text / css" as = "style"
onload = "this.onload = null; this.rel = 'stylesheet';" />
4. Probar nuevo tema
Ahora estás listo para probar el CSS crítico en Shopify. En la página del tema haz clic en 'Actions' > 'Preview' del tema copiado. Prueba el nuevo tema a fondo, prestando especial atención al valor del Layout Shift (CLS) en lighthouse. Un CSS crítico incompleto o incorrecto puede causar un cambio de diseño significativo.
5. Publicar un nuevo tema
Navega a Themes en el menú de la izquierda bajo 'Online Store' y bajo 'Actions' selecciona 'Publish' para tu nuevo tema.
¡El CSS Crítico está en vivo!
Felicidades, tu tienda de Shopify ahora está usando CSS crítico. ¡Esto hace que tu tienda cargue mucho más rápido! ¿Necesitas ayuda para acelerar tu tienda? ¡Me gustaría ayudarte!
Limitaciones de Shopify
Normalmente solo quieres entregar CSS crítico a los visitantes que no tienen los archivos CSS finales en la caché de su navegador. Servir los archivos CSS originales a través de la caché del navegador es generalmente más rápido que usar CSS crítico.
Esto se hace enviando una cookie en la primera solicitud y algo de renderizado del lado del servidor. Desafortunadamente, Shopify no permite leer y enviar cookies en el editor liquid de Shopify. Es una pena, pero ¿qué se puede hacer?
Aún así, tiene sentido agregar CSS crítico a tu tienda de Shopify. ¡La ganancia de velocidad hará que valga la pena!
Your dev team is busy.
Delegate the performance architecture to a specialist. I handle the optimization track while your team ships the product.
- Parallel Workflows
- Specialized Expertise
- Faster Delivery
