Consideremos la optimización del trabajo del template a través del ejemplo del sitio web. casaeleganza.com — optimizamos la página principal.
¿Para qué sirve la optimización?
Al mostrar los resultados de búsqueda, Google tiene en cuenta los indicadores de clasificación y optimización de la tienda. Las tiendas con mejores indicadores tienen más posibilidades de aparecer en las primeras posiciones de los resultados de búsqueda.
Herramientas que ayudarán a entender las direcciones de optimización:
En el momento del inicio de la optimización, la herramienta Google PageSpeed informó de una calificación de 72 para la versión de escritorio (el nivel mínimo es 80). La cantidad de archivos que se cargan es de 162. El tamaño de la página es de 3,2 MB.
Características de la realización de la optimización que se deben tener en cuenta:
- Shopify funciona con el protocolo HTTP 1.1, por lo que hay una limitación en la cantidad de archivos que se pueden cargar simultáneamente, lo que reduce la velocidad de visualización de la tienda.
- No todas las recomendaciones de Google PageSpeed se pueden cumplir debido a las limitaciones de la plataforma Shopify.
- Antes de comenzar la optimización, revise la lista de aplicaciones instaladas y elimine todas las aplicaciones innecesarias.
Propuestas de optimización:
1. Utilice la caché del navegador
No se podrá gestionar este parámetro: restricción de Shopify.
2. Elimine el código JavaScript y CSS que bloquea la visualización de la parte superior de la página.
2.1. Optimización JS
Para que los scripts no bloqueen la carga de contenido, es necesario verificar la llamada de todos los scripts y agregar el comando «defer». El comando async debe usarse con comprensión de las particularidades del funcionamiento de los scripts.
2.2. Optimización de CSS
2.2.1. Se requiere agrupar al máximo los diferentes archivos css en un solo archivo común (límite HTTP 1.1). Después de realizar la optimización, quedaron 2 archivos: uno para la precarga y el segundo para la postcarga de la página.
2.2.2. Para la postcarga de CSS se utiliza en la etiqueta link el comando preload y un script que implementa preload para navegadores incompatibles.
2.2.3. Opción ideal de preparación de CSS para cada tipo de página (principal, colección, producto, página, blog). Gracias a esto se podrá reducir la velocidad de carga de la página.
2.2.4. Al mostrar la página principal se utilizó la variante Critical CSS: cuando todos los comandos CSS necesarios para mostrar la página principal se destacan en un archivo separado, y los comandos CSS restantes se cargan a través de load CSS. Para crear el archivo CSS reducido se utiliza el servicio Critical Pass CSS Generator. Para mejorar la calificación, el contenido del archivo CriticalCSS se incrusta en el html de la página.
3. Optimiza la carga del contenido visible
En mi caso, el slider ocupaba una gran parte visible. Pero debido al mecanismo de carga diferida, había un espacio vacío en la pantalla. Para resolver este problema, activé la visualización de la primera imagen del slider.
4. Optimiza las imágenes
Google PageSpeed señaló que el tamaño de algunas imágenes se puede reducir en un 30%. Presta atención a los tipos de archivos (generalmente jpeg), sus tamaños (hasta 2000 píxeles) y la resolución (hasta 100 píxeles por pulgada). Esta recomendación debe tomarse con precaución, ya que no siempre las imágenes optimizadas se ven de calidad.
5. Reduce JavaScript
5.1. Se requiere agrupar al máximo los diferentes archivos js en un solo archivo común (límite HTTP 1.1).
5.2. Al agregar, verifique si el texto original de los scripts está minimizado y, si es necesario, minimícelo utilizando el servicio Minifier. Si los scripts incluyen código fuente en Liquid, se debe renunciar a la minimización (o realizar una minimización parcial).
6. Minimizar CSS
Al agregar, verifique si el texto original de los archivos css está minimizado y, si es necesario, minimícelo utilizando el servicio Minifier. Si el css incluye código fuente en Liquid, entonces debe renunciar a la minimización (o realizar una minimización parcial).
7. Activar la compresión
No se podrá gestionar este parámetro: restricción de Shopify.
8. Minimizar HTML
8.1. Minimice los estilos css y el texto js utilizando el servicio Minifier.
8.2. Eliminar espacios en blanco innecesarios en el texto html. El problema está relacionado con el funcionamiento de los comandos del lenguaje liquid. Los comandos que no generan texto forman una línea vacía en el texto html. Para evitar esto, es necesario agregar un guion al principio y al final del comando.
Por ejemplo, {% comment %} Se verá así {%- comment -%}.
P.D. Para optimizar la velocidad de carga de la versión móvil del sitio, Google creó la tecnología AMP, que acelera el tiempo de carga de la tienda Shopify.