Actualités

Que sont les balises Open Graph?

Lorsque vous partagez du contenu sur Facebook et sur d'autres réseaux sociaux, ainsi que sur des pages de résultats de recherche, il est important de faire appel. Outre le titre et la description, des éléments supplémentaires tels que des images d'aperçu peuvent être définis dans les réseaux sociaux. Un aperçu optimisé et spécifique à l'audience de l'article partagé conduit à des améliorations significatives du CTR. Ces attributs permettant de lire de manière attrayante du contenu sur des réseaux sociaux tels que Facebook sont appelés Open Graph.

Avec les balises Open Graph ou Og appelées, vous déposez des éléments dans le code source ou marquez des éléments dans l'en-tête. Le balisage est ensuite utilisé pour afficher le titre, la description et l'image d'aperçu dans le graphe social. Le protocole Open Graph est non seulement pris en charge par Facebook, mais également par Twitter.

À l’automne 2010, le protocole Open Graph a été introduit par Facebook pour la première fois et a remplacé la norme "Facebook Connect", jusque-là valide, pour la vérification des profils Facebook sur les sites Web.

Autre avantage des balises Open Graph: lorsque les utilisateurs partagent des liens vers votre site Web sur des réseaux sociaux, un aperçu optimal est automatiquement généré.

Quelles sont les balises graphiques ouvertes?

og: titre

L'élément og: title est affiché de manière plus visible à côté de l'image sur un message Facebook. Pour cette raison, vous devez déployer des efforts particuliers pour répondre au mieux à votre public cible sur les réseaux sociaux et augmenter ainsi le CTR de vos publications partagées! Notez aussi le longueur maximale de 95 caractères, Si vous souhaitez éviter un saut de ligne, vous restez avec un maximum de 50 caractères. Les titres courts fonctionnent mieux de toute façon.

Un exemple pratique pour le code source:

og: Description

Semblable à la méta-description d'un site Web, og: description peut être utilisé pour fournir votre propre description de réseau social. Les mots-clés, qu'ils soient primaires ou secondaires, ne sont pas pertinents dans ce cas et aucun mot-clé n'est graissé. La description doit avoir un sens, être animée au maximum pour cliquer et donner à l’utilisateur déjà une idée de ce à quoi il doit s’attendre (afin de ne pas le décevoir après coup et de détériorer les signaux de l’utilisateur petit à petit). Longueur maximale de caractères pour la balise Description Open Graph: 297 caractères!

Un exemple pratique pour le code source:

og: l'image

En tant que partie particulièrement attrayante des tags Open Graph og: l’image est très importante. Choisissez donc une image attrayante qui encourage les utilisateurs à cliquer ou à partager. Afin de pouvoir contrôler de la manière la plus complète possible la présentation dans le flux du groupe cible, une image og: spécialement préparée est recommandée, en particulier pour les contenus pertinents sur le plan social. L'image de l'article, qui est également utilisée sur le site Web lui-même, offre toujours de bonnes options d'optimisation. Si, par exemple, vous ne définissez pas la balise d'image susmentionnée sur Facebook, les utilisateurs peuvent même sélectionner une image dans l'aperçu social. Étant donné que les bannières publicitaires, les icônes ou d’autres éléments de la page sont également souvent disponibles, la définition de l’image Open Graph devrait vous être indispensable.

Figure 1: Exemple d'Open Graph sur casper.com

Les images qui conviennent à votre propre site Web peuvent être trouvées avant tout grâce à une expérimentation constante. Par un suivi bien placé, vous pouvez facilement vérifier quelle image a été la mieux réalisée ou cliquée dans vos balises Open Graph. Le og: image montre déjà mieux, quel contenu est traité dans l'article. Le titre et la description doivent ensuite entraîner un clic dans la deuxième étape.

Bon à savoir: Si aucun og: l'image n'est utilisée sur XING, aucune tentative de prévisualisation d'une image sur le site Web ne sera effectuée. Pour afficher une image d'aperçu d'un lien partagé sur XING, l'élément og: image est requis.

Le bon format d'images Open Graph

Afin de présenter de manière optimale le tag d'image mentionné ci-dessus dans Facebook, les formats et tailles utilisés doivent également être pris en compte. Facebook utilise actuellement un format 1.91: 1 pour les images du flux. Mais même avec la taille, il reste encore beaucoup à considérer:

1. C'est comme ça que ça devrait être: au moins 1 200 x 630 pixels au format 1,91: 1 – l'image est affichée en grand dans le fil d'actualité, même sur les appareils haute résolution, la présentation est très bonne
2. OK: 600 x 315 pixels – l’image est affichée en grand dans l’actualité, mais le rendu sur les périphériques haute résolution n’est pas idéal – correct si l’image n’est pas disponible en haute résolution
3. minimum: 200 x 200 pixels – l'image est affichée sous forme de petit carré – non recommandé

Figure 2: Formats et tailles utilisés de og: images

Si vous travaillez avec de petites images et que vous les équipez de textes, celles-ci doivent être placées aussi centralement que possible de manière à être affichées de manière visible (et non coupées) dans le flux Facebook.

og: url

Certains peuvent se référer à la liste de la balise d'URL mentionnée ci-dessus comme redondant à l'utilisation de Canonical. Cependant, étant donné que plusieurs URL sont parfois utilisées (par exemple, via le suivi de campagne dans les médias sociaux), il est important de spécifier cela via le protocole Open Graph pour donner aux réseaux sociaux une meilleure preuve du calcul du rang Edge (Facebook). Étant donné que les réseaux sociaux fonctionnent également avec des indices alternatifs (par exemple, l’URL canonique), il est recommandé aux sites pertinents sur le plan social, si vous le souhaitez. og: url dans le code source avant le jour Canonical auflistest. Entre-temps, tous les grands réseaux ont un ordre différent, mais il y a eu un problème il y a quelque temps, de fausses URL ont atterri sur le flux Facebook.

Un exemple pratique pour le code source:

og: Type

Dans la plupart des cas, vous pouvez utiliser les expressions "site Web", "blog" ou "article" pour og: type. Toutefois, si vous travaillez avec d'autres supports tels que la musique, des vidéos, des livres ou autres, il vaut certainement la peine de regarder de plus près les propriétés susmentionnées. Cet article concerne l'optimisation des balises Open Graph des documents HTML.

og: le type ressemblerait à ceci:

Debugger for Open Graph Tags

Le débogueur d'objets Facebook est très pratique pour optimiser vos balises Open Graph. Cela vous montre quelles informations Facebook a stockées pour une URL ou comment l’URL est affichée dans le flux. Pour utiliser le débogueur, vous avez besoin d'un compte Facebook valide.

Fonction la plus importante du débogueur Open Graph: "Récupérer de nouvelles informations de grattage", Cette fonctionnalité est particulièrement importante lorsque de nombreuses opérations sont testées et optimisées, et sert de fonction de "nettoyage du cache" dans le protocole Open Graph. Facebook stocke des informations entre. Donc, si vous changez le titre, l'image ou d'autres éléments, cela peut prendre longtemps pour que Facebook les affiche correctement. Avec "Chercher de nouvelles informations de grattage" vous pouvez Les informations mises en cache sont supprimées et rechargées,

Figure 3: Exemple d'utilisation du débogueur Facebook

De même, cela fonctionne avec les tags Twitter mentionnés ci-dessus. Pour tester l'aperçu de vos partages Twitter, vous pouvez utiliser le Twitter Card Validator utiliser.

Astuce: Avec la suite SEO Expertise, vous avez la possibilité d’analyser vos balises Open Graph. Pour cela, utilisez au mieux les rapports sociaux de SEO Expertise.

conclusion

Avec Open Graph Tags, vous pouvez optimiser votre présence sur les réseaux sociaux lorsque des URL de votre site Web sont partagées. Vous avez seulement besoin de quelques étapes simples et pouvez facilement travailler avec des plugins dans un CMS comme WordPress.

Bonne optimisation dans le graphique social!

Pourquoi l'optimisation mobile est-elle importante?

En 2013, un peu moins de 16% des utilisateurs du réseau utilisaient leur smartphone. En 2018, plus de la moitié des utilisateurs d'Internet utilisaient déjà leurs téléphones mobiles sur le Web – en l'espace de cinq ans, le nombre de fois que les utilisateurs sont en ligne avec leur smartphone a plus que triplé. Bien entendu, les chiffres ne signifient pas que les utilisateurs utilisent uniquement le smartphone. Mais c’est le périphérique préféré pour l’utilisation d’Internet, en plus des ordinateurs de bureau, des ordinateurs portables, des consoles de jeux ou des téléviseurs intelligents.

