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..
Voici la liste de contrôle d'optimisation de base avec laquelle nous allons travailler:
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.
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..
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..
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..
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..
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..
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..
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..
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..
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.
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.
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..
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..
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:
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.