
Guide d'optimisation des performances du front-end
Description
Introduction au livre
Les cours populaires d'Inflearn, choisis par 2 000 étudiants
Contient de nombreuses années d'expérience en matière de conseil et d'enseignement !
Apprenez les techniques d'optimisation des performances web grâce à 4 services pratiques
L'optimisation des performances web est un aspect que les développeurs front-end doivent prendre en compte.
Les points d'optimisation requis varient en fonction de l'environnement et de la situation du service, et les techniques sont également très diverses ; il est donc important de pouvoir les adapter aux caractéristiques du service développé.
L'auteur a intégré dans cet ouvrage son expérience de conseil en matière de performance des services web de nombreuses entreprises et d'animation de conférences sur l'optimisation et le développement sur des plateformes telles que Samsung SSAFY, Programmers, Infraon et StudyPie.
Il est structuré pour offrir une expérience réaliste, en soulignant que la pratique est plus importante que la théorie pour apprendre efficacement le sujet de « l'optimisation des performances ».
Ce livre fournit un savoir-faire intuitif en matière d'optimisation à travers quatre exemples pratiques de sites couramment développés dans la réalité.
Apprenons ensemble différents points tels que l'optimisation de la taille du contenu, le chargement différé et le préchargement des composants, l'optimisation du code goulot d'étranglement et l'optimisation du cache afin de développer votre propre expérience en matière d'optimisation.
Contient de nombreuses années d'expérience en matière de conseil et d'enseignement !
Apprenez les techniques d'optimisation des performances web grâce à 4 services pratiques
L'optimisation des performances web est un aspect que les développeurs front-end doivent prendre en compte.
Les points d'optimisation requis varient en fonction de l'environnement et de la situation du service, et les techniques sont également très diverses ; il est donc important de pouvoir les adapter aux caractéristiques du service développé.
L'auteur a intégré dans cet ouvrage son expérience de conseil en matière de performance des services web de nombreuses entreprises et d'animation de conférences sur l'optimisation et le développement sur des plateformes telles que Samsung SSAFY, Programmers, Infraon et StudyPie.
Il est structuré pour offrir une expérience réaliste, en soulignant que la pratique est plus importante que la théorie pour apprendre efficacement le sujet de « l'optimisation des performances ».
Ce livre fournit un savoir-faire intuitif en matière d'optimisation à travers quatre exemples pratiques de sites couramment développés dans la réalité.
Apprenons ensemble différents points tels que l'optimisation de la taille du contenu, le chargement différé et le préchargement des composants, l'optimisation du code goulot d'étranglement et l'optimisation du cache afin de développer votre propre expérience en matière d'optimisation.
- Vous pouvez consulter un aperçu du contenu du livre.
Aperçu
indice
Chapitre 1 : Optimisation des services de blog
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Inspection de page à l'aide de l'outil Lighthouse
____Vérifiez auprès de Lighthouse
Résultats des tests Lighthouse
Optimisation de la taille de l'image
____Analyse d'images inefficace
____Image CDN
____Optimisé pour une taille d'image appropriée
Optimisation du code des goulots d'étranglement
Explorez le panneau Performance
____Observez le processus de chargement de la page
Amélioration du code du goulot d'étranglement
Comparaison avant et après optimisation
Division du code et chargement différé
____Analyse des fichiers groupés
____Qu'est-ce que le fractionnement de code ?
Application du fractionnement du code ____
Compression de texte
environnement de production et environnement de développement
Qu'est-ce que la compression de texte ____ ?
Appliquer la compression de texte
Chapitre 2 : Optimisation des services de statistiques olympiques
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Optimisation des animations
Trouvez l'animation en question.
Les principes de l'animation
Processus de rendu du navigateur
____Refusion et redessin
____Accélération matérielle (accélération GPU)
____Optimisation de l'animation
Comparaison avant et après optimisation
Chargement différé des composants
____Analyse des fichiers groupés
____Séparez le code modal
Préchargement des composants
____Inconvénients du chargement différé
____Temps de préchargement des composants
Préchargement d'images
Chargement des images lent
Préchargement des images
Chapitre 3 : Optimisation du site web
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Chargement différé des images
____Analyse de réseau
Observateur d'intersection
Application de l'observateur d'intersection
Optimisation de la taille de l'image
____Analyse du chargement lent des images
____Type de format d'image
Conversion d'images à l'aide de ____Squoosh
Comparaison avant et après optimisation
Optimisation vidéo
____Analyse du contenu vidéo
Compression vidéo
____Appliquer une vidéo compressée
Comparaison avant et après optimisation
____conseil
Optimisation des polices
____FOUT, FOIT
____Comment optimiser les polices
Optimisation du cache
Qu'est-ce que ____cache ?
____Contrôle du cache
____Cache appliqué
Durée d'expiration du cache appropriée
Supprimez les CSS inutiles.
____PurgeCSS
Chapitre 4 Optimisation de la galerie d'images
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Évitez les modifications de mise en page
Qu'est-ce qu'un déplacement de mise en page ?
Causes du changement d'agencement
Solution de déplacement de la mise en page
Chargement différé des images
Optimisation du rendu Redux
Rendu de ____React
____Causes du rendu
____useSelector résolution du problème
Optimisation du code des goulots d'étranglement
Analyse modale d'image
Analyse de la fonction ____getAverageColorOfImage
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Inspection de page à l'aide de l'outil Lighthouse
____Vérifiez auprès de Lighthouse
Résultats des tests Lighthouse
Optimisation de la taille de l'image
____Analyse d'images inefficace
____Image CDN
____Optimisé pour une taille d'image appropriée
Optimisation du code des goulots d'étranglement
Explorez le panneau Performance
____Observez le processus de chargement de la page
Amélioration du code du goulot d'étranglement
Comparaison avant et après optimisation
Division du code et chargement différé
____Analyse des fichiers groupés
____Qu'est-ce que le fractionnement de code ?
Application du fractionnement du code ____
Compression de texte
environnement de production et environnement de développement
Qu'est-ce que la compression de texte ____ ?
Appliquer la compression de texte
Chapitre 2 : Optimisation des services de statistiques olympiques
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Optimisation des animations
Trouvez l'animation en question.
Les principes de l'animation
Processus de rendu du navigateur
____Refusion et redessin
____Accélération matérielle (accélération GPU)
____Optimisation de l'animation
Comparaison avant et après optimisation
Chargement différé des composants
____Analyse des fichiers groupés
____Séparez le code modal
Préchargement des composants
____Inconvénients du chargement différé
____Temps de préchargement des composants
Préchargement d'images
Chargement des images lent
Préchargement des images
Chapitre 3 : Optimisation du site web
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Chargement différé des images
____Analyse de réseau
Observateur d'intersection
Application de l'observateur d'intersection
Optimisation de la taille de l'image
____Analyse du chargement lent des images
____Type de format d'image
Conversion d'images à l'aide de ____Squoosh
Comparaison avant et après optimisation
Optimisation vidéo
____Analyse du contenu vidéo
Compression vidéo
____Appliquer une vidéo compressée
Comparaison avant et après optimisation
____conseil
Optimisation des polices
____FOUT, FOIT
____Comment optimiser les polices
Optimisation du cache
Qu'est-ce que ____cache ?
____Contrôle du cache
____Cache appliqué
Durée d'expiration du cache appropriée
Supprimez les CSS inutiles.
____PurgeCSS
Chapitre 4 Optimisation de la galerie d'images
Introduction au contenu de la formation pratique
____Les techniques d'optimisation que vous apprendrez dans ce chapitre
Présentation de l'outil d'analyse ____
Exploration des services et analyse du code
____Code de téléchargement
____Exécution du service
____Exploration des services
____Analyse de code
Évitez les modifications de mise en page
Qu'est-ce qu'un déplacement de mise en page ?
Causes du changement d'agencement
Solution de déplacement de la mise en page
Chargement différé des images
Optimisation du rendu Redux
Rendu de ____React
____Causes du rendu
____useSelector résolution du problème
Optimisation du code des goulots d'étranglement
Analyse modale d'image
Analyse de la fonction ____getAverageColorOfImage
Image détaillée