Vous pouvez maintenant dire que la façon dont les gens naviguent sur Internet importe peu tant qu'ils se rendent sur votre site. En fait, l'utilisation d'Internet mobile est soumise à certaines conditions autres que la navigation sur PC. Ce n'est pas surprenant: les utilisateurs n'ont ni clavier ni souris et un écran beaucoup plus petit. Selon les régions, la connexion Internet avec le smartphone est beaucoup plus lente sur Internet mobile que sur le haut débit.

Tout cela signifie que les utilisateurs d’Internet mobile apprécient les temps de chargement courts et la facilité d’utilisation. L’optimisation mobile signifie donc principalement Optimisation UX et contenu combinée à une optimisation technique,

Les sites Web mobiles sont non seulement importants pour les utilisateurs satisfaits, mais également pour Google. Au moins depuis le 21 avril 2015, Google montre l'importance de l'optimisation mobile des sites Web. Parce que depuis lors, "mobile friendly" est un facteur de classement. À peine un an plus tard, Google optimise à nouveau sa "mise à jour mobile", également appelée "Mobilegeddon". Page Speed ​​est enfin devenu un facteur de classement des sites Web mobiles en 2018. La même année, Google lance enfin son "Mobile First Indexing". La version mobile d'un site Web a été indexée depuis.

Vos utilisateurs et Google vous montreront pourquoi votre site Web doit être compatible avec les appareils mobiles. Et nous vous montrerons de quoi il s'agit.

Mon site Web est-il déjà compatible avec les appareils mobiles?

Il existe maintenant sur le marché de nombreux outils et outils logiciels gratuits et payants qui peuvent vous aider à analyser votre site Web mobile-friendly-Check. Par exemple, une analyse de site Web gratuite peut être effectuée chez SEO Expertise. Si vous utilisez cet outil moyennant des frais, vous pouvez également effectuer une analyse encore plus approfondie avec une analyse d'une seule page.

Figure 1: Section des analyses mobiles de l'analyse d'une page de SEO Expertise

Si vous ne savez pas si votre site Web est compatible avec les appareils mobiles, vous effectuerez le contrôle convivial de Google.

Figure 2: Mobile Friendly Test avec Google

Principes de base pour votre site Web mobile

En pratique, trois variantes sont généralement utilisées pour une optimisation adaptée aux mobiles.

1. Responsive Web Design (RWD)

Cette variante est une technologie de pointe pour les sites Web mobiles. Le code HTML est le même pour le bureau et les smartphones. CSS adapte le contenu et la présentation de la page mobile à l'écran de l'appareil.

Les avantages: La maintenance de la page demande peu d’efforts car il n’ya qu’une version à gérer. De plus, il existe une seule URL adaptée à tous les types d'appareils mobiles, tels que les smartphones ou les tablettes, ce qui permet aux ressources de Googlebot d'être épargnées. Aucune redirection n'est requise pour obtenir une vue optimisée pour chaque périphérique. En conséquence, les temps de chargement sont nettement inférieurs. En outre, une telle transmission est généralement sujette aux erreurs et peut avoir un impact négatif sur la convivialité du site Web.

Les inconvénients: Vous ne pouvez pas personnaliser la page mobile ou la différencier spécifiquement de la version de bureau.

Figure 3: Exemple de conception de site Web réactif

2. Servir Dynamiquement

Dans cette variante, les sites Web mobiles sont livrés avec un code adapté à l'agent utilisateur (HTML et CSS). L'URL reste la même, que vous visitiez le site Web avec votre smartphone ou votre ordinateur.

Les avantages: Il n'y a qu'une seule URL pour tous les périphériques et vous pouvez définir très précisément les spécifications du périphérique de sortie correspondant en fonction de l'agent d'utilisateur.

Les inconvénients: En émettant des variantes de code, vous devez effectuer davantage de maintenance de la page et, surtout, faire attention à de nombreux détails lors de la modification.

3. Sous-domaine optimisé pour le mobile

Dans ce cas, la page mobile reçoit sa propre URL, qui correspond à l'URL d'une version de bureau. Le contenu peut être identique sur le site mobile et sur l'URL du bureau, mais ce n'est pas obligatoire. Généralement, deux codes HTML différents sont générés. Sur la variante de bureau et les pages mobiles, des rel-étiquettes alternatives sont insérées pour faire référence à l'autre version.

Les avantages: Vous pouvez parfaitement optimiser la page mobile pour le périphérique de sortie.

Les inconvénients: Les efforts de programmation et de maintenance sont nettement supérieurs aux options précédentes. Vous devez cultiver pratiquement deux pages.

Google lui-même recommande Responsive Web Design comme solution pour le référencement mobile. Les avantages par rapport aux deux autres options que nous avons réunies à nouveau:

• moins de soins
• une URL pour tous les appareils
• très flexible, car le site Web est fondamentalement adapté à de nombreux périphériques de sortie
• Danger de configuration incorrecte inférieure
• Les URL sont plus faciles à partager
• Googlebot économise des ressources

Donc, vous montrez à Google que votre site est adapté aux mobiles

Lors de l'exploration, Googlebot peut déterminer si votre site est compatible avec les appareils mobiles:

Type d'inscription	Indicateur de Googlebot	exécution
Web design réactif	viewport meta tag	Sur les sites Web responsive responsive design, la balise viewport doit être insérée dans l'en-tête. Cela peut ressembler à ceci: Dans ce cas, les pixels du site Web sont affichés indépendamment du périphérique de sortie et le site Web s'adapte à l'écran de sortie.
Service dynamique	Vary header	À l'aide de l'en-tête Vary, vous empêchez la récupération de la version de bureau avec un navigateur de smartphone. Les éléments suivants doivent être insérés dans l'en-tête http: Type de contenu: text / html Vary: agent utilisateur
site web mobile indépendant	el = suppléant	Si vous choisissez l'URL du mobile, la balise rel = alternate doit être insérée dans le texte source de toutes les pages Web. Il est important d'ajouter rel = alter sur toutes les pages ayant une URL de mobile correspondante. exemple: La version de bureau fait référence à la version mobile: En spécifiant "média", vous pouvez également spécifier quand le navigateur doit générer l'URL du mobile.

Alternatives au site Web mobile: PWA, AMP & Apps

En plus de la variante préférée de la conception Web réactive, bien sûr, d'autres options sont en cause.

Vous pouvez également utiliser les applications Web progressives (PWA) ou les pages mobiles accélérées (AMP) pour l'optimisation mobile. Ces sites sont entièrement compatibles avec les appareils mobiles et offrent plusieurs avantages.

AMP ainsi que PWA sont livrés avec un code source très fin. Bien que le format AMP soit rapide, les fonctionnalités PWA telles que les applications natives. Par exemple, ils peuvent être enregistrés sous forme d'icône sur l'écran tactile, à la manière d'une application. Un guide étape par étape sur l’AMP peut être trouvé ici.

Cependant, les deux variantes présentent l’inconvénient de ne pas pouvoir être personnalisées à la perfection et comparables aux sites Web réactifs.

Les applications ont tendance à être plus flexibles, car elles ciblent les différents systèmes d'exploitation de chaque périphérique. Elles peuvent donc utiliser de nombreuses fonctionnalités de ce périphérique. Cependant, il convient de noter que le développement d'une application nécessite à la fois plus de ressources internes et des coûts supplémentaires.

Nous inclurons des guides supplémentaires sur ces formes d'optimisation mobile et d'indexation d'applications. À ce stade, ces variantes ne sont mentionnées que brièvement pour des raisons de complétude.

Optimisation de la vitesse de la page pour les sites Web conviviaux pour mobiles

Pour améliorer ensuite la vitesse de la page mobile, il existe plusieurs indices:

• Supprimer le rendu bloquant JavaScript ou CSS.
• Utilisez la mise en cache du navigateur. Ainsi, des éléments constants tels que p. Ex. CSS mis en cache pour la mise en page dans le cache du navigateur. Il n'est pas nécessaire de recharger chaque fois que vous accédez à la page ou que vous cliquez à nouveau sur la page.
• Compressez vos images. Comment compresser "rel =" noopener "target =" _ blank ">, nous vous montrons ici.
• Supprimez le code HTML inutile. Cela peut être, par exemple, des commentaires qui ne sont plus nécessaires.

