Maison > Article > interface Web > 9 conseils d'optimisation front-end qui valent la peine d'être collectés (amélioration des performances Web)

9 conseils d'optimisation front-end qui valent la peine d'être collectés (amélioration des performances Web)

青灯夜游avant: 2020-07-14 16:35:573318parcourir

Dans le monde numérique d’aujourd’hui, il existe d’innombrables sites Web qui doivent gérer chaque jour des visites pour diverses raisons. Cependant, un grand nombre de ces sites semblent peu pratiques et fastidieux à utiliser. Un site Web mal optimisé peut souffrir de divers problèmes, notamment les temps de chargement, le manque de prise en charge des appareils mobiles, les problèmes de compatibilité des navigateurs, etc.

Cet article décrit des techniques qui peuvent aider à améliorer et optimiser le front-end, ce qui est très utile. Le contenu principal comprend le nettoyage du code, la compression des images, la compression des ressources externes, l'utilisation de CDN et quelques autres méthodes. Ces méthodes apporteront des améliorations significatives de la vitesse et des performances globales à votre site Web.

1. Un document HTML propre

Le HTML, Hypertext Markup Language, est l'épine dorsale de presque tous les sites Web. HTML apporte le formatage des titres, sous-titres, listes et autres structures de documents aux pages Web. Dans la récente mise à jour de HTML5, il est même possible de créer des graphiques.

Le HTML est facilement reconnu par les robots d'exploration Web, de sorte que les moteurs de recherche peuvent, dans une certaine mesure, se mettre à jour en temps réel en fonction du contenu du site Web. Lorsque vous écrivez du HTML, vous devriez essayer de le rendre concis mais efficace. De plus, certaines bonnes pratiques doivent être suivies lors du référencement de ressources externes dans des documents HTML.

Placez correctement le CSS

Les concepteurs Web aiment créer des feuilles de style une fois que le squelette HTML principal d'une page Web a été établi. Par conséquent, les feuilles de style des pages Web sont souvent placées après le code HTML, vers la fin du document. Cependant, l'approche recommandée consiste à placer le CSS en haut du HTML, dans l'en-tête du document, pour garantir un rendu normal.

<head>
</head>

Cette stratégie n'améliorera pas la vitesse de chargement du site Web, mais elle ne fera pas attendre longtemps les visiteurs devant un écran vide ou un texte non formaté (FOUT). Si la plupart des éléments visibles de la page Web ont déjà été chargés, les visiteurs sont plus susceptibles d'attendre que la page entière se charge, optimisant ainsi le front-end. C’est une performance perceptuelle.

Si vous souhaitez apprendre le front-end, vous pouvez venir dans ce groupe. Le premier est le 291, le milieu est le 851 et le dernier est le 189. Vous pouvez y apprendre et communiquer, et il y en a un. beaucoup de matériel d'apprentissage pouvant être téléchargé.

Placez Javascript correctement

En revanche, si vous placez JavaScript à l'intérieur de la balise head ou en haut du document HTML, cela bloquera le processus de chargement des éléments HTML et CSS. Cette erreur entraînera une augmentation du temps de chargement de la page, une augmentation du temps d'attente de l'utilisateur et rendra facilement les gens impatients et abandonneront la visite du site Web. Cependant, vous pouvez éviter ce problème en plaçant les attributs JavaScript au bas du code HTML.

De plus, lorsqu'ils utilisent JavaScript, les gens aiment souvent utiliser le chargement de scripts asynchrones. Cela empêche la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a d'être affichée en HTML, par exemple, au milieu du document.

Bien que HTML soit l'un des outils les plus précieux pour les concepteurs de sites Web, il est souvent utilisé en conjonction avec CSS et JavaScript, ce qui peut ralentir la navigation sur le Web. Bien que CSS et JavaScript soient bénéfiques pour l’optimisation des pages Web, certains problèmes doivent être pris en compte lors de leur utilisation. Lorsque vous utilisez CSS et JavaScript, évitez d’intégrer du code. Parce que lorsque vous intégrez du code, vous placez du CSS dans les balises de style et utilisez du JavaScript dans les balises de script, cela augmente la quantité de code HTML qui doit être chargé à chaque fois que la page est actualisée.

Liaison de fichiers ? Pas de soucis

Dans le passé, vous avez peut-être fréquemment lié des scripts CSS à un seul fichier pour référencer des fichiers externes dans votre code HTML. Il s'agit d'une pratique raisonnable lors de l'utilisation du protocole HTTP1.1, mais ce protocole n'est plus requis.

Grâce à HTTP/2, vous pouvez désormais envoyer et recevoir des requêtes et des réponses HTTP de manière asynchrone sur une seule connexion TCP en utilisant le multiplexage.

Source de l'image : http://qnimate.com

Cela signifie que vous n'avez plus besoin de Fréquemment lier plusieurs scripts à un seul fichier.

2. Optimiser les performances CSS

