Optimisation des performances des pages Web

Écoutez cet article

Les sites Web sont généralement divisés en deux parties : le front-end et le back-end. Nous pouvons comprendre que l'arrière-plan est utilisé pour mettre en œuvre les fonctions du site Web, telles que : effectuer l'enregistrement des utilisateurs, changer les mots de passe, commenter les articles, etc. Mais qu'en est-il du frontend ? En fait, il devrait s'agir d'une fonction de performance. La plupart des facteurs qui affectent l'accessibilité de l'utilisateur sont liés à l'optimisation des pages externes du site. Optimisation des pages – cet article donnera un aperçu de ce processus.

Le contenu de l'article :

• 1. Optimiser le temps de chargement des pages
• 2. Compresser toutes les ressources compressibles
• 3. Optimisation du cache du site
• 4. Chemin de rendu critique

1. Optimiser le temps de chargement des pages

Meilleure optimisation des pages - c'est quand les ressources ne sont pas chargées du tout. Par conséquent, essayez de minimiser le nombre de ressources inutiles téléchargées.

1. Évaluez si certaines des dépendances de votre site sont nécessaires et pesez le pour et le contre.
2. Le chemin de chargement dépendant est-il fiable et bloquera-t-il la page entière lorsqu'il n'est pas disponible.

2. Compresser toutes les ressources compressibles

1. Le code doit être entièrement compressé.
2. Supprimez les images indésirables.
3. Utilisez css3 au lieu d'images.
4. Utilisez des images avec un taux de compression plus élevé. Surtout les GIF, certains formats vidéo (H.264 ou WebM) sont beaucoup plus petits que les GIF.
5. Utilisez des polices WordArt, pas des images.
6. Fournir des formats d'image plus modernes pour les utilisateurs avec des navigateurs plus récents (par exemple : WebP).
7. Bitmaps avec plusieurs résolutions pour différentes tailles de page.
8. Spécifiez une largeur et une hauteur pour l'image, sinon un écrêtage peut se produire.
9. Utilisez HTTP/2. Par exemple, un sprite est une grande image composée de nombreuses petites images, ce qui peut réduire le nombre de requêtes HTTP. Cependant, il est difficile de mettre en cache, et la modification de la petite image invalidera le cache de toutes les petites images. HTTP/2, plusieurs requêtes peuvent être lancées à partir d'un lien, éliminant ainsi le besoin de sprites.

3. Optimisation du cache du site Web

Mécanisme de mise en cache du navigateur :

1. Visitez la page, demandez diverses ressources et le navigateur vérifie s'il existe un cache local.
2. Si c'est le cas, vérifiez si la ressource a expiré. Non expiré, utilisez le cache directement. Lorsqu'il expire, une demande est faite au serveur.
3. Les champs d'en-tête etag et last-modified seront inclus dans la requête envoyée.
4. Le serveur utilisera l'Etag et la dernière modification pour déterminer si la ressource mise en cache par le navigateur n'est pas disponible.
5. Si la ressource est toujours valide, renvoyez un code de réponse 304 pour indiquer au navigateur d'utiliser le cache. Sinon, retournez la ressource mise à jour.

Selon cet ensemble de logique, vous pouvez planifier le cache de votre site Web.

Comment puis-je notifier au navigateur de mettre à jour une ressource si la ressource expire plus tôt ?

Ce n'est généralement pas possible car le navigateur voit que la ressource n'a pas expiré et ne fait pas la demande du tout. Mais cela peut être réalisé en changeant l'URL de la ressource. Par conséquent, vous devez ajouter un numéro de version ou une balise aléatoire au nom de fichier de la ressource. Par exemple style.12.css. Autrement dit, ne laissez pas le navigateur mettre en cache le fichier html, sinon le navigateur n'interrogera pas le serveur avant son expiration.

4. Chemin de rendu critique

Le navigateur affiche la page Web avec les étapes suivantes :

1. Traitez le balisage HTML et créez l'arborescence DOM.
2. Traitez le balisage CSS et créez l'arborescence CSSOM.
3. Combinez DOM et CSSOM dans un arbre de rendu.
4. Mise en page selon l'arborescence de rendu pour calculer les informations de géométrie de chaque nœud.
5. Dessinez chaque nœud sur l'écran.

Optimiser le chemin de rendu critique signifie optimiser le processus de rendu afin que la page Web puisse être rendue aussi rapidement que possible.

CSS

Les fichiers CSS bloquent le rendu. Une fois que le navigateur a construit l'arborescence DOM, il doit attendre que l'arborescence CSSOM se termine. Une balise en haut du document pour empêcher les CSS non standard et permettre au navigateur de demander le fichier CSS dès que possible.

Évitez d'utiliser @import dans les fichiers css car le navigateur ne trouvera et ne chargera le css importé qu'après le chargement et la compilation du fichier contenant l'importation. Envisagez d'utiliser un CSS en ligne qui ne nécessite pas de requêtes supplémentaires et ne bloque pas le rendu du contenu principal.

js

Le script Java ne commencera pas à s'exécuter tant que le CSSOM n'est pas construit. js empêche également la construction de l'arborescence DOM. Si async n'est pas marqué dans la balise.

Vous allez maintenant comprendre ce qu'est l'optimisation de page et comment elle est construite. Comprendre ces processus vous aidera à optimiser rapidement les pages de votre site, à réduire les demandes et à accélérer le chargement.

Lire cet article :

• Optimisation CSS - 21 façons d'accélérer votre site Web
• Optimisation du code de site JS et CSS en ligne - un guide détaillé

Merci d'avoir lu : SEO HELPER | NICOLA.TOP