Conseils sur le contenu et la présentation de votre page compatible avec les appareils mobiles

La plus grande différence entre appeler un site Web avec un smartphone ou un ordinateur de bureau réside dans les différentes tailles d'écran et le fonctionnement associé de la page.

Par conséquent, vous devriez faire attention à l'optimisation mobile:

premier Offrir à l'utilisateur le Contenu qui en a vraiment besoin être. Alors demandez-vous s’il existe un contenu sur le site Web dont vous pouvez vous passer ou que vous pouvez présenter plus facilement. Utilisez des phrases courtes. Important: Bureau = Smartphone – les sites Web doivent avoir le même contenu.

deuxième lieu Éléments tactiles pas trop rapprochés: Vos utilisateurs exploiteront le site Web mobile via l'écran tactile avec leurs doigts. Si l'espace entre les contrôles individuels est trop petit, la page est difficile à utiliser car un doigt, par exemple, frappe deux éléments à la fois.
Astuce: Nous recommandons une distance d'au moins cinq millimètres entre les éléments tactiles. Chaque élément doit mesurer au moins sept millimètres.

troisième mise en forme Formulaires d’entrée idéaux avec des tailles relatives: Les champs de saisie pour les adresses ou autres données doivent s’adapter à l’écran. Par exemple, vous évitez que les personnes aient à faire défiler l'écran pour remplir un formulaire sur leur téléphone portable. Les champs de saisie doivent être aussi larges et clairs que possible sur un appareil mobile, afin que les utilisateurs puissent facilement saisir et se rendre plus rapidement à leur destination. vient.

4 Utiliser comme ça petites polices différentes possible: Plus la police est uniforme, meilleur est le texte lisible sur de petits écrans.

5 Attention à un taille de police suffisante: Google lui-même recommande Taille de police 16 comme base. Ceci est défini en pixels CSS. La définition de la taille de la police CSS peut ressembler à ceci:
corps {font-size: 16px;}
Si vous souhaitez utiliser d'autres tailles de police, vous pouvez les spécifier par rapport à la base:
.small {
taille de police: 12px; / * 75% de la base * /
}
Si vous en avez un site mobile réactif vous êtes de toute façon avantage, Parce que, dans la fenêtre d'affichage, les pixels des balises sont affichés indépendamment du périphérique de sortie respectif.

Erreurs courantes lors de l'optimisation pour mobile-friendly

1. Fichiers JavaScript, CSS et images bloqués:
   Les fichiers JavaScript, CSS et les images ne peuvent pas être indexés par Googlebot: si des fichiers importants sont bloqués par le fichier robots.txt, Googlebot ne pourra pas analyser correctement votre site Web et ne l'indexera donc pas correctement. Par conséquent, vous devez autoriser l’exploration de tous les fichiers nécessaires au rendu de la page Web. Avec SEO Expertise, vous pouvez tester le fichier robots.txt gratuitement.
2. Contenu non disponible:
   Certains concepteurs Web utilisent encore Flash. Cependant, ce contenu ne peut pas être lu par les smartphones.
3. Redirections erronées:
   Les redirections ne fonctionnent pas: c'est particulièrement vrai si vous utilisez une URL de mobile. Souvent, les webmasters du code source oublient la référence à la version mobile via rel = alternate.
4. Redirection interne non pertinente:
   De plus, les liens internes doivent être vérifiés régulièrement et l'exploitant du site Web doit vérifier s'ils font référence aux bonnes pages. Les gens commettent souvent l'erreur d'intégrer des liens pointant vers une page non pertinente, tels que des liens vers des pages mobiles pointant vers la page d'accueil de la page Web du bureau.
5. Le utilisé Les images sont trop grandesSi vous oubliez de compresser les images sur votre site Web, le temps de chargement de votre site mobile en sera affecté.
6. Vous avez ça Oublier la balise viewport: Dans ce cas, les utilisateurs doivent faire défiler horizontalement pour capturer le contenu. Cela affecte grandement la convivialité.

Vous pouvez télécharger un guide complet sur l'optimisation mobile ici sous forme de livre électronique.

Mobile friendly n'est qu'une partie de l'optimisation des moteurs de recherche

Même si vous avez lu un guide complet de référencement mobile, vous devez toujours garder à l'esprit que l'optimisation mobile n'est qu'une partie de vos efforts de référencement. Quelle que soit la manière dont le site Web mobile est affiché sur les smartphones ou les tablettes, les utilisateurs et Google continuent de bénéficier d'un contenu unique à valeur ajoutée. En dépit ou même avec le référencement mobile en tête, vous devriez donc consacrer au moins autant de temps au contenu de qualité pour atteindre les meilleurs classements et motiver vos utilisateurs.

Dans notre guide complet, vous apprendrez ce que signifie PageSpeed, comment le mesurer et pourquoi le chargement est si important pour votre site Web. Ensuite, nous expliquerons ce qui peut ralentir la vitesse de la page et comment optimiser les temps de chargement grâce à des mesures spécifiques.

Tout sur PageSpeed

Pourquoi le temps de chargement de mon site Web est-il important?

Il y a plusieurs raisons pour un temps de chargement rapide:

1. Expérience utilisateur positive: Selon une étude de kissmetrics, près de la moitié des utilisateurs d’Internet s’attendent à un temps de chargement inférieur à deux secondes. Si le chargement prend plus de trois secondes, 40% des visiteurs décrochent. Plus votre temps de chargement est court, plus le temps passé par les utilisateurs est élevé et plus le taux de rebond est faible. Une mauvaise performance d'un site Web peut même effrayer les visiteurs. Selon un autre sondage, près de 80% des sondés ont déclaré qu'ils ne visiteraient plus les sites Web lents.

2. Facteur de classement SEO:Pour Google et les autres moteurs de recherche, une expérience utilisateur positive est un facteur important pour déterminer la qualité d'un site Web. C'est pourquoi Pagespeed a également été classé par Google comme facteur de classement. Plus votre site Web se charge rapidement, meilleures sont vos chances d'obtenir un bon classement.

3. Optimisation du taux de conversion: Selon une étude, un délai d'une seconde dans le temps de chargement peut réduire les conversions de jusqu'à sept pour cent. Ce qui ne sonne pas tellement au début, mais peut être illustré par un simple calcul. Si votre boutique en ligne génère un chiffre d'affaires quotidien de 1 000 euros, le retard dans le chargement peut entraîner une perte d'une seconde de 70 euros par jour. En comptant sur le mois, vous perdrez 2100 euros de ventes. Calculé sur l'année, un site Web lent est un vrai tueur de vente.

4. Explorer: Googlebot analyse les sites Web à chargement lent, car ils ont un budget limité pour l'exploration. Avec la vitesse de chargement, vous déterminez également la qualité de l'analyse de votre site Web et le niveau d'actualisation de votre contenu dans l'index Google.

Comment mesure-t-on PageSpeed?

En général, le temps de chargement d'un site Web est l'intervalle de temps entre l'appel et la présentation complète du site Web dans le navigateur, mesuré en secondes. En plus du terme "temps de charge", les termes "vitesse de charge" ou "vitesse de page" sont également utilisés. Par conséquent, si vous recherchez le sujet sur le Web, vous trouverez des noms différents pour le même phénomène. Le temps de chargement d’une page Web peut également être subdivisé en différentes stations de mesure:

• Temps au premier octet (TTFB): Délai entre l'appel du site Web et le premier octet chargé par le serveur Web.
• Première peinture au contenu (FCP): Heure à laquelle le navigateur affiche un élément de présentation pour la première fois.
• Première peinture significative (FMP): Heure à laquelle l'utilisateur estime que le site Web est chargé.
• Time to Interactive (TTI): Heure à laquelle le site est rendu et prêt pour la saisie de l'utilisateur.

Comment puis-je mesurer la vitesse de chargement de ma page?

Il existe de nombreuses manières de déterminer le temps de chargement d’une page Web. Vous pouvez, par exemple, lire les fichiers journaux de votre serveur ou les arrêter manuellement. En fait, la mise en page lente est souvent relative, car chaque utilisateur ressent le temps différemment. Toutefois, si vous utilisez des données valides, vous pourrez mieux travailler à long terme pour optimiser la vitesse de chargement. Dans notre article sur les différents outils pour les tests de vitesse de site Web, vous trouverez une sélection de mesures de support de mesure Page Speed.

À quelle vitesse mon site Web doit-il être?

