Tu savais que 40% des personnes Quitterez-vous une page Web si le chargement prend plus de trois secondes? La conception Web adaptative étant devenue populaire, les internautes s'attendent à des performances exceptionnelles. Ils veulent que les sites soient parfaitement adaptés à l'appareil qu'ils utilisent, ils veulent une navigation facile et une conception intuitive, et ils veulent que la vitesse de chargement de la page soit inférieure à une seconde. C'est une barre haute à atteindre, mais avec les bonnes optimisations en place, n'importe quel concepteur peut donner à ses interfaces mobiles une vitesse de page rapide.
J'ai récemment scanné le Web et à la recherche de tous les derniers conseils et astuces pour optimiser la vitesse d'un site Web sur diverses plates-formes. Voici ma liste complète des hacks de vitesse de page:
1. Redimensionner les images
Des images plus volumineuses que nécessaire peuvent contribuer à ralentir votre site. Au lieu de simplement télécharger des images en taille réelle et de laisser votre site Web les réduire à la taille appropriée, commencez par les bonnes dimensions. Logiciel simple comme Compression d'image de squash peut être utilisé pour redimensionner les images aux dimensions exactes de votre page et réduire leur taille de fichier en quelques secondes.
2. Limite la fonctionnalité
L'activation du chargement restrictif sur votre site mobile empêche le chargement des parties de votre site pour ordinateur qui ne peuvent pas être utilisées efficacement sur un appareil mobile. Cela peut améliorer l'expérience utilisateur tout en aidant vos pages à se charger beaucoup plus rapidement. Par conséquent, lorsque vous optimisez votre site pour les appareils mobiles, pensez aux fonctionnalités que vous pouvez désactiver sur votre site Web. Des éléments tels que les barres latérales, les publicités, etc. peuvent tous être désactivés. Pour le mobile, concentrez-vous sur les fonctionnalités les plus importantes.
3. Réduisez le contenu
Il est souvent judicieux de définir un budget de performance. Si l'ajout d'une nouvelle image, vidéo ou plugin vous fera dépasser votre budget de performances, recherchez un autre contenu qui peut être supprimé ou optimisé pour aider vos pages à maintenir des vitesses de chargement maximales.
4. Limiter les requêtes HTTP
Il existe une multitude de façons d'y parvenir, mais une mauvaise approche pourrait compromettre la qualité de votre site. L'astuce consiste à réduire les requêtes HTTP sans aller trop loin. Vous pouvez apporter des modifications comme utiliser des sprites CSS au lieu des URI de données et conserver la feuille de style CSS en haut de chaque page. Vous devez également activer la mise en cache, mais plus tard.
5. Choisissez un design réactif
Designs réactifs Ils sont quelque chose qui est tenu pour acquis par les visiteurs de votre site. Ils permettent d'ajuster votre contenu à la taille de l'écran que le visiteur utilise et d'optimiser la conception des différents appareils. L'utilisation d'un modèle de conception réactif permet de garantir un code plus propre et de meilleures vitesses de chargement que d'essayer de faire fonctionner la [conception] (https://www.toptal.com/designers/ui) qui ne convient pas à différentes plates-formes.
6. Utilisez un excellent CDN
Votre réseau de diffusion de contenu (CDN) est au cœur de votre site Web. Il doit être rapide et fiable. Assurez-vous que votre CDN tient ses promesses.
7. Réduisez le temps de réponse du serveur
Votre objectif doit être d'obtenir le temps de réponse du serveur en moins de 200 millisecondes. Tous les autres conseils de cette liste devraient vous aider à réduire ce nombre. Vous pouvez surveiller votre temps de réponse et rechercher des problèmes potentiels en utilisant un certain nombre d'outils de vérification de réponse gratuits, qui peuvent tous être trouvés avec une simple recherche Google.
8. Tout compresser
Compresser vos pages Web revient à les réduire dans un fichier zip. La compression vous permet de réduire la bande passante de vos pages, ce qui réduit le nombre de requêtes HTTP. Le moyen le plus simple de le faire est d'utiliser un outil appelé Gzip .
9. Activer la mise en cache du navigateur
La mise en cache est un moyen pour les visiteurs de votre site de «se souvenir» de votre site sur leurs appareils. Lors de leur première visite, ils devront télécharger jusqu'à 30 composants pour afficher votre site. Une fois le cache activé, ce nombre tombe à quelques composants lors des visites suivantes, améliorant considérablement la vitesse de chargement des pages.
10. Améliorations visuelles
Cela ne se traduira pas par des vitesses de chargement de page plus rapides, mais cela donnera l'impression que c'est le cas. Facebook et Medium font du bon travail en créant un contenu d'espace réservé visuel au lieu d'afficher des chargeurs rotatifs (ce qui pourrait être perçu négativement).
Medium le fait avec des images.
Facebook télécharge un faux contenu d'espace réservé au lieu d'afficher des filateurs de téléchargement.
11. Organisez vos ressources
Tout code qui n'ajoute rien de significatif à votre site Web doit être supprimé. Un code supplémentaire signifie un temps supplémentaire pour charger votre site. Pour réduire le code HTML, utilisez le Extension d'API Google PageSpeed Insights . Pour minimiser votre CSS, utilisez Compresseur YUI ou [cssmin.js] (http://www.phpied.com/cssmin-js/). Pour minimiser l'utilisation de JavaScript, utilisez Compilateur de fermeture , JSMin ou la Compresseur YUI .
12. Définissez un format approprié pour vos images
En plus de rendre vos images à la bonne taille, vous devez également vous assurer qu'elles sont au bon format. Les JPEG sont les meilleurs, les PNG sont acceptables et les GIF ne doivent être utilisés que pour les petits graphiques simples, idéalement inférieurs à 10 x 10 pixels.
13. Encodez les images de manière appropriée
Pour votre code, le HTML de vos images doit ressembler à , avec le nom du fichier entre guillemets. Si vos images ne sont pas encodées correctement, votre site devra travailler plus dur pour récupérer les images correctes, ralentissant ainsi la vitesse de votre page.
14. Utilisez CSS externe
Votre CSS contient les exigences de style de votre site. Il peut être contenu dans un fichier externe ou en ligne. Le CSS en ligne est inséré dans votre code HTML sur chaque page, ce qui peut entraîner de sérieux retards. L'utilisation de CSS externe simplifie considérablement votre code.
15. Donner la priorité au contenu sur le pli (au-dessus du pli)
La partie de la page de destination que les visiteurs voient sans faire défiler s'appelle l'ancien contenu. C'est un ancien terme de journal, mais il s'applique bien au site Web conception . Donner la priorité au contenu du site par rapport au chargement afin qu'il se charge plus rapidement aidera à garder les visiteurs sur votre site plus longtemps. Une façon de faire est de diviser votre CSS en deux parties, une partie en ligne pour le contenu double ci-dessus et une partie externe pour tout le reste.
16. Supprimer les plugins
L'utilisation d'un trop grand nombre de plug-ins peut ralentir la vitesse du serveur et créer des problèmes de sécurité inutiles. Débarrassez-vous des plugins que vous n'utilisez pas et essayez de désactiver les plugins un par un pour voir si des plugins particuliers causent de gros problèmes de vitesse de chargement.
17. Réduisez les redirecciones
Si votre site repose sur des redirections pour diriger les utilisateurs de votre site principal vers votre site mobile, vous pouvez ralentir la vitesse de votre site Web. Vous pouvez utiliser une redirection HTTP pour réduire les redirections intermédiaires de votre site principal vers votre site mobile. Vous pouvez également inclure un balisage sur vos pages de bureau afin que les robots d'exploration Google découvrent vos pages mobiles.
18. Évitez les fenêtres contextuelles
Les pop-ups sont toujours une chose populaire et je suppose qu'ils fonctionnent car beaucoup de sites les utilisent encore. Vous pouvez toujours les intégrer sur votre site Web, mais sur les sites mobiles, ils ne fonctionnent tout simplement pas très bien. Avez-vous déjà atterri sur une fenêtre contextuelle en lisant un article sur un appareil mobile? Si cela vous est arrivé, vous savez probablement ce que je veux dire.
Quelle est l'alternative? Utilisez une boîte de conversion en bas de votre blog ou de votre page, comme le blog de Neil Patel :
19. Débarrassez-vous des éléments DOM rebondissants
DOM signifie Document Object Model. Il fait référence à la façon dont votre site est présenté sur différents appareils. Sur les appareils mobiles, certains éléments qui apparaissent sur la page d'accueil du bureau sont masqués, mais le navigateur mobile prend encore du temps et de l'énergie pour masquer ces éléments. Se débarrasser de ces éléments cachés aidera la vitesse de chargement de la page sur chaque plate-forme.
L'importance des vitesses de page
Si vous n'avez jamais accordé beaucoup d'attention à la vitesse de votre page, il est temps de vous asseoir et d'en prendre note. Tout le temps et l'énergie que vous consacrez à votre contenu et à votre conception ne seront rien si votre site prend trop de temps à charger.
En réalité, Le groupe Aberdeen a constaté qu'une seule seconde de retard dans les temps de chargement des pages conduit à 11% de pages vues en moins (ce qui entraîne des taux de rebond plus élevés), 16% de satisfaction client en moins et une perte de 7% de conversion client. Si votre site prend trois secondes ou plus à se charger, vos pertes s'aggraveront considérablement.
Si cette liste vous semble accablante ou dépasse un peu vos compétences techniques, il peut être utile de commencer par Recommandations et outils Google . Ici, vous obtiendrez des informations de base et des ressources gratuites pour tester la vitesse de votre page. Google vous dira même exactement quels problèmes votre site est confronté afin que vous puissiez concentrer vos efforts d'optimisation de site.
Assurez-vous simplement de mettre cette liste dans vos favoris avant de vous rendre sur Google afin de trouver des solutions faciles à chaque problème de vitesse de page que vous rencontrez.
que font les directeurs financiers
