Top visionné


Articles connexes

Rate Your Experience

Quelles sont les caractéristiques de Leap ?

Modified on: Thu, 25 May, 2023

Leap rationalise l'optimisation de la vitesse de votre site web avec un seul outil. Leap d'Ezoic fait le travail de plusieurs plugins et comprend les 18 fonctionnalités suivantes (d'autres sont ajoutées en permanence !):

CSS


Critical CSS :
rend le Critical CSS dans la balise head et charge les feuilles de style paresseusement. Cela empêche le site de "sauter" lorsque le CSS se charge lentement. En d'autres termes, le CSS critique aide votre site à mieux se charger en ne chargeant pas tous les styles en même temps, et améliore la vitesse en mettant le CSS important en ligne. Dans la fonction CSS critique, vous pouvez également cliquer sur le lien "Block or Highlight Specific Files (Advanced)", qui vous permettra de saisir des URL spécifiques qui doivent être traitées ou ignorées par la fonction CSS critique :


    image


    image


Supprime les CSS inutilisés : Supprime tout fichier CSS qui n'est pas utilisé par la page actuelle et sert une version réduite du CSS inutilisé, ce qui permet de réduire la taille des pages et d'accélérer leur chargement.

Supprime les CSS inutilisés par page :
Supprime toutes les classes CSS qui ne sont pas utilisées sur chaque URL individuelle, et sert une version miniaturisée du CSS qui est utilisé sur cette URL. (La fonction Supprimer les CSS inutilisés doit être activée pour pouvoir utiliser cette fonction).


AVERTISSEMENT :
Bien que cela devrait augmenter le score de vitesse de votre site, il se peut que votre site soit plus lent pour les utilisateurs réels si la plupart des pages utilisent le même ensemble de CSS. Cela se produit parce que l'utilisateur doit télécharger un nouveau fichier pour chaque page qu'il visite.


image


Optimisez les polices : Les polices déclarées dans la feuille de style en ligne sont optimisées pour éviter les clignotements lors du chargement des polices et les appels multiples à l'API des polices sont regroupés en une seule requête.

Préchargement des polices :
Préchargez les polices trouvées dans les fichiers CSS externes afin qu'elles soient prêtes à être affichées plus rapidement sans bloquer le rendu de la page. Vous devriez envisager d'utiliser ce paramètre si Pagespeed Insights suggère de "Précharger les requêtes clés" avec les fichiers de police comme ressources à précharger.

Images


1. Chargement paresseux des images : aide votre site à se charger plus rapidement en ne chargeant les images que lorsque l'utilisateur les verra réellement. Les images situées plus bas sur la page se chargent au fur et à mesure que l'utilisateur fait défiler la page. Les seules images qui se chargent immédiatement sont celles qui sont affichées sur le premier écran, et non les images situées plus bas dans la page. (Cette fonction doit être activée lorsque vous utilisez les fonctions Formats Next-Gen et Redimensionner les images).

2. Formats Next-Gen : Dans les navigateurs pris en charge, cette fonction permet d'afficher les images au format WebP, un nouveau format d'image conçu pour réduire la taille des fichiers.

3. Redimensionnement des images : Redimensionne automatiquement les images de votre page en fonction de la taille de l'écran de l'utilisateur afin de minimiser les temps de transfert tout en maintenant la qualité de l'image.

4. Préchargement des images d'arrière-plan : Ajoutez des balises de préchargement pour les images d'arrière-plan définies dans les feuilles de style en ligne. Les images d'arrière-plan ne sont pas chargées tant que toutes les feuilles de style n'ont pas été traitées. Cette fonctionnalité devrait donc accélérer le chargement des grandes images définies comme arrière-plan.


image



Politique de mise en cache statique efficace 


Cette fonctionnalité indique au navigateur de mettre en cache vos ressources statiques, ce qui peut augmenter la vitesse de votre site car l'utilisateur n'a pas à télécharger ces ressources plus d'une fois. Cette fonction règle l'en-tête de mise en cache de vos ressources sur une durée appropriée. Les ressources statiques disponibles qui peuvent être mises en cache sont les suivantes : 

  1. Images

  2. Feuilles de style 

  3. Scripts

  4. Polices 


image


Vous pouvez également définir certaines règles d'URL de cache statique comme suit : 


image


Pre-connecter


  1. Origines de pré-connexion : Analyse votre page pour identifier les autres domaines pour lesquels vous demandez des ressources. Il ajoute ensuite des balises pour indiquer au navigateur de se pré-connecter à ces domaines afin d'accélérer le chargement de ces ressources.


image


Minimiser le HTML


1. Réduire le Javascript : Supprime les espaces, les commentaires et les caractères inutiles des fichiers JavaScript pour minimiser la taille de la charge utile JavaScript, réduisant ainsi le temps d'envoi du fichier à l'utilisateur.

2. Minimiser le CSS : Supprime les espaces, commentaires et caractères inutiles des fichiers CSS pour minimiser la taille de la charge utile CSS, réduisant ainsi le temps d'envoi du fichier à l'utilisateur.

3. Réduire le HTML : Supprimez les espaces, les commentaires et les caractères inutiles des fichiers HTML afin de réduire la taille de la page et le temps d'envoi de la page à l'utilisateur.


Notez que vous avez la possibilité d'empêcher certains HTML d'être réduits.


a. Conserver les commentaires conditionnels d'IE : Conserve les commentaires conditionnels d'IE dans le code HTML.


b. Conserver les valeurs par défaut des attributs : Conserver les attributs par défaut de la balise.


c. Keep End Tags : Conserve les balises de fin.


d. Conserver les guillemets : Conservez les guillemets autour des attributs de balises tels que type='text/javascript'.


e. Conserver les espaces blancs : Conservez les espaces entre les balises en ligne, mais réduisez les espaces multiples en un seul caractère d'espace.


image



Execution du script


  1. Retard de script : Retarde le chargement et l'exécution de Javascript jusqu'à ce que le contenu principal soit chargé. 
image



Vous pouvez également définir des règles d'URL de délai de script comme suit. Si vous voulez exclure certaines URL du délai de script, vous pouvez le faire en utilisant les paramètres "no defer" dans votre code. Voici quelques informations sur la façon de les mettre en œuvre : 

https://developers.google.com/speed/pagespeed/service/DeferJavaScript


Vous devez ensuite cliquer sur ce bouton : 


image


Et ensuite sur la case à cocher : 


image


Vous pouvez également définir des "règles URL" pour exclure l'application de "Script Delay" à des scripts, pages ou répertoires spécifiques sur votre site : 


image


image


image


Vous ne savez pas quels scripts doivent être exclus ? Vous pouvez utiliser la fonction "Rechercher les scripts retardés" pour identifier la bonne combinaison de scripts à exclure. 


image


Commencez par mettre tous les scripts sur 'non', puis utilisez le processus d'élimination pour déterminer quels scripts peuvent être retardés ('oui') sans affecter la fonctionnalité. Notez que plusieurs scripts devront souvent être exclus ('non') avant que vous ne trouviez la combinaison gagnante ! 


image



2. Retardement des publicités : Retarde le chargement et l'exécution des publicités jusqu'à ce que le contenu principal soit chargé.


3. Réduction des tâches gourmandes en ressources CPU : Ralentit les tâches javascript qui consomment trop de CPU afin que le processeur du navigateur ait le temps de rendre la page. Peut affecter le timing des appels SetInterval et SetTimeout. 



Contenu


  1. Chargement paresseux des iframes : Cette fonctionnalité vous permet de charger paresseusement les iframes qui apparaissent en dehors de la vue initiale de l'écran. Cela permet à votre site de se charger plus rapidement en ne chargeant les iframes que lorsque l'utilisateur les voit réellement.
image


Vous pouvez également définir des règles d'URL pour le chargement paresseux des iframes.

Grâce à ces fonctionnalités, vos utilisateurs pourront interagir avec vos pages beaucoup plus rapidement, tandis que les éléments moins essentiels se chargent en arrière-plan. Pour les mettre en œuvre, vous devez charger Leap et générer une version.



Loading ...