En principe, c'est un site web moins de deux secondes devrait charger pour obtenir une expérience utilisateur satisfaisante. Plus le temps de charge est court, mieux c'est. Si c'est moins d'une seconde, c'est très bien. La rapidité avec laquelle votre site Web se charge dépend de nombreux facteurs. Certains peuvent être améliorés par l'optimisation OnPage, sur d'autres, vous n'avez aucune influence.

Vous n’avez aucune influence directe sur ces facteurs:

• bande passante: Le temps de chargement de votre site Web est influencé par la bande passante Internet disponible. Avec une connexion 3G et un smartphone, la création du site Web sera plus lente qu'avec une connexion DSL rapide.
• Cache du navigateur: Si un utilisateur utilise un navigateur dont le cache n'a pas été vidé depuis longtemps, la mise en page peut être considérablement retardée, car la mémoire de l'ordinateur ne suffit plus pour traiter la quantité de données.
• Puissance de traitement du client: Les ordinateurs de bureau et les smartphones plus anciens peuvent faire l'expérience de la latence des pages, ce qui ralentit la construction du DOM et l'exécution des scripts en raison du manque de mémoire et des performances du processeur.

Vous pouvez influencer ces facteurs:

• La taille des fichiers: La taille de votre site Web détermine sa vitesse de chargement. Cela inclut non seulement le code HTML lui-même, mais également les feuilles de style et les fichiers de script, ainsi que les images. Plus la taille de ces fichiers est petite, plus la page peut être chargée rapidement.
• Puissance de calcul du serveur: Lorsqu'une page Web est appelée, le serveur Web traite la demande. Encore une fois, si moins de données doivent être demandées, le traitement sera plus rapide. Si de nombreuses demandes sont effectuées simultanément sur le site Web avec un trafic élevé, les performances de la mémoire et du processeur peuvent être surexploitées et devenir ainsi un goulot d'étranglement pour le temps de chargement. Dans ce cas, la capacité doit être ajustée à la hausse.

Optimiser la vitesse de la page

Créez des temps de connexion rapides

Même avant que le site Web puisse être modifié par le serveur Web, la connexion entre celui-ci et l'utilisateur doit être établie. Le temps passé sur ceci est appelé temps de connexion, latence ou ping. Ceci peut être mesuré avec l'outil Website Success by SEO Expertise. Idéalement, la latence est inférieure à 100 millisecondes. Si la connexion nécessite beaucoup plus de temps, des mesures d'optimisation peuvent être prises.

Configurer des connexions DNS rapides

Pour rechercher le serveur Web avec la page Web, le domaine entré dans le navigateur doit être résolu en une adresse IP. De example.com, deviennent quatre numéros séparés par des points compris entre 0 et 255. Pour la dissolution du domaine, les serveurs dits DNS sont responsables. En général, une chaîne de serveurs DNS est nécessaire jusqu'à la découverte de l'adresse IP.

Ce processus peut être optimisé en utilisant des serveurs DNS plus rapides. Par exemple, les serveurs avec les adresses IP "1.1.1.1" de Cloudflare et "8.8.8.8" de Google sont librement utilisables. La conversion des entrées DNS peut être prise en charge par le fournisseur de domaine ou l'hébergeur.

CDN pour une portée mondiale

S'il est important que votre activité en ligne soit représentée de manière globale, vous constaterez rapidement que les temps de connexion peuvent être extrêmement différents selon l'endroit d'où le site Web est accessible. Cela est dû au fait que les nœuds se déplacent géographiquement jusqu'au centre de données où réside votre serveur Web.

un Réseau de distribution de contenu, court CDN, peut aider ici. Le CDN garantit que votre site Web est mis en cache dans un réseau de serveur mondial et qu'il y a donc toujours un petit nombre de nœuds entre l'ordinateur de l'utilisateur et le serveur suivant du CDN. Ce service est associé à des coûts élevés, qui ne paient pas nécessairement pour les opérateurs d’un site Web qui s’adresse principalement aux pays germanophones.

Pour utiliser un CDN, vous devez vous enregistrer auprès d'un fournisseur. Bien qu'il existe des CDN gratuits sur le Web, vous devez toutefois vérifier exactement quelles conditions l'offre est gratuite. Les fournisseurs payants facturent généralement par volume de données, qui est utilisé mensuellement sur le réseau.

Utilisez HTTPS

Pendant longtemps, un certificat SSL ralentirait la vitesse de chargement du site Web. Cela s'explique par le fait que la négociation SSL crée un autre obstacle lors de l'établissement d'une connexion avec le serveur Web. Le certificat SSL est vérifié et la connexion cryptée est établie.

En attendant, la situation a changé. De nombreuses mesures d'accélération de la page et de sécurité pour le site Web (par exemple, HTTP / 2, etc.) ne sont possibles que via un certificat SSL. De plus, les certificats SSL pour la sécurité, l'expérience utilisateur et le facteur de classement SEO sont devenus la norme. Donc, si vous n'utilisez pas de certificat SSL, vous devez absolument rattraper votre retard. L'émetteur de certificat Let's Encrypt vous offre cela même gratuitement.

Optimiser le serveur Web pour PageSpeed

Lorsqu'elle est connectée au serveur Web, cette demande traite et fournit les fichiers demandés. Il appelle également des scripts côté serveur qui, par exemple, lisent le contenu des bases de données et le fournissent en sortie.

Reconnaître les goulots d'étranglement dans l'infrastructure

Si une page Web se charge lentement, c'est peut-être parce que le serveur Web et son infrastructure sous-jacente sont surchargés. Cela peut avoir plusieurs causes, par exemple en raison d'une erreur de l'hôte ou du fait que le serveur Web doit répondre à trop de demandes à la fois.

Il est important de reconnaître ces goulots d'étranglement afin de réagir rapidement. De nombreuses solutions d'hébergement fournissent des mesures qui surveillent l'utilisation du serveur. Parmi les indicateurs présentés ci-dessus, le "Time to First Byte", qui peut être mesuré à l'aide de l'outil de réussite de site Web de SEO Expertise, peut également être utile. Si cela augmente de manière significative, il se peut que le serveur Web pose un problème.

Utiliser la mise en cache côté serveur

Le contenu fréquemment demandé, par exemple les requêtes de base de données, ne doit pas nécessairement être exécuté à répétition pour pouvoir être mis en cache sur le serveur. Cela est particulièrement important pour les utilisateurs qui souhaitent lire plusieurs articles ou afficher des produits, c'est-à-dire accéder à plusieurs pages de leur session. Les temps de chargement après le premier appel de page peuvent être réduits.

Les paramètres du logiciel du serveur Web – généralement Apache HTTP Server et Nginx – vous permettent d'activer et de configurer la mise en cache côté serveur. Si vous ne possédez pas les connaissances nécessaires, vous pouvez demander à votre fournisseur d'hébergement ou à la mise en cache et à d'autres mesures PageSpeed ​​via un service cloud automatisé (par exemple).

Utiliser la mise en cache du navigateur

Avec la mise en cache du navigateur, les éléments de votre site Web ne sont pas mis en cache par le serveur Web, comme lors de la mise en cache du serveur, mais par un navigateur Web. Ainsi, récupérer une nouvelle URL de votre site Web ne nécessite pas de recharger tous les éléments. Cela augmente la vitesse de charge.

La mise en cache du navigateur peut être activée avec de nombreux CMS via des plugins ou des extensions. En utilisant ce que l'on appelle des bus de cache, il est possible d'empêcher que les anciennes versions du site Web continuent de s'exécuter lorsque le contenu est mis à jour.

L'activation manuelle de la mise en cache du navigateur s'effectue via une adaptation de la configuration du serveur Web (voir ci-dessus). Pour cela, vous pouvez activer l'un des deux modules du serveur Apache: mod_headers et mod_expires.

Si vous utilisez mod_headers, les éléments suivants doivent être ajoutés à .htaccess (source GitHub):

Contrôle du cache de l'ensemble d'en-têtes "max-age = 2592000, public"

Les parenthèses font référence aux formats de fichier à mettre en cache. Dans le même temps, la durée du cache est spécifiée comme "âge". L'unité est en secondes. Dans cet exemple, cela équivaut à 30 jours de conservation du cache par le navigateur.

Si vous souhaitez utiliser mod_expires pour la mise en cache du navigateur, la configuration sera étendue aux lignes suivantes (source GitHub):

