Points clés
L'optimisation du site Web est un ensemble de technologies côté serveur et côté client conçues pour accélérer le chargement et le rendu des sites Web dans le navigateur, améliorant ainsi l'expérience utilisateur.
Maintenant, les visiteurs sont habitués à l'immédiateté et à la réactivité des applications natives. Ils s'attendent à ce que la page Web se charge en 1000 millisecondes. Si le temps de chargement est beaucoup plus long, ils quitteront probablement le site.
Les moteurs de recherche ont sans aucun doute rattrapé cette tendance et l'ont promu à bien des égards. En fait, Google a toujours utilisé la vitesse de la page comme facteur dans le classement des sites Web dans la recherche de bureau. Google a annoncé qu'à partir de juillet 2018, la recherche mobile est également cruciale pour obtenir des classements supérieurs dans la liste des résultats de recherche.
Bootstrap est souvent critiqué pour avoir ajouté une redondance inutile à votre site Web, donc si vous utilisez cette bibliothèque d'interface utilisateur frontale populaire dans votre projet, assurez-vous de prêter une attention supplémentaire à la taille de la page et à la vitesse de la page.
Dans cet article, je couvrirai trois étapes d'optimisation frontale que vous pouvez prendre pour garantir que votre site Web basé sur Bootstrap est rendu rapidement et bien optimisé.
Téléchargez uniquement le package bootstrap dont vous avez besoin
Si vous décidez d'utiliser le package de téléchargement précompilé de Bootstrap, vous devriez vraiment réfléchir aux pièces dont vous avez vraiment besoin.
Le dossier de téléchargement contient la bibliothèque CSS complète (bootstrap.css et bootstrap.min.css) et la bibliothèque de composants JavaScript et toutes ses dépendances (sauf jQuery) (bootstrap.bundle.js et bootstrap.bundle.min.js) et de nombreux fichiers CSS autonomes qui contiennent le code requis pour des parties spécifiques de cette boîte à outils d'interface utilisateur populaire.
Si vous n'avez besoin que d'un joli style de réinitialisation CSS, utilisez simplement Bootstrap-reboot.min.css. Si vous n'avez besoin que d'un système de grille flexible et facile à utiliser, utilisez Bootstrap- grid.min.css. Pas besoin de télécharger l'intégralité du cadre. D'un autre côté, si vous savez que vous souhaitez tout utiliser dans la bibliothèque, assurez-vous du moins d'inclure une version mince.
Il en va de même pour le code JavaScript. Si vous savez que vous n'avez pas besoin de menus déroulants, de fenêtres contextuelles et d'installations dans votre projet, utilisez bootstrap.min.js au lieu de bootstrap.bundle.min.js parce que vous n'avez pas besoin d'inclure popper.js .
Sélectionnez le code source au lieu du package de téléchargement précompilé
Bien que la dernière version de Bootstrap vous permet de sélectionner les pièces que vous souhaitez inclure dans votre projet, les fichiers précompilés peuvent toujours contenir ce dont vous n'avez pas réellement besoin.
Le navigateur doit toujours télécharger et traiter le code inutilisé, ce qui peut affecter les performances du site Web, en particulier lorsque la connexion réseau est lente.
Une meilleure façon est de télécharger le code source bootstrap car:
Utilisation de la technologie d'optimisation des clients éprouvée
En dehors des points ci-dessus, l'optimisation des sites Web basés sur Bootstrap pour les performances doit toujours inclure une technologie de performance frontale comme tout autre site Web.
Voici les facteurs clés pour une optimisation efficace du site Web frontal que vous pouvez remarquer:
Chaque caractère du code augmente la taille finale de la page Web. Écrire du code CSS et JavaScript concis et clair tout en le gardant lisible n'est pas facile. Cependant, cela devrait être l'objectif que chaque projet devrait viser.
Les bonnes pratiques CSS incluent la suppression des sélecteurs inutilisés, du code en double et des règles sur-cou. Il est préférable de garder le code organisé au début du projet. Par exemple, l'utilisation de guides de style peut vraiment profiter à votre processus de développement et à votre qualité de code.
De plus, il existe d'excellents outils pour vous aider à nettoyer votre code. Les inspecteurs de code comme CSS Lint et JSLint peuvent vérifier votre document pour les erreurs de syntaxe, les modèles de codage inefficaces, le code inutilisé, etc.
Une étape d'optimisation importante consiste à limiter le nombre de demandes HTTP qu'un site Web doit effectuer afin de présenter son contenu. Chaque fois que vous faites des allers-retours sur le serveur pour obtenir des ressources prend du temps, ce qui affecte négativement l'expérience utilisateur.
La compression (c'est-à-dire la suppression des commentaires et des espaces des documents) et de la fusion des fichiers CSS et JavaScript sont désormais devenus une pratique solide conçue pour maintenir les tailles de fichiers petites et réduire le nombre de demandes HTTP.
Si vous voulez obtenir un look plus profond, comment optimiser CSS et JS de Gary Stevens pour accélérer un site Web est un excellent article.
Les parties les plus lourdes d'une page Web sont généralement représentées par des fichiers image, mais les fichiers audio et vidéo jouent également un rôle. Par conséquent, l'optimisation des actifs visuels est cruciale pour les performances du site Web.
Faire cela implique deux aspects:
Conclusion
Un rendu rapide du site Web est un facteur clé pour déterminer l'expérience utilisateur du site Web. Cela devient encore plus important lors de l'évaluation de l'expérience utilisateur Web sur les appareils mobiles.
Dans cet article, je répertorie de nombreuses technologies qui jouent un rôle dans l'optimisation des performances d'un site Web bootstrap du point de vue du développement frontal.
Quelles techniques d'optimisation frontale avez-vous pour les sites Web de bootstrap à chargement rapide? S'il vous plaît laissez-moi savoir dans les commentaires!
Si vous avez déjà les bases de Bootstrap mais que vous souhaitez savoir comment faire passer vos compétences bootstrap au niveau supérieur, consultez notre premier site Web avec Bootstrap 4 Cours pour une connaissance rapide et facile sur la puissance de Bootstrap.
FAQ sur les sites Web bootstrap (FAQ)
Il peut y avoir de nombreuses raisons pour lesquelles votre site Web bootstrap est lent. L'une des raisons les plus courantes est l'utilisation de composants et de plugins inutiles. Bootstrap est livré avec beaucoup de composants et de plugins, et si vous ne les utilisez pas, il est préférable de les retirer. Une autre raison peut être que les grandes images sont utilisées. De grandes images peuvent réduire considérablement la vitesse du site Web. Il est recommandé d'optimiser l'image avant de le télécharger sur le site Web. Enfin, le fait de ne pas compresser les fichiers CSS et JavaScript peut également ralentir le site Web. La compression de ces fichiers peut augmenter considérablement la vitesse de votre site Web.
Il existe plusieurs façons d'optimiser votre site Web bootstrap pour de meilleures performances. Tout d'abord, vous devez supprimer tous les composants et plugins inutiles. Bootstrap est livré avec beaucoup de composants et de plugins, et si vous ne les utilisez pas, il est préférable de les retirer. Deuxièmement, vous devez optimiser l'image avant de le télécharger sur le site Web. De grandes images peuvent réduire considérablement la vitesse du site Web. Troisièmement, vous devez compresser les fichiers CSS et JavaScript. La compression de ces fichiers peut augmenter considérablement la vitesse de votre site Web.
La compression est le processus de suppression des caractères inutiles (tels que des espaces et des commentaires) du code source sans modifier leur fonctionnalité. Cela réduit la taille du code et réduit à son tour la quantité de données qui doivent être transférées à l'utilisateur, accélérant ainsi le temps de chargement.
Il existe plusieurs outils en ligne disponibles pour compresser vos fichiers CSS et JavaScript. Ces outils suppriment les caractères inutiles de votre code, réduisant leur taille et augmentant le temps de chargement. Certains outils de compression populaires incluent UGLIFYJS pour JavaScript et CSSNANO pour CSS.
Il existe plusieurs façons d'optimiser l'image d'un site Web bootstrap. L'un des moyens les plus efficaces est de compresser l'image avant de le télécharger sur le site Web. Il existe plusieurs outils en ligne disponibles pour compresser vos images sans dégrader considérablement leur qualité. Une autre façon d'optimiser une image consiste à utiliser le format d'image correct. Par exemple, JPEG est généralement plus adapté aux photos, tandis que la PNG est plus adaptée aux images avec des arrière-plans transparents.
Oui, certains composants bootstrap peuvent ralentir le site Web s'ils sont mal utilisés. Par exemple, si vous utilisez de grandes images, le composant de carrousel peut ralentir le site Web. Il est recommandé d'optimiser votre image avant de l'utiliser pour le carrousel. De plus, si les composants modaux sont chargés sur chaque page, cela peut ralentir le site Web. Il est recommandé de charger des composants modaux uniquement sur les pages requises.
Vous pouvez supprimer les composants et plugins bootstrap inutiles en personnalisant la version bootstrap. Cela comprend le téléchargement du fichier source, la suppression des composants et des plugins indésirables, puis de la compilation des fichiers restants dans une version personnalisée.
Oui, l'utilisation d'un réseau de distribution de contenu (CDN) peut augmenter considérablement la vitesse de votre site Web bootstrap. CDN fournit des fichiers statiques (tels que CSS, JavaScript et des images) du site Web à partir d'un serveur géographiquement proche de l'utilisateur, accélérant ainsi le temps de chargement.
Vous pouvez utiliser CDN et votre site Web bootstrap en liant à un fichier bootstrap sur le CDN dans un fichier HTML. Cela comprend le remplacement du chemin de fichier local dans le fichier HTML par l'URL du fichier sur le CDN.
Oui, il y a d'autres conseils pour accélérer le site Web de bootstrap. Par exemple, vous devez toujours placer le fichier JavaScript à la fin d'un fichier html. Cela permet au reste de la page d'être chargé avant le fichier JavaScript, accélérant ainsi le temps de chargement perçu. De plus, vous devez utiliser le chargement asynchrone pour les fichiers JavaScript. Cela permet au fichier de se charger en arrière-plan sans bloquer le reste de la page.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
