CSS Critique dans Shopify
CSS Critique dans Shopify - en bref
Le CSS critique est une collection de règles CSS nécessaires pour le premier rendu. Ces règles CSS sont placées dans l'en-tête de la page. Cela garantit qu'un navigateur commencera le rendu sans avoir à télécharger tous les fichiers CSS bloquant le rendu
Shopify est une solution de boutique en ligne tout-en-un largement utilisée où chacun peut facilement créer sa propre boutique. Malheureusement, Shopify n'est pas conçu avec un score de vitesse de page parfait et ne prend pas en charge le CSS critique automatisé. Le CSS critique dans Shopify ne peut être ajouté que manuellement.
Dans cet article, je vais vous montrer comment ajouter rapidement du CSS critique à votre boutique Shopify.
Qu'est-ce que le CSS Critique ?
En raison du fonctionnement de tous les navigateurs modernes, le rendu de la page est bloqué par des fichiers CSS externes. Lorsqu'un navigateur doit télécharger 1 ou plusieurs fichiers CSS, le rendu d'une page peut facilement bloquer 100ms ou même plus longtemps.
Une façon d'éviter cela est d'utiliser le CSS critique. Le CSS critique est une collection de CSS nécessaire pour rendre uniquement la partie visible de la page. Ce CSS critique est souvent placé en ligne, dans l'en-tête de la page. Cela garantit qu'un navigateur n'a pas à télécharger 1 ou plusieurs fichiers CSS avant de pouvoir commencer le rendu. Pendant ce temps, alors que la page est affichée, votre navigateur télécharge les fichiers CSS finaux en arrière-plan.
Commencez rapidement : CSS critique dans Shopify !
Shopify est une solution de boutique en ligne tout-en-un populaire. Elle fonctionne très facilement, mais la vitesse de la page n'est pas le point fort de Shopify. Par exemple, il n'y a pas de bon support automatisé pour le CSS critique par défaut. Par conséquent, nous devrons ajouter le support du CSS critique manuellement. Heureusement, ce n'est pas beaucoup de travail. Suivez le guide étape par étape ci-dessous pour utiliser le CSS critique dans Shopify.
1. Créer un nouveau thème
Lors de la modification du comportement principal d'un modèle dans Shopify, il est préférable de créer un nouveau thème. Naviguez vers votre thème actuel via 'Boutique en ligne' > 'Thèmes' et copiez votre thème actuel vers un nouveau thème en cliquant sur 'Actions' > 'Dupliquer'
2. Générer le CSS critique
Il existe de nombreuses façons de générer du CSS critique. J'utilise moi-même le module NodeJs Critical en combinaison avec quelques ajustements manuels. C'est un peu un casse-tête, mais souvent la meilleure solution.
Si c'est un peu trop technique pour vous, vous pouvez essayer l'un des nombreux générateurs de CSS critique en ligne. Entrez l'URL de votre site web ici et l'outil générera automatiquement votre CSS critique pour vous. Copiez ce CSS critique et passez à l'étape suivante.
3. Télécharger le CSS critique
Dans votre nouveau thème, naviguez vers le dossier snippets et créez un nouveau fichier appelé critcal.css.liquid. Collez le contenu du CSS critique généré à l'étape 2 dans votre nouveau fichier.
4. Modifier les fichiers du modèle
Ouvrez votre modèle dans le dossier Layout. Nous devons faire 2 ajustements ici. Tout d'abord, nous ajoutons le CSS critique dans l'en-tête de la page :
<head>
{% include 'critical.css'%}
Ensuite, modifiez les références CSS existantes pour télécharger les fichiers CSS originaux en arrière-plan. Pour cela, nous utiliserons la balise preload. La balise preload indique à vos navigateurs qu'un fichier sera utilisé plus tard sur la page. Le navigateur téléchargera alors ce fichier en parallèle. Une fois ces fichiers téléchargés, activez les fichiers CSS via JavaScript :
<link
rel = "preload"
href = "{{'theme.scss.css' | asset_url}}"
type = "text / css" as = "style"
onload = "this.onload = null; this.rel = 'stylesheet';" />
4. Tester le nouveau thème
Vous êtes maintenant prêt à tester le CSS critique dans Shopify. Sur la page du thème, cliquez sur 'Actions' > 'Aperçu' du thème copié. Testez le nouveau thème en profondeur, en accordant une attention particulière à la valeur du Layout Shift (CLS) dans Lighthouse. Un CSS critique incomplet ou incorrect peut provoquer un décalage de mise en page important.
5. Publier un nouveau thème
Naviguez vers Thèmes dans le menu de gauche sous 'Boutique en ligne' et sous 'Actions' sélectionnez 'Publier' pour votre nouveau thème.
Le CSS critique est en ligne !
Félicitations, votre boutique Shopify utilise maintenant le CSS critique. Cela rend le chargement de votre boutique beaucoup plus rapide ! Avez-vous besoin d'aide pour accélérer votre boutique ? Je serais heureux de vous aider !
Limitations de Shopify
Normalement, vous ne souhaitez fournir du CSS critique qu'aux visiteurs qui n'ont pas les fichiers CSS finaux dans le cache de leur navigateur. Servir les fichiers CSS originaux via le cache du navigateur est généralement plus rapide que d'utiliser du CSS critique.
Cela se fait en envoyant un cookie lors de la première requête et un rendu côté serveur. Malheureusement, Shopify ne permet pas de lire et d'envoyer des cookies dans l'éditeur Liquid de Shopify. C'est dommage, mais que pouvez-vous faire ?
Néanmoins, il est judicieux d'ajouter du CSS critique à votre boutique Shopify. Le gain de vitesse en vaudra largement la peine !
Urgent Fix Required?
Google Search Console failing? I offer rapid-response auditing to identify the failure point within 48 hours.
- 48hr Turnaround
- Rapid Response
- Failure Identification