Expires Actif sur
ExpiresByType image / jpg "accès plus 1 an"
ExpiresByType image / jpeg "accès plus 1 an"
ExpiresByType image / gif "accès plus 1 an"
ExpiresByType image / png "accès plus 1 an"
ExpiresByType text / css "accès plus 1 mois"
ExpiresByType text / html "accès plus 1 mois"
ExpiresByType application / pdf "accès plus 1 mois"
ExpiresByType text / x-javascript "accès plus 1 mois"
Application ExpiresByType / x-shockwave-flash "accès plus 1 mois"
ExpiresByType image / x-icon "accès plus 1 an"
ExpiresDefault "accès plus 1 mois"

Avec cette méthode, un délai d'expiration peut être déterminé séparément pour chaque type de fichier.

Utiliser la compression GZip

Comme déjà décrit, les fichiers peuvent ensuite être traités et envoyés aussi rapidement que possible lorsqu'ils sont aussi petits que possible. Ceci s'applique également au code censé représenter le site Web dans le navigateur de l'utilisateur. Comme un fichier zip, ce code peut être compressé pour le rendre plus petit. Les données compressées sont ensuite décompressées dans le navigateur.

Pendant longtemps, cette méthode a été jugée sceptique sous l’optimisation du temps de chargement, car la compression des fichiers nécessite une puissance de calcul du serveur Web. Chaque puissance de calcul du serveur Web coûte à son tour du temps de chargement. Les avantages l'emportent de loin sur l'effort, vous devriez donc vous en remettre à cela.

Comment compresser des fichiers avec GZip?

En utilisant l'exemple du logiciel de serveur Web Apache le plus utilisé, nous vous montrons comment activer la compression GZip. Les modules mod_deflate et mod_gzip sont utilisés.

1. Le module mod_deflate est généralement pré-installé. Avec la commande suivante, vous pouvez vérifier si elle existe déjà:

sudo apachectl -t -D DUMP_MODULES | grep dégonfler

Si vous obtenez le résultat "deflate_module (shared)", alors mod_deflate est déjà installé. Sinon, contactez votre hébergeur.

2. Ouvrez maintenant "httpd.conf", le fichier de configuration Apache. Ceux-ci se trouvent généralement dans le dossier "/ etc / httpd / conf /". Là vous ajoutez la ligne suivante:

AddOutputFilterByType DEFLATE texte / texte texte / texte html texte / texte brut / texte xml / application css / x-javascript
application / javascript

Cela indique que le texte ainsi que le code HTML, CSS et JavaScript sont compressés avec GZip. Enregistrez le fichier et redémarrez le serveur Web Apache. A partir de maintenant, les données seront compressées par Apache.

Activer HTTP / 2

Par défaut, tous les fichiers de la page Web (tels que les images et les scripts) sont chargés à l'aide du protocole HTTP / 1.1. Ils sont téléchargés les uns après les autres via leur propre connexion. Vous pouvez imaginer que si vous vouliez commander plusieurs pizzas et que le livreur livrait chaque pizza individuellement.

Ceci est bien sûr irréalisable et ralentit le processus de chargement. Avec un certificat SSL, le serveur Web peut être basculé sur le protocole HTTP / 2. HTTP / 2 télécharge tous les fichiers sur une seule connexion. De plus, ils sont priorisés. En attendant, tous les principaux navigateurs supportent le protocole, vous pouvez donc travailler sans hésitation.

Compresser les images

La plus grande partie du volume de téléchargement d’une page Web est composée de photos. Cela s’applique d’autant plus aux boutiques en ligne proposant de nombreux produits et sites Web de portefeuilles, notamment de photographes. Donc, si vous parvenez à réduire considérablement la taille des fichiers de vos images, vous pouvez augmenter considérablement la vitesse de la page. Sur SEO Expertise, nous avons déjà écrit un article complet sur la compression d’images. Voici un résumé.

Optimiser toutes les images

Les images sont importantes pour rendre un site Web vivant et attrayant pour vos utilisateurs. Mais même les images supportent le risque que la taille du fichier de votre site Web augmente énormément, ce qui retarde le temps de chargement. Par conséquent, vous devez en principe utiliser uniquement des images optimisées pour une utilisation Web. De manière générale, les photos et les graphiques de haute qualité doivent être considérés comme des fichiers JPEG et des graphiques plus petits et des graphiques avec peu de couleurs ou de transparences par rapport au fichier PNG.

Autres étapes:

• Compressez vos images avant de les utiliser sur le site Web avec un éditeur d'images tel que Gimp ou Adobe Photoshop. Les deux programmes offrent aux débutants une fonctionnalité "Enregistrer sur le Web". Nous optimisons donc automatiquement la taille du fichier. Avec des outils tels que PNGGauntlet, il est possible de réduire davantage la taille des fichiers en supprimant des informations supplémentaires.
• Indiquez la taille de l'image correspondante dans le code source: Si un navigateur doit calculer lui-même les dimensions d'un graphique, le temps de chargement peut être coûteux. La taille spécifiée doit correspondre à la taille d'origine de l'image stockée sur le serveur. Vous pouvez également définir la sortie de la taille de l'image via CSS.
• Supprimer les balises méta et les données EXIF: si vous utilisez des images de votre appareil photo ou de votre smartphone, par exemple, elles contiennent de nombreuses informations supplémentaires telles que l'emplacement, la caméra utilisée et d'autres données. Avec un outil comme tinypng, vous pouvez les supprimer et gagner de la place.

Utiliser WebP

Google a créé un nouveau format d'image avec WebP, capable de compresser les images sans perte (similaire à PNG) ou avec perte (similaire à JPEG). Il est encore plus efficace que les anciens formats et pourrait donc prévaloir à l'avenir. Tous les navigateurs ne prennent pas en charge WebP. Par conséquent, il est judicieux de déposer des alternatives pour les fichiers WebP dans le code source et d'installer une aiguille. Cela fonctionne comme dans l'exemple suivant:





Différencier bureau et mobile

À l'avenir, plus de la moitié des utilisateurs accéderont à des sites Web via un appareil mobile au lieu d'un ordinateur de bureau. Les exigences vis-à-vis des images sont très différentes sur les deux supports de sortie. Sur le bureau, la connexion Internet est généralement bonne et sur les grands moniteurs HD, l'utilisateur souhaite obtenir des images haute résolution de la meilleure qualité qui soit.

En revanche, sur les appareils mobiles, les sites Web sont souvent consultés sur la route et n’ont donc pas accès à la bande passante la plus large. En raison du petit écran, les exigences en matière de qualité sont également réduites. De plus, en raison du format de l'écran, les images sont affichées dans une résolution différente de celle du bureau. Il est donc logique de faire la distinction entre le support de sortie et de créer deux variantes d’une image.

Comme dans l'exemple précédent pour WebP, vous pouvez également définir ce cours dans le code du site Web. Avec CSS, par exemple, la résolution de l'écran peut être interrogée et ainsi la présentation adaptée au support de sortie.

Mettre en place le chargement paresseux

Le problème est connu des propriétaires de magasins et des photographes en particulier: dans les aperçus de produits et les galeries de photos, de nombreuses images sont affichées en même temps, ce qui force le temps de chargement du site Web à genoux. Pour les boutiques en ligne, cela est particulièrement gênant car il s'agit souvent de la page d'accueil principale ou de la page d'accueil des catégories de produits.

Cependant, bon nombre des images chargées de cette manière ne sont visibles que par l'utilisateur lors du défilement vers le bas de la page. Il n'est donc pas nécessaire que ceux-ci soient déjà chargés lorsque l'utilisateur considère la pièce "au-dessus du pli". Avec une méthode appelée "chargement paresseux", vous pouvez vous assurer que les images situées sous le pli ne sont pas chargées tant qu'elles n'apparaissent pas dans la fenêtre.

Mesures OnPage pour un site Web rapide

Nettoyer le code source

Lorsqu'une page Web est récupérée, un client ou un navigateur suit le code source du document HTML ligne par ligne. Tous les blancs ou les sauts de ligne sont lus. Un espace superflu n'affectera certainement pas les performances de votre site web. Étant donné qu'une page Web peut comporter plusieurs centaines de lignes de code source, en fonction de sa taille, les blancs ou commentaires superflus ont un effet encore plus important sur le temps de chargement.

Donc, vous commencez la "Minification" du code source:

• Éliminer tous les commentaires inutiles dans le code source
• Supprimer tous les espaces inutiles
• Supprimez les mises en forme inutiles, telles que celles qui ne contiennent pas de contenu dans le code source, telles que ""

