Google PageSpeed Insights a été radicalement mis à jour, qu'est-ce qui va changer ? PageSpeed Insights : la vitesse de chargement en tant que facteur de classement Latence d'entrée estimée.
Bonjour, chers lecteurs du site blog. Aujourd'hui, je veux vous parler d'un sujet aussi important que la vitesse de chargement des sites Web. Vous avez probablement déjà entendu dire que, parmi de nombreux autres facteurs influençant la promotion d'un projet Web, les moteurs de recherche ont récemment commencé à en tenir compte également. Et les freins du chantier irritent vraiment les visiteurs, surtout ceux qui y sont habitués.
Mais néanmoins, pour de nombreux webmasters, la vitesse de chargement n'est pas un sujet sur lequel il faut immédiatement se creuser la tête ; elle est généralement reportée à plus tard, et des problèmes urgents liés au remplissage de la ressource avec des matériaux uniques et à son amélioration grâce à l'optimisation interne surviennent. le premier. , mais l'ensemble des facteurs influençant. Comme on dit, une chaîne n’est aussi solide que son maillon le plus faible…
Services en ligne pour mesurer la vitesse de chargement des sites WebEn tout cas, c'est ce que je ressentais jusqu'à récemment en essayant d'accélérer ma ressource. Mais il m'est venu à l'esprit qu'il valait mieux ne pas attendre des tendances désagréables (à savoir une diminution du trafic à partir de , car elle est plus critique sur la vitesse de chargement), mais de corriger dès maintenant la lacune évidente.
Il vous suffit de comprendre que la vitesse de chargement de votre site Web, blog ou forum est un indicateur très important. Si votre projet ne se porte pas bien avec cet indicateur, cela peut avoir des conséquences assez désagréables. Et le plus important d'entre eux est que les visiteurs peuvent refuser de travailler avec votre ressource, car... Le chargement des pages prend beaucoup de temps. De plus, les moteurs de recherche, notamment Google, en tiennent compte lorsqu’ils évaluent l’utilité globale d’une ressource particulière.
Afin de comprendre à quelle vitesse les pages de votre ressource se chargent, vous pouvez utiliser, par exemple, les capacités de celle-ci, décrites en détail dans l'article sur le lien fourni. Ou vous pouvez utiliser les services conçus à cet effet. Ci-dessous, je vais en donner quelques exemples.
En conséquence, un diagramme du temps de téléchargement des objets de page Web individuels sera présenté, ainsi que leur URL et leur poids. Moins il y a d’objets chargés et plus chacun d’eux est léger, mieux c’est. Par exemple, à cet effet, je :
En fait, vous pouvez suivre certains problèmes et l'historique de mesure de la vitesse de votre site sur les onglets adjacents du menu supérieur de Pingdom.
Dans une fenêtre pop-up, vous serez invité à copier le lien permanent vers le test terminé, et également à l'envoyer par e-mail ou Twitter. Vous pouvez également vous abonner pour connaître la disponibilité en bas de la fenêtre. Si votre ressource tombe en panne (devient indisponible pour les visiteurs), alors vous recevrez un message par E-mail ou SMS sur votre téléphone portable. Mais ce service est payant, bien qu'il existe la possibilité d'un essai gratuit.
Pour votre site, ainsi que pour visualiser Traceroute, vous devrez sélectionner l'onglet « Ping et Traceroute » tout en haut de la page. Entrez l'URL sans http dans le formulaire fourni, cochez la case « Traceroute » ou « Ping » sous ce formulaire, puis cliquez sur « Tester maintenant ».
Dans le premier diagramme, faites attention à la position de la ligne verticale violette - ce sera temps de réalisation du rendu du site. La deuxième ligne verticale (bleue) signifiera temps de chargement complet. C'est bien si la première ligne est à 1-1,5 secondes du chargement du site et la deuxième ligne avant 4 secondes. Les paragraphes suivants peuvent alors être lus « à titre de référence ». Si le chargement du site prend plus de 4 secondes, vous devez alors vous soucier de corriger cette situation.
Comme vous pouvez le voir sur la capture d'écran ci-dessus, Google PageSpeed Insights donne une évaluation complète - pour un navigateur d'ordinateur et pour un navigateur mobile. De plus, vous trouverez ci-dessous une évaluation de la facilité d'utilisation de votre ressource sur divers gadgets. Si vous ne l'avez pas encore fait, le score y sera très faible (et sur la capture d'écran de votre site Web à droite dans la fenêtre du smartphone, tout sera clairement visible).
Mais le plus important est que Google PageSpeed Insights donne des recommandations sur la façon d'augmenter le score de votre site, c'est-à-dire comment l'accélérer. Bien entendu, il faut commencer par le haut, car ce sont ces corrections qui contribueront le plus à l'accélération.
Par exemple, j'ai eu un problème avec la configuration de la compression gzip et la définition du temps de mise en cache des fichiers statiques (images, fichiers CSS et scripts) dans les navigateurs utilisateur, car Apache fonctionne en conjonction avec nginx, mais je ne sais pas comment travailler avec il. J'ai dû écrire au support technique d'Infobox pour lui demander de tout configurer - ils l'ont fait et n'ont même pas pris l'argent (merci à eux !). À propos, au départ, ils ont fixé la durée de stockage du cache à 1 heure, mais Google PageSpeed Insights s'est toujours plaint :
J'ai dû me plonger dans les instructions de ce service en ligne et y lire que le minimum requis est de 1 jour de stockage des statistiques dans le cache. J'ai demandé au support technique d'hébergement de fournir 1 semaine de réserve, ce qu'ils ont fait. Maintenant, la note a un peu augmenté et Google n'a pas de plaintes majeures concernant ma ressource en termes de vitesse de chargement, ce qui est bien.
Simple et de bon goût, comme on dit. Vous pouvez vous abonner à la newsletter pour les modifications.
J'ai déjà écrit à ce sujet de manière assez détaillée et je ne me répéterai donc pas, afin de ne pas encombrer un article déjà encombrant (si vous lisez jusqu'au bout, vous pouvez vous considérer comme un héros).
Mais revenons de la mesure de la vitesse à la recherche d'opportunités pour l'augmenter. , il existait auparavant un onglet expérimental « Performances du site », où une évaluation de la vitesse de chargement du site était donnée.
En général, il n'y a rien de criminel dans la vitesse de chargement indiquée ici, mais le fait que mon site de blog se charge plus lentement que 84 % de toutes les ressources Web sur Internet est déjà une sonnette à laquelle il aurait fallu répondre. Mais comme Google considère que mon blog est un outsider en termes de vitesse, cela vaut la peine de prendre ce problème au sérieux et d'aborder sérieusement la question de savoir comment l'augmenter.
En fait, il n'était pas nécessaire de proposer quoi que ce soit de spécial, car Google lui-même suggère la solution la plus optimale. Plus précisément, il suggère d'utiliser un outil qui, à son tour, vous aidera à comprendre ce qu'il faut faire exactement pour accélérer un peu (ou beaucoup) votre site. Je parle du service en ligne Page Speed (auparavant, il existait également des extensions de navigateur du même nom pour FireFox et Chrome, que j'utilisais principalement).
Permettez-moi tout de suite de faire une réserve sur le fait que cet outil fonctionne sur des choses assez complexes et pas tout à fait compréhensibles pour les webmasters ordinaires, qui sont principalement liées aux subtilités et aux nuances du fonctionnement du serveur Web. Si vous n’avez jamais administré de serveur, ce sera difficile.
Il existe un moyen de s'en sortir : insistez sur votre hébergeur pour qu'il effectue les actions prescrites par Page Speed . Qu'il soit d'accord ou non est une autre question. Je n’ai pas osé, car c’est gênant de donner accès au serveur à n’importe qui (c’est dire à quel point je me méfie).
Sur la page principale, PageSpeed suggère même d'installer le module sur votre serveur s'il exécute Apache ou Nginx (ce qui est mon cas) :
Mais je ne comprends toujours pas comment cela se fait, car je ne comprends pas du tout l’administration des serveurs et je n’ai jamais travaillé avec des systèmes de type Unix. C'est beaucoup plus difficile que d'installer un programme ou de télécharger un plugin dans WordPress. Un autre niveau d'immersion. Hoster n’a pas non plus osé le déranger à ce sujet. En général, je n'ai pas testé ce module - il est possible que vous l'ayez déjà essayé et que vous ayez quelque chose à dire...
En général, pour la première fois, j'ai utilisé Page Speed comme extension de navigateur (maintenant, si je comprends bien, cela ne fonctionne pas). Auparavant, il était intégré aux outils de développement de Firefox et Chrome. Certes, au début (il y a plusieurs années), je n'ai regardé que brièvement les conseils qu'il me donnait, et, ne comprenant presque rien, j'ai décidé que ce n'était pas pour moi, après quoi, le cœur léger, j'ai supprimé le PageSpeed plugin comme un élément inutile et étranger à mon avis.
Le fait est que même en comprenant de quoi se plaint ce plugin, je ne savais pas vraiment ce qu'il fallait faire pour réparer tout cela et accélérer d'une manière ou d'une autre mon blog. En général, j'ai immédiatement trouvé beaucoup de choses plus importantes à faire, en comparaison desquelles les ennuis de la souris avec les paramètres du serveur Web (d'autant plus que je ne les comprends pas particulièrement) semblaient mesquins et insignifiants.
Il est vrai qu’à un moment donné, j’ai également mis de côté la solution au problème de sécurité et, par conséquent, je l’ai payé en perdant tout cet argent. Compte tenu de ce qui s'est passé, l'autre jour, j'ai décidé de m'y mettre et d'essayer d'avancer sur le problème de l'augmentation de la vitesse de chargement du site, malgré à quel point ce problème était incompréhensible et difficile pour moi.
Bref, j'ai réinstallé Page Speed dans Mazila (maintenant je n'ai plus besoin de faire ça), j'ai regardé de quoi exactement il se plaignait le plus, et j'ai quand même réussi à améliorer certaines choses et, j'espère, à au moins, augmentez un peu la vitesse.
P.S. Désormais, Page Speed ne peut être utilisé qu'en ligne et n'a plus besoin d'être installé dans le navigateur (de toute façon, ce plugin est incompatible avec les nouvelles versions de Chrome), même si cela ne change rien à l'essentiel.
Donc, auparavant, vous deviez installer un plugin dans votre navigateur, mais maintenant tout ce que vous avez à faire est d'aller ici, de saisir l'URL de la page que vous souhaitez analyser (différents types de pages peuvent avoir des problèmes de vitesse de chargement différents, c'est donc logique pour vérifier toutes les options de cet outil) et cliquez sur le bouton bleu « Analyser ».
Après avoir attendu les résultats du processus de vérification, vous verrez une fenêtre similaire à celle que j'ai déjà montrée dans la capture d'écran ci-dessus dans le texte (au paragraphe 3 des descriptions des services en ligne pour vérifier la vitesse de chargement des sites Web). Que. en conséquence, vous verrez toute une liste de plaintes que ce service en ligne a concernant votre ressource, notamment concernant sa vitesse de chargement. Il vous donnera par la même occasion quelques instructions pour optimiser le fonctionnement du serveur Web en lien avec le moteur que vous utilisez.
De plus, tout en haut de la fenêtre Page Speed il y aura des commentaires et des recommandations que vous voudrez d'abord examiner et modifier (« corrigez-les sans faute »), car cela donnera le plus grand effet en termes d'augmentation du chargement. vitesse et ne demandera pas trop d’efforts de votre part. Laissez-moi vous donner un exemple d'analyse d'un de mes projets mineurs, sur lequel je n'ai pas vraiment l'occasion :
Ceux. les recommandations et les problèmes détectés, marqués d'un rectangle rouge avec un point d'exclamation et situés tout en haut de la liste, sont les plus importants et il est conseillé de commencer l'optimisation par eux (pas cher et joyeux, comme on dit), atteignant ainsi le plus grand effet.
Les problèmes marqués en orange nécessiteront plus d’efforts de votre part pour être corrigés, mais pourraient ne pas entraîner une augmentation très significative de la vitesse. Hélas et ah, pour l'instant, vous pouvez les mettre en veilleuse et vous consacrer aux tâches prioritaires qui contribueront à accélérer considérablement le projet.
Ma photo initiale il y a quelques années (même en utilisant le plugin - maintenant la même chose peut être vue sur http://gtmetrix.com/, car il utilise l'API PageSpeed ) pour https://site était comme ceci :
J'ai alors décidé de partir du tout premier point « Tirer parti de la mise en cache du navigateur » (maintenant cela s'appelle « Utiliser le cache du navigateur »), car selon la logique de Page Speed, ces recommandations devraient conduire à la plus grande accélération de mon blog.
Si vous cliquez sur le spoiler à côté de cette inscription, une liste de divers fichiers apparaîtra qui ne répondent pas aux exigences optimales pour la mise en cache des objets statiques (scripts, fichiers CSS, fichiers image utilisés sur une page Web) dans les navigateurs des utilisateurs (c'est-à-dire les lecteurs) :
Ceux. Pour augmenter la vitesse de chargement, PageSpeed Insights nous conseille de configurer de manière optimale la mise en cache des divers éléments des pages Web dans les navigateurs des utilisateurs afin que lors de la visualisation des autres, ces éléments statiques ne soient pas rechargés depuis le serveur. En théorie, tout cela semble assez déroutant, car je n'ai aucune idée des mécanismes de mise en cache utilisés par les navigateurs (lisez à ce sujet et comment les effacer).
De plus, nous optimiserons la mise en cache des objets statiques en utilisant les mécanismes de votre serveur d'hébergement lui-même. C'est assez déroutant, mais je vais vous proposer des solutions toutes faites trouvées sur l'Internet russe, et vous les essayerez en action et déciderez laquelle fonctionnera le mieux sur votre hébergement.
Optimiser la mise en cache du navigateur et vérifier son fonctionnementCertes, cela n'a pas fonctionné sur mon hébergement actuel, car j'ai maintenant une combinaison d'Apache et de nginx (je dois configurer ce dernier, ce que l'hébergeur a fait pour moi d'une manière que je ne connais pas). Mais si vous disposez d’Apache pur, la méthode suggérée ci-dessous peut fonctionner.
En général, nous essaierons d'influencer le serveur sur lequel votre projet est hébergé de manière à ce qu'il envoie des commandes aux navigateurs visant à optimiser la mise en cache des éléments statiques. Nous le ferons en utilisant un outil de gestion de serveur distant assez connu - le fichier .htaccess. Connaissez-vous l'existence d'une telle chose ?
Il réside généralement dans le dossier racine. Naturellement, tout ce qui est décrit ci-dessous ne fonctionnera que sur les serveurs exécutant Apache, mais en règle générale, ils constituent la majorité. Après vous être connecté à votre ressource via FTP (), ouvrez le dossier racine (généralement PUBLIC_HTML ou HTDOCS) et recherchez le fichier .htaccess qu'il contient.
À partir de maintenant, vous faites tout à vos risques et périls. Par conséquent, assurez-vous de télécharger une copie de ce fichier sur votre ordinateur afin que si quelque chose se produit, vous puissiez rapidement revenir en arrière.
Si .htaccess n'est pas visible, essayez dans le programme FileZilla, sélectionnez « Serveur » - « Forcer les fichiers cachés » dans le menu supérieur. Si même après cela, il n'apparaît pas à la racine, créez un fichier texte vide sur votre ordinateur dans n'importe quel éditeur qui vous convient (j'utilise NotePad Plus Plus), nommez-le quelque chose et copiez-le à la racine.
Après cela, renommez ce fichier en .htaccess dans FileZilla. Vous devrez maintenant l'ouvrir pour le modifier et y ajouter le code ci-dessous. Mais d’abord, laissez-moi vous expliquer un peu.
Les moyens les plus courants d'activer cette option sur un serveur Web exécutant Apache consistent à utiliser les modules mod_headers ou mod_expires. Le code ci-dessous vous aidera à activer la mise en cache statique dans le navigateur si le service en ligne a au moins un de ces modules Apache installé sur votre serveur.
Tout d'abord, je vais donner le code du module mod_headers. Veuillez noter qu'il utilise une vérification pour voir si votre hébergeur dispose de ce module. S'il n'est pas trouvé, le code ne sera pas exécuté et ne provoquera aucune erreur. Cependant, je vous recommande encore une fois fortement de copier d’abord le fichier .htaccess original (avant d’ajouter le code ci-dessous) sur votre ordinateur pour éviter les incidents.
#cache fichiers html et htm pendant une journée En-tête défini Cache-Control "max-age=43200" #cache fichiers css, javascript et texte pendant une semaine En-tête défini Cache-Control "max-age=604800" #cache flash et images pour mois En-tête défini Cache-Control "max-age=2592000" #disable caching En-tête non défini Cache-Control
Vous pouvez supprimer des commentaires (leurs lignes commencent par un signe dièse), mais ils n'affecteront en rien le fonctionnement du code.
Il sera également possible d'ajouter un bloc de code destiné au module mod_expires, qui utilise là encore une vérification de sa présence sur votre serveur, ce qui garantit la sécurité d'utilisation de ce morceau de code :
ExpiresActive On #le cache par défaut est de 5 secondes ExpiresDefault "accès plus 5 secondes" #cache flash et images pendant un mois ExpiresByType image/x-icon "accès plus 2592000 secondes" ExpiresByType image/jpeg "accès plus 2592000 secondes" ExpiresByType image/png " accès plus 2592000 secondes" ExpiresByType image/gif "accès plus 2592000 secondes" ExpiresByType application/x-shockwave-flash "accès plus 2592000 secondes" #cache fichiers css, javascript et texte pendant une semaine ExpiresByType text/css "accès plus 604800 secondes" ExpiresByType text/javascript "accès plus 604800 secondes" ExpiresByType application/javascript "accès plus 604800 secondes" ExpiresByType application/x-javascript "accès plus 604800 secondes" #cache fichiers html et htm pendant une journée ExpiresByType text/html "accès plus 43200 secondes " #cache les fichiers XML pendant dix minutes ExpiresByType application/xhtml+xml "accès plus 600 secondes"
Les commentaires peuvent à nouveau être supprimés ultérieurement.
Si cela ne fonctionne pas, mais que vous espérez un miracle, voici quelques variantes supplémentaires du même code, mais essayez-les une à la fois, pas toutes en même temps :
Maintenant, après avoir inséré du code dans .htaccess qui vous permet d'augmenter la vitesse en optimisant la mise en cache dans le navigateur du côté du visiteur et enregistré les modifications apportées, vérifiez à nouveau votre page de ressources dans PageSpeed Insights et assurez-vous que le problème est disparu:
Comme vous pouvez le constater, dans mon cas, « Utilisez le cache de votre navigateur » n'est plus une faille critique qui ralentit le chargement, et l'icône à côté de cette note est devenue orange, mais pas verte. Malheureusement, je ne suis pas en mesure d'influencer les services tiers à partir desquels mon site charge du contenu statique (tels que Yandex, Google, Feedburner et Aptulaik).
Q.E.D. Ainsi, juste comme ça, nous avons découvert l’un des problèmes les plus importants et les plus importants rencontrés dans Page Speed.
Comment activer la compression des objets statiques sur le serveurDe plus, un problème très courant dont se plaint le service GTmetrix est le manque de compression des fichiers sur le serveur avant de les transférer vers les navigateurs des utilisateurs.
Il est utilisé dans ce cas, dont j'ai déjà parlé. Si vous analysez non pas directement via PageSpeed Insights, mais via GTmetrix, alors dans la zone PageSpeed "Activer la compression" est appelé "Activer la compression gzip", et dans YSlow, il est appelé "Compresser les composants avec gzip".
Afin d'activer cette même compression Gzip sur les hébergements où le serveur Apache est utilisé, il suffira d'ajouter le morceau de code correspondant dans le fichier .htaccess (c'est un fichier de contrôle de serveur distant). Apache dispose de deux modules de compression et l'un d'eux sera installé par votre hébergeur (même si ce n'est pas un fait).
Le plus courant - commençons par celui-ci. On ajoute à nouveau une vérification de la présence de ce module au code afin de ne pas recevoir d'erreur 500 pour l'ensemble du site.
AddOutputFilterByType DEFLATE texte/texte html/texte brut/application xml/application xml/xhtml+texte xml/texte css/application javascript/application javascript/x-javascript
Un peu moins populaire, le code permettant d'activer la compression Gzip pour les types de fichiers requis ressemblera à ceci :
mod_gzip_on Oui mod_gzip_dechunk Oui mod_gzip_item_include fichier \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text\.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image\.* mod_gzip_ item_exclude rspheader ^ Encodage du contenu :.*gzip.*
En fait, essayez de vérifier la page dans PageSpeed Insights après avoir installé le code. Si le problème disparaît, considérez-vous chanceux. En raison de la présence d'Apache avec nginx, tout cela ne m'a pas aidé (l'hébergeur a dit que nginx est responsable de la statique, dans cette situation il faut le configurer - je ne sais pas comment il l'a fait).
Bonne chance à toi! A bientôt sur les pages du site blog
Vous pourriez être intéressé
Mesurer et augmenter la vitesse du site dans GTmetrix, ainsi que configurer le chargement de la bibliothèque jQuery depuis Google CDN 
Compression Gzip pour accélérer le chargement du site - comment l'activer pour Js, Html et Css à l'aide du fichier .htaccess 
Comment maximiser la vitesse de chargement du site Web et optimiser la charge du serveur 
Accélération du site Web : ce qu'elle fait, comment la mesurer et comment accélérer le site Web vous-même 
Création de sprites CSS dans le générateur en ligne Sprites Me pour réduire le nombre de requêtes au serveur 
Optimisation et compression CSS dans Page Speed - comment désactiver les fichiers de feuille de style externes et les fusionner en un seul pour accélérer le chargement 
Comment obtenir un site Web rapide - optimisation (compression) des images et des scripts, ainsi que réduction du nombre de requêtes Http
PageSpeed Insights (PSI) rend compte des performances d'une page sur les appareils mobiles et de bureau et fournit des suggestions sur la façon dont cette page peut être améliorée.
PSI fournit à la fois des données de laboratoire et de terrain sur une page. Les données de laboratoire sont utiles pour déboguer les problèmes de performances, car elles sont collectées dans un environnement contrôlé. Cependant, il se peut qu’il ne reflète pas les goulots d’étranglement réels. Les données de terrain sont utiles pour capturer une expérience utilisateur réelle et réelle, mais disposent d'un ensemble de métriques plus limité. Voir pour plus d'informations sur les 2 types de données.
Note de performanceEn haut du rapport, PSI fournit un score qui résume les performances de la page. Ce score est déterminé en courant pour collecter et analyser la page. Un score de 90 ou plus est considéré comme rapide et un score de 50 à 90 est considéré comme moyen. En dessous de 50 est considéré comme lent.
Données de terrain réellesLorsque PSI reçoit une URL, il la recherchera dans l'ensemble de données (CrUX). Si disponibles, PSI signale les données métriques (FCP) et (FID) pour l'origine et potentiellement l'URL de la page spécifique.
Classement rapide, moyen, lentPSI classe également les données de terrain en 3 catégories, décrivant les expériences considérées comme rapides, moyennes ou lentes. PSI définit les seuils suivants pour rapide/moyen/lent, sur la base de notre analyse de l'ensemble de données CrUX :
| FCP | (1 000 ms, 2 500 ms] | plus de 2500 ms | |
| FID | (50 ms, 250 ms] | plus de 250 ms |
De manière générale, les pages rapides se situent à peu près dans les 10 % supérieurs, les pages moyennes dans les 40 % suivants et les pages lentes dans les 50 % inférieurs. Les chiffres ont été arrondis pour plus de lisibilité. Ces seuils s'appliquent à la fois aux appareils mobiles et aux ordinateurs de bureau et ont été définis en fonction des capacités de perception humaine.
Répartition et valeur sélectionnée du FCP et du FIDPSI présente une distribution de ces métriques afin que les développeurs puissent comprendre la plage de valeurs FCP et FID pour cette page ou origine. Cette distribution est également divisée en trois catégories : rapide, moyenne et lente, indiquées par des barres vertes, orange et rouges. Par exemple, voir 14 % dans la barre orange du FCP indique que 14 % de toutes les valeurs FCP observées se situent entre 1 000 ms et 2 500 ms. Ces données constituent une vue globale de tous les chargements de pages au cours des 30 jours précédents.
Au-dessus des barres de distribution, PSI indique le 90e centile First Contentful Paint et le 95e centile Premier délai d'entrée, présentés respectivement en secondes et millisecondes. Ces centiles permettent aux développeurs de comprendre les expériences utilisateur les plus frustrantes sur leur site. Ces valeurs de métriques de champ sont classées comme rapides/moyennes/lentes en appliquant les mêmes seuils indiqués ci-dessus.
Étiquette récapitulative des données de champUne étiquette globale est calculée à partir des valeurs de métrique du champ :
- Rapide : si FCP et FID sont tous deux rapides.
- Lent : si un FCP ou un FID est lent.
- Moyenne : Tous les autres cas.
La différence entre les données de champ de PSI et le rapport sur l'expérience utilisateur Chrome sur BigQuery réside dans le fait que les données de PSI sont mises à jour quotidiennement pendant la période de 30 jours suivants. L'ensemble de données sur BigQuery n'est mis à jour que mensuellement.
Données de laboratoirePSI utilise Lighthouse pour analyser l'URL donnée, générant un score de performance qui estime les performances de la page sur différentes mesures, notamment : et .
Pourquoi les données de terrain et les données de laboratoire se contredisent-elles ? Les données de terrain indiquent que l'URL est lente, mais les données de laboratoire indiquent que l'URL est rapide !
Les données de terrain sont un rapport historique sur la façon dont une URL particulière a été exécutée et représentent des données de performances anonymisées provenant d'utilisateurs dans le monde réel sur une variété d'appareils et de conditions de réseau. Les données du laboratoire sont basées sur un chargement simulé d'une page sur un seul appareil et un ensemble fixe de conditions de réseau. De ce fait, les valeurs peuvent différer.
Pourquoi le 90e centile est-il choisi pour le FCP et le 95e centile pour le FID ?
Notre objectif est de garantir que les pages fonctionnent bien pour la majorité des utilisateurs. En nous concentrant sur les valeurs des 90e et 95e centiles pour nos métriques, cela garantit que les pages répondent à une norme minimale de performances dans les conditions d'appareil et de réseau les plus difficiles.
Pourquoi le FCP en v4 et v5 a-t-il des valeurs différentes ?
Le V5 FCP examine le 90e centile tandis que le v4 FCP rapporte la médiane (50e centile).
Qu'est-ce qu'un bon score pour les données de laboratoire ?
Tout score vert (90+) est considéré comme bon.
Pourquoi le score de performance change-t-il d’une exécution à l’autre ? Je n'ai rien changé sur ma page !
La variabilité de la mesure des performances est introduite via un certain nombre de canaux ayant différents niveaux d’impact. Plusieurs sources courantes de variabilité des métriques sont la disponibilité du réseau local, la disponibilité du matériel client et les conflits de ressources client.
Plus de questions?Si vous avez une question spécifique et à laquelle il est possible de répondre sur l'utilisation de PageSpeed Insights, posez votre question en anglais sur Stack Overflow.
Si vous avez des commentaires généraux ou des questions sur PageSpeed Insights, ou si vous souhaitez démarrer une discussion générale, démarrez un fil de discussion dans la liste de diffusion .
RetourCette page vous a été utile?
Oui Super! Merci pour votre retour. Si vous avez une question spécifique et pertinente sur l'utilisation de PageSpeed Insights, posez la question en anglais sur la liste de diffusion Stack Overflow. Non Désolé d'entendre ça. Si vous avez une question spécifique et pertinente sur l'utilisation de PageSpeed Insights, posez la question en anglais sur Stack Overflow. Pour des questions générales, des commentaires et des discussions, démarrez un fil de discussion dans le
La vitesse de chargement des pages est désormais un signal très puissant pour les moteurs de recherche. Et pour les utilisateurs, il s’agit d’un facteur important auquel il est difficile de ne pas prêter attention en cas de problèmes. En améliorant la vitesse du site, vous pouvez non seulement bénéficier d'avantages en matière de classement, mais également gagner plus de confiance et de taux de conversion. Vous trouverez ci-dessous une liste des outils les plus utiles qui vous aideront à analyser et identifier les points les plus faibles de votre site en termes de vitesse.
1. Informations Google PageSpeed L'outil de vitesse de chargement des pages de Google. Affiche une valeur comprise entre 0 et 100 pour les appareils de bureau et mobiles. Il pointe immédiatement les points faibles du site et donne des recommandations pour optimiser la rapidité.
2. Outils Pingdom
Donne une évaluation de la vitesse, affiche le nombre d'appels vers le serveur et le temps de chargement moyen. Le tableau récapitulatif affichera en détail les données de chaque requête au serveur (styles, scripts, images, etc.). Il est facile d’évaluer ce qui ralentit exactement le chargement sur le site.
3.WhichLoadFaster
Chargez deux sites à des fins de comparaison (vous-même et un concurrent), observez visuellement lequel se charge le plus rapidement (pratique à démontrer aux clients). À la fin du téléchargement, des informations s'affichent sur quel site a gagné et combien de fois il s'est chargé plus rapidement.
4. Test de performances des pages Web
Charge la page deux fois, compare le nombre d'accès - révèle l'organisation de la mise en cache, affiche des statistiques détaillées pour chaque test. Enregistre des captures d'écran de l'apparence du site à chaque seconde de chargement. Il montre également sous une forme pratique quel groupe de demandes a pris le plus de temps. Le serveur est situé à Dallas (USA).
5. GTmetrix
Un autre outil utile pour tester la vitesse du site. Affiche de nombreuses informations récapitulatives et stocke également un historique afin que vous puissiez comparer l'amélioration ou la détérioration de votre vitesse de téléchargement. Charge les recommandations Yahoo et Google pour l'optimisation de la vitesse, en les triant par priorité. Le serveur de test est situé à Vancouver (Canada).
6. Impact de la charge
Le service teste dans quelle mesure le site peut résister à la charge (DDOS léger). Plusieurs dizaines d'utilisateurs et plus d'une centaine de connexions actives sont émulées. Le test dure plusieurs minutes, d’autres outils peuvent être utilisés pendant ce temps de chargement pour évaluer la vitesse de chargement des pages aux heures de pointe. À la fin du test, vous pouvez voir un graphique illustrant l'évolution de la vitesse de téléchargement en fonction du nombre d'utilisateurs actifs.
7. Outils de surveillance
Analyse le chargement des sites Web depuis différentes parties de la Terre - serveurs aux États-Unis, en Europe et en Asie. Affiche des statistiques récapitulatives pour chaque test.
8.SiteSpeed.me
Envoie des requêtes à la page analysée depuis différents centres de données (environ 30 serveurs) et détermine la vitesse pour chacun d'eux. Met en évidence les meilleures, les pires et les performances moyennes en termes de temps et de vitesse.
9. PR-CY
Vérification massive de la vitesse du site Web. Vous pouvez spécifier jusqu'à 10 adresses, comparant ainsi le temps de chargement et la taille du document pour chaque ressource.
10. Analyseur de pages Web
Rapport sur le chargement de la page et tous les scripts/styles/images supplémentaires. Un outil simple et souvent nécessaire.
Si vous utilisez d'autres outils en ligne gratuits pour vérifier la vitesse de chargement des pages d'un site Web, veuillez les partager dans les commentaires.
Vous êtes probablement nombreux à avoir utilisé le formidable service de Google : PageSpeed Insights ? Voulez-vous obtenir le très convoité 100 sur 100 ?
Une image pour attirer l'attention
Mais c'est au petit de décider.
Voici donc les résultats de mon test. Prenons n'importe quel site Web, par exemple, j'ai pris un modèle de site Web adaptatif prêt à l'emploi gratuit, je l'ai transféré sur mon hébergement et j'ai commencé les tests : Résultat du premier test (lien vers le site Web) :- vitesse pour mobile - 79/100 ;
- vitesse pour un ordinateur - 93/100 ;
Se plaint de:
Assurez-vous de corriger :Supprimez le JavaScript et le CSS bloquant le rendu du haut de la page.
Nombre de ressources CSS bloquantes par page : 3. Elles ralentissent l'affichage du contenu.
Tout le contenu en haut de la page n'est affiché qu'après le chargement des ressources suivantes. Pensez à retarder le chargement de ces ressources, à les charger de manière asynchrone ou à intégrer leurs composants les plus importants directement dans le code HTML.
Nous faisons quelques petits trucs. Nous transférons les styles du fichier vers le code :
Était:
Devenu:
article, aparté, détails, figcaption, figure, pied de page, en-tête, hgroup, nav, section ( display:block; ) /* et autres styles */
Et - hourra ! - nous avons des résultats plus élevés (lien vers le site) :
- vitesse pour mobile - 99/100 ;
- vitesse pour un ordinateur - 99/100 ;
Raccourcir le code HTML
La compression du code HTML (y compris le code JavaScript ou CSS en ligne) réduit la quantité de données pour des temps de chargement et de traitement plus rapides. Mais ce problème peut être résolu en compressant le code. Aucun rapport avec ce sujet.
Et n'oublions pas non plus que nous n'avons toujours pas résolu le problème décrit ci-dessus :
Tout le contenu en haut de la page n'est affiché qu'après le chargement des ressources suivantes. Pensez à retarder le chargement de ces ressources, à les charger de manière asynchrone ou à intégrer leurs composants les plus importants directement dans le code HTML. Autant ils pesaient dans le fichier, autant ils pèsent le même poids dans le code !
Et maintenant la question la plus importante : bug ou fonctionnalité ?
Merci!