Avis de l'éditeur
« Pourquoi ma connexion internet est-elle si lente ? »
Un livre qui vous offrira une pause bienvenue loin des services web fastidieux !
Même pour des services web en apparence identiques, la satisfaction des utilisateurs varie en fonction des performances.
Si le contenu de votre site web s'affiche trop lentement ou si la mise en page change brusquement, obligeant les utilisateurs à cliquer sur des éléments indésirables, ils quitteront le site.
Si vous souhaitez que vos fonctionnalités soigneusement implémentées soient efficacement communiquées aux utilisateurs, « l’optimisation des performances » est essentielle.
Pinterest a augmenté son trafic de recherche et ses inscriptions de 15 % en réduisant les temps de chargement de 40 %, et COOK a réduit son temps de chargement moyen de page à 850 millisecondes, diminuant ainsi son taux de rebond de 7 %.
En d'autres termes, améliorer les performances web permet de fidéliser les utilisateurs, ce qui contribue au succès du service.
Si vous souhaitez identifier la cause de la dégradation des performances du service, consultez les points d'optimisation recommandés dans ce livre.
Ce livre sera la boisson rafraîchissante qui rendra le service web, si lourd et monotone, bien plus agréable à utiliser.
À mesure que le web s'allège, le classement dans les résultats de recherche Google progresse également.
Pratiquez le minimalisme web pour alléger la charge des utilisateurs !
Google affiche en haut les résultats de recherche les pages web dont le temps de chargement est rapide.
Les gens veulent trouver des réponses à leurs questions le plus rapidement possible et la vitesse de chargement des pages est un critère essentiel pour eux.
Google s'intéresse depuis longtemps à la question des « performances web » et a déployé diverses tentatives pour les améliorer.
C’est ainsi que sont nées des technologies telles que Lighthouse et AMP.
De plus, nous mettons régulièrement à jour nos politiques relatives aux performances et nous vous encourageons à améliorer les performances des pages que vous souhaitez voir apparaître dans les résultats de recherche Google.
Les chefs de projet, les concepteurs et les développeurs doivent tous considérer l'expérience utilisateur comme un élément fondamental.
Si vous voulez que les utilisateurs apprécient le service web que vous créez, vous devez être minimaliste et réduire au minimum la charge pesant sur les performances de l'utilisateur.
Vérifions attentivement les points d'optimisation de ce livre afin de nous assurer qu'aucun code inutile n'est chargé, que les paramètres du cache sont appropriés et que la taille du contenu n'est pas supérieure à ce qui est nécessaire.
Un livre qui vous offrira une pause bienvenue loin des services web fastidieux !
Même pour des services web en apparence identiques, la satisfaction des utilisateurs varie en fonction des performances.
Si le contenu de votre site web s'affiche trop lentement ou si la mise en page change brusquement, obligeant les utilisateurs à cliquer sur des éléments indésirables, ils quitteront le site.
Si vous souhaitez que vos fonctionnalités soigneusement implémentées soient efficacement communiquées aux utilisateurs, « l’optimisation des performances » est essentielle.
Pinterest a augmenté son trafic de recherche et ses inscriptions de 15 % en réduisant les temps de chargement de 40 %, et COOK a réduit son temps de chargement moyen de page à 850 millisecondes, diminuant ainsi son taux de rebond de 7 %.
En d'autres termes, améliorer les performances web permet de fidéliser les utilisateurs, ce qui contribue au succès du service.
Si vous souhaitez identifier la cause de la dégradation des performances du service, consultez les points d'optimisation recommandés dans ce livre.
Ce livre sera la boisson rafraîchissante qui rendra le service web, si lourd et monotone, bien plus agréable à utiliser.
À mesure que le web s'allège, le classement dans les résultats de recherche Google progresse également.
Pratiquez le minimalisme web pour alléger la charge des utilisateurs !
Google affiche en haut les résultats de recherche les pages web dont le temps de chargement est rapide.
Les gens veulent trouver des réponses à leurs questions le plus rapidement possible et la vitesse de chargement des pages est un critère essentiel pour eux.
Google s'intéresse depuis longtemps à la question des « performances web » et a déployé diverses tentatives pour les améliorer.
C’est ainsi que sont nées des technologies telles que Lighthouse et AMP.
De plus, nous mettons régulièrement à jour nos politiques relatives aux performances et nous vous encourageons à améliorer les performances des pages que vous souhaitez voir apparaître dans les résultats de recherche Google.
Les chefs de projet, les concepteurs et les développeurs doivent tous considérer l'expérience utilisateur comme un élément fondamental.
Si vous voulez que les utilisateurs apprécient le service web que vous créez, vous devez être minimaliste et réduire au minimum la charge pesant sur les performances de l'utilisateur.
Vérifions attentivement les points d'optimisation de ce livre afin de nous assurer qu'aucun code inutile n'est chargé, que les paramètres du cache sont appropriés et que la taille du contenu n'est pas supérieure à ce qui est nécessaire.
SPÉCIFICATIONS DES PRODUITS
- Date de publication : 15 novembre 2022
Nombre de pages, poids, dimensions : 244 pages | 528 g | 172 × 225 × 15 mm
- ISBN13 : 9788966263745
- ISBN10 : 8966263747
Vous aimerez peut-être aussi
카테고리
Langue coréenne
Langue coréenne