Pour éviter tout code source superflu, vous devez toujours insérer des textes déjà formatés au format HTML dans le site Web, utiliser l'éditeur du CMS ou insérer les textes sous forme de texte brut, puis les formater. Si vous intégrez des textes directement à partir de Word ou d'autres programmes bureautiques directement dans le système de gestion de contenu, ils se hérissent de code source superflu.

En outre, il existe des programmes appelés à partir de la ligne de commande pour supprimer tous les espaces et les commentaires du code source. Si vous souhaitez utiliser ces programmes, vous devez absolument en conserver une copie pour modification, car le fichier réduit est à peine lisible.

Diminuer les scripts externes

Qu'il s'agisse de boutons de partage ou de codes de suivi, les scripts externes peuvent être intégrés à votre site Web de différentes manières et à différentes fins. Cependant, cela vous rendra dépendant de la disponibilité de ces scripts provenant d'une autre source. Si le serveur Web à partir duquel le script est extrait est particulièrement lent, cela ralentit également le temps de chargement de votre page Web. Vérifiez donc si vous avez vraiment besoin de ces scripts.

Plus de conseils:

• Utilisez uniquement des codes de suivi asynchrones. Ils ne se chargent qu'après le rendu de la page et n'interfèrent pas avec la mise en page.
• Par exemple, utilisez des outils tels que Google Tag Manager. Dans ce cas, un seul extrait de code pour de nombreuses variantes de suivi différentes doit être inclus dans le code source de la page. Cela réduira encore moins le temps de chargement.
• Si possible, stockez les scripts sur votre serveur Web et ne les intégrez pas de l'extérieur.
• Diminuer le nombre d'iframes.

Externaliser JavaScript et CSS

JavaScript est un langage de script avec lequel des fonctions peuvent être exécutées dans le navigateur et donc sur l'ordinateur client. Vous pouvez utiliser des feuilles de style CSS (Cascading Style Sheets) pour définir les formats et les représentations du site Web. Ces éléments nécessitent beaucoup de code source, qui doit être relu à chaque requête de page. Ça prend du temps.

Pour réduire le code source, vous pouvez externaliser des fichiers CSS et JavaScript. Ils sont ensuite fusionnés en un seul document. Mais alors, un seul appel est nécessaire. Si le navigateur charge le fichier dans le cache, le temps de chargement peut être réduit à nouveau.

Vous pouvez donc externaliser JavaScript:

Obtenez le code source de votre site Web affiché avec un éditeur. Ensuite, coupez tous les fichiers JS et créez un nouveau fichier texte dans lequel vous insérez tous les extraits de code. Enregistrez le fichier sous main.js et placez-le sur votre serveur dans le dossier où se trouvent tous les autres fichiers HTML.

Dans le code HTML du site Web, vous supprimez les commandes suivantes:



et



Vous allez remplacer les commandes supprimées par cette commande:



Réduire les fichiers CSS et JavaScript

Comme le code HTML Vous pouvez réduire la taille de CSS et de JavaScript, par exemple en supprimant les espaces inutiles. Celles-ci sont également appelées "espaces blancs". De cette manière, le code source peut être réduit à une seule ligne, par exemple.

Extrait de code avec des espaces et des sauts de ligne existants:



Code CSS sans sauts de ligne:



Code CSS sans sauts de ligne:



Encore une fois, il convient de noter que la lisibilité en supprimant les blancs et les commentaires diminue fortement. Idéalement, vous devez utiliser deux versions: une version avec tous les espaces et commentaires que vous pouvez modifier et une version pour l'affichage sur le site Web. Pour que vous n'ayez pas à dupliquer à chaque changement, vous pouvez également utiliser des programmes pour "Minification", par exemple:

Chargement de JavaScript et CSS à la fin

Votre site Web ne sera pas entièrement affiché tant que tous les fichiers JavaScript et CSS n'auront pas été chargés. Pour accélérer le processus de chargement, vous ne pouvez insérer JavaScript et CSS qu'à la fin du code HTML. Même si le serveur est lent, la mise en page ne sera pas affectée. La position idéale pour les fichiers CSS est donc dans Section du site. JavaScript doit être installé dans le pied de page du site.

Une intégration possible des fichiers peut ressembler à ceci:



Utiliser CSS3 pour les arrière-plans

Chaque image utilisée sur votre site Web nécessite plusieurs lignes de code. Ce code est lu ligne par ligne lors de la récupération de page. Si vous placez maintenant des boutons, des icônes ou des arrière-plans sous forme graphique, le téléchargement du navigateur par votre navigateur prendra beaucoup de temps. La solution consiste à créer tous les éléments graphiques, à l'exception des photos, à l'aide de CSS3. De cette façon, vous réduisez le code source. Dans le même temps, les fichiers peuvent être affichés sur tous les appareils finaux avec la même qualité.

Utiliser le prélecture et le pré-rendu

Si vous utilisez la technique de pré-extraction, votre navigateur mettra en cache certains éléments de la page Web avant même que la page ne soit complètement chargée. Ainsi, les images, les graphiques ou JavaScript et CSS peuvent être chargés sans entraver le rendu du site. Pour pré-télécharger un fichier, vous devez ajuster le code source. Dans ce cas, l'attribut rel = "prefetch" est défini avant l'élément souhaité.

Un exemple:

Ici, l'exemple est déjà chargé avant l'appel d'une autre page. Le temps de chargement pour la nouvelle vue de page est raccourci. Si vous utilisez la méthode de présélection, un site Web complet sera préalablement téléchargé depuis le navigateur et mis en cache dans le cache. Cela inclut tous les fichiers nécessaires au rendu complet.
La page Web pré-rendue peut être chargée lors d’un appel presque sans délai. Le temps de chargement est réduit à moins de 50 millisecondes. Pour implémenter le pré-rendu, vous devez insérer la ligne suivante dans le code source du site Web en question:

On trouvera encore plus de détails et d’idées sur les prérendering et le prélecture dans cet article.

Réduire 301 redirections

Bien que les redirections 301 puissent être utiles pour éviter les doublons de contenu ou pour rediriger les URL inutiles vers de nouvelles URL après un relancement, chaque redirection augmente la vitesse de chargement. Bien que le délai par renvoi ne soit pas très long, mais perceptible. Parce que chaque fois qu'un navigateur rencontre une redirection, il doit appeler une nouvelle URL. Il doit alors attendre qu'une requête http ait été renvoyée.

Si plusieurs redirections 301 sont consécutives, le temps de chargement peut considérablement augmenter. En outre, Googlebot ne suit qu'un maximum de trois redirections, de sorte qu'une chaîne de redirections est également désavantageuse pour l'analyse.

Pour éviter de nombreuses redirections, vous devez documenter la structure de l'URL ou en créer de nouvelles. Il en va de même pour les redirections 301 configurées. Si vous trouvez plusieurs redirections dans l'analyse de votre site Web, vous devez diriger la première redirection directement vers la cible du lien, sans détour via une ou plusieurs redirections.

Éviter les demandes de bain

Si un client accède à votre site comme un navigateur Web, des demandes sont présentées à chaque ressource pour afficher le fichier. Cependant, la recherche de ces ressources sous forme d'images ou de fichiers JavaScript n'entraîne pas une chaîne de réponses qui gaspille du temps de chargement. Les mauvaises demandes peuvent être facilement évitées en corrigeant les mauvais fichiers et en spécifiant le chemin correct ou le transfert dans un nouveau fichier.

Utiliser AMP

Google offre aux webmasters dotés de pages mobiles accélérées la possibilité de charger des pages Web mobiles presque sans délai. Pour ce faire, les pages doivent répondre à certaines exigences pour pouvoir être affichées sur les appareils mobiles.

De nombreux CMS tels que WordPress permettent l'utilisation d'AMP avec l'aide de plugins. Une description détaillée de la technique et de sa mise en œuvre est disponible ici dans le magazine SEO Expertise. A ce jour, AMP ne peut pas encore être utilisé pour les magasins en ligne. Cependant, il est en train d'être examiné par les développeurs.

Optimisation automatisée PageSpeed

Dans ce guide, vous avez appris de nombreuses choses sur l'amélioration de la vitesse de page. Cependant, la plupart de ces mesures nécessitent des connaissances techniques et du temps pour les mettre en œuvre. Si l'un de ces deux problèmes vous pose problème, vous pouvez également externaliser l'optimisation PageSpeed ​​vers un service automatisé.

