Optimisez votre site Web sans AMP liste de contrôle d'optimisation

Lorsque vous souhaitez optimiser manuellement les performances d'un site Web, sans utiliser une approche clé en main telle que AMP, quelles sont les étapes clés à suivre?

Dans cette vidéo de mon cours Optimiser votre site Web sans AMP, vous découvrirez une simple liste de contrôle que vous pouvez utiliser pour garantir le chargement de votre site aussi rapidement que si vous utilisiez AMP, sinon plus vite.. 

Optimisez votre site Web sans AMP: liste de contrôle d'optimisation

 

La liste de contrôle d'optimisation

Voici la liste de contrôle d'optimisation de base avec laquelle nous allons travailler:

  • Devrait charger aussi vite qu'une version AMP du même site.
  • Chargez les polices Web le plus tôt possible pour les faire entrer.
  • CSS efficace, de petite taille, chargé en ligne dans la section head.
  • Écrivez CSS dans des fichiers externes pour un développement plus pratique.
  • Combiner et minimiser JavaScript.
  • Configurez un processus de construction pour que les deux choses ci-dessus se produisent (nous utiliserons Gulp).
  • Utiliser uniquement du JavaScript asynchrone.
  • Différez JavaScript pour qu'il ne bloque pas le rendu (exécutez JS au bon moment).
  • Vanilla JS donc pas de dépendances JS pour minimiser la quantité de code à charger.
  • Préfère JS simple.
  • Ne créez aucun repli JS dans la mesure du possible.
  • Utilisez le chargement paresseux sur les images et les iframes (vidéos, etc.).
  • Empêcher la refusion pour éviter le recalcul de la mise en page.

Comme vous pouvez le constater, cette liste de contrôle fait partie des tâches que nous devons accomplir, des principes que nous devons suivre et des objectifs que nous voulons atteindre. Regardons chacun d'eux plus en détail.

Charger aussi rapidement qu'une version AMP du même site

La première chose sur notre liste est un objectif, c’est-à-dire que nous souhaitons que notre site se charge aussi rapidement ou plus rapidement que la version AMP du même site. C'est une bonne idée de surveiller votre temps de chargement au fur et à mesure de votre processus de développement, c'est ce que nous allons faire pendant que nous travaillons dans tous les domaines..

Charger les polices Web le plus tôt possible

Passons maintenant aux tâches techniques que nous devons faire. La première considération est que nous voulons que toutes les polices Web que nous utiliserons soient chargées le plus rapidement possible.. 

Les polices Web sont souvent des fichiers relativement volumineux et vous ne pouvez pas afficher votre contenu correctement tant que ces polices Web ne sont pas chargées. Nous allons donc nous assurer que les polices Web sont chargées très tôt dans l'image, probablement comme la première chose qui commence à se charger..

CSS efficace chargé en ligne dans la section principale

Nous allons ensuite nous assurer que notre CSS est très efficace et de très petite taille.. 

Parfois, vous pouvez être tenté de prendre un raccourci et d'inclure une grande bibliothèque de CSS dans vos sites pour accélérer le processus de développement, même si l'essentiel de ce CSS n'est pas nécessaire..

L'utilisation d'un fichier CSS volumineux peut accélérer votre développement, mais cela va probablement ralentir votre site Web et réduire les performances de vos sites dans les moteurs de recherche. Je dis cela parce que la vitesse de chargement est maintenant un facteur de classement. Il est donc important que votre CSS soit aussi petit et efficace que possible..

Vous allez également prendre ce CSS et le charger en ligne dans la section head du site. C'est une technique utilisée par AMP et une excellente technique d'optimisation. C’est donc un objectif auquel nous allons définitivement nous accrocher avec notre propre processus d’optimisation..

Ecrire CSS dans des fichiers externes

Bien que notre CSS soit intégré dans la section head, nous souhaitons tout de même travailler sur notre CSS dans des fichiers séparés. Essayer d’écrire CSS directement dans la section head d’un fichier HTML n’est vraiment pas très pratique. Nous allons donc tout configurer pour pouvoir travailler sur nos fichiers CSS en externe, puis les insérer en ligne dans les fichiers HTML plus tard, de manière à obtenir le meilleur des deux mondes..

Combiner et minimiser JavaScript

La prochaine chose que nous allons faire est de nous assurer que le code JavaScript que nous utilisons est combiné et minimisé dans la mesure du possible.. 

L’un des inconvénients de l’utilisation de AMP est que vous devez importer plusieurs fichiers JavaScript, et que chacun d’entre eux doit l’être séparément. Mais dans la mesure du possible, nous allons prendre notre code JavaScript et le combiner en un seul fichier, afin de disposer du nombre minimum absolu de requêtes du navigateur.. 

Configurer un processus de construction

Pour faire en sorte que ces deux choses se produisent (travailler en externe sur CSS et combiner et minimiser JavaScript), nous allons mettre en place un processus de construction qui fera en sorte que ces deux choses se produisent automatiquement..

Nous allons utiliser Gulp pour le faire. Cela signifie que Node doit être installé sur votre système et que vous devez également vous familiariser un peu avec l’utilisation du terminal. Mais pendant le cours, je vous expliquerai quoi faire, donc même si vous n'avez pas travaillé avec le terminal, tout devrait bien se passer..

