3 conseils pour accélérer votre site Web Bootstrap –

L'optimisation de site Web est un ensemble de techniques, côté serveur et côté client, qui visent à accélérer le temps de chargement des sites Web et à les rendre dans le navigateur pour une meilleure expérience utilisateur.

immédiateté et réactivité typique des applications natives. Ils s'attendent à ce qu'une page Web se charge en moins de 1000ms . Si cela prend beaucoup plus de temps, ils sont susceptibles de quitter le site.

Les moteurs de recherche ont certainement rattrapé cette tendance, et à bien des égards, ils y ont contribué. En fait, Google utilise la vitesse de la page comme un facteur de classement pour les sites Web dans les recherches de bureau depuis un moment maintenant. Google a annoncé que, à partir de juillet 2018, les recherches sur mobile seront également très importantes pour atteindre les meilleures positions dans sa liste de résultats.

Bootstrap a souvent été critiqué pour avoir ajouté des données superflues aux sites Web. cette bibliothèque d'interface utilisateur frontale populaire dans votre projet, assurez-vous que vous prêtez une attention particulière au poids de la page et à la vitesse de la page.

Dans cet article, je vais passer par trois étapes d'optimisation frontale assurez-vous que votre site Web basé sur Bootstrap est rapide et bien optimisé.

Ne téléchargez que le paquet Bootstrap dont vous avez besoin

Si vous décidez de travailler avec le paquet de téléchargement précompilé de Bootstrap, vous devriez Réfléchissez vraiment aux parties de la bibliothèque dont vous avez vraiment besoin.

Le dossier de téléchargement contient à la fois la bibliothèque CSS complète ( bootstrap.css et bootstrap.min.css ) et la bibliothèque de composants JavaScript avec tous ses dépendances à l'exception de jQuery ( bootstrap.bundle.js et bootstrap.bundle.min.js ), ainsi que d'un certain nombre de fichiers CSS autonomes contenant le code nécessaire pour des parties spécifiques de ce kit d'interface utilisateur populaire.

Si vous avez juste besoin d'une bonne réinitialisation CSS pour votre projet, utilisez simplement bootstrap-reboot.min.css . Si vous avez seulement besoin d'un système de grille flexible et facile à utiliser, optez pour bootstrap-grid.min.css . Il n'y a pas besoin de télécharger tout le framework. Si, d'autre part, vous savez que vous allez utiliser tout dans la bibliothèque, au moins assurez-vous d'inclure la version minifiée.

De même avec le code JavaScript. Si vous savez que vous n'aurez pas de listes déroulantes, popovers et info-bulles dans votre projet, utilisez bootstrap.min.js plutôt que bootstrap.bundle.min.js car vous avez gagné Optez pour la source plutôt que le paquet de téléchargement précompilé

Autant que la dernière version de Bootstrap vous permet de sélectionner des parties à inclure dans votre projet Les fichiers précompilés peuvent contenir des éléments dont vous n'avez pas réellement besoin.

Les navigateurs doivent toujours télécharger et traiter du code inutilisé, ce qui peut avoir un impact sur les performances du site, en particulier sur les connexions réseau lentes. téléchargez le code source Bootstrap car:

• vous pourrez inclure exactement les composants dont vous avez besoin dans votre projet
• personnaliser n'importe quelle partie de la bibliothèque devient plus propre et plus efficace, sans besoin pour remplacer les styles encore et encore
• le style Utiliser des techniques d'optimisation côté client éprouvées

  Mis à part les points mentionnés ci-dessus, l'optimisation d'un site Web basé sur Bootstrap nécessite toujours des performances frontales.

  Voici quelques-uns des facteurs critiques auxquels vous pourriez faire attention pour une optimisation frontale efficace de votre site Web.

  Écrire CSS et JavaScript Lean

  Chaque caractère de votre code ajoute jusqu'au poids final de la page Web. Rédaction de code CSS et JavaScript propre et concis tout en le gardant lisible n'est pas toujours facile. Cependant, il devrait être quelque chose à rechercher dans chaque projet.

  Les bonnes pratiques CSS incluent la suppression des sélecteurs inutilisés, du code dupliqué et des règles trop imbriquées. Il est bon de garder votre code bien organisé au début d'un projet. Par exemple, l'utilisation de guides de style peut vraiment profiter à votre processus de développement et à la qualité de votre code.

  En outre, il existe d'excellents outils pour vous aider à nettoyer votre code. Un linter comme CSS Lint et JSLint peut vérifier votre document pour les erreurs de syntaxe, les modèles de codage inefficaces, le code inutilisé, etc.

  Réduire et concaténer le code CSS et JavaScript

  L'étape importante de l'optimisation consiste à limiter le nombre de requêtes HTTP qu'un site Web doit effectuer pour rendre son contenu. Chaque aller-retour au serveur et retour pour récupérer des ressources prend du temps, ce qui a un impact négatif sur l'expérience utilisateur.

  Réduire (c'est-à-dire supprimer les commentaires et espaces blancs de votre document) et concaténer Les fichiers CSS et JavaScript sont maintenant devenus une pratique consolidée qui vise à réduire la taille des fichiers et à diminuer le nombre de requêtes HTTP.

  Si vous voulez approfondir, Comment optimiser CSS et JS pour Faster Sites par Gary Stevens est une bonne lecture

  Attention à la taille de vos fichiers

  La partie la plus lourde d'une page Web est souvent représentée par des fichiers image, mais aussi des fichiers audio et vidéo. L'optimisation des ressources visuelles est donc cruciale pour la performance du site Web.

  Cela implique deux aspects:

  • Veiller à utiliser le format d'image de droite pour le travail en cours. actifs avant de les télécharger pour la production. Il existe d'excellents outils qui peuvent vous aider. Découvrez des outils en ligne comme TinyPNG pour les images raster (PNG, JPG, etc.) et [] pour l'optimisation SVG de Jake Archibald SSVGOMG . Considérez aussi les outils que vous pouvez installer localement comme votre coureur de tâches favori (Grunt, Gulp, etc.).

  Conclusion

  Un site web à rendu rapide est un facteur clé sites Internet. Cela devient encore plus crucial quand il s'agit d'évaluer l'expérience de l'utilisateur Web sur les appareils mobiles.

  Dans cet article, j'ai énuméré un certain nombre de techniques qui jouent un rôle dans l'optimisation d'un site Web Bootstrap pour les performances du front. -end development.

  Quelles sont vos techniques d'optimisation frontale pour un site Web Bootstrap à chargement rapide? Faites-moi savoir dans les commentaires!

  Si vous avez les bases de Bootstrap à votre actif mais que vous vous demandez comment faire passer vos compétences Bootstrap au niveau supérieur, consultez notre Construire votre premier site Web avec Bootstrap 4 cours pour une introduction rapide et amusante à la puissance de Bootstrap.

  
  

  Maria Antonietta Perna est co-rédactrice de la chaîne HTML / CSS de SitePoint et développeur Web front-end. Elle aime bricoler avec les standards CSS et est curieuse d'enseigner des approches pour le code frontal. Lorsqu'elle ne code pas pour le Web ou qu'elle n'écrit pas pour le Web, elle aime les livres de philosophie, les longues marches et la bonne nourriture.