Par exemple, le service cloud pour l'optimisation automatisée de PageSpeed ​​wao.io fonctionne comme suit: comme un réseau de diffusion de contenu, wao.io enregistre la page Web et exécute les mesures que vous pouvez définir via un menu. Outre la compression d'image intelligente et l'exploration de code, cela inclut également des mesures avancées telles que le chargement différé.



Figure 3: Chargement paresseux et autres optimisations dans wao.io

Wao.io protège également contre les attaques de sécurité et propose des statistiques et des numéros d'utilisateurs pour la surveillance de sites Web.

Liste d'identification:
• wao.io
• Akamai
• kraken.io

conclusion

Une page Web comporte de nombreuses vis de réglage que vous pouvez faire pivoter pour améliorer le temps de chargement de la page. Dans cet article, vous devez connaître quelques possibilités. Certaines méthodes sont également très faciles à mettre en œuvre par les nouveaux arrivants et les débutants en référencement. Ainsi, tout le monde peut créer son site plus rapidement et rendre les utilisateurs et les moteurs de recherche plus heureux.

En ce sens: Bonne optimisation!

La théorie est bonne – la pratique est meilleure! Maintenant, Page Speed ​​analyse et optimise avec SEO Expertise FREE!

Allons-y!

Pourquoi Page Speed ​​est si important pour le succès de votre site Web et quelles mesures vous pouvez prendre pour l’optimiser, vous en apprendrez plus en détail dans notre article détaillé sur l’optimisation de la vitesse de la page. Voici comment faire une vérification sur les vitesses de votre site Web – et comment mesurer le succès de vos actions.

Ce qui est mesuré lors d'un test de vitesse de site Web

Plus qu'une lecture pour le test Page Speed

Lorsque nous parlons de vitesse de page, qui correspond au temps de chargement d’une page Web, nous ne voulons pas dire une valeur unique, mais une série de lectures consécutives. Nous avons déjà décrit les principales stations de mesure de vitesse de page dans SEO Expertise Magazine.

Qu'est ce qui influence le test de vitesse du site

Ces métriques, qui sont considérées dans un test de vitesse de site, proviennent de la Bande passante et type de connexion dépend du téléchargement du site. En général, on distingue donc le terminal auquel le site Web est appelé:

• Bureau (PC ou Mac): Pour les ordinateurs fixes, qui sont connectés à un réseau, on suppose une connexion Internet rapide.
• Mobile (smartphone ou tablette): Avec les terminaux mobiles, on suppose la connexion à un réseau 3G ou 4G plus lent.

Aussi le latence, la durée de la connexion entre le navigateur et le serveur Web affecte la vitesse de la page. La latence est indépendante de la bande passante et nécessite sa propre optimisation. Important pour la latence sont:

• lieu: Selon la provenance de votre site Web, la durée de la connexion au serveur Web peut varier si elle est basée sur l'emplacement.
• Serveur DNS: Pour se connecter au serveur Web, son adresse IP doit être déterminée par un réseau de serveurs DNS. La durée de cette découverte est affectée par le nombre et les performances des serveurs DNS.

Il est également crucial de savoir lequel Protocole de transmission de données est utilisé. La différence entre le protocole standard HTTP 1.x, le nouveau HTTP / 2 et le HTTP / 3 testé (QUIC) joue un grand rôle. Cependant, ceci n'est pas considéré avec de nombreux outils de mesure.

Questions importantes avant le test de vitesse du site Web

Avant le test de vitesse du site Web, se pose la question fondamentale ce que vous voulez réaliser avec, Les outils de vitesse de page présentés ci-dessous ont leurs propres domaines d’application et certains conviennent mieux à une question spécifique que d’autres.

Les questions les plus importantes que vous pouvez résoudre avec une vérification de la vitesse du site:

1. Combien de temps votre site Web charge-t-il en moyenne?
2. Combien de temps une seule page de votre site Web est-elle chargée?
3. Comment est comparé le temps de chargement en comparaison?
4. Y at-il une lecture qui est hors ligne?
5. Où est le potentiel d'optimisation?
6. Vos mesures ont-elles été payantes?

Test de vitesse de site Web par Google

Dans le cadre de son leitmotif "Mobile First", Google a conçu ses outils de test de vitesse de page pour s'afficher sur des appareils mobiles. Il s'agit d'un facteur important pour la mesure de la vitesse de charge car une bande passante plus lente – comme décrit ci-dessus – est utilisée.

Le phare permet la mesure de la vitesse de la page dans le navigateur

L'extension de navigateur "Lighthouse" pour Chrome devrait non seulement rendre les sites Web plus rapides, mais également s'adapter à d'autres aspects tels que le référencement et l'accessibilité. L'outil est préinstallé dans Chrome, mais se cache entre les outils de développement.

Pour commencer, ceux-ci doivent d'abord par CTRL + SHIFT + I sur le PC, ou CTRL + OPTION + I être ouvert sur le Mac. Parmi les autres outils de l'onglet ci-dessus, il y a l'option "Audits", qui mène directement à Lighthouse.

Figure 1: Phare de Google

Les paramètres Device et Throttling vous permettent de configurer les audits de phares. Une distinction est faite entre la sortie pour le bureau et le mobile, ainsi que la bande passante avec laquelle tester. La mesure de la vitesse de charge est affichée dans l'audit "Performances".

En conséquence, Lighthouse affiche un score de vitesse et diverses lectures, qui sont décrites plus en détail ci-dessous dans les données de laboratoire de PageSpeed ​​Insights. Ainsi, le test de vitesse du site Web vous donne un aperçu de la vitesse de chargement de votre site Web avec différents supports de sortie et largeurs de bande.

Page Speed ​​Insights pour un test de vitesse complet sur un site Web

Page Speed ​​Insights, basé sur des éléments de la technique Lighthouse, fournit de nombreuses données pour la mesure spontanée de la vitesse de page ainsi que pour l'analyse à long terme. Après avoir entré l'URL, une fenêtre de résultat contenant quatre parties s'affiche.

Figure 2: Exemple de présentation d'analyse "PageSpeed ​​Insights"

1. Score de vitesse: Avec un nombre compris entre 0 et 100, PageSpeed ​​Insights résume les performances de l'URL spécifiée lors du test. Cela n’est pas bon pour la grande majorité des sites Web, en particulier pour l’évaluation mobile. Donc pas besoin de paniquer!
2. Champ de données: Voici les données mensuelles collectées sur Chrome, que Google utilise également pour "Test de mon site". Ceci est utile pour la comparaison avec les données de laboratoire suivantes, car il reflète l'expérience utilisateur sur un mois, pas seulement une mesure réelle.
3. Labdaten: Ce sont les dernières données du test de vitesse Web de Google. Ils sont donc également appropriés pour la comparaison après une modification du site Web. PageSpeed ​​Insights identifie cinq mesures différentes de la vitesse de page, dont Première peinture de contenu et Première peinture de signification. Ces valeurs mesurées peuvent être expliquées plus en détail en cliquant à droite au-dessus des données de laboratoire.
4. Recommandations, diagnostics et examens réussis: En dessous, l’outil donne quelques conseils sur la manière d’améliorer la vitesse de page pour un site Web donné. Il indique également quelles optimisations ont déjà été effectuées.

Google Analytics

Si vous analysez votre site Web avec Google Analytics, vous trouverez les numéros de données utiles dans la section Comportements. Cliquez ensuite sur "Vitesse du site". Un avantage: si le suivi du commerce électronique est également installé, vous pouvez directement évaluer l’incidence de la vitesse de chargement sur les conversions.

Console de recherche Google

Dans la console de recherche Google, vous pouvez trouver les temps de chargement dans la zone d'analyse des statistiques sous l'élément de menu "Analyse". Il indique le nombre de kilo-octets téléchargés par jour et la durée pendant laquelle Googlebot doit télécharger l'une de vos pages en millisecondes. Le cours est particulièrement intéressant. Ainsi, par exemple, les problèmes de chargement peuvent être plus facilement détectés.

Autres outils pour les tests de vitesse de sites Web

En plus des solutions de Google, il existe bien sûr d’autres outils que vous pouvez utiliser pour tester le temps de chargement de votre site Web. Celles-ci sont principalement techniques et offrent aux experts avancés et professionnels d’importants indices pour optimiser leurs sites Web.

WebPageTest.org – le pro sur le site Tests de vitesse

WebPageTest est un outil open source que i.a. hébergé à l'adresse WebPageTest.org. Cet outil peut être utilisé pour effectuer des mesures détaillées de pages Web particulièrement bien adaptées à l’analyse de problèmes techniques.

