L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
12 étapes pour la vitesse de la page éclair
À Wall Street Oasis nous avons constaté que chaque fois que nous nous employons à améliorer la vitesse de nos pages, Google nous envoie davantage de trafic organique. En 2018, le site Web de notre société a généré plus de 80% de notre trafic grâce à la recherche organique. Cela représente 24,5 millions de visites. Il va sans dire que nous sommes très attentifs à la manière dont nous pouvons continuer à améliorer notre expérience utilisateur et à garder Google heureux.
Nous avons pensé que cet article serait un excellent moyen de mettre en évidence les mesures spécifiques que nous prenons pour maintenir notre vitesse de publication rapide. et le trafic organique en bonne santé. Bien que cet article soit quelque peu technique (la vitesse de la page est un sujet important et complexe ), nous espérons qu'il offre aux propriétaires de sites Web et aux développeurs un cadre permettant d'essayer d'améliorer leur vitesse de page.
Notre site Web est construit sur le Drupal CMS et nous fonctionnons sur un serveur avec une pile LAMP (plus Varnish et memcache). Si vous n'utilisez pas MySQL, toutefois, les étapes et les principes de cet article sont toujours pertinents pour d'autres bases de données ou un proxy inverse.
Prêt? On va creuser.
5 étapes pour accélérer le back-end
Avant de passer à des étapes spécifiques qui peuvent vous aider à accélérer votre back-end, il pourrait être utile de revoir ce que nous entendons par «back-end». Vous pouvez penser à l’arrière-plan de tout ce qui entre dans le stockage des données, y compris la base de données et les serveurs – en gros, tout ce qui contribue à rendre le site Web fonctionnel avec lequel vous n’interagissez pas visuellement. Pour plus d'informations sur la différence entre le backend et le frontend, lisez cet article
Étape 1: assurez-vous que le proxy inverse est configuré
Il s'agit d'une première étape importante. Pour Wall Street Oasis (WSO), nous utilisons un proxy inverse appelé Varnish. C'est de loin la couche de cache la plus critique et la plus rapide et sert la majorité du trafic anonyme (visiteurs déconnectés). Vernis met en mémoire toute la page en mémoire cache, ce qui permet de la rendre rapidement au visiteur.
Étape 2: Étendez la durée de vie de ce cache.
Si vous avez une base de données volumineuse contenant du contenu (plus de 10 000 adresses URL en particulier) qui ne change pas très souvent, pour augmenter le taux de réussite sur la couche de mise en cache Varnish, vous pouvez prolonger la durée de vie (durée de vie). signifie essentiellement combien de temps avant de vider l'objet de la mémoire cache).
Pour le WSO, nous sommes allés jusqu'à deux semaines (depuis plus de 300 000 discussions). À tout moment, seuls quelques milliers de ces URL de forum sont actives. Il est donc logique de mettre fortement en cache les autres pages. L'inconvénient est que, lorsque vous apportez des modifications à l'ensemble du site, aux modèles ou à la conception, vous devez attendre deux semaines avant que toutes les URL soient importées.
Étape 3: réchauffer le cache
Afin de conserver notre cache. "Réchauffer", nous appliquons un processus spécifique à toutes les URL de notre plan Sitemap. Cela augmente la probabilité qu'une page soit dans le cache lorsqu'un utilisateur ou un bot Google visite ces mêmes pages (le taux d'accès à notre site s'améliore). Vernis plein d'autres objets, prêt à être consulté rapidement.
Comme vous pouvez le constater sur le graphique ci-dessous, le rapport entre les «occurrences dans la mémoire cache» (en vert) et le nombre total d'occurrences (en bleu et en vert) est supérieur à 93 pour cent. Étape 4: Réglez votre base de données et concentrez-vous sur les requêtes les plus lentes
Sous WSO, nous utilisons une base de données MySQL. Assurez-vous d'activer le rapport sur les requêtes lentes et vérifiez-le au moins tous les trimestres. Vérifiez les requêtes les plus lentes. Utilisation de EXPLAIN Ajoutez des index si nécessaire et réécrivez les requêtes qui peuvent être optimisées.
Sur WSO, nous utilisons une base de données MySQL. Pour optimiser MySQL, vous pouvez utiliser les scripts suivants: https://github.com/major/MySQLTuner-perl et https://github.com/mattiabasone/tuning-primer [19659019] Étape 5: en-têtes HTTP Utilisez l’installation poussée du serveur HTTP2 pour envoyer des ressources à la page avant leur demande. Assurez-vous simplement de tester ceux qui doivent être poussés en premier. JavaScript était une bonne option pour nous. Pour en savoir plus à ce sujet cliquez ici . Voici un exemple de serveur poussé tiré de nos Questions relatives aux banques d'investissement URL: Assurez-vous d'utiliser le bon format. Si c'est un script: S'il s'agit d'un fichier CSS: Les étapes suivantes permettent d'accélérer votre application d'interface. Le frontal est la partie d'un site Web ou d'une application avec laquelle l'utilisateur interagit directement. Par exemple, cela comprend les polices, les menus déroulants, les boutons, les transitions, les curseurs, les formulaires, etc. La modification de l’emplacement de votre JavaScript est probablement l’un des changements les plus difficiles car vous devrez continuellement tester pour vous assurer qu'il n'enfreint pas les fonctionnalités de votre site. J’ai remarqué que chaque fois que je supprime JavaScript, la vitesse de la page s’améliore. Je suggère de supprimer autant de Javascript que vous pouvez. Vous pouvez réduire le JavaScript nécessaire dont vous avez besoin. Vous pouvez également combiner vos fichiers JavaScript mais utiliser plusieurs ensembles. Essayez toujours de déplacer JavaScript au bas de la page ou en ligne. Vous pouvez également différer ou utiliser l'attribut async si possible pour garantir que vous ne bloquez pas le rendu. Pour en savoir plus sur le déplacement de JavaScript cliquez ici . Utilisez WebP pour les images lorsque cela est possible (Cloudflare, un CDN, le fait-il pour vous automatiquement – je vais toucher plus sur Cloudflare ci-dessous). Il s'agit d'un format d'image utilisant à la fois la compression avec perte et la compression sans perte. Utilisez toujours des images de taille correcte. Par exemple, si vous avez une image affichée dans un carré de 2 "x 2" sur votre site, n'utilisez pas une grande image de 10 "x 10". Si vous avez une image plus volumineuse que nécessaire, vous transférez davantage de données via le réseau et le navigateur doit redimensionner l'image à votre place. Utilisez la charge lente pour éviter / retarder le téléchargement d'images plus en bas de la page et non sur la partie visible de l'écran. Vous voulez vous assurer que votre code CSS est en ligne. Des outils en ligne comme celui-ci peuvent vous aider à trouver le code CSS essentiel à aligner et à résoudre le blocage du rendu. Bonus: vous garderez l'avantage du cache d'avoir des fichiers séparés. Assurez-vous de réduire la taille de vos fichiers CSS (nous utilisons AdVagg puisque nous sommes sur le CMS Drupal, mais il existe de nombreuses options pour cela, en fonction de votre site). Essayez d'utiliser moins de CSS. Par exemple, si certaines classes CSS ne sont utilisées que sur votre page d'accueil, ne les incluez pas dans d'autres pages. Combinez toujours les fichiers CSS mais utilisez plusieurs bundles. Pour en savoir plus sur cette étape cliquez ici Déplacez vos requêtes multimédia vers des fichiers spécifiques afin que le navigateur n'ait pas à les charger avant le rendu de la page. Par exemple: Si vous souhaitez plus d’informations sur la façon d’optimiser votre code CSS, consultez l’intéressant post de de Patrick Sexton . C’est là que vos développeurs peuvent s’embrouiller avec vos concepteurs si vous ne faites pas attention. Tout le monde veut consulter un site Web magnifiquement conçu, mais si vous ne faites pas attention à la manière dont vous mettez ce design en direct, cela peut entraîner des problèmes de vitesse non souhaités. Voici quelques conseils sur la manière de mettre vos polices dans un régime: Voici la différence que nous avons mesurée avec les polices optimisées: Après avoir réduit nos fichiers de polices de 131 ko à 41 ko et supprimé une ressource externe (useproof), le temps entièrement chargé sur notre page de test est passé de à 5.1 secondes . Cela représente une amélioration de 44% et fera certainement sourire Google (voir ci-dessous). Voici l'amélioration de 44%. Si possible, déplacez les ressources externes sur votre serveur pour vous permettre contrôle les en-têtes d'expiration (cela demandera aux navigateurs de mettre la ressource en mémoire cache plus longtemps). Par exemple, nous avons déplacé notre pixel Facebook sur notre serveur et l'avons mis en cache pendant 14 jours. Cela signifie que vous serez responsable de vérifier les mises à jour de temps en temps, mais cela peut améliorer votre score de vitesse de page. Par exemple, sur notre page Private Equity Interview Questions vous pouvez voir comment le Le fichier fbevents.js est en cours de chargement depuis notre serveur et l'en-tête http de contrôle du cache est défini sur 14 jours (1209600 secondes) contrôle-cache: public, max-age = 1209600 Qu'est-ce qu'un CDN? Cliquez ici pour en savoir plus Je recommande d'utiliser Cloudflare car cela simplifie beaucoup de tâches et les accélère beaucoup plus rapidement que si vous deviez les exécuter sur votre propre serveur. Voici ce que nous avons spécifiquement fait sur la configuration de Cloudflare: Les techniciens de maintenance offrent au propriétaire du site et aux développeurs des options intéressantes (comme les notifications push), mais en termes de performances, nous sommes ravis de la manière dont ils peuvent nous aider à construire. un système de mise en cache plus intelligent. Pour savoir comment mettre en place des techniciens de maintenance sur votre site, visitez cette page . Avec des ressources (images, CSS, javascript, polices, etc.) mis en cache par un technicien, les visiteurs de retour seront souvent servis beaucoup plus rapidement que s'il n'y avait pas d'ouvrier. Pour chaque changement que vous apportez pour améliorer la vitesse, vous pouvez utiliser la Voici quelques outils pour surveiller l’impact du changement et vous assurer que vous êtes sur la bonne voie: Nous savons qu'il t à digérer et beaucoup de ressources liées ci-dessus, mais si vous manquez de temps, vous pouvez simplement commencer à l’Étape 1 à partir des sections Backend et Front-End. Ces deux étapes à elles seules peuvent faire toute la différence. Bonne chance et dites-moi si vous avez des questions dans les commentaires. Je veillerai à ce que João Guilherme mon responsable de la technologie, soit en mesure de répondre à toutes les questions de la communauté au moins une fois par jour pendant la première semaine de cette publication. Happy Tuning!; rel = précharge; comme = script, ; rel = précharge; comme = script, ; rel = précharge; as = script,
7 étapes pour accélérer l'interface
Étape 1: Modifier l’emplacement de votre JavaScript
Étape 2: Optimisez vos images
Étape 3: optimisez votre code CSS
Étape 4: Allégez vos polices Web (elles peuvent être LOURD)
Étape 5: transfert de ressources externes
Étape 6: utilisez un réseau de diffusion de contenu. (CDN)
Vitesse
. ] Réseau
Crypto
Étape suivante 7: Utiliser les techniciens de maintenance
Tests, outils et commandes
Source link