Les CSS, feuilles de style en cascade, peuvent générer des fichiers professionnels et soignés à partir du contenu décrit en HTML. De nombreux CSS doivent être extraits via des requêtes HTTP (sauf si vous utilisez du CSS en ligne), vous devrez donc travailler dur pour supprimer les fichiers CSS redondants, mais veillez à conserver ses fonctionnalités importantes.

Si vos styles de bannière, de plug-in et de mise en page sont enregistrés dans différents fichiers à l'aide de CSS, le navigateur du visiteur chargera de nombreux fichiers à chaque visite. Bien que l’existence de HTTP/2 réduise désormais l’apparition de ce problème, le chargement des ressources externes prend encore beaucoup de temps. Pour savoir comment réduire les requêtes HTTP afin d’améliorer considérablement les temps de chargement, lisez Performances WordPress.

De plus, de nombreux webmasters utilisent par erreur la directive @import pour introduire des feuilles de style externes dans leurs pages Web. Il s'agit d'une méthode obsolète qui bloque la navigation pour les téléchargements parallèles. La balise de lien est le meilleur choix et elle peut également améliorer les performances frontales du site Web. En remarque, les feuilles de style externes chargées via des demandes de balises de lien n'empêchent pas les téléchargements parallèles.

3. Réduire les requêtes HTTP externes

Dans de nombreux cas, la majeure partie du temps de chargement du site Web provient de requêtes HTTP externes. La vitesse de chargement des ressources externes varie en fonction de l'architecture du serveur de l'hébergeur, de sa localisation, etc. La première étape pour réduire les demandes externes consiste à inspecter brièvement votre site Web. Recherchez chaque composant de votre site Web et éliminez tout ce qui nuit à l’expérience de vos visiteurs. Ces ingrédients peuvent être :

Images inutiles

Code JavaScript inutile

Css excessif

Plugins superflus

Après avoir supprimé ces composants redondants , puis organisez le contenu restant, tel que les outils de compression, les services CDN et la prélecture (prélecture), etc. Ce sont les meilleurs choix pour gérer les requêtes HTTP. De plus, le didacticiel Réduire la recherche de route DNS vous apprend étape par étape comment réduire les requêtes HTTP externes.

4. Compresser CSS, JS et HTML

La technologie de compression peut supprimer le contenu redondant du caractère des fichiers. . Lorsque vous écrivez du code dans un éditeur, vous utilisez l'indentation et les commentaires. Ces méthodes rendent sans aucun doute votre code concis et lisible, mais elles ajoutent également des octets supplémentaires au document.

Par exemple, voici un morceau de code avant compression.

.entry-content p {

font-size: 14px !important;

}

.entry-content ul li {

taille de police : 14px !important;

}

.product_item p a {

couleur : #000;

remplissage : 10px 0px 0px 0;

margin-bottom: 5px;

border-bottom: none;

}

Après avoir compressé ce code Voilà comment c'est devenu.

.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border- bottom:none>

L'utilisation d'outils de compression permet de supprimer très facilement les octets inutiles de vos fichiers CSS, JS et HTML. Pour plus d'informations sur la compression, consultez Comment compresser CSS, JS et HTML.

5. Utiliser la prélecture

La prélecture peut obtenir les ressources nécessaires avant qu'elles ne soient réellement nécessaires et les données associées. pour améliorer l'expérience de navigation des utilisateurs en visite. Il existe trois principaux types de prélecture :

Prélecture de lien

Prélecture DNS

Pré-rendu

Avant de quitter la page Web actuelle, en utilisant la méthode de pré-extraction, l'adresse URL, le CSS, les images et les scripts correspondant à chaque lien seront pré-récupérés. Cela garantit que les visiteurs peuvent utiliser des liens pour basculer entre les écrans dans les plus brefs délais.

Heureusement, la prélecture est facile à mettre en œuvre. Selon la forme de prélecture que vous souhaitez utiliser, il vous suffit d'ajouter la balise rel="prefetch", rel="dns-prefetch" ou rel="prerender" à l'attribut de lien dans le code HTML de votre site Web.

6. Améliorez la vitesse avec le CDN et la mise en cache

Les réseaux de diffusion de contenu peuvent améliorer considérablement la vitesse et les performances de votre site Web. Lorsque vous utilisez un CDN, vous pouvez lier le contenu statique de votre site Web à un réseau étendu de serveurs dans le monde entier. Cette fonctionnalité est utile si votre site Web a une audience mondiale. Un CDN permet aux visiteurs de votre site Web de charger des données depuis le serveur le plus proche. Si vous utilisez un CDN, les fichiers de votre site Web sont automatiquement compressés pour une distribution rapide dans le monde entier.

CDN est une méthode de mise en cache qui peut considérablement améliorer le temps de distribution des ressources. En même temps, il peut également mettre en œuvre d'autres technologies de mise en cache, telles que l'utilisation du cache du navigateur.