Au lieu de simplement spécifier une URL, WebPageTest.org propose de définir la mesure en fonction de paramètres. Par exemple, vous pouvez spécifier l'emplacement du serveur de test et la bande passante que vous souhaitez mesurer. WebPageTest.org trace ainsi une image individuelle de la vitesse de chargement.

Figure 3: Exemple de résultat de test "WebPageTest.org"

Sur la page de résultats, différentes lectures sont affichées, par exemple: également le Time to First Byte, qui n'est pas mesuré par les outils de Google. Ceci est important pour détecter les problèmes côté serveur ou les problèmes de configuration DNS.

Which Loads Faster compare deux sites Web

Si vous souhaitez comparer les temps de chargement de deux sites Web, Which Loads Faster est le bon outil. Il vous suffit d'entrer les URL des deux pages que vous souhaitez comparer et de lancer l'analyse. De plus, Which Loads Faster ne fournit aucun autre diagnostic ni suggestion d'optimisation.

Donc, pour une comparaison rapide, l'outil est parfait, mais pour une analyse détaillée, vous devez utiliser un autre test de vitesse sur le site Web.

Test de vitesse du site Web Pingdom.com – une alternative de Google

Le fournisseur de surveillance Pingdom.com est une alternative à PageSpeed ​​Insights. Ici, les facteurs côté client dans la mesure de vitesse de page sont pris en compte et les possibilités d'optimisation sont présentées. Cet outil nécessite une inscription afin que vous puissiez l'utiliser. Il vous indique les temps de chargement de vos pages Web sous forme de diagrammes et de statistiques, ce qui facilite l'évaluation. Par exemple, vous pouvez voir très rapidement quels éléments entravent le chargement d’une page.

Figure 4: "Pingdom.com" site web résultat du test de vitesse de wao.io

Pingdom assigne également un score sur lequel on peut s'orienter rapidement. Cependant, la mesure qui reflète le "Temps de charge" affiché n'est pas définie avec précision. Dans les aperçus ci-dessous, Pingdom indique la rapidité avec laquelle des éléments de page individuels tels que JavaScript, CSS et les polices ont été chargés.

Test de vitesse de site Web avec SEO Expertise

Le rapport sur les temps de chargement dans le module Website Success de SEO Expertise vous donne non seulement un aperçu de la vitesse de traitement des pages de votre site Web, mais vous fournit également des informations sur le premier octet, ainsi que les temps de connexion au serveur pour toutes les URL.

Figure 5: Rapport de performance par SEO Expertise

En outre, il est possible de filtrer les sous-pages pour lesquelles le contrôle de vitesse des pages a montré qu'elles ont un temps de chargement élevé (dans le graphique, sous "très lent"). Ainsi, vous obtenez des informations détaillées sur la vitesse de votre page et trouvez de bonnes approches d'optimisation. Dans cette section de l'outil, vous obtiendrez non seulement les résultats du test de vitesse du site Web: en plus du temps de chargement, les performances de votre site Web incluent également des facteurs tels que la compression, la taille du fichier et les cookies. Vous trouverez également pour cela des suggestions d'optimisation.

Le rapport se trouve dans la suite SEO Expertise dans le module Site Web Succès sous Performance> Temps de chargement, De plus, en ajoutant les données Google Analytics, vous pouvez analyser le contenu présentant des taux de rebond élevés et / ou des temps de rétention peu élevés et les optimiser en conséquence.

Les clients SEO Expertise Business peuvent désormais utiliser le nouveau rapport de vitesse de page.

Figure 6: Le nouveau rapport de vitesse de page de SEO Expertise

En utilisant un système de feux de circulation, vous pouvez facilement voir quelles pages vous devez accorder une attention particulière à l'optimisation de la vitesse de la page. Le gros avantage: vous ne devez pas tester chaque URL individuellement, car vous ne me voyez que analyser le comportement de chaque URL. Vous trouverez le rapport ci-dessous Performance> Vitesse de page, Vous trouverez plus d'informations sur le nouveau rapport dans notre article Product Insights.

conclusion

En termes de test et d’optimisation de la vitesse des sites Web, il existe de nombreux outils utiles. Laquelle de celles-ci convient le mieux à vos propres besoins dépend toujours de l'objectif que vous souhaitez atteindre et du niveau de détail des données d'analyse.

Ainsi, l'outil "Quelles charges accélèrent?" Vous donne juste une idée de la rapidité avec laquelle votre page se charge par rapport à la concurrence, tandis qu'avec SEO Expertise et PageSpeed ​​Insights, vous obtenez des informations détaillées sur les temps de chargement de contenu et d'URL individuels et pouvez déjà identifier le potentiel d'optimisation.

Même avec des outils gratuits, on peut obtenir de bons résultats, mais qui en a besoin plus exactement, qui sont toutes des options ouvertes avec les différents comptes pro. En tout état de cause, les exploitants de sites Web devraient en principe traiter de la question des performances du site Web afin d'améliorer l'expérience utilisateur sur une page et de lutter contre les taux de rebond élevés.

Processus de sélection et hiérarchisation

Sur la base des informations de la demande de renseignements, vous pouvez déjà sélectionner de plus près les fournisseurs. Afin de pouvoir hiérarchiser les points respectifs de la RFI, il existe différentes techniques. Semblable à la hiérarchisation des lots de travaux avec les chefs de produit, il est conseillé d’appliquer une méthode de classement au lieu de s’appuyer uniquement sur son instinct. Cela peut être fait par exemple Appliquez "Roches, galets et sable", "Thèmes" en conjonction avec les feuilles de route ou la hiérarchisation MoSCoW. Lorsque vous utilisez MoSCoW, les exigences respectives sont hiérarchisées dans une colonne séparée avec M, S, C ou W. En conséquence, le fournisseur sait quels éléments sont pertinents pour la sélection et lesquels sont moins importants – plus d’informations sur cet article.

Figure 2: Priorité MoSCoW dans RFI

Étape 5: séances de démonstration des trois outils

L'étape suivante consiste à visualiser le système correspondant "en direct" dans une session de démonstration afin de réconcilier les fonctionnalités avec la demande d'informations. À cette fin, il est conseillé d’avoir préparé un ordre du jour comprenant des cas d’utilisation / scénarios et des questions spécifiques. Si le fournisseur de logiciel concerné reçoit l’agenda avec les cas d’utilisation à l’avance (idéalement 2 à 3 semaines), il peut se préparer à la session de démonstration.

Idéalement, des questions qui, par exemple, résultent de la demande d’information sont clarifiés avant une session de démonstration avec le fabricant, vous pouvez donc vous concentrer sur les cas d’utilisation de la session.

Après une session de démonstration, d'autres questions peuvent être collectées, des critiques ou des demandes supplémentaires discutées avec le fournisseur respectif ou intégrées directement dans une demande de proposition.

Étape 6: Création d’un appel d’offres adéquat incluant le "dimensionnement de projet"

Dans un appel d'offres, vous allez:

• Conditions requises pour les interfaces spécifiées
• Personne de contact responsable définie
• Les sous-traitants éventuellement impliqués et leurs domaines de tâches nommés
• Obtention d'informations spécifiques sur les licences ou les listes de prix / performances obligatoires des fournisseurs sélectionnés
• Si nécessaire, les procédures concrètes d’une procédure de passation de marché ou de critères d’évaluation et d’attribution ainsi que la gestion des droits dans le système sont déterminées

Une demande de propositions comprend également un concept détaillé, les jalons nécessaires à suivre et la date limite. Il s'agit également d'un appel d'offres chronométré.

Étape 7: Décision et mise en œuvre

Si toutes les informations requises sont disponibles et que des négociations de licence de fournisseur ont déjà été menées, il est important de choisir l'un des fournisseurs. Cette décision est considérablement facilitée et rendue compréhensible depuis

• suivi d'un processus structuré,
• créé une priorisation et
• des informations importantes sur les processus internes, l’organisation et la technologie ont été prises en compte.

En définissant les priorités, vous pouvez déterminer rapidement où un fournisseur a ses forces et ses faiblesses, comment y remédier en cas de besoin et comment gérer les coûts de mise en œuvre. Le logiciel doit – en particulier avec M (ust haves) – correspondre aux exigences de la société. Et à un moment donné, il faut et peut être honnête: à la fin, un peu décide de l’intestin.

Publié le 29.08.2019 par Jürgen Eppinger.