Utiliser uniquement du JavaScript asynchrone

Ensuite, nous n'utiliserons que du JavaScript asynchrone (asynchrone). Cela signifie que la façon dont nous allons charger notre code JavaScript n'empêchera pas le chargement simultané d'autres éléments de la page.. 

Différer JavaScript

Une autre chose que nous allons faire avec notre JavaScript est que nous allons le différer. Cela signifie que nous allons pousser notre JavaScript jusqu'à la fin du processus de rendu. Nous allons nous assurer que tout le reste de notre site est entièrement chargé avant de faire quoi que ce soit avec JavaScript.. 

Vanilla JavaScript Only

Nous allons également nous assurer que chaque bit de JavaScript que nous utilisons est du code JavaScript, mais nous le faisons pour nous assurer que nous n'avons pas de dépendances. Si nous utilisons, par exemple, une lightbox qui dépend de jQuery, nous devons maintenant charger jQuery sur notre site. Il s’agit d’une taille de fichier et d’un traitement plus longs à gérer par le navigateur.. 

Il n'est souvent pas nécessaire d'utiliser plusieurs bibliothèques JavaScript. Vous pouvez souvent obtenir la fonctionnalité que vous voulez aussi bien avec JavaScript vanille.

Préférez Simple JavaScript

Nous allons aussi préférer le simple JavaScript. Nous allons donc essayer de réduire au minimum la taille de fichier de notre JavaScript. Nous ne voulons pas beaucoup de cloches et de sifflets; nous voulons que tout soit aussi serré et efficace que possible. 

Créer des replis sans JavaScript

Et le dernier point sur JavaScript est que nous voulons nous assurer que, dans la mesure du possible, nous répondons aux besoins des personnes qui ont désactivé JavaScript..

Avec la version AMP du site que nous allons créer, si nous désactivons JavaScript, vous verrez que nous n'avons pas beaucoup de contenu à regarder.

Nous pourrions faire un peu plus avec ce site pour le rendre un peu plus convivial. Mais dans la plupart des cas, AMP dépend entièrement de JavaScript pour vous fournir tout type de contenu.. 

Avec notre version non-AMP, notre image d'arrière-plan est très bien affichée et nous insérons également des solutions de remplacement pour les icônes de police, car les personnes qui bloquent également les polices JavaScript.

Nous avons un message qui permet aux gens de savoir pourquoi la vidéo YouTube ne peut pas apparaître et la même chose sous laquelle notre CodePen serait..

Notre galerie apparaît toujours de la même manière, puis en bas, nous avons juste la version textuelle de nos tweets comme solution de secours au cas où il n'y aurait pas de JavaScript..

Utiliser le chargement paresseux

Nous allons également nous assurer que nous utilisons un chargement paresseux sur les images et les iframes. Si vous avez un site assez long, la personne va commencer par regarder ce qui se trouve en haut de ce site, puis défilera vers le bas et regardera le reste du contenu..

Mais vous ne voulez pas leur faire attendre que le reste du contenu soit chargé avant de pouvoir commencer à regarder ce qui se trouve en haut du contenu. Ainsi, avec un chargement paresseux, vous ne chargez que ce qui est en haut en premier, puis vous chargez progressivement le reste du contenu au fur et à mesure que la personne fait défiler l'écran..

Empêcher le refoulement

Enfin, nous allons également nous assurer que nous empêchons le refusion. Vous remarquerez souvent, surtout sur mobile, que, lorsque des éléments plus lents se chargent, comme des images par exemple, le reste de la mise en page doit se réajuster autour de la nouvelle image chargée.. 

C'est mauvais pour deux raisons:

  1. C'est vraiment très ennuyant pour un utilisateur. Ils vont regarder au même endroit, puis la mise en page entière change et ils perdent le texte qu'ils lisaient et ils doivent le retrouver. Ensuite, cela refait surface et toute l'expérience est très mauvaise. 
  2. L'une des opérations les plus coûteuses qu'un navigateur doit effectuer est de calculer la mise en page, et vous voulez vous assurer que le navigateur ne doit calculer la mise en page qu'une seule fois. Ainsi, même avant que vos images ne soient chargées, vous voulez vous assurer que vous avez alloué le bon espace pour ces images. Donc, la première mise en page qui charge est la bonne mise en page. 

Regarder le cours complet

Dans le cours complet, Optimiser votre site Web sans AMP, vous mettrez cette liste de contrôle en pratique. Vous apprendrez exactement comment convertir un site en AMP existant en un équivalent non AMP. En d'autres termes, vous apprendrez à faire fonctionner vos sites à toute vitesse, à l'aide de techniques d'optimisation que vous choisirez vous-même..

Vous pouvez suivre ce cours immédiatement avec un abonnement à Envato Elements. Pour un seul forfait mensuel, vous aurez accès non seulement à ce cours, mais également à notre bibliothèque croissante de plus de 1 000 cours vidéo et de livres numériques de premier plan sur l'industrie sur Envato Tuts.+. 

De plus, vous obtenez maintenant des téléchargements illimités à partir de la vaste bibliothèque Envato Elements de plus de 400 000 ressources créatives. Créez avec des polices, des photos, des graphiques et des modèles uniques et livrez plus rapidement de meilleurs projets.