Une configuration appropriée du cache du navigateur peut permettre au navigateur de stocker automatiquement certains fichiers pour accélérer les transferts. La configuration de cette méthode peut être effectuée directement dans le fichier de configuration du serveur source.

En savoir plus sur la mise en cache et les différents types de méthodes de mise en cache dans les définitions de cache.

7. Compresser des fichiers

Bien que de nombreux services CDN puissent compresser des fichiers, si vous ne le faites pas. Si vous utilisez un CDN, vous pouvez également envisager d'utiliser des méthodes de compression de fichiers sur votre serveur d'origine pour améliorer l'optimisation frontale. La compression de fichiers peut alléger le contenu d’un site Web et le rendre plus facile à gérer. L'une des méthodes de compression de fichiers les plus couramment utilisées est Gzip. C'est un excellent moyen de réduire les documents, les fichiers audio, les images PNG et autres fichiers volumineux.

Brotli est un algorithme de compression de fichiers relativement nouveau qui devient de plus en plus populaire. Cet algorithme open source est régulièrement mis à jour par les ingénieurs logiciels de Google et d'autres organisations et s'est avéré plus efficace que les autres méthodes de compression existantes. La prise en charge de cet algorithme est actuellement relativement limitée, mais il est sur le point de devenir une étoile montante.

Pour plus d'informations, lisez notre article complet sur la compression Brotli.

Pour ceux qui ne comprennent pas l’optimisation front-end, les images peuvent être un « tueur de site Web ». Un grand nombre d’albums photo et d’énormes images haute définition entraveront la vitesse de rendu de la page Web. Les images HD non optimisées peuvent avoir une taille de plusieurs mégaoctets (Mo). Ainsi, les optimiser de manière appropriée peut améliorer les performances frontales de vos pages Web.

Chaque fichier image contient des informations qui ne sont pas liées à une photo ou une image pure. Par exemple, une image JPEG contient la date, le lieu, le modèle d'appareil photo et d'autres informations non pertinentes. Vous pouvez utiliser certains outils d'optimisation tels qu'Optimus pour supprimer ces données d'image redondantes et rationaliser le long processus de chargement d'image. Optimus étant un outil de compression d'image sans perte, il n'affecte pas la qualité de l'image, mais compresse uniquement le volume de l'image.

De plus, si vous souhaitez optimiser davantage une image

morceau, vous pouvez utiliser la compression avec perte, qui supprimera certaines images contiennent des données, la qualité sera donc compromise.

Pour en savoir plus sur la différence entre la compression avec et sans perte, lisez notre tutoriel complet.

9. Utilisez des frameworks légers

À moins que vous ne construisiez un site Web en utilisant uniquement vos connaissances en codage existantes, vous pouvez essayer d'utiliser une bonne façade -framework pour éviter de nombreuses erreurs d'optimisation front-end inutiles. Bien qu'il existe des frameworks plus grands et plus connus qui offrent plus de fonctionnalités et d'options, ils ne conviennent pas nécessairement à votre projet Web.

Ainsi, non seulement il est important de déterminer les fonctionnalités requises pour le projet, mais il est également important de choisir le bon framework - celui qui fournit les fonctionnalités requises tout en restant léger. De nos jours, de nombreux frameworks utilisent du code HTML, CSS et JavaScript concis.

Voici plusieurs frameworks légers qui peuvent accélérer la lecture :

Pure

Skeleton

Milligram

Le framework ne peut pas remplacer la conception, la programmation et la maintenance Web. À titre d'exemple simple, supposons que la charpente soit une maison neuve. La maison était propre et bien rangée, mais elle était vide. Lorsque vous ajoutez des meubles, des appareils électroménagers et des décorations, il est de votre responsabilité de vous assurer que la maison ne soit pas encombrée. De même, lorsque vous utilisez un framework, il est de votre responsabilité de vous assurer qu'il n'est pas endommagé par du code redondant, des images volumineuses et un trop grand nombre de requêtes HTTP.

Optimisation du front-end – Résumé

L'optimisation du front-end semble demander beaucoup d'efforts, je crois que quelques conseils dans ce guide d'application peut vous aider à améliorer considérablement la vitesse de chargement du site Web. Plus votre site Web se charge rapidement, meilleure sera l’expérience utilisateur. Par conséquent, l’optimisation du front-end peut bénéficier à la fois à vous et à vos utilisateurs. Si vous disposez d'autres bonnes méthodes d'optimisation, veuillez laisser vos précieuses suggestions dans la zone de commentaires.

Cet article est reproduit à partir de : https://blog.csdn.net/lin123_00/article/details/106652145

Pour plus de connaissances connexes, veuillez visiter : Site Web PHP chinois !

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Savez-vous quelle sera la tendance de développement du grand front-end en 2021 (explication détaillée)Article suivant：Savez-vous quelle sera la tendance de développement du grand front-end en 2021 (explication détaillée)

Articles Liés

Voir plus